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

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.