ElementUI---01

ElementUI-基于vue前端ui框架

• 搭建static web项目
• 安装脚手架
  npm install -g vue-cli
  vue init webpack
• 运行项目
  npm run dev
• 安装elementui
  api----http://element-cn.eleme.io/#/zh-CN
  输入命令
  npm install element -ui -S
• 导入
  在main.js中引入并使用elementui

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

Mock

Mock.js （官网http://mockjs.com/）是一款模拟数据生成器，旨在帮助前端人员独立于后端进行开发，帮助编写单元测试。提供了以下模拟功能：
1.根据数据模板生成模拟数据
2.模拟 Ajax 请求，生成并返回模拟数据
3.基于 HTML 模板生成模拟数据

• 准备数据–安装mockjs
  输入命令安装
  npm install mockjs
• 安装axios并且引入axios模块
  npm install axios
  引入

 //引入axios
import axios from 'axios';
/*对Vue对象进行扩展属性$http*/
Vue.prototype.$http = axios;

Elementui+Crud实现

• main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
//引入elementui
import ElementUI from 'element-ui'; //引入核心js组件
import 'element-ui/lib/theme-chalk/index.css';//引入依赖的样式
//引入axios
import axios from 'axios';
/*对Vue对象进行扩展属性$http*/
Vue.prototype.$http = axios;
//使用elementui
Vue.use(ElementUI);
Vue.use(axios);
Vue.config.productionTip = false;

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

• index.js
  浏览器通过/user进行访问

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from '@/components/User'

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user',
      name: 'User',
      component: User
    },
  ]
})

• mockjs生成模拟数据—user.js

// 引入 Mock
var Mock = require('mockjs')
let result = Mock.mock({
  'list|203':[{
    'id': '@increment',
    'name': '@cname',
    'phone': /^1[0-9]{10}$/,
    'email': '@email',
    'address': '@county(true)',
    'createTime': '@date("yyyy-MM-dd")'
  }]
})
// 输出结果
//console.log(JSON.stringify(data))
//对外暴露资源(接口)
Mock.mock("/user/list","post", function(options){
    //返回数据
    let data = result.list;
    //获取json字符串
    let jsonStr = options.body;
    //转成json对象
    let jsonObj = JSON.parse(jsonStr);
    //获取当前页
    let currentPage = jsonObj.currentPage;
    //获取每页条数
    let pageSize = jsonObj.pageSize;

    //计算分页  后台根据begin和end进行分页
    let begin = (currentPage-1)*currentPage;
    let end = pageSize*currentPage;
   return {
          result:data.slice(begin,end),
          total:data.length
   };
});
//删除
Mock.mock("/user/remove","post", function(options){
      return {
        success:true,
        msg:"删除成功"
      }
});
//批量删除
Mock.mock("/user/batchRemove","post", function(options){
      return {
        success:true,
        msg:"删除成功"
      }
});

• user.vue

<template>
  <div>
    <el-dialog :visible.sync="visible" :title="title">
      <el-form :inline="true" :model="form" class="demo-form-inline">
        <el-form-item label="用户名">
          <el-input v-model="form.name" placeholder="用户名"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="form.email" placeholder="邮箱"></el-input>
        </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>
    <!--高级查询表单-->
    <el-form :inline="true" :model="searchForm" class="demo-form-inline">
      <el-form-item label="用户名">
        <el-input v-model="searchForm.name" placeholder="用户名"></el-input>
      </el-form-item>
      <el-form-item label="邮箱">
        <el-input v-model="searchForm.email" 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-table
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.8)"
      :data="tableData"
      @selection-change="selectionChange"
      style="width: 100%">

      <el-table-column
        type="selection">

      </el-table-column>
      <el-table-column
        prop="name"
        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="address"
        label="地址">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="日期">
      </el-table-column>
      <!--按钮组-->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="edit(scope.$index, scope.row)">编辑</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="remove(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-button size="mini" type="danger" style="float: left;margin-left: 20px" @click="batchRemove">批量删除</el-button>
    <div class="block">
      <span class="demonstration"></span>
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        :current-page="currentPage"
        :page-sizes="pageSizes"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
  </div>
  </div>
</template>

<script>
//引入user.js
import User from '../js/user';
export default {
  name: 'User',
  data () {
    return {
      //当前页
      currentPage:1,
      //每页显示条数
      pageSize:10,
      //选择每页显示条数
      pageSizes:[5,10,15,20],
      //总条数
      total:0,
      //存放数据
      tableData:[],
      //加载的样式
      loading:true,
      //存放复选框选中的数据
      selectRow:[],
      //高级查询
      searchForm:{
          name:"",
          email:""
      },
      //添加数据
      form:{
        name:"",
        email:""
      },
      visible:false,
      //添加框的标题
      title:""
    }
  },
  methods:{
    //当前页改变时触发事件
    currentChange(val){
      //页数改变时设置当前页数
      this.currentPage = val;
      //当前页改变后 加载列表 因为双向绑定
      this.loadUserList();
    },
    //设置每页显示条数时触发事件
    sizeChange(val){
      //只要修改每页显示条数就回到第一页
      this.currentPage = 1;
      //每页显示条数改变时设置
      this.pageSize = val;
      this.loadUserList();

    },
    //复选框选中的数据放进selectRow中
    selectionChange(val) {
      this.selectRow = val;
    },
    //编辑
    edit(index,row){
      for(let k in row){//回显
          this.form[k] = row[k];
      }
      this.visible= true;
      this.title="修改用户"
    },
    //删除单个数据
    remove(index,row){
      this.$confirm('确认要删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$http.post("/user/remove",row).then(res=>{
          if (res.data.success){//返回的数据如果为true就删除
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //删除之后刷新页面
            this.loadUserList();
          }
        });
      }).catch(() => {
      });

    },
    //批量删除
    batchRemove(){
        if(!this.selectRow.length){
          this.$message.error('亲！请选中数据进行删除哦！！');
          return;
        }
      this.$confirm('确认要删除选中的数据吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(() => {
        this.$http.post("/user/batchRemove",{"row":this.selectRow}).then(res=>{
          if (res.data.success){//返回的数据如果为true就删除
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            //删除之后刷新页面
            this.loadUserList();
          }
        });
      });
    },
    //高级查询
    search(){
      this.loadUserList();
    },
    //添加
    add(){
      this.form={};
      this.visible= true;
      this.title="添加用户"
    },
    //加载数据列表
    loadUserList(){
      //查询传递参数 会自动把param封装到options中
      let param = {"pageSize":this.pageSize,"currentPage":this.currentPage,"search":this.searchForm};
      //加载框
      this.loading=true;
      this.$http.post("/user/list",param).then(res=>{
        //赋值给tableData 前台展示数据
        this.tableData = res.data.result;
        //设置总条数
        this.total = res.data.total;
        //加载完成后 加载样式不显示
        this.loading=false;
      });
    }
  },
  mounted(){
      //发送ajax请求加载数据列表
      this.loadUserList();
  },
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>