Preface
First of all, I will say that this is the first time I have shared something. If I don’t write it well or have any errors, please forgive me for spending mistakes and make progress together. Okay, I won’t say much, let’s take a look at the detailed introduction together.
Regarding mockjs, the official website describes
1. Front-end separation
2. You can intercept Ajax requests and return simulated response data without modifying the existing code.
3. Rich data types
4. Simulate various scenarios through random data.
And so on the advantages.
Step 1: Install the vue-cli project. I won’t say much about it online
Friends who need it, please refer to this article:https:///article/, the introduction is very detailed.
Step 2: Because local vue accesses local mock
1. Configure vue proxy
In config/, the proxyTable is accessed by the service started by the local node.
So configure http://localhost:3000/ in the target
proxyTable: {
'/api': {
target: 'http://localhost:3000/',
changeOrigin: true,
pathRewrite: {
'^/api': '/'
}
}
2. In the mianjs of the vue project
import axios from 'axios' = '/api'
Step 3: Build the nodejs koa2 project
Install koa globally, not koa2
1、npm install -g koa-generator
Create the folder below HelloKoa2 is your project name
2、koa2 HelloKoa2
Enter the folder and execute the installation dependency
3. cd HelloKoa2 and npm install
The initialization of nodejs is completed above and then the operation is followed.
4. Continue to install dependent files
npm install mockjs --save -dev //mock file npm install koa2-cors --save -dev //nodeTerminal configurationcorsSupport cross-domain use
5. Configuration file Note that the new part of the comments below is the things added to the original file
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') // Added some processing across domains
//I'm going to mention a little off topic here. If a new path is added to the routes file, add the road below. //Suppose that a new routes adds //Add a new user requires two places to be modified. Here is one. There is another place below. // Const user = require('./routes/user') const index = require('./routes/index')
const users = require('./routes/users')
// error handler
onerror(app)
// middlewares
(bodyparser({
enableTypes:['json', 'form', 'text']
}))
(cors()) // Added some processing across domains (json())
(logger())
(require('koa-static')(__dirname + '/public'))
(views(__dirname + '/views', {
extension: 'pug'
}))
// logger
(async (ctx, next) => {
const start = new Date()
await next()
const ms = new Date() - start
(`${} ${} - ${ms}ms`)
})
//I'm going to mention a little off topic here. If a new path is added to the routes file, add the road below. //Suppose that a new routes adds //This requires ((), ()) ((), ())
((), ())
// error-handling
('error', (err, ctx) => {
('server error', err, ctx)
});
= app
6. Formal use of mock I use it directly in routes/
routes/file as follows
const router = require('koa-router')()
var Mock = require('mockjs') //Introduce mockjs const Random = ; //Introduce a random function to generate random attributes // See what's more ('/index')
('/string', async (ctx, next) => {
//116 to 125 is the first method of using mock. This method randomly generates 1 to 10 arrays, but the author, title, etc. of each array are the same // = await ({
// // The value of the property list is an array containing 1 to 10 elements // 'arr|1-10': [{
// // The attribute id is a self-incremental number, with a starting value of 1, each time it is increased by 1 // 'id|+1': 1,
// 'author|+1': (),
// 'img': ('100x100'),
// 'title':(5, 9)
// }]
// })
//127 to 141 are the second method of mock. The main method of using Random functions to generate titles, authors, etc. generated here are different. const produceNewsData = function() {
let articles = [];
for (let i = 0; i < 50; i++) {
let newArticleObject = {
title: (5, 30), // ( min, max )
author: (), // () Randomly generate a common Chinese name }
(newArticleObject)
}
return {
articles: articles
}
}
= await produceNewsData()
})
Here is a little bit / official website to see clearly the usage of each data
7. Start node
npm run dev
Summarize
The above is the entire content of this article. I hope that the content of this article has certain reference value for everyone's study or work. If you have any questions, you can leave a message to communicate. Thank you for your support.