vue+element搭建后台管理系统（支持table条件搜索）

代码地址（如果有帮助，请点个Star）
1. vue：https://github.com/wwt729/ElementUIAdmin-master.git
2. springboot后端：https://github.com/wwt729/managemail.git
相关技术
1. vue2：https://cn.vuejs.org/v2/guide/
2. element ：基于vuejs2.0的ui组件库
3. axios：向后台发送请求，https://www.kancloud.cn/yunye/axios/234845
4. moment：时间格式化组件
流程
1. 安装node，参考https://www.cnblogs.com/729log/p/6244450.html
2. 使用淘宝NPM镜像：$ npm install -g cnpm --registry=https://registry.npm.taobao.org
3. 安装 vue-cli VUE的脚手架工具：cnpm install vue-cli -g
4. idea安装vue插件，并新建vue项目：new ->project 选择Static Web 选择vue.js，取项目名，一路next，有些选项需要选择yes/no，请参考下图

5.下载依赖并启动：cnpm install 和 cnpm run serve

3.主要代码介绍

　　　　1.搜索条件，启用 flex 布局，justify(排版方式)：start[居左]、center[居中]、end[居右]、space-between、space-around

    <el-row  type="flex"  class="row-bg" justify="end">
      <el-col :span="4">
        <el-select v-model="sendCount" clearable  placeholder="请选择发送次数">
          <el-option
            v-for="item in sendCountList"
            :key="item.key"
            :label="item.label"
            :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="4">
        <el-select v-model="mailStatusSNMP" clearable  placeholder="请选择发送状态">
          <el-option
            v-for="item in mailStatusList"
            :key="item.key"
            :label="item.label"
            :value="item.key">
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-button  type="primary" icon="el-icon-search" @click="getmails()">搜索</el-button>
      </el-col>
    </el-row>

　　　　2.分页

   <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

　　　　3.请求方法，使用qs封装参数，使用moment格式化时间

扫描二维码关注公众号，回复： 7012746 查看本文章

getmails () {
        let postData = this.$qs.stringify({
          page:this.currentPage,
          rows:this.pageSize,
          status: this.mailStatusSNMP,
          sendCount: this.sendCount
        });
        this.loading = true;
        this.$http({method:"post",url:'http://localhost:8086/mail/page',data:postData}).then((res) => {
          console.log(res.data);
          if (res.data == ''){
            this.mails= [];
            this.total=0;
          }else {
            let chan=res.data.items.length;
            for (let i = 0; i < chan; i++) {
              if (res.data.items[i].status==0){
                res.data.items[i].status="待发送";
                res.data.items[i].sendTime=moment(res.data.items[i].sendTime).format("YYYY-MM-DD HH:mm:ss")
              }else if (res.data.items[i].status==1){
                res.data.items[i].status="已发送";
                res.data.items[i].sendTime=moment(res.data.items[i].sendTime).format("YYYY-MM-DD HH:mm:ss")
              } else if (res.data.items[i].status==2) {
                res.data.items[i].status="发送失败";
                res.data.items[i].sendTime=moment(res.data.items[i].sendTime).format("YYYY-MM-DD HH:mm:ss")
              }
            }
            this.mails = res.data.items;
            this.total= res.data.total
          }
        }).catch((err) => {
          console.error(err)
        })
      },

　　4.后端接受请求controller

    @PostMapping("page")
    public ResponseEntity<PageResult<MailDTO>> querySpuPage(
            @RequestParam(defaultValue = "1") int page,//当前页
            @RequestParam(defaultValue = "10") int rows,//每页条数
            @RequestParam(value = "status",required = false)Integer status,//查询条件1
            @RequestParam(value = "sendCount",required = false)Integer sendCount //查询条件2
　　　　　　)
    {
        return ResponseEntity.ok(mailService.queryMailList(page,rows,status,sendCount));
    }

模板参考：https://www.cnblogs.com/similar/p/10240341.html

一群人急匆匆地赶路，突然，一个人停了下来。旁边的人很奇怪：为什么不走了？停下的人一笑：走得太快，灵魂落在了后面，我要等等它。

vue+element搭建后台管理系统（支持table条件搜索）

猜你喜欢