一、添加后端访问依赖

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

输入如下代码并安装

cnpm install axios --save
cnpm install qs --save

安装好之后可以在package.json中看到添加的依赖
在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>