ElementUI：ElementUI脚手架介绍与配置，elementUI执行流程分析，开发后台活动管理

最新推荐文章于 2024-04-18 19:49:12 发布

隔叶听风

最新推荐文章于 2024-04-18 19:49:12 发布

阅读量1.1k

点赞数 2

分类专栏： JavaEE学习日志前端文章标签： vue javascript ElementUI html node.js

本文链接：https://blog.csdn.net/Sakuraaaaaaa/article/details/108219301

版权

JavaEE学习日志同时被 2 个专栏收录

168 篇文章 8 订阅

订阅专栏

前端

29 篇文章 0 订阅

订阅专栏

脚手架基本配置

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

一、解压vueAdmin-template-master

二、批量安装

cnpm install

三、修改main.js
在这里插入图片描述
更改为zh-CN

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

四、更改index.js
在这里插入图片描述
改为false

useEslint: false

五、运行

npm run dev

在这里插入图片描述
注意：这个工程中所有的数据，全部来自于easymock

切换模拟数据来源

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

首先配置两个接口
一、后台登陆接口
在这里插入图片描述

二、用户信息接口

切换到自己的easymock
一、找到dev.env.js

二、更改url
在这里插入图片描述
三、重新启动

npm run dev

成功获取数据
在这里插入图片描述

脚手架目录结构

在这里插入图片描述

elementUI执行流程分析

在这里插入图片描述

活动管理案例

首先，将文档同步到easymock，修改模拟数据
在这里插入图片描述

活动列表

一、配置路由

//活动路由
  {
    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>

效果
在这里插入图片描述

四、添加活动筛选和分页功能
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>

在这里插入图片描述

注意：如果要进行布局，则可按照文档来进行布局，但需要进行注意，当布局中有不需要的部分时，需要添加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={}
          }
        })
      }

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

在这里插入图片描述

活动修改

活动修改分为回显和修改
一、活动修改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'
        })
    }

}

隔叶听风

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
ElementUI：ElementUI脚手架介绍与配置，elementUI执行流程分析，开发后台活动管理

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

扫一扫