SpringBoot-Vue实现增删改查及分页小DEMO

发布网友 发布时间：2022-09-22 13:06

我来回答

共1个回答

热心网友 时间：2023-11-25 22:57

主要通过后端 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 上。