zoukankan      html  css  js  c++  java
  • vue项目中利用初次使用mockjs

       1. 搭建一个vue-cli项目

        vue-cli脚手架安装一个vue项目

       2.npm安装mock

             npm install mockjs

       3.在项目的src文件夹下创建一个名为 mock的文件夹,在mock的文件夹下创建一个mock.js文件

     4.在mock.js文件下写入以下代码:
    //引入mockjs
    c
    onst Mock = require('mockjs')

         //使用mockjs模拟数据
        Mock.mock('http://localhost:8081/#/api/data', (req, res) => {  //
        return {
        data: [
       {
        "id" : 1,
       "username": "zhoujielun",
        "password": "123456"
        },
       {
       "id" : 2,
       "username": "guojingming",
       "password": "666666"
       },
      ]
      }
      })
      5.在main.js中加入以下代码
       import axios from "axios"
       import $ from "jquery"
       import "./mock/mock"
       Vue.prototype.$ = $
       Vue.prototype.$axios = axios
        require('../node_modules/mockjs')
     6.在需要请求的页面加入以下代码:
       import axios from 'axios'
       import $ from "jquery"
          mounted() {
        this.$axios.get('http://localhost:8081/#/api/data').then(res=>{
            console.log(res.data)}
                 }
     
    7.在浏览器控制台就可以看到打印结果
         data: Array(2)
         0: {id: 1, username: "zhoujielun", password: "123456"
         1: {id: 2, username: "guojingming", password: "666666"}
     
     


     

  • 相关阅读:
    Java面向对象知识点总结
    JAVA编程必学必会单词集(1)
    Linux 帮助命令
    学习笔记
    day4
    复习
    day5
    day04
    day3
    day02
  • 原文地址:https://www.cnblogs.com/wangxuhui/p/12794768.html
Copyright © 2011-2022 走看看