Vue+elementUI+springboot+mybatis demo教程（三）

• axios使用
• 跨域处理
• mock.js的使用

 

上篇文章结尾介绍了今天这篇文章主要内容包括axios使用、跨域处理，以及mock.js的使用

axios使用

Axios是基于 Promise 的 HTTP 请求客户端，可同时在浏览器和 node.js 中使用，有人可能会问axios 和ajax有什么关联呢？实际上axios是通过promise实现对ajax技术的一种封装，就像jQuery实现ajax封装一样。
简单用法如下
Get 请求

getUserList(){
     var _this=this;
     this.$http.get('/TbItem/list'
       ,{
          params:{
            pageNo:_this.currentPage,
            pageSize:_this.pageSize
          }
        }
     ).then(function(responese){
       _this.tableData=responese.data.itemList;
       window.console.log(_this.tableData)
       _this.total=responese.data.total;
     })
  }

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15

Post请求

  //删除
  handleDelete(index, row) {
    var _this = this;
    _this.$confirm('是否要删除此商品', '提示',{
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(()=>{
        //删除
         _this.$http.post("/TbItem/delete",{
              id:row.id,
         }).then((responese)=>{
           window.console.log(responese)
           if(responese.data.success=="success") {
             //弹出消息提示框并跳转到列表页
             _this.$message({
               title: '',
               message: '删除成功',
               type: 'success',
               center: true

             });
             this.getUserList();
           }

         });
    })

  }

• 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

跨域处理

本地开发环境：
通过npm run dev 的方式来启动项目，在项目的Config 目录下index.js 中有个procyTable:{}参数，配置该参数可达到跨域目的
配置方式如下图所示

生产环境中 npm run build
通过 npm run build 打包 之后对应项目下多出了dist 目录，将该文件下的内容拷贝到Tomcat目录下webapp 的某个目录下访问，我配置的是demo目录，所启动Tomcat服务器后

通过上面可以看到css 等文件访问不到了，修改步骤如下：在build 文件夹下面修改utils.js,添加红框框住的一句

在config目录下修改index.js ，修改成红框中的内容

上述操作主要为了解决css,js 之类文件的路径问题，修改之后重新打包，部署已经可以正常访问了，现在的问题就是跨域的问题了，跨域问题需要通过nginx 来设置访问，此时不用通过Tomcat来访问项目了。请先安装nginx ,再进行如下配置

配置后重启nginx

已经可以跨域获取数据了

mock.js的使用

在后端接口还未完成时，前端开发人员工作也不能停下来，这时可以通过mock.js来满足需求。Mock 用于生成随机数据，拦截Ajax请求， 用于模拟后台接口返回数据，让前端开发人员可以独立于后端进行开发。先安装mock.js

在项目中新建一个js文件

Main.js 中引入已经写好的js文件

在项目中使用

效果如下：随机生成树形控件数据

有关于mock.js的更多用法可以查看官方文档 http://mockjs.com/