ElementUI(模拟页面数据展示)
一、前后端分离
1.什么是前后端分离
- 在web应用的开发期进行了前后端开发工作的分工就是前后端分离
- 前后端分离并不只是开发模式，而是web应用的一种架构模式
- 在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试
- 在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。
2.前后端分离优势
- 为优质产品打造精益团队（专业的人做专业的事情）
- 提升开发效率（并行开发）
- 增强代码可维护性（维护性较好）
- 前后端分离成本高（一般用于大型项目和大型公司）
3.搭建前端框架vue-cli
- Idea创建一个static web项目
- 安装：npm install -g vue-cli
- 快速创建webpack项目：vue init webpack
- 运行：npm run dev
4.ElementUI-基于vue前端ui框架
- 安装：npm i element-ui -S
- 导入：
//引入elementui
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
//使用elementui
Vue.use(ElementUI);
- 开始使用：Elementui官网组件里面 拷贝
import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//新增加路由
import button from '@/components/01button.vue'
Vue.use(Router)
//新增加Elementui的path
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld
},
{
path: '/button',
name: 'button',
component: button
}
]
})
- button组件
<template>
<div class="hello">
<el-row>
<el-button>默认按钮</el-button>
<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>
<el-button type="info">信息按钮</el-button>
<el-button type="warning">警告按钮</el-button>
<el-button type="danger">危险按钮</el-button>
</el-row>
</div>
</template>
<script>
export default {
name: 'button',
data () {
return {
msg: 'Welcome to Your Vue.js App'
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
font-weight: normal;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
效果展示：
5.elementUI+crud
5.1. 为什么需要模拟数据
- 在前后端分离开发模式中，前后端是分离并行开发的，前端开发人员在开发的时候后台提供接口数据的接口还没有写好，所以需要模拟数据。
5.2. 什么是mock.js
- Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端人员独立 于后端进行开发，帮助编写单元测试。
5.3. 快速入门
- 下载安装mock.js
npm install mockjs
- 创建一个testMock.js
// 使用 Mock
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'list|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1
}]
})
// 输出结果
console.log(JSON.stringify(data, null, 4))
3.运行：node testMock
D:\intellijIDEA2017.3.3\ideaProject\element_ui>node testMock
{
"list": [
{
"id": 1
},
{
"id": 2
},
{
"id": 3
}
]
}
5.4. Mock.js 的语法规范
- 数据模板定义规范（Data Template Definition，DTD）
- 数据占位符定义规范（Data Placeholder Definition，DPD）
数据模板定义规范 DTD
数据模板中的每个属性由 3 部分构成：属性名、生成规则、属性值：
// 属性名 name
// 生成规则 rule
// 属性值 value
'name|rule': value
数据占位符定义规范 DPD
占位符 只是在属性值字符串中占个位置，并不出现在最终的属性值中。
占位符 的格式为：
@占位符
@占位符(参数 [, 参数])
6.Ajax请求优化-axios
- 需要使用axios来发送请求 获取模拟数据(就是ajax请求 --在vue里面axios)
6.1. 创建一个userMock.js文件
// 引入mock
import Mock from 'mockjs'
//每循环一次产生一个数据放到数组中
var dataList = []
for (var i = 0; i < 15; i++) {
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{
10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}))
}
6.2. 将模拟数据文件引入到main.js文件里
//引入模拟数据文件
import userMack from "../mock/userMock.js"
6.3 在main.js引入axiso
//引入axios 发送请求（全局配置）
import axios from 'axios'
//配置访问地址 如：http://localhost:80/xxx
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost:80'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象
Vue.prototype.$http = axios
//axios这个变量 赋值给Vue里面 $http这个变量
//this.$http = axios
//this.$http.get/post = axios.get/post
6.4 写模拟数据UserMock.js
//引入mockjs文件
import Mock from 'mockjs';
//模拟数据代码
var dataList = []
//没循环一次产生一个数据 放入数据里面
for (var i = 0; i < 15; i++) {
dataList.push(Mock.mock({
'id': '@increment',
'name': '@cname',
'phone': /^1[0-9]{
10}$/,
'email': '@email',
'address': '@county(true)',
'createTime': '@date("yyyy-MM-dd")'
}))
}
//list分页的数据，pageSize 每页显示条数，currentPage当前页
function pagination1(list,pageSize,currentPage){
//currentPage=1 slice(0,10）
//将获取的数据截取（slice截取的作用）
return list.slice((currentPage-1)*pageSize, currentPage*pageSize)
}
//Mock拦截请求
//说白： 在页面上面发送axios请求，被mock拦截下来，返回mock模拟的数据给
//请求
/**
* '/getUsers' 拦截地址
* 'get' ：请求方式
* opt：传过来参数
*/
Mock.mock(new RegExp('/getUsers'),'post',(opts)=>{
//模拟产生的数据
var list= dataList;
//接收参数
var currentPage = JSON.parse(opts.body).currentPage;
/* console.log(opts.url.split("=")[1]);*/
//split截取“=”后的第一个
console.log('当前页数:'+currentPage);
//分页方法
var resultList = pagination1(list,10,currentPage);
//返回的数据
return {
"total":15,
"datas":resultList
}
})
6.5 写table.vue
<template>
<div>
<el-row>
<el-table
:data="tableData"
style="width: 100%">
<el-table-column
prop="id"
label="编号"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="phone"
label="电话"
width="180">
</el-table-column>
<el-table-column
prop="email"
label="邮件">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
<!--
分页条
:total="total"
-->
<el-pagination layout="prev, pager, next"
@current-change="handleCurrentChange"
:page-size="10"
:total="total"
style="float:right;">
</el-pagination>
</el-row>
</div>
</template>
<script>
export default {
data(){
return {
tableData: [],
total:1000,//设置总页数，传到上面的分页条里面
page:1,//默认是第一页
}
},
methods: {
getUsers(){
//发送请求到mock里面 请求数据 返回数据，加载表格里面
//axios 发送请求(ajax-promise)
//发送请求 -- 发送后台是可以
this.$http.post('/getUsers',{
currentPage:this.page}).then(res=>{
this.tableData = res.data.datas;
//把模拟数据的总数返回回来，设置data（）里面的total，在设置给分页条里面的total
this.total = res.data.total;
})
},
/*点击页码，然后就获取当前页码，然后赋值给上面的data（）中的page*/
handleCurrentChange(currentPage){
this.page = currentPage;
//点击页面后要再次发送请求获取数据
this.getUsers();
}
},
mounted(){
this.getUsers();
}
}
</script>
7.效果展示（模拟数据）
