Vue-cli中用mockjs axios实现前后端分离

向右看齐 2021-07-25 16:21 411阅读 0赞

# 一，安装axios和mockjs #

cnpm i axios -S

（注意：-S是--save的简写，也就是说，安装axios也可以用：cnpm i axios --save）

cnpm i mockjs -D

（注意：-D是--save-dev的简写，也就是说，安装mockjs也可以用：cnpm i mockjs --save-dev）

# 二，在main.js中引入axios和mockjs #

import axios from 'axios'
    import './mock/mock.js'
     //全局注册axios
    Vue.prototype.$axios = axios

注意：需要提前在src文件夹下面新建一个“mock”文件夹，再在mock文件夹里面新建一个mock.js文件

![20191002142726737.png][]

mock.js内容如下：（注意：mock.js中需要导入“mockjs”插件，一句代码就行：const Mock =require('mockjs');）

// const Mock =require('mockjs');//获取mockjs插件.这种方式也可以
    import Mock from 'mockjs'
    
    const Random =Mock.Random;
    const produceData=function(opt){
        console.log('opt:',opt); //这里注意：不能用加号代替逗号，即不能写成：console.log('opt:'+opt);
        let articles=[];
        for(let i=0;i<10;i++){
            let newArticleObject={
                name:Random.cname(), //随机生成一个中文名
                email:Random.email(), //随机生成一个电子邮件
                date:Random.date()+' ' +Random.time() //随机生成日期和时间
            }
            articles.push(newArticleObject);
        }
        return{
            data:articles
        }
    }
    Mock.mock('/user',/post|get/i,produceData); //当post或get请求到/user路由时，mock会拦截请求并返回
    // Mock.mock('/user','post',produceData); //这种方式就只能用post请求,注意post要加引号

HelloWorld.vue

<template>
      <div class="hello">
        <h1>{
       { msg }}</h1>
        <ul>
          <li v-for="(item,index) in data" :key="index" >{
       {item.name}},{
       {item.email}},{
       {item.date}}</li>
        </ul>
      </div>
    </template>
    
    <script>
    export default {
      name: 'HelloWorld',
      props: {
        msg: String
      },
      data(){
        return{
          data:[]
        }
      },
      mounted:function(){
        this.getAllData();
      },
      methods:{
        getAllData(){
          let _this=this;
          this.$axios.post('/user')
          .then(res=>{
            console.log("连接成功！");
            console.log("res:",res);
            _this.data=res.data.data;
          })
          .catch(err=>{
            console.log("连接错误："+err);
          })
        }
      }
    }
    </script>
    
    
    <style scoped>
    h3 {
      margin: 40px 0 0;
    }
    ul {
      list-style-type: none;
      padding: 0;
    }
    li {
      display: inline-block;
      margin: 0 10px;
    }
    a {
      color: #42b983;
    }
    </style>

运行结果如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

控制台内容：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

例2：

![20191110231456319.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]![20191110231505698.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][] ![201911102315156.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]

[20191002142726737.png]: /images/20210725/15225f8122c44f88be3f8159ac532568.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/da75b967c8fd4b19a4be7b454e67cffc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/79e85ceab8ac4d8b9456c3d4b9cf572e.png
[20191110231456319.png]: https://img-blog.csdnimg.cn/20191110231456319.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191110231500658.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191110231505698.png]: /images/20210725/e7556e56787b4e34b3ec5e43be7556ec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/2019111023151179.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[201911102315156.png]: https://img-blog.csdnimg.cn/201911102315156.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191110231519361.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20191110231522959.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: /images/20210725/b8d667b6f9604af9a6c1d2c3eb79fcec.png