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

1. 代码地址（如果有帮助，请点个Star）
   1. vue：https://github.com/wwt729/ElementUIAdmin-master.git
   2. springboot后端：https://github.com/wwt729/managemail.git
2. 相关技术
   1. vue2：https://cn.vuejs.org/v2/guide/
   2. element ：基于vuejs2.0的ui组件库
   3. axios：向后台发送请求，https://www.kancloud.cn/yunye/axios/234845
   4. moment：时间格式化组件
3. 流程
   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

6.http://localhost:8080/ 访问

3.主要代码介绍

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

    
      
        
          
          
        
      
      
        
          
          
        
      
      
        搜索
      
    

　　　　2.分页

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

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> 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

 

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