devbox
数据科学创新者
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用springboot+vue+mybatis-plus+element ui做一个简单的增删改查_springboot+vue+elementui基础增删改查

作者：数据科学创新者 | 2024-02-03 18:11:23

赞

踩

springboot+vue+elementui基础增删改查

tips：

本人刚学编程 纯纯的小白一个，内容不算好，但是可以值得借鉴；希望能靠这篇文章能得到大神的指点；我本来也就打算用文章复习一下刚学的知识；本篇文章主要是介绍增删改查，其余的配置代码也就一笔带过。如果内容不好，勿喷。

题外话：

后端基础学不好，学了就忘，前端也一样，让人很难受。做这个增删改查的时候可费了我大把大把的时间，刚开始学难免明知有坑还是要往里面跳，但这也不是个坏事，写代码不就是一遍一遍地去尝试，写的多了，踩得坑多了，你的知识你的认知就会越来越丰富。

刚开始写这个增删改查的时候，不会写就去网上查各种例子，例子很多，五花八门，愣是一个也看不懂，看的我是脑子嗡嗡的，以至于后面有一段时间就感觉脑袋很沉，转不动了，有没有刚学编程的同学和我有一样的感受；前话说的有点多了，不说了，下面开整。

一.springboot+vue+mybatis-plus增删改查

工具：后台Eclipse

           前台VsCode

          数据库MySQL

先给大家献上后端的所有类

学过springboot的都知道上面几个层都有啥作用吧，其实有的层我也不知道有何作用，其中有的层命名不一样，按照自己命名方式来主要是舒服。有的我都觉着多余，但就是这么写，我也不敢违抗啊。

层级调用：controller层-servic层-manager层-dao层

正片开始了

pom文件的依赖

  1.  
  2. <dependencies>
  3. 		<dependency>
  4. 			<groupId>org.springframework.boot</groupId>
  5. 			<artifactId>spring-boot-starter-web</artifactId>
  6. 			<exclusions>
  7. 				<exclusion>
  8. 					<groupId>org.apache.logging.log4j</groupId>
  9. 					<artifactId>log4j-to-slf4j</artifactId>
  10. 				</exclusion>
  11. 			</exclusions>
  12. 		</dependency>
  13. 		<!-- 热部署 -->
  14. 		<dependency>
  15. 			<groupId>org.springframework.boot</groupId>
  16. 			<artifactId>spring-boot-devtools</artifactId>
  17. 		</dependency>
  18. 		<dependency>
  19. 			<groupId>io.springfox</groupId>
  20. 			<artifactId>springfox-staticdocs</artifactId>
  21. 			<version>${io.springfox.version}</version>
  22. 			<scope>test</scope>
  23. 		</dependency>
  24. 		<dependency>
  25. 			<groupId>org.springframework.boot</groupId>
  26. 			<artifactId>spring-boot-starter-aop</artifactId>
  27. 		</dependency>
  28. 		<dependency>
  29. 			<groupId>org.springframework.boot</groupId>
  30. 			<artifactId>spring-boot-starter-cache</artifactId>
  31. 		</dependency>
  32. 		<dependency>
  33. 			<groupId>org.springframework.boot</groupId>
  34. 			<artifactId>spring-boot-configuration-processor</artifactId>
  35. 			<optional>true</optional>
  36. 		</dependency>
  37. 		<dependency>
  38. 			<groupId>commons-logging</groupId>
  39. 			<artifactId>commons-logging</artifactId>
  40. 			<version>1.2</version>
  41. 		</dependency>
  42. 		<dependency>
  43. 			<groupId>commons-lang</groupId>
  44. 			<artifactId>commons-lang</artifactId>
  45. 			<version>2.6</version>
  46. 		</dependency>
  47. 		<dependency>
  48. 			<groupId>mysql</groupId>
  49. 			<artifactId>mysql-connector-java</artifactId>
  50. 		</dependency>
  51. 		<dependency>
  52. 			<groupId>com.alibaba</groupId>
  53. 			<artifactId>druid</artifactId>
  54. 			<version>1.1.8</version>
  55. 		</dependency>
  56. 		<dependency>
  57. 			<groupId>com.baomidou</groupId>
  58. 			<artifactId>mybatis-plus-boot-starter</artifactId>
  59. 			<version>3.3.1</version>
  60. 		</dependency>
  61. 		<dependency>
  62. 			<groupId>com.thetransactioncompany</groupId>
  63. 			<artifactId>cors-filter</artifactId>
  64. 			<version>2.6</version>
  65. 		</dependency>
  66. 		<dependency>
  67. 			<groupId>com.thetransactioncompany</groupId>
  68. 			<artifactId>java-property-utils</artifactId>
  69. 			<version>1.9.1</version>
  70. 		</dependency>
  71. 		<dependency>
  72. 			<groupId>com.alibaba</groupId>
  73. 			<artifactId>fastjson</artifactId>
  74. 			<version>1.2.58</version>
  75. 		</dependency>
  76. 		<dependency>
  77. 			<groupId>net.sf.json-lib</groupId>
  78. 			<artifactId>json-lib</artifactId>
  79. 			<version>2.4</version>
  80. 			<classifier>jdk15</classifier>
  81. 		</dependency>
  82. 		<dependency>
  83. 			<groupId>joda-time</groupId>
  84. 			<artifactId>joda-time</artifactId>
  85. 		</dependency>
  86. 		<dependency>
  87. 			<groupId>org.jodd</groupId>
  88. 			<artifactId>jodd-http</artifactId>
  89. 			<version>3.9.1</version>
  90. 		</dependency>
  91. 		<dependency>
  92. 			<groupId>com.thoughtworks.xstream</groupId>
  93. 			<artifactId>xstream</artifactId>
  94. 			<version>1.4.11.1</version>
  95. 		</dependency>
  96. 		<dependency>
  97. 			<groupId>org.projectlombok</groupId>
  98. 			<artifactId>lombok</artifactId>
  99. 		</dependency>
  100. 		<dependency>
  101. 			<groupId>io.springfox</groupId>
  102. 			<artifactId>springfox-swagger2</artifactId>
  103. 			<version>2.8.0</version>
  104. 		</dependency>
  105. 		<dependency>
  106. 			<groupId>io.springfox</groupId>
  107. 			<artifactId>springfox-swagger-ui</artifactId>
  108. 			<version>2.8.0</version>
  109. 		</dependency>
  110. 		<dependency>
  111. 			<groupId>commons-codec</groupId>
  112. 			<artifactId>commons-codec</artifactId>
  113. 		</dependency>
  114. 		<dependency>
  115. 			<groupId>commons-fileupload</groupId>
  116. 			<artifactId>commons-fileupload</artifactId>
  117. 			<version>1.3.2</version>
  118. 		</dependency>
  119. 		<dependency>
  120. 			<groupId>com.alibaba</groupId>
  121. 			<artifactId>easyexcel</artifactId>
  122. 			<version>2.2.6</version>
  123. 		</dependency>
  124.  
  125.  
  126.  
  127. 		<dependency>
  128. 			<groupId>org.json</groupId>
  129. 			<artifactId>json</artifactId>
  130. 			<version>20171018</version>
  131. 		</dependency>
  132. 		<dependency>
  133. 			<groupId>io.springfox</groupId>
  134. 			<artifactId>springfox-swagger2</artifactId>
  135. 			<version>2.9.2</version>
  136. 		</dependency>
  137. 		<dependency>
  138. 			<groupId>io.springfox</groupId>
  139. 			<artifactId>springfox-swagger-ui</artifactId>
  140. 			<version>2.9.2</version>
  141. 		</dependency>
  142.  
  143. 	</dependencies>

yml配置文件

端口：7002，可以自己更改，没必要按我的端口。

数据库：需要修改的也就最下面三行，连接自己的数据库，密码和用户

mybatis-plus：注释里有说明

 前后分离就要跨域，所以要先配置跨域

 最后的最后配置

mybatis-plus的配置

这是一个分页的配置

1.后端代码：

dao类

就这一段极少的代码，却拥有超强的功能，这也归功于继承的BaseMapper，简单来说继承了它，增删改查的语句我们也就不用写了，直接调用dao就行了。

  1. @Repository
  2. public interface UserDao extends BaseMapper<User>{
  3.  
  4. }

manager类

上面图片里的manager写错了

这是我在网上找到对manager的解释

A）对第三方平台封装的层，预处理返回结果及转化异常信息；
B）对 Service 层通用能力的下沉，如缓存方案、中间件通用处理；
C）与 DAO 层交互，对多个 DAO 的组合复用。

  1. @Component
  2. public class UserMannger {
  3. 	@Autowired
  4. 	private UserDao userDao;
  5. 	//获取全部用户
  6. 	public List<User> getAllUsers(){
  7. 		QueryWrapper<User> wrapper=new QueryWrapper<User>();
  8. 		return userDao.selectList(wrapper);
  9. 	}
  10. 	//根据id获取用户
  11. 	public User getById(String id) {
  12. 		return userDao.selectById(id);
  13. 	}
  14. 	//根据姓名获取用户
  15. 	public User getByName(String username) {
  16. 		QueryWrapper<User> wrapper=new QueryWrapper<User>();
  17. 		wrapper.eq("username", username);
  18. 		return userDao.selectOne(wrapper);
  19. 	}
  20. 	//根据角色获取用户
  21. 	public List<User> getByRole(String role) {
  22. 		QueryWrapper<User> wrapper=new QueryWrapper<User>();
  23. 		wrapper.eq("role",role);
  24. 		return userDao.selectList(wrapper);
  25. 	}
  26. 	//添加用户
  27. 	public int insert(User user) {
  28. 		return userDao.insert(user);
  29. 	}
  30. 	//删除用户
  31. 	public int delete(String id) {
  32. 		return userDao.deleteById(id);
  33. 	}
  34. 	//编辑用户
  35. 	public int update(User  user) {
  36. 		return userDao.updateById(user);
  37. 	}
  38. 	
  39. }

service类

  1. @Service
  2. public class UserService {
  3. 	@Autowired
  4. 	private UserMannger userMannger;
  5. 	
  6. 	//获取全部用户
  7. 	public List<User> getAllUsers(){
  8. 		return userMannger.getAllUsers();
  9. 	}
  10. 	//根据id获取用户
  11. 	public User getById(String id) {
  12. 		return userMannger.getById(id);
  13. 	}
  14. 	//根据姓名获取
  15. 	public User getByName(String name) {
  16. 		return userMannger.getByName(name);
  17. 	}
  18. 	//根据角色获取
  19. 	public List<User> getByRole(String role) {
  20. 		return userMannger.getByRole(role);
  21. 	}
  22. 	//增加
  23. 	public int insert(User user) {
  24. 		return userMannger.insert(user);
  25. 	}
  26. 	//删除
  27. 	public int delete(String id) {
  28. 		return userMannger.delete(id);
  29. 	}
  30. 	//修改
  31. 	public int update(User user) {
  32. 		return userMannger.update(user);
  33. 	}
  34. }

controller类

  1. @RequestMapping("/UserController")
  2. @RestController
  3. public class UserController {
  4. 	@Autowired
  5. 	private UserService userService;
  6. 	@Autowired
  7. 	private LoginService loginService;
  8. 	
  9. 	//获取全部用户
  10. 	@RequestMapping("/getAllUsers")
  11. 	public List<User> getAllUsers() {
  12. 		return userService.getAllUsers();
  13. 	}
  14.     //根据id获取用户
  15. 	@RequestMapping("/getById")
  16. 	public User getById(@RequestBody User user) {
  17. 		return userService.getById(user.getId());
  18. 	}
  19.     //根据姓名获取用户
  20. 	@RequestMapping("getByName")
  21. 	public User getByName(@RequestBody User user) {
  22. 		return userService.getByName(user.getUsername());
  23. 	}
  24.     //根据角色获取用户
  25. 	@RequestMapping("/getByRole")
  26. 	public List<User> getByRole(@RequestBody User user) {
  27. 		return userService.getByRole(user.getRole());
  28. 	}
  29.     //新增
  30. 	@RequestMapping("/addUser")
  31. 	public int addUser(@RequestBody User user) {
  32. 		return userService.insert(user);
  33. 	}
  34.     //删除
  35. 	@RequestMapping("/deleteUser/{id}")
  36. 	public int deleteUser(@PathVariable("id") String id) {
  37. 		return userService.delete(id);
  38. 	}
  39.     //修改
  40. 	@RequestMapping("/editUser")
  41. 	public int editUser(@RequestBody User user) {
  42. 		return userService.update(user);
  43. 	}
  44. }

后端代码也就这么多，下面献上前端代码

2.前端代码

自从学习了一点点的vue，我感觉我写代码就是Ctrl+c，很方便，但也有弊端，这样我就不能敲键盘了，键盘敲不烂，我就没理由换新键盘了。又说了点题外话，本人比较喜欢聊天，所以就说多了，哈哈哈哈哈哈哈哈。

直接给大家上代码。

main.js的代码

  1. import Vue from 'vue'
  2. import App from './App.vue'
  3. import router from './router'
  4. import store from './store'
  5. import axios from 'axios';
  6.  
  7. import ElementUI from 'element-ui';
  8. import 'element-ui/lib/theme-chalk/index.css';
  9.  
  10. Vue.config.productionTip = false
  11.  
  12.  
  13. Vue.use(ElementUI);
  14.  
  15. Vue.prototype.$axios = axios;
  16. new Vue({
  17.   router,
  18.   store,
  19.   render: h => h(App)
  20. }).$mount('#app')

index.js

这个index是router里的index文件不要写到别处了。

  1. import Vue from 'vue'
  2. import VueRouter from 'vue-router'
  3.  
  4.  
  5. Vue.use(VueRouter)
  6.  
  7. const routes = [
  8.   
  9.   {
  10.     path: '/UserForm',
  11.     name: 'UserForm',
  12.     component: () => import(/* webpackChunkName: "about" */ '../views/UserForm.vue')
  13.   },
  14.   
  15. ]
  16.  
  17. const router = new VueRouter({
  18.   routes
  19. })
  20.  
  21. export default router

 App.vue

  1. <template>
  2.   <div id="app">
  3.     <div id="nav">
  4.       
  5.       <router-link to="/UserForm">用户管理</router-link>|
  6.      
  7.     </div>
  8.     <router-view/>
  9.   </div>
  10. </template>

UserForm.vue

  1. <template>
  2.   <div>
  3.     <el-button type="primary" @click="getAllUsersBtn">查询所有用户</el-button>
  4.     <el-input v-model="UserForm.id" style="width:100px"></el-input>
  5.     <el-button type="primary" @click="getIdBtn">根据id查询</el-button>
  6.     <el-input v-model="UserForm.username" style="width:100px"></el-input>
  7.     <el-button type="primary" @click="getNameBtn">根据姓名查询</el-button>
  8.     <el-input v-model="UserForm.role" style="width:100px"></el-input>
  9.     <el-button type="primary" @click="getRoleBtn">根据角色查询</el-button>
  10.  
  11.     <el-button type="primary" @click="OpenAddBtn">添加用户</el-button>
  12.     <template>
  13.       <el-table :data="users" style="width: 100%" height="250">
  14.         <el-table-column fixed prop="id" label="编号" width="150">
  15.         </el-table-column>
  16.         <el-table-column prop="username" label="姓名" width="120">
  17.         </el-table-column>
  18.         <el-table-column prop="userpassword" label="密码" width="120">
  19.         </el-table-column>
  20.         <el-table-column prop="role" label="角色" width="120">
  21.         </el-table-column>
  22.         <el-table-column prop="sex" label="性别" width="300">
  23.         </el-table-column>
  24.         <el-table-column fixed="right" label="操作" width="120">
  25.           <template slot-scope="scope">
  26.             <el-button @click="deleteBtn(scope.row)" type="text" size="small">
  27.               删除
  28.             </el-button>
  29.             <el-button type="text" size="small" @click="openEdit(scope.row)">编辑</el-button>
  30.           </template>
  31.         </el-table-column>
  32.  
  33.       </el-table>
  34.     </template>
  35.     <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" :before-close="handleClose1">
  36.       <el-form ref="form" :model="form" label-width="80px">
  37.         <el-form-item label="姓名">
  38.           <el-input v-model="form.username"></el-input>
  39.         </el-form-item>
  40.         <el-form-item label="密码">
  41.           <el-input v-model="form.userpassword"></el-input>
  42.         </el-form-item>
  43.         <el-form-item label="性别">
  44.           <el-select v-model="form.sex" placeholder="请选择性别">
  45.             <el-option label="男" value="man"></el-option>
  46.             <el-option label="女" value="woman"></el-option>
  47.           </el-select>
  48.         </el-form-item>
  49.         <el-form-item label="角色">
  50.           <el-select v-model="form.role" placeholder="请选择角色">
  51.             <el-option label="学生" value="student"></el-option>
  52.             <el-option label="老师" value="teacher"></el-option>
  53.           </el-select>
  54.         </el-form-item>
  55.  
  56.       </el-form>
  57.       <span slot="footer" class="dialog-footer">
  58.         <el-button @click="dialogVisible = false">取 消</el-button>
  59.         <el-button type="primary" @click="addBtn">确 定</el-button>
  60.       </span>
  61.     </el-dialog>
  62.     <el-dialog title="提示" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
  63.       <el-form ref="form" :model="EditForm" label-width="80px">
  64.         <el-form-item label="姓名">
  65.           <el-input v-model="EditForm.username"></el-input>
  66.         </el-form-item>
  67.         <el-form-item label="密码">
  68.           <el-input v-model="EditForm.userpassword"></el-input>
  69.         </el-form-item>
  70.         <el-form-item label="性别">
  71.           <el-select v-model="EditForm.sex" placeholder="请选择性别">
  72.             <el-option label="男" value="man"></el-option>
  73.             <el-option label="女" value="woman"></el-option>
  74.           </el-select>
  75.         </el-form-item>
  76.         <el-form-item label="角色">
  77.           <el-select v-model="EditForm.role" placeholder="请选择角色">
  78.             <el-option label="学生" value="student"></el-option>
  79.             <el-option label="老师" value="teacher"></el-option>
  80.           </el-select>
  81.         </el-form-item>
  82.  
  83.       </el-form>
  84.       <span slot="footer" class="dialog-footer">
  85.         <el-button @click="dialogVisible = false">取 消</el-button>
  86.         <el-button type="primary" @click="EditBtn">确 定</el-button>
  87.       </span>
  88.     </el-dialog>
  89.   </div>
  90. </template>
  91. <script>
  92. export default {
  93.   data() {
  94.     return {
  95.       users: [],
  96.       dialogVisible: false,
  97.       dialogVisible1: false,
  98.       form: {
  99.         username: "",
  100.         userpassword: "",
  101.         sex: "",
  102.         role: "",
  103.       },
  104.       UserForm: {
  105.         id: "",
  106.         username: "",
  107.         userpassword: "",
  108.         sex: "",
  109.         role: "",
  110.       },
  111.       EditForm: {
  112.         id: "",
  113.         username: "",
  114.         userpassword: "",
  115.         sex: "",
  116.         role: "",
  117.       },
  118.     };
  119.   },
  120.   methods: {
  121.     getAllUsersBtn() {
  122.       getAllUsersBtnAction(this);
  123.     },
  124.     OpenAddBtn() {
  125.       this.dialogVisible = true;
  126.     },
  127.     addBtn() {
  128.       addBtnAction(this);
  129.     },
  130.     getIdBtn() {
  131.       getIdBtnAction(this);
  132.     },
  133.     getNameBtn() {
  134.       getNameBtnAction(this);
  135.     },
  136.     getRoleBtn() {
  137.       getRoleBtnAction(this);
  138.     },
  139.     deleteBtn(row) {
  140.       const that = this;
  141.       this.$axios
  142.         .post("http://127.0.0.1:7002/crud/UserController/deleteUser/" + row.id)
  143.         .then(function (res) {
  144.           that.getAllUsersBtn();
  145.         });
  146.     },
  147.     openEdit(row) {
  148.       this.dialogVisible1 = true;
  149.       this.EditForm = row;
  150.     },
  151.     EditBtn(row) {
  152.       EditBtnAction(this);
  153.     },
  154.     handleClose(done) {
  155.       this.$confirm("确认关闭？")
  156.         .then((_) => {
  157.           done();
  158.         })
  159.         .catch((_) => {});
  160.     },
  161.     handleClose1(done) {
  162.       this.$confirm("确认关闭？")
  163.         .then((_) => {
  164.           done();
  165.         })
  166.         .catch((_) => {});
  167.     },
  168.   },
  169. };
  170. function getAllUsersBtnAction(vm) {
  171.   vm.$axios
  172.     .post("http://127.0.0.1:7002/crud/UserController/getAllUsers")
  173.     .then(function (res) {
  174.       vm.users = res.data;
  175.       console.log(res);
  176.     });
  177. }
  178. function addBtnAction(vm) {
  179.   vm.$axios
  180.     .post("http://127.0.0.1:7002/crud/UserController/addUser", vm.form, {
  181.       "Content-Type": "application/json;charset=utf-8",
  182.     })
  183.     .then(function (res) {
  184.       vm.dialogVisible = false;
  185.       getAllUsersBtnAction(vm);
  186.       console.log(res);
  187.     })
  188.     .catch(function (err) {
  189.       console.log(err);
  190.     });
  191. }
  192. function getIdBtnAction(vm) {
  193.   let input = {
  194.     id: vm.UserForm.id,
  195.   };
  196.   vm.$axios
  197.     .post("http://127.0.0.1:7002/crud/UserController/getById", input, {
  198.       "Content-Type": "application/json;charset=utf-8",
  199.     })
  200.     .then(function (res) {
  201.       vm.users = [];
  202.       vm.users.push(res.data);
  203.       console.log(res);
  204.     });
  205. }
  206. function getNameBtnAction(vm) {
  207.   let input = {
  208.     username: vm.UserForm.username,
  209.   };
  210.   vm.$axios
  211.     .post("http://127.0.0.1:7002/crud/UserController/getByName", input, {
  212.       "Content-Type": "application/json;charset=utf-8",
  213.     })
  214.     .then(function (res) {
  215.       vm.users = [];
  216.       vm.users.push(res.data);
  217.       console.log(res);
  218.     });
  219. }
  220. function getRoleBtnAction(vm) {
  221.   let input = {
  222.     role: vm.UserForm.role,
  223.   };
  224.   vm.$axios
  225.     .post("http://127.0.0.1:7002/crud/UserController/getByRole", input, {
  226.       "Content-Type": "application/json;charset=utf-8",
  227.     })
  228.     .then(function (res) {
  229.       vm.users = res.data;
  230.       console.log(res);
  231.     });
  232. }
  233. function EditBtnAction(vm) {
  234.   vm.$axios
  235.     .post("http://127.0.0.1:7002/crud/UserController/getByRole", vm.EditForm, {
  236.       "Content-Type": "application/json;charset=utf-8",
  237.     })
  238.     .then(function (res) {
  239.       vm.dialogVisible1 = false;
  240.     });
  241. }
  242. </script>

附上一段操作，看看结果如何，页面不精致，只求结果。

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/article/detail/57502
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号