ElementUI

  • 脚手架基本配置
  • 切换模拟数据来源
  • 脚手架目录结构
  • elementUI执行流程分析
  • 活动管理案例
  • 活动列表
  • 活动新增
  • 活动修改
  • 活动删除
  • api代码优化


脚手架基本配置

Element 饿了么前端出品的一套 Vue.js 后台组件库

一、解压vueAdmin-template-master

二、批量安装

cnpm install

三、修改main.js

element plus zindex是如何计算的 element yi_ElementUI


更改为zh-CN

import locale from 'element-ui/lib/locale/lang/zh-CN'

四、更改index.js

element plus zindex是如何计算的 element yi_node.js_02


改为false

useEslint: false

五、运行

npm run dev

element plus zindex是如何计算的 element yi_javascript_03


注意：这个工程中所有的数据，全部来自于easymock

切换模拟数据来源

将模拟数据的来源切换到自己的easymock中

首先配置两个接口

一、后台登陆接口

element plus zindex是如何计算的 element yi_ElementUI_04


element plus zindex是如何计算的 element yi_vue_05


二、用户信息接口

element plus zindex是如何计算的 element yi_javascript_06


切换到自己的easymock

一、找到dev.env.js

element plus zindex是如何计算的 element yi_javascript_07

二、更改url

element plus zindex是如何计算的 element yi_javascript_08


三、重新启动

npm run dev

成功获取数据

element plus zindex是如何计算的 element yi_ElementUI_09

脚手架目录结构

element plus zindex是如何计算的 element yi_html_10

elementUI执行流程分析

element plus zindex是如何计算的 element yi_ElementUI_11

活动管理案例

首先，将文档同步到easymock，修改模拟数据

element plus zindex是如何计算的 element yi_html_12

活动列表

一、配置路由

//活动路由
  {
    path: '/gathering',
    component: Layout,
    name: 'Gathering',
    meta: { title: '活动管理', icon: 'example' },
    children: [
      {
        path: 'gathering',
        name: 'Gathering',
        component: () => import('@/views/table/gathering'),
        meta: { title: '活动管理', icon: 'table' }
      }
    ]
  },

二、编写活动列表api

//活动管理的api
import request from '@/utils/request'

export default {
    //获取活动列表
    getList:function(){
        return request({
            url: '/gathering/gathering',
            method: 'get',
        })
    }
}

三、编写vue页面

<template>
  <div>
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="活动ID" width="150">
      </el-table-column>
      <el-table-column prop="name" label="活动名称" width="150">
      </el-table-column>
      <el-table-column prop="summary" label="活动摘要" width="300">
      </el-table-column>
      <el-table-column prop="sponsor" label="主办方" width="150">
      </el-table-column>
      <el-table-column prop="starttime" label="开始时间" width="150">
      </el-table-column>
      <el-table-column prop="endtime" label="截至时间" width="150">
      </el-table-column>
      <el-table-column prop="city" label="举办城市" width="150">
      </el-table-column>
      <el-table-column fixed="right" 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>
  </div>
</template>

<script>
  import gatheringApi from "@/api/gathering";
  export default {
    data() {
      return {
        list: []
      };
    },
    created() {
      this.fetchData();
    },
    methods: {
      fetchData: function () {
        //调用api查询数据
        //then：获取响应
        gatheringApi.getList().then(response => {
          this.list = response.data;
        });
      }
    }
  };

</script>

<style>
</style>

效果

element plus zindex是如何计算的 element yi_vue_13

四、添加活动筛选和分页功能
1、api

//活动分页
    searchPage:function(searchMap,page,size){
        return request({
            url: `/gathering/gathering/search/${page}/${size}`,
            method: 'post',
            data:searchMap
        })
    }

2、vue页面

<template>
  <div>
    <!--
      form表单
      :model：查询对象
      el-input：表单项
      v-model：对象的属性
      
       -->
    <br>
    <el-row>
      <el-col :span="12"><div class="el-row"></div></el-col>
      <el-col :span="12">
        <div>
          <el-form :inline="true" :model="searchMap" class="demo-form-inline">
            <el-form-item label="活动名称">
              <el-input v-model="searchMap.name" placeholder="活动名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchPage()">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-col>
    </el-row>
    
    
    <!-- 活动列表 -->
    <el-table :data="list" border style="width: 100%">
      <el-table-column prop="id" label="活动ID" width="150">
      </el-table-column>
      <el-table-column prop="name" label="活动名称" width="150">
      </el-table-column>
      <el-table-column prop="summary" label="活动摘要" width="300">
      </el-table-column>
      <el-table-column prop="sponsor" label="主办方" width="150">
      </el-table-column>
      <el-table-column prop="starttime" label="开始时间" width="150">
      </el-table-column>
      <el-table-column prop="endtime" label="截至时间" width="150">
      </el-table-column>
      <el-table-column prop="city" label="举办城市" width="150">
      </el-table-column>
      <el-table-column fixed="right" 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>
    <!--分页组件
        @size-change：每页查询条数发生变化后触发的方法
        @current-change：页码发生变化时发生的方法
        :current-page：当前页码
        :page-sizes：所支持的每页查询条数的数组
        :page-size：默认每页查询的条数
        :total：总记录数
     -->
    <el-pagination
      @size-change="searchPage"
      @current-change="searchPage"
      :current-page.sync="page"
      :page-sizes="[5,10,20]"
      :page-size="10"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>

<script>
  import gatheringApi from "@/api/gathering";
  export default {
    data() {
      return {
        list: [],
        searchMap:{},
        page:1,
        size:10,
        total:0
      };
    },
    created() {
      this.searchPage();
    },
    methods: {
      fetchData: function () {
        //调用api查询数据
        //then：获取响应
        gatheringApi.getList().then(response => {
          this.list = response.data;
        });
      },
      //筛选
      // search:function(){
      //   gatheringApi.search(this.searchMap).then(response =>{
      //     this.list = response.data;
      //   })
      // }
      searchPage:function(){
        gatheringApi.searchPage(this.searchMap,this.page,this.size).then(response => {
          this.list = response.data.rows;
          this.total = response.data.total;
        })
      }
    }
  };

</script>

<style>
  .el-row {
      margin-bottom: 5px;
      margin-left: 500px;
  }
</style>

element plus zindex是如何计算的 element yi_javascript_14

注意：如果要进行布局，则可按照文档来进行布局，但需要进行注意，当布局中有不需要的部分时，需要添加el-row的css标签来占住该列，主要是要有margin-bottom属性。

如果还是没有效果，则在main.js中添加

import 'element-theme-chalk';

代码示例

<el-row>
  <el-col :span="12"><div class="el-row"></div></el-col>
  <el-col :span="12"><div class="el-row"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 5px;
  }
  .el-col {
    border-radius: 4px;
  }
</style>

活动新增

一、添加对话框

<!-- 新增对话框
         visible.sync：是否弹出
     -->
    <el-dialog title="新建活动" :visible.sync="dialogFormVisible">
      <el-form :model="pojo">
        <el-form-item label="活动名称" label-width="150px">
          <el-input v-model="pojo.name" autocomplete="off" style="width:350px;"></el-input>
        </el-form-item>
        <el-form-item label="活动摘要" label-width="150px">
          <el-input v-model="pojo.summary" autocomplete="off" style="width:350px;"></el-input>
        </el-form-item>
        <el-form-item label="活动详情" label-width="150px">
          <el-input v-model="pojo.detail" autocomplete="off" style="width:350px;"></el-input>
        </el-form-item>
        <el-form-item label="主办方" label-width="150px">
          <el-input v-model="pojo.sponsor" autocomplete="off" style="width:350px;"></el-input>
        </el-form-item>
        <el-form-item label="开始时间" label-width="150px">
          <el-date-picker v-model="pojo.starttime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="截止时间" label-width="150px">
          <el-date-picker v-model="pojo.endtime" type="date" placeholder="选择日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="活动状态" label-width="150px">
          <el-switch v-model="pojo.state" active-color="#13ce66" inactive-color="#ff4949" 
          active-value="1" inactive-value="0"
          active-text="可用" inactive-text="不可用"></el-switch>
        </el-form-item>
        <el-form-item label="举办地址" label-width="150px">
          <el-input v-model="pojo.address" autocomplete="off" style="width:350px;"></el-input>
        </el-form-item>

      </el-form>
      
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="save()">确 定</el-button>
      </div>
    </el-dialog>

步骤：点击新建按钮，使对话框的dialogFormVisible属性值为true

二、编写api

//新增活动
    save:function(pojo){
        return request({
            url: `/gathering/gathering`,
            method: 'post',
            data:pojo
        })
    }

三、编写js
1、调用api
2、美化提示框，显示成功或失败消息
3、成功后，关闭弹出层，刷新列表数据，清空pojo数据

//新增活动
      save:function(){
        gatheringApi.save(this.pojo).then(response =>{
          //美化提示框
          this.$message({
            showClose: true,
            message: response.message,
            type: response.flag?'success':'error'
          });
          //新增成功后，关闭弹出层，刷新列表数据，清空pojo数据
          if(response.flag){
            this.dialogFormVisible=false;
            this.searchPage(),
            this.pojo={}
          }
        })
      }

四、美化对话框
添加日期选择器和开关

element plus zindex是如何计算的 element yi_vue_15

活动修改

活动修改分为回显和修改
一、活动修改api

//根据id查询活动
    findById:function(id){
        return request({
            url: `/gathering/gathering/${id}`,
            method: 'get'
        })
    },
    //根据id修改
    update:function(id,pojo){
        return request({
            url: `/gathering/gathering/${id}`,
            method: 'put',
            data:pojo
        })
    },
    saveOrUpdate:function(id,pojo){
        if(id == undefined || id == null || id == ''){
            return this.save(pojo)
        }else{
            return this.update(id,pojo)
        }
    }

二、js
注意：保存和修改使用同一个对话框，通过是否存在id来区分两个方法

//新增/编辑活动
      save:function(){
        gatheringApi.saveOrUpdate(this.id,this.pojo).then(response =>{
          //美化提示框
          this.$message({
            showClose: true,
            message: response.message,
            type: response.flag?'success':'error'
          });
          //新增成功后，关闭弹出层，刷新列表数据，清空pojo数据
          if(response.flag){
            this.dialogFormVisible=false;
            this.searchPage();
            this.pojo={};
            this.id=null;
          }
        })
      },
      //编辑活动之回显
      findById:function(id){
        gatheringApi.findById(id).then(response =>{
          //绑定数据到pojo
          this.pojo = response.data;
          //显示对话框
          this.dialogFormVisible=true;
          //给id属性赋值
          this.id = id;
        })
      }

活动删除

一、api

deleteById:function(id){
        return request({
            url: `/${group_name}/${api_name}/${id}`,
            method: 'delete'
        })
    }

二、js

deleteById:function(id){
        //删除确认
          //消息提示
          this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            //点击确定后执行操作
            gatheringApi.deleteById(id).then(response => {
              this.$message({
                type: response.message?'success':'error',
                message: response.message
              });
              //查询成功，重新查询
              if(response.flag){
                this.searchPage();
              }
            })
            
          }).catch(() => {
            //点击取消执行的方法，默认将框关掉
            this.$message({
              type: 'info',
              message: '已取消删除'
            });          
          });
      }

api代码优化

如果以restful风格进行开发，可以将活动api作为模板，提取出group_name和api_name

//活动管理的api
import request from '@/utils/request'

const group_name="gathering"
const api_name="gathering"

export default {
    //获取活动列表
    getList:function(){
        return request({
            url: `/${group_name}/${api_name}`,
            method: 'get',
        })
    },
    //根据条件查询活动列表
    search:function(searchMap){
        return request({
            url: `/${group_name}/${api_name}/search`,
            method: 'post',
            data:searchMap
        })
    },
    //活动分页
    searchPage:function(searchMap,page,size){
        return request({
            url: `/${group_name}/${api_name}/search/${page}/${size}`,
            method: 'post',
            data:searchMap
        })
    },
    //新增活动
    save:function(pojo){
        return request({
            url: `/${group_name}/${api_name}`,
            method: 'post',
            data:pojo
        })
    },
    //根据id查询活动
    findById:function(id){
        return request({
            url: `/${group_name}/${api_name}/${id}`,
            method: 'get'
        })
    },
    //根据id修改
    update:function(id,pojo){
        return request({
            url: `/${group_name}/${api_name}/${id}`,
            method: 'put',
            data:pojo
        })
    },
    saveOrUpdate:function(id,pojo){
        if(id == undefined || id == null || id == ''){
            return this.save(pojo)
        }else{
            return this.update(id,pojo)
        }
    },
    deleteById:function(id){
        return request({
            url: `/${group_name}/${api_name}/${id}`,
            method: 'delete'
        })
    }

}