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

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

vue+element搭建后台管理界面(支持table条件搜索)的更多相关文章

  1. vuejs 和 element 搭建的一个后台管理界面

    介绍: 这是一个用vuejs2.0和element搭建的后台管理界面. 相关技术: vuejs2.0:渐进式JavaScript框架,易用.灵活.高效,似乎任何规模的应用都适用. element:基于 ...

  2. 使用vuejs2.0和element-ui 搭建的一个后台管理界面

    说明: 这是一个用vuejs2.0和element-ui搭建的后台管理界面. 相关技术: vuejs2.0:一套构建用户界面的渐进式JavaScript框架,易用.灵活.高效. element-ui: ...

  3. Django后台管理界面

    之前的几篇记录了模板视图.模型等页面展示的相关内容,这篇主要写一下后台admin管理界面的内容. 激活管理界面 Django管理站点完全是可选择的,之前我们是把这些功能给屏蔽掉了.记得上篇中Djang ...

  4. 第二百三十节,jQuery EasyUI,后台管理界面---后台管理

    jQuery EasyUI,后台管理界面---后台管理 一,admin.php,后台管理界面 <?php session_start(); if (!isset($_SESSION['admin ...

  5. 基于bootstrap的漂亮网站后台管理界面框架汇总

    基于bootstrap的漂亮网站后台管理界面框架汇总 10个最新的 Bootstrap 3 管理模板 这里分享的 10 个模板是从最新的 Bootstrap 3 管理模板集合中挑选出来的,可以帮助你用 ...

  6. 使用Bootstrap+metisMenu完成简单的后台管理界面

    零. 写在前面 作者最近在一个小项目中需要写后台管理界面,在互联网上绕了一圈,最后决定使用Bootstrap+metisMenu来完成.理由1:Bootstrap是目前流行的前端框架,风格简约,简单易 ...

  7. 使用django的admin的后台管理界面

    django的admin后台管理界面是方便我们对数据库操作的  是一个在浏览器显示的  图形化界面数据库操作 我们先在django中的admin中把我们需要在图形化界面中进行操作的表导入进去: 先把m ...

  8. activemq无法启动且后台管理界面进不去的解决办法

    从官网下载了一个最新的activemq,目前最新版本是5.14.5 我下载的是windows版本,通过执行%activemq home%/bin/win64/InstallService.bat,可以 ...

  9. Solr后台管理界面配置

    配置来源 https://stackoverflow.com/questions/28043957/how-to-set-apache-solr-admin-password 注意:配置用户名密码后 ...

  10. 第二百二十九节,jQuery EasyUI,后台管理界面---后台登录

    jQuery EasyUI,后台管理界面---后台登录 登录原理图 一,login.php,登录界面 <!DOCTYPE html> <html> <head> & ...

随机推荐

  1. html meta标签使用总结

    meta标签作用 META标签是HTML标记HEAD区的一个关键标签,提供文档字符集.使用语言.作者等基本信息,以及对关键词和网页等级的设定等,最大的作用是能够做搜索引擎优化(SEO). PS:便于搜 ...

  2. php 生日提醒程序

    <?php   $startdate=time();  //当前时间   $birth="2013-05-13";  // 出生日期  $arr=explode(" ...

  3. Prepared Java infrastructure for distributed scenarios

    code is sited on: https://github.com/zhoujiagen/javaiospike progress 2015/5/27 Nio/Nio2 examples, us ...

  4. Codeforces Round #372 (Div. 1) B. Complete The Graph (枚举+最短路)

    题目就是给你一个图,图中部分边没有赋权值,要求你把无权的边赋值,使得s->t的最短路为l. 卡了几周的题了,最后还是经群主大大指点……做出来的…… 思路就是跑最短路,然后改权值为最短路和L的差值 ...

  5. python:Attempted relative import in non-package

    problem:Attempted relative import in non-package 所谓相对路径其实就是相对于当前module的路径,但如果直接执行脚本,这个module的name就是“ ...

  6. Git起步--git安装与初次运行git前配置

    在你开始使用 Git 前,需要将它安装在你的计算机上. 即便已经安装,最好将它升级到最新的版本. 你可以通过软件包或者其它安装程序来安装,或者下载源码编译安装. 一.Git安装 1. 在linux上安 ...

  7. LeetCode_Palindrome Partitioning II

    Given a string s, partition s such that every substring of the partition is a palindrome. Return the ...

  8. python 学习之爬虫练习

    通过学习python,写两个简单的爬虫,没用线程,本地抓取速度还不错,有些瑕疵就是抓的图片有些显示不出来,代码做个笔记记录下: # -*- coding:utf-8 -*- import re imp ...

  9. Linux-中断和中断处理

    1.中断 #中断使得硬件得以发出通知给处理器,本质上是一种电信号 #中断随时能够产生.内核随时会被打断 #不同设备的中断不同,每一个中断都通过一个唯一的数字标识.称为IRQ(中断请求) 2.中断处理程 ...

  10. gcc使用及动静态库制作

    一. GCC的使用 1. GCC的编译过程 (1)预处理(cpp)gcc -E(输出问价通常以 .i 结尾),将头文件展开,宏替换等操作: (2)编译器(gcc)gcc -S(输出问价以 .s 结尾) ...