前言

首先說一下這是本人第一次分享東西第一次寫，寫的不好或者有錯誤的請大家多包涵支出錯誤共同進步，好了，話不多說了，來一起看看詳細的介紹吧。

關于mockjs，官網描述的是

      1.前后端分離

      2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。

      3.數據類型豐富

      4.通過隨機數據，模擬各種場景。

等等優點。

第一步 安裝vue-cli項目 不多說網上一大把

需要的朋友們參考這篇文章：//m.survivalescaperooms.com/article/118987.htm ，介紹的非常詳細。

第二步 因為本地的vue訪問本地的mock

1、配置vue代理

    在config/index.js里面的proxyTable，因為本地node啟動的服務默認訪問的是3000端口

    所以在target里面配置http://localhost:3000/

 proxyTable: { '/api': { target: 'http://localhost:3000/', changeOrigin: true, pathRewrite: {  '^/api': '/' } }

2、在vue項目的mianjs中

  import axios from 'axios'  axios.defaults.baseURL = '/api'

第三步 搭建nodejs的koa2項目

全局安裝koa，不是koa2注意

1、npm install -g koa-generator

    創建文件夾下面HelloKoa2是你的項目名字

2、koa2 HelloKoa2

    進入該文件夾然后執行安裝依賴

3、cd HelloKoa2然后npm install

上面完成了nodejs的初始化接著操作

4、繼續安裝依賴文件

 npm install mockjs --save -dev //mock文件 npm install koa2-cors --save -dev //node端配置cors支持跨域用

5、配置app.js文件 注意下面注釋的新增部分就是在本來app.js文件上面新增的東西

 const Koa = require('koa') const app = new Koa() const views = require('koa-views') const json = require('koa-json') const onerror = require('koa-onerror') const bodyparser = require('koa-bodyparser') const logger = require('koa-logger') const cors = require('koa2-cors') // 新增部分處理跨域 //這里提一點題外話 假如routes文件新增一個路徑就的在下面增加路勁 //假設routes新增一個user.js //新增一個user需要修改兩個地方這里是一個 下面還有一個地方 //這里需要 const user = require('./routes/user') const index = require('./routes/index') const users = require('./routes/users') // error handler onerror(app) // middlewares app.use(bodyparser({  enableTypes:['json', 'form', 'text'] })) app.use(cors()) // 新增部分處理跨域 app.use(json()) app.use(logger()) app.use(require('koa-static')(__dirname + '/public')) app.use(views(__dirname + '/views', {  extension: 'pug' })) // logger app.use(async (ctx, next) => {  const start = new Date()  await next()  const ms = new Date() - start  console.log(`${ctx.method} ${ctx.url} - ${ms}ms`) }) //這里提一點題外話 假如routes文件新增一個路徑就的在下面增加路勁 //假設routes新增一個user.js //這里需要 app.use(user.routes(), user.allowedMethods()) app.use(index.routes(), index.allowedMethods()) app.use(users.routes(), users.allowedMethods()) // error-handling app.on('error', (err, ctx) => {  console.error('server error', err, ctx) }); module.exports = app