溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
首先說一下這是本人第一次分享東西第一次寫，寫的不好或者有錯誤的請大家多包涵支出錯誤共同進步，好了，話不多說了，來一起看看詳細的介紹吧。
關于mockjs，官網描述的是
1.前后端分離
2.不需要修改既有代碼，就可以攔截 Ajax 請求，返回模擬的響應數據。
3.數據類型豐富
4.通過隨機數據，模擬各種場景。
等等優點。
第一步 安裝vue-cli項目 不多說網上一大把
需要的朋友們參考這篇文章：https://www.jb51.net/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
6、正式使用mock 我這里直接在routes/index.js里面使用
routes/index.js文件如下
const router = require('koa-router')()
var Mock = require('mockjs') //引入mockjs
const Random = Mock.Random; //引入mockjs生成隨機屬性的函數 random具體可以生成
//哪些東西詳見http://mockjs.com/examples.html
router.prefix('/index')
router.get('/string', async (ctx, next) => {
//116到125 是mock的第一種使用方法，這種方法隨機生成1到10個數組但是每個數組的author、title等都一樣
// ctx.body = await Mock.mock({
// // 屬性 list 的值是一個數組，其中含有 1 到 10 個元素
// 'arr|1-10': [{
// // 屬性 id 是一個自增數，起始值為 1，每次增 1
// 'id|+1': 1,
// 'author|+1': Random.cname(),
// 'img': Random.image('100x100'),
// 'title':Random.csentence(5, 9)
// }]
// })
//127到141是mock的第二種方法主要使用Random函數來生成 這里生成的title、author等每個都不一樣
const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 50; i++) {
let newArticleObject = {
title: Random.csentence(5, 30), // Random.csentence( min, max )
author: Random.cname(), // Random.cname() 隨機生成一個常見的中文姓名
}
articles.push(newArticleObject)
}
return {
articles: articles
}
}
ctx.body = await produceNewsData()
})
這里提一點 http://mockjs.com/examples.html 官網 看清楚每種數據的用法
7、啟動node
npm run dev
總結
以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對億速云的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
