ElementUI和Mockjs数据模拟

ElementUI–01

前后端分离

什么是前后端分离：

​ 在传统的web应用开发中，大多数的程序员会将浏览器作为前后端的分界线。将浏览器中为用户进行页面展示的部分称之为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。

前后端分离不仅仅是前端和后端的分工开发,而是架构的模式

前后端分离的理解

交互形式

在前后端分离架构中，后端只需要负责按照约定的数据格式向前端提供可调用的API服务即可。前后端之间通过HTTP请求进行交互，前端获取到数据后，进行页面的组装和渲染，页面跳转，最终返回给浏览器。

代码组织方式

在传统架构模式中，前后端代码存放于同一个代码库中，甚至是同一工程目录下。页面中还夹杂着后端代码。前后端工程师进行开发时，都必须把整个项目导入到开发工具中。而前后端分离模式在代码组织形式上有以下两种:

半分离

前后端共用一个代码库，但是代码分别存放在两个工程中。后端不关心或很少 关心前端元素的输出情况，前端不能独立进行开发和测试，项目中缺乏前后端 交互的测试用例。

真分离

前后端代码库分离，前端代码中有可以进行Mock测试(通过构造虚拟测试对 象以简化测试环境的方法)的伪后端，能支持前端的独立开发和测试。而后端 代码中除了功能实现外，还有着详细的测试用例，以保证API的可用性，降低 集成风险。

前后端分离的优点

(1) 专业的人做专业的事情

(2) 提高开发效率 --并行开发

(3) 应对复杂多变的需求

(4) 提高维护性

(5) 成本高

ElementUI

Element，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库,网站快速成型的工具 类似easyui layui

搭建脚手架

​ 1)创建一个web项目

​ 2)vue init webpack

​ 3)npm run dev

ElementUI的使用

1.安装

​ npm i element-ui -S

2.导入

​ 在main.js中写入一下内容:

import Vue from 'vue';
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
Vue.use(ElementUI)

3.测试

// 使用 Mock
var Mock = require('mockjs')
/**
 *  DPD 数据占位符定义规范
 *
 */
var data = Mock.mock({
   
  name: {
   
    first: '@FIRST',
    middle: '@FIRST',
    last: '@LAST',
    full: '@first @middle @last',
    email:'@email',
    ip:'@ip'
  }
})
// 输出结果
console.log(JSON.stringify(data, null, 4))

ElementUI组件

注意：每个VUE都需要在index.js中申明

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import Layout from '@/components/01_layout'
import Containter from '@/components/02_containter'
import Button  from '@/components/03_button'
import Tree  from '@/components/04_tree'
import Alert from '@/components/05_alert.vue'
import Tabs from '@/components/06_tabs.vue'
import Dialog from '@/components/07_dialog.vue'
import Form from '@/components/08_form.vue'
import Table