SpringBoot-Vue实现增删改查及分页小DEMO
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了SpringBoot-Vue实现增删改查及分页小DEMO相关的知识,希望对你有一定的参考价值。
参考技术A主要通过后端 Spring Boot 技术和前端 Vue 技术来简单开发一个demo,实现增删改查、分页功能以及了解Springboot搭配vue完成前后端分离项目的开发流程。
PS:假设以上的的工具你都安装好啦,写CRUD小DEMO时进坑了,这篇blog参考一下,仅供参考,仅供参考😤,,如有不足请不吝赐教。
1、File->New->Project...
2、选择 Spring Initializr ,然后选择默认的 url 点击next
1、更新pom.xml如下:
2、新建 demo\\src\\main\\java\\com\\example\\demo\\entity\\User.java
3、更新demo\\src\\main\\resources\\application.properties
4、新建demo\\src\\main\\java\\com\\example\\demo\\mapper\\UserMapper.java
5、新建demo\\src\\main\\resources\\mapper\\UserMapper.xml
6、新建demo\\src\\main\\java\\com\\example\\demo\\service\\UserService.java
7、新建demo\\src\\main\\java\\com\\example\\demo\\controller\\UserCtrl.java
9、后端就写完了,整体结构如下:
1、win+R->cmd->进入项目目录依次执行命令: vue init webpack projectName 、 cd projectName 、 npm install 、 npm run dev 如图所示:
1、在项目根目录安装axios执行命令 npm install axios ,安装element ui 执行命令 npm i element-ui -S
2、更新vue01\\src\\App.vue
3、更新vue01\\src\\main.js
4、更新vue01\\src\\components\\HelloWorld.vue
方式一:
在 vue01\\config\\index.js 文件中配置 proxyTable ,如下:
方式二:
在vue-cli项目根目录执行命令 npm run build ,编译完成后将dist/static文件夹copy至springboot项目的 src/main/resources/static 目录下然后直接启动springboot项目就OK了。
大材小用,✍这篇博客の源码在 我的GitHub 上。
以上是关于SpringBoot-Vue实现增删改查及分页小DEMO的主要内容,如果未能解决你的问题,请参考以下文章
springDataJPQL实现增删改查及分页,原生sql查询,根据方法命名规则实现查询
04-springboot整合elasticsearch初识-简单增删改查及复杂排序,分页,聚合操作