前端到后端路径

Posted aaaazzzz

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端到后端路径相关的知识,希望对你有一定的参考价值。

大规律:
页面:事件源-->绑定事件-->处理函数-->数据校验-->发送请求和数据-->处理响应结果展示给用户
后台: 接收请求-->接收数据-->转发业务层(业务处理)-->持久层(CRUD)-->业务层-->表现层-->页面

 

使用ElementUI来构建页面,在页面上引入 js 和 css 文件即可开始使用    

index.css、vue.js、index.js

```html
<!-- 引入ElementUI样式 --> 
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme- chalk/index.css"> <script src="https://unpkg.com/vue/dist/vue.js"></script> 
<!-- 引入ElementUI组件库 --> 
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
```

?    使用Vue:

```
<script src="js/vuejs-2.5.16.js"></script> 
``

        Vue:
            <html>
                <head>
                    <script src="vue.js"></script>
                    <script src="axios.js"></script>
                </head>
                <body>
                    <div id="app">
                        v-model:作用:将Vue中的数据更新到表单项value属性上
                        v-bind:/:
                        v-if:
                        v-for:遍历
                        v-on:/@:<button @click="fun(‘这是使用vue绑定的点击事件‘)">vue的onclick</button>
                    </div>
                    
                    <script>
                        new Vue({
                            el:‘#app‘,
                            datas:{
                                属性名:属性值,...
                            },
                            //定义方法
                            methods:{
                                method:function(){},
                                method2(){
                                    //发送异步请求,axios
                                    axios.get(url?key=value&...)
                                        .then((res)->{})
                                        .catch(()->{})
                                        .finally(()->{});
                                    axios.post(url,data)
                                        .then((res)->{})
                                        .catch(()->{})
                                        .finally(()->{});
                                }
                            },
                            //钩子函数,VUE对象初始化完成后自动执行
                            created(){
                            
                            },
                    
                            mounted(){
                            
                            }
                        });
                    </script>
                </body>
            </html>
            
            
    created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
    mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
    
    其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步,而如果你写入组件中,你会发现在created中无法对chart进行一些初始化配置,一定要等这个html渲染完后才可以进行,那么mounted就是不二之选。
    ————————————————
    ElementUI:复制粘贴修改   table  form  pagination ...
    
    
    
    》后台 
        表现层(SpringMVC)-->Controller
            @Controller+@ResponseBody / @RestController
            接收页面请求
                (类+方法)@RequestMapping/@GetMapping/@PostMapping/@DeleteMapping/@PutMapping
            接收页面参数
                简单数据类型
                    url?id=x&name=y  @RequestParam
                    url/x/y    @PathVariable
                application/json:@RequestBody
                接收集合
            转发业务层
                @Reference
                @Autowired
            响应结果
                @ResponseBody
                
            @RestController
            @RequestMapping("/xxx")
            public class XxxController{
            
                @Reference / @Autowired
                private XxxService xxxService;
                
                @RequestMapping/@GetMapping/@PostMapping/@DeleteMapping/@PutMapping
                public xxx methodName(...){
                    
                }
            }
        业务逻辑
            @Service
            @Transactional
            @Autowired
            
            serverInterface
                public interface XxxService{
                    public xxx methodName(...);
                }
            serviceImpl
            @Server
            @Transactional
            public class XxxServiceImpl implements XxxService{
                public xxx methodName(...){
                    
                }
            }
        持久层
            Mybatis
                Mapper.java
                public interface XxxMapper{
                    public xxx methodName(...);
                }
                Mapper.xml
                    规则:
                        (1)映射文件中的namespace要和接口的类全名保持一致
                        (2)映射文件中的statementId(statment:select update delete select)要和接口的方法名一致
                        (3)映射文件中的parameterType要和接口方法的参数一致
                        (4)映射文件中的resultType/resultMap要和接口方法的返回值一致
                        SQL / resultMap / <sql> <where> <if> <selectKey>
    domain
    数据库表

 

以上是关于前端到后端路径的主要内容,如果未能解决你的问题,请参考以下文章

前端发送数据到后端

vscode打包的dist文件怎么整合到后端代码中

如何将图片从前端上传到后端

如何正确地将 blob 从前端传递到后端?

ant design pro上传图片到后端

前端传入导入文件地址到后端报错