elementui入门

1.前后端分离概念

其实前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识。
前后端分离开发的理解
(1)前后端未分离:(同一个项目)
前端代码和后端代码同放到他同一个项目(前端代码里面包含后端代码 比如jsp)
(2)前后端半分离:(同一个项目)
​ 代码仓库 : 前端开发和后端代码分开进行开发 , 前端代码它无法进行单独测试,需要后端代码支持
(3)完成代码分离 (不同的项目 代码部署到不同的服务里面)
​ 前端代码和后端代码 分别放到不同的项目里面, 前端和后端 可以单独测试 .并行的测试

前后端分离优势
(1) 分工合作 - 为优质产品打造精益团队 专业的人做专业的事情
(2) 提升开发效率 – >并行开发
(3) 完美应对复杂多变的前端需求
(4) 增强代码可维护性

2.elementUI项目准备

(1)创建一个static web project

(2) 安装 npm install -g vue-cli

(3) vue init webpack 项目名

(4)cd 项目名

​ npm run dev 运行服务

如何去设置代理:

npm config set proxy=null

npm config set registry https://registry.npm.taobao.org

3. elementui

ElementUI，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库

(1)安装

​ npm i element-ui -S

(2)引入elementui 在 main.js

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

(3)在vue页面 使用elementui的组件

<div id="app">
      <el-button @click="visible = true">Button</el-button>
      <el-dialog :visible.sync="visible" title="Hello world">
        <p>Try Element</p>
      </el-dialog>
    </div>
<script>
  export default {
    name: 'elementUi01',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        visible:false
      }
    }
  }
</script>

(4)elementui的组件

el-button 按钮 为例
button.vue

<template>
  <div>
    <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>
  </div>

</template>

<script>
  export default {
    name: 'elementUi01',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App',
        visible:false
      }
    }
  }
</script>

index.js里面引用模板

import button from '@/components/01button'

 routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/button',
      name: 'button',
      component: button
    }]

el-tree 树形，el-table表格，el-form表单，el-pagination分页，el-container容器，el-layout布局，el-tabs页签 选项卡，el-dialog对话框，el-alert 提示框，类似。

4.mockjs

mockjs:前端工程师 来模拟的数据
安装:

(1) npm install mockjs

(2)userMock.js文件引用 mockjs

let Mock=require(‘mockjs’) ;

(3)在js生成数据 ,拦截axios请求

(4)crud.vue
安装axios
npm install axios --save

let Mock=require('mockjs')
//定义数组
var dataList = [];
//循环16次,产生16条数据放入数组
for(var i=0;i<16;i++){
  dataList.push(Mock.mock({
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }));
}



//拦截axios请求  this.$http.post('/user/list',para) para ={page:2}
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
    //把产生的16数据 放入list对象里面
  var list =dataList;
  console.log(opts.body)
    //取出传递过来的 当前页
  var index = JSON.parse(opts.body).page; //3
    //每页显示条数
  var size = 10;
    //取出总的条数
  var total = list.length
  //分页方法
  list = pagination(index, size, list)
  return {
    'total': total, //总的条数
    'data': list //分页之后的数组
  }
})

//分页  
function pagination(index, size, list){
  return list.slice((index-1)*size,index*size); //slice((2-1)*10,2*10)  slice(10,20)
}
//前端拿数据方法
getUsers(){
        //这个是对象  {key:value} 传递参数
        let para = {
          page:this.page
        }
        //加载数据
        //发送ajax 从后台查询出来...没有写后台 --模拟后台数据 mockjs
        this.$http.post('/user/list',para).then(res=>{
          console.log(res.data);//返回数组 {'total': total, 'data': list}
         this.users = res.data.data; //返回分页list
          this.total = res.data.total;//返回总的条数
        });

      },
      handleCurrentChange(val){
          //currentPage  每次点击分页条执行的方法
        console.log(val);
        //把当前页 赋值给page这个字段
        this.page = val;
        this.getUsers();
      }

(5)注意事项 引入usermock.js --在main.js