vue+element搭建后台管理系统(支持table条件搜索)
菜谱微信小程序,操作简单,教程详细,欢迎大家使用
- 代码地址(如果有帮助,请点个Star)
- vue:https://github.com/wwt729/ElementUIAdmin-master.git
- springboot后端:https://github.com/wwt729/managemail.git
- 相关技术
- vue2:https://cn.vuejs.org/v2/guide/
- element :基于vuejs2.0的ui组件库
- axios:向后台发送请求,https://www.kancloud.cn/yunye/axios/234845
- moment:时间格式化组件
- 流程
- 安装node,参考https://www.cnblogs.com/729log/p/6244450.html
- 使用淘宝NPM镜像:$ npm install -g cnpm --registry=https://registry.npm.taobao.org
- 安装 vue-cli VUE的脚手架工具:cnpm install vue-cli -g
- idea安装vue插件,并新建vue项目:new ->project 选择Static Web 选择vue.js,取项目名,一路next,有些选项需要选择yes/no,请参考下图
5.下载依赖并启动:cnpm install 和 cnpm run serve
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
一群人急匆匆地赶路,突然,一个人停了下来。旁边的人很奇怪:为什么不走了?停下的人一笑:走得太快,灵魂落在了后面,我要等等它。