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>

效果展示:ElementUI(模拟页面数据展示)_第1张图片

5.elementUI+crud

5.1. 为什么需要模拟数据

  • 在前后端分离开发模式中,前后端是分离并行开发的,前端开发人员在开发的时候后台提供接口数据的接口还没有写好,所以需要模拟数据。

5.2. 什么是mock.js

  • Mock.js (官网http://mockjs.com/)是一款模拟数据生成器,旨在帮助前端人员独立 于后端进行开发,帮助编写单元测试。

5.3. 快速入门

  1. 下载安装mock.js
npm install mockjs
  1. 创建一个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.效果展示(模拟数据)

ElementUI(模拟页面数据展示)_第2张图片

你可能感兴趣的:(vue)