前请提要:
在未与后台进行交互时,前端先自行对接口进行测试是很有必要的。那么,要如何来模拟数据请求呢?如何请求本地的json文件呢?接下来将会详细说明。

  1. 创建一个json文件(存放位置自行选择,这里我选择放在全局目录下)——db.json。
{
	"student":[
		{
			"name": "Liz",
			"age": 20,
			"class": "xinguan1163",
			"number": 1
		},
		{
			"name": "aiz",
			"age": 22,
			"class": "xinguan1163",
			"number": 2
		},
		{
			"name": "siz",
			"age": 21,
			"class": "xinguan1163",
			"number": 3
		},
		{
			"name": "qiz",
			"age": 25,
			"class": "xinguan1163",
			"number": 5
		}
	],
	"teacher": [
		{
			"name": "qiz",
			"age": 45,
			"class": "xinguan1163",
			"number": 5
		},
		{
			"name": "riz",
			"age": 35,
			"class": "xinguan1163",
			"number": 5
		}
	]
}
  1. 若未安装express需要先安装,npm install express(在安装express的过程中报了错,后面通过删除node_modules文件夹,再以管理员身份运行cmd/git bash,输入命令npm install得到解决)

  2. build/webpack.dev.conf.js文件下配置(以前是在dev-server.js下配置)。

const express = require('express')                         //1.
const app = express()                                     //2.请求sever
var appData = require('../db.json')                  //3.加载本地数据文件
   var student = appData.student
   var teacher = appData.teacher
var apiRoutes = express.Router()                          //4.
app.use('/api',apiRoutes)                                  //5.通过路由请求数据   

然后下拉找到devServer,在其中添加以下代码。

    before(app) {
      app.get('/api/student', (req, res) => {
       res.json({
         errno: 0,
         data: student
       })//接口返回json数据,上面配置的数据appData就赋值给data请求后调用
      })
      app.post('/api/teacher', (req, res) => {
       res.json({
         errno: 0,
         data: teacher
       })
      })
    }

(这里之所以有get/post之分,是为了分别模拟两种请求)

  1. 安装axios。npm install axios --save

  2. src/main.js中,导入axios。

import axios from 'axios'

Vue.prototype.$axios = axios
  1. 在App.vue文件中
//get请求
this.$axios.get("/api/student",{
      params: {
        id: 123
      }
    })
    .then(res=>{
      console.log(res.data);
    }).catch(function(error){
      console.log("error init."+error)
    })
    
//post请求
    this.$axios.post("/api/teacher",{
      userId: "888"
    },{
      headers: {
        token: "tom"
      }
    }).then(res => {
      console.log(res.data);
    }).catch(function(error){

    })
  1. npm run dev在浏览器中查看运行结果。
Logo

前往低代码交流专区

更多推荐