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

    <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格式化時間

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

 

一群人急匆匆地趕路，突然，一個人停了下來。旁邊的人很奇怪：為什么不走了？停下的人一笑：走得太快，靈魂落在了后面，我要等等它。 ​​​