Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目
Element UI
- 项目简介与演示
- 刷新页面时让组件默认为当前路由路径
- 删除时确认
- 分页功能的实现
- el-date-picke 日期少一天
前端部分源码:https://github.com/szluyu99/elementui-users_1
后端部分源码:
项目简介与演示
Element-UI + Vue.js + SpringBoot 实现的前后端分离入门项目。
刷新页面时让组件默认为当前路由路径
activeIndex
表示当前激活的页面,如果写死了刷新后会有 bug,因此动态获取当前路由路径。
data() {return {activeIndex: this.$route.path,};
},
删除时确认
注意 @onConfirm
这个事件是加载 el-popconfirm
标签上的。
<el-popconfirm title="这是一段内容确定删除吗?" @onConfirm="handleDelete(scope.$index, scope.row)"><el-button slot="reference" size="mini" type="danger">删除</el-button>
</el-popconfirm>
<script>export default {data() {},methods: {handleDelete(index, row) {console.log(index, row);this.$http.get("http://localhost:8989/user/delete?id=" + row.id).then((res) => {if (res.data.state) {this.$message({showClose: true,message: res.data.msg,type: 'success'});} else {this.$message({showClose: true,message: res.data.msg,type: 'error'});}});this.findAllTableData();},},}
</script>
分页功能的实现
mysql 分页查询:
<!--分页查询-->
<select id="findByPage" resultType="User">SELECT id, name, bir, sex, addressFROM t_userLIMIT #{start}, #{rows}
</select>
后端控制器:
@RestController
@RequestMapping("/user")
@CrossOrigin
public class UserController {@Autowiredprivate UserService userService;// 分页查询 @GetMapping("/findByPage")public Map<String, Object> findByPage(Integer pageNow, Integer pageSize) {Map<String, Object> result = new HashMap<>();pageNow = pageNow == null ? 1 : pageNow; // 不传当前页数默认为1pageSize = pageSize == null ? 4 : pageSize; // 不传当前页面显示条数默认显示4条List<User> users = userService.findByPage(pageNow, pageSize); // 分页查询Long totals = userService.findTotals();result.put("users", users);result.put("total", totals);return result;}}
前端页面:使用 分页组件;
<el-row><el-col :span="12" :offset="8"><div><!-- 分页组件 --><el-pagination style="margin: 15px 0px;" prev-text="上一页" next-text="下一页" backgroundlayout="prev, pager, next, sizes, jumper, total":page-sizes="[2,4,6,8,10]" :page-size="pageSize":total="total" :current-page="pageNow" @current-change="findPage"@size-change="findSize"></el-pagination></div></el-col>
</el-row>
<script>export default {data() {return {total: 0, // 总页数, 从后台查询获取pageNow: 1, // 当前页数, 默认为1pageSize: 4 // 当前页显示的数据条数, 默认为4}},methods: {findPage(page) { // 用来处理分页相关方法console.log("当前页数: " + page);this.pageNow = page;this.findAllTableDataByPage();},findSize(size) { // 用来处理每页显示记录发生变化的方法console.log("当前页面记录条数: " + size);this.pageSize = size;this.findAllTableDataByPage();},findAllTableDataByPage() {this.$http.get("http://localhost:8989/user/findByPage?pageNow=" + this.pageNow + "&pageSize=" + this.pageSize).then((res) => {// console.log(res.data);this.tableData = res.data.users;this.total = res.data.total;});}},created() {this.findAllTableDataByPage();}}
</script>
el-date-picke 日期少一天
Element-UI 中时间控件的默认时间为 国际标准时间,因此与北京时间差 8 个小时。
解决方案:在标签中增加属性 value-format="yyyy-MM-dd"
,然后 刷新页面;
<el-date-picker type="date" placeholder="选择日期" v-model="form.bir" value-format="yyyy-MM-dd">
</el-date-picker>
Element-UI + Vue.js + SpringBoot 实现前后端分离入门项目相关推荐
- Vue 脚手架结合 SpringBoot 构建前后端分离入门项目(实现增删改查)
Vue 脚手架构建前后端分离项目 项目简介与预览 数据库建表 主要模块代码 index.js 路由代码 User.vue 用户组件 RAP2 创建接口进行测试 切换路由组件的显示: this.$rou ...
- js 获得明天0点时间戳_Python 3+Django 3 结合Vue.js框架构建前后端分离Web开发平台实战...
点击上方"测试开发技术",选择设为"设为星标" 优质文章,第一时间送达! 学习全文大概需要 12分钟,内容实战性较强. 1. 前言 本篇将基于Python 3. ...
- 基于Springboot+vue前后端分离的项目--后端笔记
效果图: 1.前言 从零开始搭建一个项目最重要的是选择一个自己熟悉的框架,此项目使用Springboot框架来构建后端结构,使用vue来构建前端页面.数据层我们常用的是Mybatis,这里我大部分使 ...
- 基于vue springboot的前后端分离的化妆品商城
基于vue springboot的前后端分离的化妆品商城 技术介绍 后端: springboot mybatis ORM框架 mysql数据库 redis分布式缓存 Druid数据库连接池 前端: V ...
- Springboot+vue 社团管理系统(前后端分离)
Springboot+vue 社团管理系统(前后端分离) zero.项目功能设计图 一.数据库设计(项目准备) 1.建表 2.表目录 二.前端编写(vue) 1.搭建Vue框架 2.放入静态资源(as ...
- 解答网友提问 | 使用VS2022快速生成React/Angular/Vue.js + Web API前后端集成项目
前言 上次发表了<一键生成Vue.js + Web API前后端集成项目>后,有多位网友来问,有不有其他的前后端集成模板: 实际上,VS2022没有提供前后端集成项目模板. 但是,使用VS ...
- 一键生成Vue.js + Web API前后端集成项目
前言 默认情况下,Visual Studio提供了"基于Vue.js Web 应用程序"项目模板,可以生成Vue.js前端项目. 你需要另外创建Web API项目,调试时需要同时启 ...
- 一款小清新的 SpringBoot+ Mybatis 前后端分离后台管理系统项目
今日推荐 推荐3个快速开发平台 前后端都有 项目经验又有着落了推荐一个高仿微信的项目 有点屌!!一二线城市知名 IT 互联网公司名单(新版) 项目介绍 前后端分离架构,分离开发,分离部署,前后端互不影 ...
- 视频教程-SpringBoot2+Vue+AntV前后端分离开发项目实战-Java
SpringBoot2+Vue+AntV前后端分离开发项目实战 10多年互联网一线实战经验,现就职于大型知名互联网企业,架构师, 有丰富实战经验和企业面试经验:曾就职于某上市培训机构数年,独特的培训思 ...
最新文章
- appium-chromedriver@3.0.1 npm ERR! code ELIFECYCLE npm ERR! errno 1
- java session缓存_Java服务端采用Session的缓存oauth2.0授权用户信息
- Linux 下 Redis 安装详解
- LeetCode 983. 最低票价(动态规划)
- JavaScript之ajax
- 6000万条GitHub帖子告诉你:工作状态与表情符号强相关
- 大数据分析对企业起到什么作用
- Linux应用调试-strace命令
- 检查oracle用户默认密码的账户
- python基于混合多项式模型PCF实现数据曲线拟合
- 根据缺口的模式选股买股票,python 学习代码
- timesten java_windows下TimesTen的配置及使用
- Java 实现 POS 打印机无驱打印
- BC1.2 PD协议
- 文档多级列表_如何在Google文档中创建多级列表
- 游戏技巧-《文明6》的C盘爆满问题
- 程序员自爆奇葩入职原因:进腾讯是为了不用续费年费会员,进抖音是想天天上班刷抖音
- 系统中断服务器,windows7资源管理器中有一个 系统中断 描述为延迟过程调用和中断服务例程__这是安全的吗,windows7的系统进程吗...
- Web项目实战 | 购物系统v1.0 | 开发记录(一) | 大学生闲置物品交易系统 | 选择页面模板(附资源),使用 JQuery AJAX实现注册、登陆
- 【田姓】宗谱——【名人精粹】
热门文章
- createMap(Thread t, T firstValue)
- 家里无线网络每天不定时段出现网速很慢或者直接无连接,这是怎么回事?
- 如果我建一个外卖平台,不收取商家佣金和骑手提点,会不会成功?
- 魅族智能识屏怎么用才算是高科技?
- source insight 4 破解
- 在SQL Server中插入IN-T-SQL语句
- TypeError 之 Cannot convert undefined or null to object
- Visual Studio 2008 编译程序时的 mt.exe 返回错误
- HDU2161 Primes
- jsoup: Java HTML Parser