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. Nhibernate mapping 文件编写

    生成工具软件 现在生成工具软件有很多了,例如商业软件:NMG.CodeSmith.Visual NHibernate,开源软件:MyGeneration.NHibernate Modeller.AjG ...

  2. flexbox学习

    https://philipwalton.github.io/solved-by-flexbox/ http://www.ruanyifeng.com/blog/2015/07/flex-gramma ...

  3. 优化IIS7.5支持10万个同时请求windows 2008 R2

    通过对IIS7的配置进行优化,调整IIS7应用池的队列长度,请求数限制,TCPIP连接数等方面,从而使WEB服务器的性能得以提升,保证WEB访问的访问流畅. -

  4. 再谈自主开发与企业IT管理

    前两天写<自主开发与带兵打仗>分析了一下自主开发的利与弊,得到了园内不少朋友的反馈,但我觉得还有很多东西没有交待清楚,可能有很多朋友也跟我一样在公司的IT部门,有自己的研发团队也有很多外购 ...

  5. iOS开发之Xcode 6更新默认不支持armv7s架构

    最近一次的Xcode 6更新默认不再支持arm7s架构,究竟是要废除不用呢还是仅仅只是一个疏忽? 目前的Xcode 6配置里定义${ARCHS_STANDARD}为armv7, arm64,当然这个定 ...

  6. Android基本控件之RadioGroup

    我们在手机上经常看到一堆选项,但是我们只能选择一个,那么在Android中,这个控件就叫做RadioButton,也就是单选按钮的意思,他们之所以能够达到只能选择一个的效果,是因为有一个RadioGr ...

  7. ios在SQLite3基本操作

    iOS关于sqlite3操作 iPhone中支持通过sqlite3来訪问iPhone本地的数据库. 详细用法例如以下 1:加入开发包libsqlite3.0.dylib 首先是设置项目文件.在项目中加 ...

  8. IDEA 安装scala插件

    安装scala插件一般有两种方式,在IDEA里面下载或者手动安装 手动安装 首先是下载需要的插件包,官网下载实在太慢,这里提供我下载好的文件,会按时更新成最新版 https://pan.baidu.c ...

  9. ES6 let和const命令(3)

    const 用来声明常量.一旦声明,就不能改变. const在声明必须初始化,只声明不赋值会出错 const的作用域与let一样,只在声明的块级作用域有效. const命令声明的常量也不提升,同样存在 ...

  10. 开发人员的必备工具Git(初级)

    Git是什么 Git是目前世界上最先进的分布式版本控制系统. 这个软件用起来就应该像这个样子,能记录每次文件的改动: 举个栗子 :       版本 用户 说明 日期 1 张三 删除了软件服务条款5 ...