Vue + Vuex + JSON-SEIVER implementation data display + paging function

vue+vuex+json-seiver实现数据展示+分页功能 2. Interface information:


MockJS: Generate analog data (including Chinese name, and address) JSON -server:

    WebPack-Dev-Server: Open server environment + interface agent
  • jQuery: Using jQuery’s AJAX pull data
  • Vue + Vuex: Vuex is responsible for data interaction, Vue rendering page
  • iViewUI: UI component, convenient layout
  • Building development environment

VUE starts (no CLI)

Installation: NPM Install –save MockJS


    Mock.jsvar Mock = Require (‘Mockjs’) VAR FS = Require (‘fs’) Var Random = Mock.random // Save Data Var Arr = [] // Dynamically generate 4W data for (let i = 1; i

node mock.js

can generate db.json analog data files
 npm install -g json-server  <40000;i++){
 let name=Random.cname();
 let age=Mock.mock({"age|1-100": 100 }).age
 let home=Random.province();
 let sex=Random.pick(["男","女"]);
 let education=Random.pick(["初中","高中","专科","本科"]);
fs.writeFile("db.json", JSON.stringify( {"student": arr}),function(){
Using: Under DB.JSON (folder of analog data) json-server –watch db.json
can be 127.0. 0.1: 3000 See the simulation data.

4. Interface agent

Cause: Due to our page The 8080 port is running, and the data information of the 3000 port cannot be accessed across the domain. So you need to use WebPack-Dev-Server to perform cross-domain agents.

Under the webpack-config.js file Add the following code:

DEVSERVER: {Proxy: {‘/ api’: {target: ‘http: // localhost: 3000’, PathrewRite: {‘^ / API’: ”}}}}



WebPack-Dev-Server NPM Run DEV , can be under the API virtual path of the 8080 port ( Seeing 40,000 data of 3000 ports.

5. Introduced jQuery

Introduced in INDEX.html JQuery
6.Vuex installation, configuration
  : Vuex (status manager), is used to store the status of the management component (interact with the UI), and Data interaction 
npm install –save vuex

Create a Store warehouse folder and create a file of Index.js main file and info.js storage information

index.js The file is responsible for exposing all Store library files (for example, info.js) Info.js files responsible for pulling backend data, and records UI component information.

// Info.js Export Default {// Name Space Namespaced: True, // Status Management State: {Arr: []}, // Non-side Effect Method, the only place for changing state Mutations: { Changearr (State, {Arr}) {state.arr = arr;}}, // side effect method for logical judgment, and taking data Actions: {loadInfo ({commit}) {$ .GET (“/ API / student? _limit = 10 “, function (data, statu, xhr) {commit (” Changearr “, {Arr: Data})}}}} // Index.jsimport Info from” ./info “Export Default {modules : {info}}

In the main.js entry file, it is introduced and used using Vuex

/ /main.js Add to IMPORT VUEX from “Vuex”; import store from “Vuex” ./store/index”;Vue.use (Vuex “NEW VUE ({EL: “# app”, render (h) {return h (app)}, // Register the Store on prototype Store: New Vuex.Store (Store)})

    Now Vuex is basically equipped. We can take a look at Vuex in the Vue component is successful.
  • // app.vue components
  • // Gets data {{$}}
export default {// component Call the loadInfo method Data Created ( ) {this. $ store.dispatch (“info / loadInfo”)}}
  You can now open the page to see if Vuex is completed.  

Objective: IVIEW can effectively reduce our effort to spend on layout.

NPM Install – Save IView
 Configuration:   Introduced Node_Modules \ iView \ Dist \ Styles \ iView in Index.html. CSS style sheet 

   Reference IVIEW components in the inlet file main.js, And use 
Import iView from "iView"; Vue.use (iView)
or more is all configurations of the project

The above is the Vue + Vuex + JSON-SEIVER that Xiaobian introduced to you realizes the data display + paging function. I hope that everyone can help. If you have any questions, please leave a message, the small package will promptly Reply to everyone. Thank you very much for your support of Tumi Cloud Website!

If you think this article helps you, welcome to reprint, please indicate the source, thank you!

© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment