vue vuex json-seiver实现数据显示分页功能

编辑：宝哥软件园来源：互联网时间：2021-08-26

新天龙八部

角色扮演 | 1.85G

评分

立即下载

一个项目的分析

1.UI:

2.界面信息：

二、项目环境

Mockjs:生成模拟数据(包括中文名称和地址)。json-server:模拟后端接口。Webpack-dev-Server 3360打开服务器环境接口代理。jquery:使用jquery的ajax来拉取数据。vue vuex:vuex负责数据交互，vue渲染页面的iviewui:ui组件，方便布局和开发环境

1.基本环境

Vue启动(不带cli)

安装： npm安装-保存Mockjs使用：详细API:mockjs.com

mock . js varmock=require(' mock js ')varfs=require(' fs ')varrandom=Mock.Random//保存数据var arr=[]//为(let I=1；i40000I ){ //生成随机项let name=random . cname()；让age=mock . mock({ ' age | 1-100 ' : 100 })。年龄让家=Random .省份()；让性=Random.pick(['男'，'女'])；让教育=Random.pick(['初中'，'高中'，'专科'，'本科'])；Arr.push ({'id' :i，姓名，年龄，家庭，性别，教育程度})}//写入文件fs.writefile ('db.json '，JSON . stringfy({ ' student ' 3360 arr })，function () {console。

安装： npm install -g json-server

使用：读取JSON-server-watchdb。db.json(仿真数据文件夹)下的JSON，可以看到127.0.0.1:3000下的仿真数据。

4.界面代理

原因：由于我们的页面运行在端口8080上，无法跨域访问端口3000的数据信息，所以需要使用webpack-dev-server进行跨域代理。

在webpack-config.js文件下添加以下代码：

devserver : { proxy : { '/api ' : { target : ' http://localhost :3000 '，path rewrite : { '/API ' : ' ' } } } Start web pack-dev-server NPM运行dev，可以在端口8080 (127.0.0)的API虚拟路径下看到端口3000的40000条数据

5.介绍jquery

将jquery引入index.html

6.Vuex安装和配置

用途：vuex(状态管理器)，用于存储管理组件的状态(与UI交互)和与后端数据交互

安装： npm安装-保存vuex

配置：

创建一个store warehouse文件夹，并创建一个index.js主文件和一个info.js文件来存储信息。index.js文件负责公开所有存储库文件(例如，info.js)。info.js文件负责提取后端数据。并记录UI组件信息。//info . js export default {//namespace namespace : true，//state management state 3360 { arr 3360[]}，//无副作用方法，仅用于更改状态的地方mutation 3360 { change arr(state，{arr}) {state.arr. }，//副作用方法，用于进行逻辑判断和拉取数据动作： {loadinfo ({commit}) {$。get ('/API/student？_ limit=10 '，函数(数据、statu、xhr) {commit ('changearr '，{ arr : data })} } } }//index . js import info from '。/info '导出vuex main.js导入文件中的默认{modules : {info}}

//main.js从“Vuex”添加以下代码导入Vuex；从“”导入存储。/store/index '；Vue。使用(vuex) newvue ({el:' # app '，render (h) {return h (app)}，//将商店注册到原型商店：newvuex。商店(store)})。现在vuex基本配置好了。我们可以检查vuex是否在vue组件上成功配置。

//app.vue组件模板div //获取Vuex中的数据{ { $ store . state . info . arr } }/div/template script export default {//调用loadInfo获取组件创建时创建的数据(){this。$ store . dispatch(' info/load info ')} }/script现在可以打开第127.0.0.1:8080页查看vuex是否完成。