VUE+MOCKJS simulation data for front-end separation and development

The Mockjs,mock data was tried in the project to realize the separation and development of front and back.

About MOCKJS, the official website describes

1. Front-end separation

2. Without modifying the existing code, you can intercept the AJAX request and return the simulated response data.

3. Rich data types

4. Simulate a variety of scenarios with random data.

and other advantages.

The conclusion is that before the backend interface is not developed, the front end can intercept Ajax on the real request with the existing interface document, and simulate the data returned by the real interface according to the rules of MOCKJS's mock data, and return the random simulation data to participate in the corresponding data interactive processing. This really realized the former background of the separation of development.

Unlike previous simulations of fake data, MOCKJS can give us the ability to simulate data before the backend interface is developed, and to return and complete the foreground interaction; After the background data is complete, all you do is remove the MOCKJS: Stop blocking real Ajax, that's all.

The next step is to implement VUE-CLI to create the project and add a data simulation interface for the News class:

1. Installing VUE-CLI Global Scaffolding

NPM Install--global VUE-CLI

2. Create Vue Project

Vue Init webpack Mockjs
CD MOCKJS
NPM Install Axios--save

3. Installing MOCKJS

NPM Install MOCKJS--save-dev

4. Project directory

Axios/api used to encapsulate Axios

Hello.vue Page Home

Neswcell.vue News Components

Router/index.js Routing

Main.js Entrance JS

Mock.js mockjs File

Look at the effect after the completion

5. Introduction of MOCKJS in Portal JS (main.js)

The Vue build version to load with the ' import ' command//(runtime-only or standalone) have been set in Webpack.base.con F with a alias.import vue from ' Vue ' import app./app ' import router from './router ' Vue.config.productionTip = false/ /Introduce Mockjsrequire ('./mock.js ')/* eslint-disable no-new */new Vue ({el: ' #app ', router,template: ' <App/> ', Components: {APP}}) Vue.filter (' Getymd ', function (input) {return input.split (') [0];})

Here I added the amount of a common time sorting filter GETYMD

6. Add a mock rule (mock.js)

Introduce mockjsconst mock = require (' mockjs ');//Get mock. Random Object Const RANDOM = mock.random;//Mock A set of data const PRODUCENEWSDATA = function () {Let articles = [];for] (Let i = 0; I < ; 100; i++) {Let Newarticleobject = {title:Random.csentence (5, +),//  random.csentence (min, max) thumbnail_pic_s:random. Dataimage (' 300x250 ', ' mock Pictures '),//Random.dataimage (size, text) generate a random Base64 image encoding Author_name:Random.cname (),//Rand Om.cname () randomly generates a common Chinese name date:Random.date () + "+ random.time ()//Random.date () indicates the format of the generated date string, default to Yyyy-mm-dd ; Random.time () returns a random time string}articles.push (Newarticleobject)}return {articles:articles}}//mock.mock (URL, Post/get, The returned data); Mock.mock ('/news/index ', ' post ', producenewsdata);

7. Request a document interface in Hello.vue and receive mock data

<template> <div class= "index" > <div v-for= "(item, key) in Newslistshow" > <news-cell:ne Wsdate= "Item": key= "key" ></news-cell> </div> </div></template><script>impo RT API from './. /axios/api.js ' Import Newscell from './newscell.vue ' export default {name: ' index ', data () {return {Newslistsh  OW: [],}}, components: {Newscell}, created () {This.setnewsapi (); }, methods:{Setnewsapi:function () {API.        Jh_news ('/news/index ', ' type=top&key=123456 '). Then (res = = {Console.log (res);      This.newslistshow = Res.articles;    });   },}}</script><!--Add "scoped" attribute to the limit CSS to this component only--><style scoped>.topnav{  width:100%;  Background: #ED4040;  position:fixed;  Top:0rem;  left:0; Z-index:10;}.  simplenav{width:100%;  Line-height:1rem;  Overflow:hidden;  Overflow-x: auto;  Text-align:center; font-size:0;  font-family: ' Microsoft ya Black '; White-space:nowrap;}.  simplenav::-webkit-scrollbar{height:0px}.simplenavbar{Display:inline-block;  Width:1.2rem;  Color: #fff; Font-size:0.3rem;}.  navactive{color: #000; Border-bottom:0.05rem solid #000;}.  placeholder{width:100%; Height:1rem;} </style>

Note: API. Jh_news is the Axios function I encapsulated.

Axios/api.js as follows

Import Axios from ' Axios ' import vue from ' vue ' axios.defaults.headers.post[' content-type '] = ' application/ X-www-form-urlencoded '//Request Interceptor Axios.interceptors.request.use (Function (config) {    return config;  }, function (Error) {    return Promise.reject (Error);  })  Response Interceptor Axios.interceptors.response.use (function (response) {  return response;}, function (Error) {  return Promise.reject (Error);}) Package Axios POST request export function Fetch (URL, params) {  return new Promise ((Resolve, reject) + = {    Axios.post ( URL, params)      . Then (response = {        resolve (response.data);      })      . catch (Error) = {        reject (error);      })}  )} Export Default {  jh_news (URL, params) {    return fetch (URL, params);  }}

8. Display data in Newscell.vue

<template> <section class= "financial-list" > <section class= "collect" @click = "Jumppage" > <asi de> 
Complete
9. All the code can view my GITHUB:HTTPS://GITHUB.COM/JASONWANG911/VUE_MOCKJS
VUE+MOCKJS simulation data for front-end separation and development