vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁功能

更新時(shí)間：2019年04月11日 08:29:31 作者：雜草叢生

這篇文章主要介紹了vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁功能，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下

一丶項(xiàng)目分析

1.UI:

2.接口信息:

二丶項(xiàng)目環(huán)境

Mockjs:生成模擬數(shù)據(jù)(含中文名,以及地址)
json-server:模擬后端接口
webpack-dev-server:開啟服務(wù)器環(huán)境+接口代理
jquery:使用jquery的ajax拉取數(shù)據(jù)
vue+vuex:vuex負(fù)責(zé)數(shù)據(jù)交互,vue渲染頁面
iviewui:ui組件,方便布局

搭建開發(fā)環(huán)境

1.基本環(huán)境

Vue起步(無cli)

安裝: npm install --save Mockjs
使用:

詳細(xì)API:mockjs.com

mock.js
var Mock = require('mockjs')
var fs =require('fs')
var Random = Mock.Random
//保存數(shù)據(jù)
var arr=[]
//動(dòng)態(tài)生成4W條數(shù)據(jù)
for(let i=1;i<40000;i++){
 //生成隨機(jī)項(xiàng)
 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(["初中","高中","?？?,"本科"]);
 arr.push({"id":i,name,age,home,sex,education})
}
//寫入文件
fs.writeFile("db.json", JSON.stringify( {"student": arr}),function(){
 console.log("done")
})

node mock.js 即可生成db.json模擬數(shù)據(jù)文件

安裝: npm install -g json-server

使用:在有db.json(模擬數(shù)據(jù)的文件夾)下 json-server --watch db.json , 即可在127.0.0.1:3000下看到模擬數(shù)據(jù).

4.接口代理

原因:由于我們的頁面在8080端口運(yùn)行,不能跨域訪問3000端口的數(shù)據(jù)信息.所以需要使用webpack-dev-server進(jìn)行跨域代理.

webpack-config.js文件下添加如下代碼:

devServer: {
  proxy: {
   '/api': {
   target: 'http://localhost:3000',
   pathRewrite: {'^/api' : ''}
   }
  }
  }

啟動(dòng)webpack-dev-server npm run dev ,即可在8080端口的api虛擬路徑下(127.0.0.1:8080/api/student)看到3000端口的40000條數(shù)據(jù)了.

5.引入jquery

在index.html中引入jquery

6.Vuex安裝,配置

目的:vuex(狀態(tài)管理器),用于存儲(chǔ)管理組件的狀態(tài)(與UI交互),并與后端進(jìn)行數(shù)據(jù)交互

安裝: npm install --save vuex

配置:

創(chuàng)建store倉庫文件夾,并創(chuàng)建index.js主文件和info.js存儲(chǔ)信息的文件
index.js文件負(fù)責(zé)暴露所有store庫文件(例如:info.js)
info.js文件負(fù)責(zé)拉取后端數(shù)據(jù),以及記錄UI組件信息.

//info.js
 export default{
 //命名空間
 namespaced:true,
 //狀態(tài)管理
 state:{
  arr:[]
 },
 //無副作用方法,唯一用于改變state的地方
 mutations:{
  changeArr(state,{arr}){
   state.arr=arr;
  }
 },
 //副作用方法,用于進(jìn)行邏輯判斷,以及拉取數(shù)據(jù)
 actions:{
  loadInfo({commit}){
   $.get("/api/student?_limit=10",function(data,statu,xhr){
    commit("changeArr",{arr:data})
   })
  }
 }
}
//index.js
import info from "./info"
export default{
 modules:{
  info
 }
}

在main.js入口文件下引入并使用vuex

//main.js原有基礎(chǔ)上中加入如下代碼
import Vuex from "vuex";
import store from "./store/index";
Vue.use(Vuex)
new Vue({
 el:"#app",
 render(h){
  return h(App)
 },
 //將store注冊(cè)到prototype上
 store: new Vuex.Store(store)
})

現(xiàn)在vuex就基本配好了.我們可以在Vue組件上看一下vuex是否配置成功.

//app.vue組件
<template>
 <div>
 //獲取Vuex中的數(shù)據(jù)
  {{$store.state.info.arr}}
 </div>
</template>
<script>
 export default {
  //組件創(chuàng)建時(shí)調(diào)用loadInfo方法拉取數(shù)據(jù)
   created(){
  this.$store.dispatch("info/loadInfo")
  } 
 }
</script>

現(xiàn)在就可以打開127.0.0.1:8080頁面查看vuex是否完成了

7.iviewui

目的:iview可以有效減少我們花在布局上的精力.

安裝: npm install --save iview

配置:

在index.html中引入node_modules\iview\dist\styles\iview.css樣式表

<link rel="stylesheet" href="./node_modules/iview/dist/styles/iview.css" rel="external nofollow" >

在入口文件main.js中引用iview組件,并使用

import iview from "iview"; Vue.use(iview)

現(xiàn)在就可以了

以上就是項(xiàng)目的所有配置

以上所述是小編給大家介紹的vue+vuex+json-seiver實(shí)現(xiàn)數(shù)據(jù)展示+分頁功能，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，請(qǐng)注明出處，謝謝！

您可能感興趣的文章: