ElementUI-day1-学习总结

前后端分离：

​ 概念：

​ 浏览器中为用户进行页面展示的部分称为前端，而将运行在服务器，为前端提供业务逻辑和数据准备的所有代码统称为后端。是web应用的一种架构模式，在开发阶段前后端工程师约定好数据接口，并行开发和测试。.对开发人员能力要求高.对于小型公司或刚转型前后端分离模式公司,开发人员能力有限,采用是后端先行前后端分离开发模式.

开发模式

前后端的分离的优势

一， 专业的人做专业的事

​ 提高开发效率

​ 应对复杂多变的前端需求。 前端变化需求比较多，因为人们的审美在不停的变化

​ 增强代码的维护性，前端后端分离，应用的代码不在是前后端混合

搭建前端环境

1 创建一个静态web项目 vue init webpack

2 npm run dev 运行 vue前端

ElementUI 的 入门

1 下载 ElementUI ：

​ 安装命令 npm i element-ui -S

2 在 src–》main.js 中导入核心组件

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

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

new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

入门；

1 首先在 components的 文件夹中 创建一个 helloElementUI.vue

<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: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>


<!-- 样式   -->
<style scoped>
</style>

2 在路由（ router 文件夹的 index. js 中 ） 中引入 helloElementUI 的样式

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
//  新建的 01_helloElementUI
import HelloElementUI from '@/components/01_helloElementUI'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
 //  很重要
    {
      path: '/HelloElementUI',
      name: 'HelloElementUI',
      component: HelloElementUI
    }
  ]
})

3 引入核心文件

import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false

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

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

常用控件

1 布局容器
：外层容器。当子元素中包含 或 时， 全部子元素会垂直上下排列，否则会水平左右排列。

   	  <el-header>：顶栏容器。
      <el-aside>：侧边栏容器。
      <el-main>：主要区域容器。
      <el-footer>：底栏容器。

2 Layout布局 --和bootstrap中栅格系统差不多
el-row 24个格子
e-col :span=“6”
3 Tree

 		<!--:data="data" 绑定数据-->
          <!--:props="defaultProps" 设置要显示数据字段-->
          <!--@node-click= 节点单击事件-->
          <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>  

4 Tabs

 <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
          <el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
        </el-tabs>

​ 4 table
​ 5 button

crud

1 toolbar

<!--toolbar-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true">
        <el-form-item>
          <el-input placeholder="关键字"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="add">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>

2 管理表格

<!-- 表格管理
      el-table： 表格
      el-table-column：列 ， prop 数据中的属性  label列名
      border  ；  边框
      height="200px" : 下拉
-->
    <el-table
      :data="tableData"
      border
      height="200px"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="info.name"
        label="boss">
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        width="100">
        <template slot-scope="scope">
          <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
          <el-button type="text" size="small" @click="edit(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

3 分页条

 <!--分页条 -->
    <el-col :span="24" class="toolbar">
      <el-button type="danger" style="float:left;">批量删除</el-button>
      <!-- 后台分页的返回值： 总数，当前页   -->
      <el-pagination
        background
        layout="prev, pager, next"
        :page-size="10"
        :total="total"
        @current-change="currentChange"
        style="float: right"
      >
        <!--
             page-size="10"  每页多少条数据:  默认是10 页
               :total="30"  一共多少条数据
                 @current-change="currentChange"  点击之后相应数据
          -->
      </el-pagination>
    </el-col>

4 添加或修改的对话框

<!-- 添加或修改对话框 -->
    <!-- 这是头部-->
    <!-- el-dialog  对话框
            :visible.sync="visible" 是否显示
             <span slot="footer" class="dialog-footer">  脚部
             打开或关闭对话框  修改 visible  的值
             回显 利用 双向绑定来做回显    <el-form :model="user">  只需要修改user的值就可以了
       -->
    <el-dialog

      title="用户管理"
      :visible.sync="visible"
      width="50%"
      >
      <el-form :model="user">
        <el-form-item label="用户名称" :label-width=" formLabelWidth">
          <el-input v-model="user.name"  style="float:left;  width:250px  " auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户区域" style="float:left;" :label-width="formLabelWidth">
          <el-select v-model="user.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <!-- 这是脚步-->
      <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="visible = false">确 定</el-button>
  </span>
    </el-dialog>

  </div>
</template>

5 form 编辑的 或 添加的 表单

<el-form :model="user">
        <el-form-item label="用户名称" :label-width=" formLabelWidth">
          <el-input v-model="user.name"  style="float:left;  width:250px  " auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户区域" style="float:left;" :label-width="formLabelWidth">
          <el-select v-model="user.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
      </el-form>

模拟数据

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

1 mock.js

​ (1) 根据数据模板生成模拟数据

​ (2) 模拟 Ajax 请求，生成并返回模拟数据

​ (3) 基于 HTML 模板生成模拟数据

入门：

​ 1 下载 mock.js

​ 2 创建 mock 的文件夹

​ 3 定义规则

​ 生成规则的含义需要依赖属性值的类型才能确定。属性值 中可以含有 @占位符。属性值 还指定了最终值的初始值和类型

​ 生成规则 有 7 种格式：

​ ‘name|min-max’: value

​ ‘name|count’: value

​ ‘name|min-max.dmin-dmax’: value

​ ‘name|min-max.dcount’: value

​ ‘name|count.dmin-dmax’: value

​ ‘name|count.dcount’: value

​ ‘name|+step’: value id

/* 引入 'mockjs' js文件  require包含导入的意思  */
let Mock=require('mockjs')
/* 定义一变量 数组 */
let data=Mock.mock({
// name|规则:值  相当于定义一个属性(name )  使用哪种规则，在给一值
  'list|5':[
    {
      'id':1,
      'name':'测试'
    }
  ]
})
/* 输出结果 */
console.log(JSON.stringify(data,null,2 ))

模拟数据 + crud

​ 1 下载 mock.js : npm install mockjs

​ 2 安装 axios npm install axios --save

// 使用 Mock
var Mock = require('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")'
  }))
}
// 获取用户列表
/**
 * 确定访问路径与请求
 */
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
  var list =dataList.slice(0,10);
  return list;
})

3 在main.js 中引入 user.JS

//引入model中的user数据
import userdata from './mock/user'

4 crud 样式

<template>
    <div>
      <!--数据表格-->
      <!--
          :data="user" 需要从后台去获取

      -->
      <el-table
        :data="user"
        stripe
        style="width: 100%">
        <el-table-column
          prop="id"
          label="id"
          width="50">
        </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>
        <el-col :span="24" class="toolbar">
          <el-button type="danger" style="float: left">批量删除</el-button>
          <el-pagination
            background
            layout="prev, pager, next"
            :page-size="10"
            :total="100"
            @current-change="currentChange"
            style="float: right"
          >
          </el-pagination>
        </el-col>
    </div>
</template>

<script>
  /* axios使用方案1
   *    局部引入
    * */
  import  axios  from  "axios";
  export default {
    name:'Crud2',
    /* 在这个里面定义一个函数把 axios.post("user/list")
       放到函数里面*/
    methods: {
      /* 当前页*/
      currentChange(currentPage){
          this.page=currentPage
        this.getUsers();

      },
     getUsers(){
       /* 发送请求到 mock模拟访问地址获取数据   Mock.mock(new RegExp('/user/list'), 'post', (opts) =>
         使用 axios
     {*/
       /* 传递分页条件  当前页 */
      let param={"page":this.page}
       axios.post("/user/list",param)
         .then(result=>{
           console.debug(result)
           this.user=result.data;
         })
     }

    },

/*user 从后台获取 一开始为空数组 */
    data() {
      return {
        page:1,
        user:[]
      }
    },
    /* 挂载加载后管理该表格数据 */
    mounted(){
      /* this 指代当前对象， getUser(){
           axios.post("user/list")
         .then(result=>{
           console.debug(result)
         })
      }  */
        this.getUsers();

    }
  }
</script>