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

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