VUE前后端分离之数据交互（简单项目作为演示）_vue前后端分离怎么实现交互

---

提示:这里重点演示前端如何访问后端，对于前、后端的建立不作为重点

一、添加后端访问依赖

1. 进入前端vue项目，进入内部或外部终端

2. 输入如下代码并安装

   cnpm install axios --save
   cnpm install qs --save
   1
   2

3. 安装好之后可以在package.json中看到添加的依赖
   

4. 在main.js中引入添加的依赖（main,js中存储组件的公共依赖，在此文件中添加依赖后无需再在各组件文件里单独添加依赖）

   1. 引入依赖
      
   2. 设置别名
      
   3. 在组件文件中通过 this.$axios.xxx 等即可使用依赖

二、建立后端

后端的建立可参考基于 Spring Mvc 一个简单项目的基本流程 ＜用户注册功能＞(校正版)的第一、二步，建立符合自己前端的后端。
处理跨域问题 ：前后端分离开发后，前后端的访问最主要的问题即跨域，即对于http的请求，为了安全，禁止ip地址和不同端口的程序项目访问，准确说仅可以访问但不响应。由于采用SpringBoot，所以通过在控制器中添加注解来解决。

三、配置前端

直接上前端的JS处代码

<script>
    export default{
        name:'Users',
        data() {
            return {
                emp:{
                    ename:'',
                    loSal:'',
                    hiSal:'',
                    deptno:'',
                },
                depts:[],
                emps:[],
                pageNum:1,//当前页
                pageTotle:0 ,//总条数
                pageSize:4   //每页显示几条
            }
        },
        methods:{
            // 定义页面加载方法(例如搜索按钮触发该事件)
            init(){
                // ###打包参数###
                this.emp.pageNum=this.pageNum;//JS中变量可以动态自动添加，可以不实现定义emp.pageNum
                this.emp.pageSize=this.pageSize;
                // 把json对象转为字符串
                var param=this.$qs.stringify(this.emp);// 将emp数据转为字符串，作为参数上传

                // ###参数传递、结果接收###
                this.$axios // 将参数上传到后台的服务器端口8088、访问路径/vue、以及控制器与方法的RequestMapping路由
                    .post("http://localhost:8088/vue/emp/findByParam",param) //参数传递
                    .then(rst => { // 结果接收
                        console.log(rst);//如果获取了结果就在控制台打印
                        // vue前端将返回的后端返回的结果用data封装，而rst是包含了data以及其他参数的总结果集合
                        this.emps = rst.data.list;
                        this.pageTotle = rst.data.total;
                    }).catch(ex => {
                        console.log(ex);//如果没获取结果，就打印错误
                    });
            },
            // 定义Search方法
            search(){
                // 即页面加载方法
                this.init()
            }
        }
    }
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

重点在于参数的目的地是 “http://localhost:8088/vue/emp/findByParam” ，这串链接的来源如下：

http://localhost:8088/vue

/emp/findByParam