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

一丶项目分析

1.UI:

2.接口信息:

二丶项目环境

  • Mockjs:生成模拟数据(含中文名,以及地址)
  • json-server:模拟后端接口
  • webpack-dev-server:开启服务器环境+接口代理
  • jquery:使用jquery的ajax拉取数据
  • vue+vuex:vuex负责数据交互,vue渲染页面
  • iviewui:ui组件,方便布局

搭建开发环境

1.基本环境

Vue起步(无cli)

  • 安装: npm install --save Mockjs
  • 使用:

详细API:mockjs.com

mock.js
var Mock = require('mockjs')
var fs =require('fs')
var Random = Mock.Random
//保存数据
var arr=[]
//动态生成4W条数据
for(let i=1;i<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(["初中","高中","专科","本科"]);
 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模拟数据文件

安装: npm install -g json-server

使用:在有db.json(模拟数据的文件夹)下 json-server --watch db.json , 即可在127.0.0.1:3000下看到模拟数据.

4.接口代理

原因:由于我们的页面在8080端口运行,不能跨域访问3000端口的数据信息.所以需要使用webpack-dev-server进行跨域代理.

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

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

启动webpack-dev-server npm run dev ,即可在8080端口的api虚拟路径下(127.0.0.1:8080/api/student)看到3000端口的40000条数据了.

5.引入jquery

在index.html中引入jquery

6.Vuex安装,配置

目的:vuex(状态管理器),用于存储管理组件的状态(与UI交互),并与后端进行数据交互

安装: npm install --save vuex

配置:

  • 创建store仓库文件夹,并创建index.js主文件和info.js存储信息的文件
  • index.js文件负责暴露所有store库文件(例如:info.js)
  • info.js文件负责拉取后端数据,以及记录UI组件信息.
//info.js
 export default{
 //命名空间
 namespaced:true,
 //状态管理
 state:{
  arr:[]
 },
 //无副作用方法,唯一用于改变state的地方
 mutations:{
  changeArr(state,{arr}){
   state.arr=arr;
  }
 },
 //副作用方法,用于进行逻辑判断,以及拉取数据
 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原有基础上中加入如下代码
import Vuex from "vuex";
import store from "./store/index";
Vue.use(Vuex)
new Vue({
 el:"#app",
 render(h){
  return h(App)
 },
 //将store注册到prototype上
 store: new Vuex.Store(store)
})

现在vuex就基本配好了.我们可以在Vue组件上看一下vuex是否配置成功.

//app.vue组件
<template>
 <div>
 //获取Vuex中的数据
  {{$store.state.info.arr}}
 </div>
</template>
<script>
 export default {
  //组件创建时调用loadInfo方法拉取数据
   created(){
  this.$store.dispatch("info/loadInfo")
  }
 }
</script>

现在就可以打开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)

现在就可以了

以上就是项目的所有配置

以上所述是小编给大家介绍的vue+vuex+json-seiver实现数据展示+分页功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

如果你觉得本文对你有帮助,欢迎转载,请注明出处,谢谢!

(0)

相关推荐

  • JS实现的简单分页功能示例

    本文实例讲述了JS实现的简单分页功能.分享给大家供大家参考,具体如下: HTML部分: <body onLoad="goPage(1,10);"> <table id="idData" width="70%"> <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td>&

  • js实现简单分页导航栏效果

    本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下 最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageSize  (自己设置) 总页数: totalPageNum  (根据上面的参数计算) 当前页: currentPageNum (前台传入) 当前页要显示的内容 : List<PageInfo> (查数据库: pageSize和currentPageNum每页的计算起始记录索引 2. 在html页面

  • JS 使用 window对象的print方法实现分页打印功能

    最近做项目用到了web在线打印功能,经研究使用了JS自身支持的Window对象的打印方法,此种方法兼容性比较好,在IE和火狐浏览器下使用都没有问题. 1.但是网上好多案例都不支持分页功能,最后通过CSS的page-break-after:always样式解决分页问题,以下代码纯个人编写,有需要的朋友可以直接复制到网页中使用,转载请注明出处,谢谢! <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &quo

  • 基于vue.js实现的分页

    本文主要介绍基于vue的分页原生写法. 先po上效果图: html部分,将page作为一个单独的组件 <script type="text/x-template" id="page"> <ul class="pagination"> <li v-show="current != 1" @click="current-- && goto(current)">

  • js简单的分页器插件代码实例

    这篇文章主要介绍了js简单的分页器插件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 自己引入jquery插件,我的demo是引入的自己本地的query 代码如下 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/

  • vue.js 2.0实现简单分页效果

    本文实例为大家分享了vue.js 2.0实现分页效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>vue.js 2.0 实现的简单分页</title> <style> * { margin: 0; padding: 0; box-sizing: border-box } html { fo

  • 基于vue.js实现分页查询功能

    利用vue.js实现数据库分页,供大家参考,具体内容如下 最新项目有一个分页功能,画面风格很简朴给的样图就用[1]表示页码了, 因此,我没有上网上找插件,自己简单的做了一个.作为菜鸟,代码可能有点青涩,请见谅. 除了vue我还引用了Bootstrap的类和图标 html <div class="paging"> <ul class="pagination" style="margin: 13px"> <li clas

  • Vue.js结合bootstrap前端实现分页和排序效果

    写之前先抱怨几句.本来一心一意做.net开发的,渐渐地成了只做前端.最近项目基本都用java做后台,我们这些.net的就成了前端,不是用wpf做界面,就是用html写web页面. 深知自己前端技术不足,以前虽说用asp.net前后台都做,但是,对于前端都是用现成的js库和页面模板,对于vue.js等框架基本没有接触过. 只怪自己不会写java,最近做一个项目,负责前端,后台传来数据不分页,前端收到所有数据后自己分页.我尽是无语. 正好最近在看vue.js.这个页面就用它来实现吧.顺便总结下. 排

  • vue+vuex+json-seiver实现数据展示+分页功能

    一丶项目分析 1.UI: 2.接口信息: 二丶项目环境 Mockjs:生成模拟数据(含中文名,以及地址) json-server:模拟后端接口 webpack-dev-server:开启服务器环境+接口代理 jquery:使用jquery的ajax拉取数据 vue+vuex:vuex负责数据交互,vue渲染页面 iviewui:ui组件,方便布局 搭建开发环境 1.基本环境 Vue起步(无cli) 安装: npm install --save Mockjs 使用: 详细API:mockjs.co

  • vue+echarts+datav大屏数据展示及实现中国地图省市县下钻功能

    随着前端技术的飞速发展,大数据时代的来临,我们在开发项目时越来越多的客户会要求我们做一个数据展示的大屏,可以直观的展示用户想要的数据,同时炫酷的界面也会深受客户的喜欢. 大屏展示其实就是一堆的图表能够让人一目了然地看到该系统下的一些基本数据信息的汇总,也会有一些实时数据刷新,信息预警之类的.笔者在之前也做过一些大屏类的数据展示,但是由于都是一些图表类的,觉得没什么可说的,加之数据也都牵扯到公司,所以没有沉淀下来什么. 最近有朋友要做一个大屏,问了自己一个问题,自己也刚好做了一个简单的大屏数据展示

  • Vue请求JSON Server服务器数据的实现方法

    由于这里是在之前这篇文章的基础上进行稍加修改完成的,因而其绝大部分代码与上面的是一样的,而其不同之处在于,其请求数据的数据源不是来源于json文件,而是来自于后台的数据.此处的后台服务器中的数据由JSON Server所提供. 注意事项 json的数据结构 这是之前所请求的json数据: { "status":0 ,"message":[ { "id":1 ,"name":"张三" } ,{ "i

  • JS处理数据实现分页功能

    这几天有小伙伴讨论起了分页的相关问题,这里我也简单讲下前端如何简单便捷的利用Js(库)写出优雅,好用的分页工具. 分页是个很简单又超多接触的技术点,粗略来讲分如下两种: 真分页——每次根据页码.页大小获取数据并展示. 假分页——一次性获取所有数据,根据页码.页大小展示. 公认比较好的做法是真分页,这样可以避免很多问题(如内存占用过多). 有一点需要注意,单纯的前端是无法独立完成数据分页的(废话),所以后端支持是必须的. 作为支持,webapi除了返回所请求的数据,还应返回数据总量以便计算页数:

  • Vue Cli与BootStrap结合实现表格分页功能

    1.首先需要在vue-cli项目中配置bootstrap,jquery 2. 然后新建vue文件,如index.vue,index.vue内容如下: 3.配置路由即可运行实现. <template> <div class="tTable container body-content"> <div class="form-group"> <div class="form-group"> <div

  • vue和iview实现Scroll 数据无限滚动功能

    在做项目的时候因为数据比较多,一次性全部渲染的话会花费较多的时间,所以,想到每一次渲染10条数据 也想过每一次获取十条数据然后显示就行了,就目前自己所知最好的方法是修改接口,一次返回10条,可是这样子太麻烦了,所以决定一次性请求所有数据,然后每次渲染十条,需要再上拉加载更多 使用的是iview中的组件Scroll 以下是获取数据和封装数据的方法: 原理是先定义两个全局的变量,一个存储全部的数据,一个存储渲染的数据 在首次获得数据的时候,往渲染的变量中存入全部数据的前十条: 然后在数据最底时上拉加

  • Vue+Element UI+Lumen实现通用表格分页功能

    前言 最近在做一个前后端分离的项目,前端使用 Vue+ Element UI,而后端则使用 Lumen 做接口开发,其中分页是必不可少的一部分,本文就介绍如何基于以上环境做一个简单.可复用的分页功能. 先说后端 后端做的事情不多,只需要接受几个参数,根据参数来获取数据即可. 需要获取的参数如下: pageSize(一页数据的数量) pageIndex(第几页的数据) 然后就可以根据这两个参数计算出偏移量,再从数据库中取出相应的数据. 假如现在给出的参数为:pageSize=10,pageInde

  • Vue.js实现无限加载与分页功能开发

    本篇文章是一篇Vue.js的教程,目标在于用一种常见的业务场景--分页/无限加载,帮助读者更好的理解Vue.js中的一些设计思想.与许多Todo List类的入门教程相比,更全面的展示使用Vue.js完成一个需求的思考过程:与一些构建大型应用的高阶教程相比,又更专注于一些零碎细节的实现,方便读者快速掌握.致用. 需求分析 当一个页面中信息量过大时(例如一个新闻列表中有200条新闻需要展示),就会产生问题,例如: >数据量过大,影响加载速度 >用户体验差,很难定位到之前自己看过的某篇文章 >

  • javascript实现前端分页功能

    前言:今天给大家带来的是前端数据的分页功能,供大家参考,具体内容如下 先上一波效果图展示: 直接上代码:这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>分页</title> <link rel="stylesheet&qu

  • vue如何实现Json格式数据展示

    目录 Json格式数据展示 vue解析json数据 Json格式数据展示 vue的jsonViewer组件也很好用,在网上看到有大神自己写的组件(递归调用),觉得很好,稍作修改,记录一下 JSON.stringify(obj, null, 4) 可以美化json数据的显示 <span class="light">要高亮的内容</span> 在json数据中,如果有需要高亮的内容,用以上标签包起来(这个要处理数据实现了,组件里高亮样式可以根据需要自己修改) <

随机推荐