Vue项目入门教程6-数据mock

系列文章：

• Vue项目入门教程1-项目介绍
• Vue项目入门教程2-Vue-cli搭建项目
• Vue项目入门教程3-项目改造
• Vue项目入门教程4-插件安装
• Vue项目入门教程5-Svg图标
• Vue项目入门教程6-数据mock
• Vue项目入门教程7-首页布局
• Vue项目入门教程8-首页数据
• Vue项目入门教程9-文章详情页
• Vue项目入门教程10-搜索页面
• Vue项目入门教程11-我的页面及其他
• Vue项目入门教程12-打包发布

简介

前后端分离的开发模式，前端和后端是并行开发的。前端和后端通过接口进行交互。

在开发之前，前端和后端确定各个页面的接口地址、类型参数、返回值等，形成接口文档。

在后端还没有出接口时，前端可以用模拟数据的方式编写接口相关处理代码

常见的数据mock方式是使用mockjs，我比较常用的是用koa2搭建node服务端

mockjs

简介

在真实的请求上拦截ajax，并根据mockjs的mock数据的规则，模拟真实接口返回的数据，并将随机的模拟数据返回参与相应的数据交互处理

缺点：
因为是拦截了ajax请求，所以F12的network中看不到请求

步骤

• 安装插件：npm i mockjs --save-dev

• 在src/目录下新建文件mock.js

// src/mock.js
// 引入mockjs
const Mock = require('mockjs');
// 获取 mock.Random 对象
const Random = Mock.Random;
// mock一组数据
const produceNewsData = function() {
    let articles = [];
    for (let i = 0; i < 100; i++) {
        let newArticleObject = {
            title: Random.csentence(5, 30), //  Random.csentence( min, max )
            thumbnail_pic_s: Random.dataImage('300x250', 'mock的图片'), // Random.dataImage( size, text ) 生成一段随机的 Base64 图片编码
            author_name: Random.cname(), // Random.cname() 随机生成一个常见的中文姓名
            date: Random.date() + ' ' + Random.time() // Random.date()指示生成的日期字符串的格式,默认为yyyy-MM-dd；Random.time() 返回一个随机的时间字符串
        }
        articles.push(newArticleObject)
    }
 
    return {
        articles: articles
    }
}
 
// Mock.mock( url, post/get , 返回的数据)；
Mock.mock('/news/index', 'post', produceNewsData);

• 修改main.js，引入mock

// 引入mockjs
import './mock.js'

koa

简介

koa是一个基于nodeJS的服务器端框架

常用的插件

• koa：服务器端框架
• koa-router：路由管理
• koa-body：接收post数据
• koa2-cors：跨域处理
• nodemon：开发辅助工具，用户node自动重启

步骤

• 安装插件：npm i koa koa-router koa-body koa2-cors nodemon --save-dev

• 在根目录下新建目录mock

• 在mock/目录下新建文件server.js

// mock/server.js
const Koa = require('koa')
const app = new Koa()
const router = require('koa-router')()
const koaBody = require('koa-body')()
const cors = require('koa2-cors')

app.use(cors({
	origin: function (ctx) {
		// if (ctx.url === '/test') {
		// 	return "*"; // 允许来自所有域名请求
		// }
		// return 'http://localhost';
		return '*'
		// 这样就能只允许 http://localhost:8080 这个域名的请求了
	},
	exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
	maxAge: 5,
	credentials: true,
	allowMethods: ['GET', 'POST', 'DELETE'],
	allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))

router.get('/api/test', ctx => {
    const query = ctx.query   // ctx.request.query 或者 ctx.query
    ctx.response.body = {
        "code": 0,
        "msg": "",
        "data": {
        }
    }
})

router.get('/api/test/:id', ctx => {
    const params = ctx.params   // ctx.params
    ctx.response.body = {
        "code": 0,
        "msg": "",
        "data": {
        }
    }
})

router.post('/api/post', koaBody, ctx => {
  const body = ctx.request.body   // ctx.request.body
  ctx.response.body = {
    "code": 0,
    "errmsg": ""
  }
})

app.use(router.routes()).use(router.allowedMethods())

app.listen(3000)

• 修改package.json文件，在scripts下添加命令："mock": "nodemon --config nodemon --harmony ./mock/server.js"

• 在根目录下添加文件nodemon.json

{
    "watch": ["mock"],
    "ext": "js",
    "exec": "node ./mock/server.js"
}

• 需要请求接口时，先运行命令npm run mock。接口地址：http://localhost:3000/