Elementui 的初识

1 前后分离开发（概念熟悉）

1.1 前后端分离的是web的一种运用的框架,

1.2在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；

1.3在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求(restful风格)

2 搭建前端环境-nodejs&npm&vue&webpack&vuecli（掌握）

2.1 搭建

先创建一个static web project
1  vue init webpack 文件名
2    npm run dev

3 前端ui框架ElementUI-饿了么(Vue)入门（掌握）

3.1创建element-uI

1  npm i element-ui -S
2  报错安装脚手架 npm install -g @vue/cli

3.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.3 组件的运用

3.31 button

<template>
  <div >
    <el-button plain disabled>朴素按钮</el-button>
    <el-button type="primary" plain disabled>主要按钮</el-button>
    <el-button type="success" plain disabled>成功按钮</el-button>
    <el-button type="info" plain disabled>信息按钮</el-button>
    <el-button type="warning" plain disabled>警告按钮</el-button>
    <el-button type="danger" plain disabled>危险按钮</el-button>
    <hr>
    <el-button disabled>默认按钮</el-button>
    <el-button type="primary" disabled>主要按钮</el-button>
    <el-button type="success" disabled>成功按钮</el-button>
    <el-button type="info" disabled>信息按钮</el-button>
    <el-button type="warning" disabled>警告按钮</el-button>
    <el-button type="danger" disabled>危险按钮</el-button>
    <hr>

    <el-button type="primary" icon="el-icon-edit"></el-button>
    <el-button type="primary" icon="el-icon-share"></el-button>
    <el-button type="primary" icon="el-icon-delete"></el-button>
    <el-button type="primary" icon="el-icon-search">搜索</el-button>
    <el-button type="primary">上传<i class="el-icon-upload el-icon--right"></i></el-button>
    <hr>
  </div>
</template>

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

router/index.js 路由

//引入
import Button from '@/components/01_button.vue'
import Layout from '@/components/02_layout.vue'
import Container from '@/components/03_container.vue'
import Tree from '@/components/04_tree.vue'
import Pagination from '@/components/05_pagation.vue'
import Alert from '@/components/06_alert.vue'
import Message from '@/components/07_message.vue'
import Tabs from '@/components/08_tabs.vue'
import Dialog from '@/components/09_dialog.vue'
import Form from '@/components/10_form.vue'
import Tables from '@/components/11_tables.vue'
import Crud from '@/components/12_crud.vue'
//路由
export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/button',
      name: 'button111',
      component: Button
    },
    {
      path: '/layout',
      name: 'layout',
      component: Layout
    },
    {
      path: '/container',
      name: 'container',
      component: Container
    },
    {
      path: '/tree',
      name: 'tree',
      component:Tree
    },
    {
      path: '/pagination',
      name: 'pagination',
      component:Pagination
    },
    {
      path: '/message',
      name: 'message',
      component:Message
    },
    {
      path: '/tabs',
      name: 'tabs',
      component:Tabs
    },
    {
      path: '/dialog',
      name: 'dialog',
      component:Dialog
    },
    {
      path: '/form',
      name: 'form',
      component:Form
    },
    {
      path: '/tables',
      name: 'tables',
      component:Tables
    },
    {
      path: '/crud',
      name: 'crud',
      component:Crud
    }
  ]
})

常用的组件 table tabs tree message pagination layout dialog 略

https://element.eleme.io/#/zh-CN/component/installation

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xBLYJs9l-1575460544238)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1575460472053.png)]

4 Elmentui+crud（掌握）

4.1component页面布局

<template>
  <div>
    <!--工具条-->
    <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">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary">新增</el-button>
        </el-form-item>
      </el-form>
    </el-col>
    <el-table
      :data="users"
      style="width: 100%"
      border
      height="450px"
    >

      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮件">
      </el-table-column>
      <el-table-column
        prop="phone"
        label="电话">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="创建时间"
        width="180">
      </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">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24" class="toolbar">
      <el-button type="danger">批量删除</el-button>
      <el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="10" :total="total" style="float:right;">
      </el-pagination>
    </el-col>
  </div>
</template>
<script>
  export default {
    methods: {
      handleCurrentChange(val){
        console.log(val)
        this.page = val;
        this.getUsers();

      },
      handleClick(row) {
        console.log(row);
      },
      getUsers(){

        let para = {
          page: this.page,
          keyword: this.filters.keyword
        };

        this.$http.post("/user/list",para)
        // axios.post("/user/list",para)
          .then((res=>{
            console.log(res,"jjjjjjjj")
            this.total = res.data.total;
            this.users = res.data.data;
          }))

      }
    },
    name: 'table',
    data () {
      return {
        filters: {
          keyword: ''
        },
        page: 1,
        total:100,
        users: []
      }
},
//表示页面的元素渲染完值执行该方法
    mounted(){
      this.getUsers();
    }
  }
</script>
<style scoped>
</style>

4.2接口数据模拟Mockjs&Easymock[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-goKG4gvl-1575460544251)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1575459923111.png)]

（1）新建demomock.js
（2）下载安装mock.js
    npm install mockjs
（3）在demomock.js文件加入代码

let Mock=require('mockjs') 
let data=Mock.mock({ 
// name|规则:值
'list|5':[ 
{ 
'id':1, 
'name':'测试' 
} 
] 
}) 
console.log(JSON.stringify(data)) 


(4)执行命令  node src/demomock

5 Axios（掌握-ajax请求）–包含在crud里面–Mockjs&Easymock

5.1 axios 安装

1.axios 安装
npm install axios --save
2.main.js 全局的引入
    import axios from 'axios'
    //配置axios的全局基本路径 t
	axios.defaults.baseURL='http://localhost:80'
	//全局属性配置，在任意组件内可以使用this.$http获取axios对象
	Vue.prototype.$http = axios
	
=====>this.$http.post("/user/list",para)

5.2 usermock.js

import Mock from 'mockjs' // 引入mock
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")'
  }))
}

//开始的位置 size 每页显示的条数 list 总结数据
function pagination(index, size, list) {
  console.log(list);
  console.log(index, size);
  // index = 2 size 10   list.slice(10,20)
  return list.slice((index-1)*size, index*size)
}

// 获取用户列表
Mock.mock(new RegExp('/user/list'), 'post', (opts) => {
  var list =dataList;
  //拦截数据pala中的数据para {page:2}
  console.log(opts.body)
  var index = JSON.parse(opts.body).page;
  var size = 10;
  var total = list.length
  list = pagination(index, size, list)
  return {
    'total': total,
    'data': list
  }
})

5.3main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import axios from 'axios'
import usermock from './usermock'
//配置axios的全局基本路径
axios.defaults.baseURL='http://localhost:80'
//全局属性配置，在任意组件内可以使用this.$http获取axios对象

Vue.prototype.$http = axios

Vue.config.productionTip = false

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