美文网首页
2020-12-30vue简单使用mockjs

2020-12-30vue简单使用mockjs

作者: 王小博er | 来源:发表于2020-12-30 22:27 被阅读0次

    第一种简单使用

    ①新建一个json文件

    {
        "student":[
            {"name":"111","age":"1"},
            {"name":"222","age":"2"},
            {"name":"333","age":"3"}
        ],
        "class":[
            {"classname":"111","number":"10"},
            {"classname":"222","number":"20"},
            {"classname":"333","number":"30"}
        ]
    }
    

    ②在vue.config.js中

    const express = require('express')
    const app = express()
    const appData = require('./src/mock/test.json');
    const student = appData.student;
    const class_student = appData.class;
    
    module.exports = {
        devServer: {
            before(app){
              app.get('/api/student',function (req,res) {
                res.json({
                  errno:0,
                  data:student
                })
              });
              app.get('/api/goods', function(req, res) {
                res.json({
                  errno: 0,
                  data: class_student
                })
              });
            }
        }
    }
    

    ③直接在页面中使用

    axios.get('http://localhost:8080/api/student').then(response =>{
          console.log(response.data)
        },response =>{
          console.error("error")
        })
    

    第二种规范使用

    ①新建js文件模拟数据

    import Mock from 'mockjs'
    export default{
        getName: ()=>({
            code:1,
            data:{
                name:"Tom",
                age:"12",
                sex:"man"
            }
        })
    }
    

    ②定义mock的方法

    import Mock from 'mockjs'
    import decision from './decision'
    //             前台接口方法路径           访问方式     模拟数据的方法
    Mock.mock('/decision/getName','get',decision.getName);
    
    // 生成随机数据
    Mock.mock('/api/data','get',()=>{ return Mock.mock({name:'@cname',city:'@city(true)'})});
    

    ③在main.js中引入定义

    import './mock/index'
    

    这里就完成了一半,接下来定义前台请求方法就能够请求到mock里的模拟数据

    ④在api中定义前台请求方法

    import request from 'axios'
    
    export function getName(){
        return request({
            url:'/decision/getName',
            method:'get'
        })
    }
    

    ⑤在页面中使用

    import { getName } from '../api/api.js'
    
    export default class HelloWorld extends Vue {
     mounted(){
        getName().then(response =>{
          console.log(response)
        })
    }
    

    mock随机生成的官网例子
    http://mockjs.com/examples.html

    相关文章

      网友评论

          本文标题:2020-12-30vue简单使用mockjs

          本文链接:https://www.haomeiwen.com/subject/rzjkoktx.html