一、前后端分离

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.效果展示（模拟数据）

在这里插入图片描述

可乐不加冰哦

发布了8 篇原创文章 · 获赞 0 · 访问量 102

私信关注

ElementUI(模拟页面数据展示)

一、前后端分离

1.什么是前后端分离

2.前后端分离优势

3.搭建前端框架vue-cli

4.ElementUI-基于vue前端ui框架

5.elementUI+crud

5.1. 为什么需要模拟数据

5.2. 什么是mock.js

5.3. 快速入门

5.4. Mock.js 的语法规范

6.Ajax请求优化-axios

6.1. 创建一个userMock.js文件

6.2. 将模拟数据文件引入到main.js文件里

6.3 在main.js引入axiso

6.4 写模拟数据UserMock.js

6.5 写table.vue

7.效果展示（模拟数据）

猜你喜欢