兴义市住房和城乡建设局网签网站,网站建设内容策略,手机端网站开发书籍,wordpress建企业站教程springboot vue3实现增删改查分页操作 环境最终实现效果实现功能主要框架代码实现数据库后端前端 注意事项 环境
jdk17 vue3
最终实现效果 实现功能
添加用户#xff0c;禁用#xff0c;启用#xff0c;删除#xff0c;编辑#xff0c;分页查询
主要框架
后端 spri… springboot vue3实现增删改查分页操作 环境最终实现效果实现功能主要框架代码实现数据库后端前端 注意事项 环境
jdk17 vue3
最终实现效果 实现功能
添加用户禁用启用删除编辑分页查询
主要框架
后端 springboot mybatis-plus 前端 element-plus axios
代码实现
数据库
数据库中就一个 user表主要就包含以下字段
后端
yml配置文件
server:port: 8000
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/java-db1?serverTimezoneAsia/ShanghaiuseUnicodetruecharacterEncodingutf-8zeroDateTimeBehaviorconvertToNulluseSSLfalseallowPublicKeyRetrievaltrueusername: rootpassword: 123456type: com.alibaba.druid.pool.DruidDataSourcejackson:date-format: yyyy-MM-dd HH:mm:sstime-zone: GMT-8thymeleaf:cache: false
mybatis-plus:global-config:db-config:id-type: assign_idconfiguration:map-underscore-to-camel-case: true
xml依赖文件
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion3.2.1/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdcom.example/groupIdartifactIddemo/artifactIdversion0.0.1-SNAPSHOT/versionnamedemo/namedescriptiondemo/descriptionpropertiesjava.version17/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-jdbc/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-devtools/artifactIdscoperuntime/scopeoptionaltrue/optional/dependencydependencygroupIdcom.mysql/groupIdartifactIdmysql-connector-j/artifactIdscoperuntime/scope/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependency!-- https://mvnrepository.com/artifact/com.alibaba/druid-spring-boot-starter --dependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactIdversion1.2.11/version/dependencydependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-spring-boot3-starter/artifactIdversion3.5.5/version/dependency!-- https://mvnrepository.com/artifact/org.springframework.security/spring-security-crypto --dependencygroupIdorg.springframework.security/groupIdartifactIdspring-security-crypto/artifactIdversion6.2.1/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdconfigurationexcludesexcludegroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/exclude/excludes/configuration/plugin/plugins/build/projectUser实体类
package com.example.demo.entity;import com.baomidou.mybatisplus.annotation.IdType;
import com.baomidou.mybatisplus.annotation.TableField;
import com.baomidou.mybatisplus.annotation.TableId;
import lombok.AllArgsConstructor;
import lombok.Data;import java.sql.Timestamp;Data
AllArgsConstructor
public class User {TableId(value id,type IdType.AUTO)private Integer id;private String username;private String password;private String nickname;private String email;private Timestamp add_time;private Integer disabled;}UserService接口中我们需要添加一个方法 PageUser getPage(PageUser page, QueryWrapperUser queryWrapper);UserServiceImple实现类中实现这个方法 这个方法主要用来实现分页 Autowiredprivate UserMapper userMapper;Overridepublic PageUser getPage(PageUser page, QueryWrapperUser queryWrapper) {return userMapper.selectPage(page,queryWrapper);}UserMapper类和 我们平时写的mapper类一样没有区别 在config包下添加Mybatis-plus分页插件
package com.example.demo.config;import com.baomidou.mybatisplus.annotation.DbType;
import com.baomidou.mybatisplus.extension.plugins.MybatisPlusInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.OptimisticLockerInnerInterceptor;
import com.baomidou.mybatisplus.extension.plugins.inner.PaginationInnerInterceptor;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;Configuration
public class MyBatisPlusConfig {Beanpublic MybatisPlusInterceptor mybatisPlusInterceptor() {MybatisPlusInterceptor interceptor new MybatisPlusInterceptor();// 向MyBatis-Plus的过滤器链中添加分页拦截器需要设置数据库类型主要用于分页方言interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
// interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));// 添加乐观锁拦截器interceptor.addInnerInterceptor(new OptimisticLockerInnerInterceptor());return interceptor;}
}UserController控制器类
package com.example.demo.controller;import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
import com.example.demo.util.Res;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.web.bind.annotation.*;import java.sql.Timestamp;
import java.util.Date;RestController
RequestMapping(/user)
public class UserController{Autowiredprivate UserService userService;PostMapping(/add)public ResUser add (RequestBody User user){//判断用户是否存在QueryWrapperUser queryWrapper new QueryWrapper();queryWrapper.eq(username,user.getUsername());User u userService.getOne(queryWrapper);if(u!null){return Res.error(用户已存在);}//设置添加时间Timestamp timestamp new Timestamp(new Date().getTime());user.setAdd_time(timestamp);//加密密码BCryptPasswordEncoder bCryptPasswordEncoder new BCryptPasswordEncoder();String hash_password bCryptPasswordEncoder.encode(user.getPassword());user.setPassword(hash_password);boolean res userService.save(user);if(!res){return Res.error(添加失败);}return Res.success(添加用户成功,user);}PostMapping(/edit)public ResUser edit(RequestBody User user){boolean res userService.updateById(user);if(!res){return Res.error(编辑用户信息失败);}return Res.success(编辑用户信息成功,user);}DeleteMapping(/delete/{id})public ResObject delete(PathVariable int id){boolean res userService.removeById(id);if(!res){return Res.error(删除失败);}return Res.success(删除成功,id);}GetMapping(/getid/{id})public ResUser getId(PathVariable int id){User user userService.getById(id);if(user!null){return Res.success(获取数据成功,user);}return Res.error(获取数据失败);}GetMapping(/page)public ResObject page(RequestParam(defaultValue 1) int page,RequestParam(defaultValue 10) int pageSize,RequestParam(defaultValue ) String username,RequestParam(defaultValue ) String nickname){PageUser userPage new Page(page,pageSize);QueryWrapperUser queryWrapper new QueryWrapper();queryWrapper.like(username,username).or().like(nickname,nickname);return Res.success(获取数据成功,userService.getPage(userPage,queryWrapper));}PostMapping(/disabled)public ResObject disabledById(RequestBody User user){boolean res userService.updateById(user);if(res){return Res.success(禁用成功,user);}return Res.error(禁用失败);}PostMapping(/enable)public ResObject enableById(RequestBody User user){boolean res userService.updateById(user);if(res){return Res.success(启用成功,user);}return Res.error(启用失败);}
}在UserController控制器中Res是我们自己封装的返回类
package com.example.demo.util;import lombok.Data;
import org.springframework.stereotype.Component;Data
public class ResT {private Integer code;private String msg;private T data;public static T ResT success(String msg,T data){ResT res new ResT();res.code 200;res.msg msg;res.data data;return res;}public static T ResT error(String msg){ResT res new ResT();res.code 400;res.msg msg;res.data null;return res;}
}配置跨域请求 在config包下配置
package com.example.demo.config;import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
Configuration
public class CorsConfig implements WebMvcConfigurer {Overridepublic void addCorsMappings(CorsRegistry registry) {registry.addMapping(/**)
// .allowedOrigins(*).allowedOriginPatterns(*).allowedMethods(GET, HEAD, POST, PUT, DELETE, OPTIONS).allowCredentials(true).maxAge(3600).allowedHeaders(*).exposedHeaders(*);}
}前端
依赖 dependencies: {axios: ^1.6.4,element-plus: ^2.4.4,pinia: ^2.1.7,sass: ^1.69.7,vue: ^3.3.11,vue-router: ^4.2.5},这里我给axios添加了一个baseUrl可以根据我们自己的需要添加请求头
import axios from axiosconst http axios.create({baseURL:http://127.0.0.1:8000,timeout:5000
});export default http实现代码 由于功能不是很多我只写了一个页面 下面是全部实现代码
script setup
import { onMounted, ref } from vue;
import http from /http/http.js
import { ElMessage, ElMessageBox } from element-plusconst currentPage ref(1)
const pageSize ref(10)const total ref(0)const dialogVisible ref(false)const addDialogVisible ref(false)const tableData ref([])const form ref({})const keyword ref()const addForm ref({username:,password:,email:,nickname:
})const addFormRef ref(null)const rules ref({username: [{ required: true, message: Please input username, trigger: blur },{ min: 5, max: 14, message: Length should be 5 to 14, trigger: blur },],password: [{ required: true, message: Please input password, trigger: blur },{ min: 5, max: 15, message: Length should be 5 to 15, trigger: blur },]
})const handleSizeChange (size) {pageSize.value sizecurrentPage.value 1getPage()
}const handleCurrentChange (page) {currentPage pagegetPage()
}const getPage async () {const { data: res } await http.get(/user/page?page${currentPage.value}pageSize${pageSize.value}username${keyword.value}nickname${keyword.value})total.value res.data.totaltableData.value res.data.records
}const disabledById async (row) {const { data: res } await http.post(/user/disabled, {id: row.id,disabled: 1});if (res.code 200) {ElMessage.success(禁用成功);getPage()} else {ElMessage.error(禁用失败);}
}const enableById async (row) {const { data: res } await http.post(/user/enable, {id: row.id,disabled: 0});if (res.code 200) {ElMessage.success(启用成功);getPage()} else {ElMessage.error(启用失败);}
}const openDialogVisible (row) {dialogVisible.value trueform.value row
}const edit async () {const { data: res } await http.post(user/edit,form.value)if (res.code ! 200) {dialogVisible.value falsereturn ElMessage.error(编辑失败)}ElMessage.success(编辑成功);dialogVisible.value falsegetPage()
}const deleteById (row) {ElMessageBox.confirm(此操作将永久删除该项,是否继续?,警告,{confirmButtonText: 确定,cancelButtonText: 取消,type: warning,}).then(async () {const { data: res } await http.delete(/user/delete/${row.id})if (res.code ! 200) {return ElMessage.error(删除失败);}ElMessage({type: success,message: 删除成功!,})getPage()}).catch(() {ElMessage({type: info,message: 已取消删除!,})})
}const openAddDialogVisible () {addDialogVisible.value true
}const addUser async () {const {data:res} await http.post(/user/add,addForm.value)if(res.code!200){addDialogVisible.value falsereturn ElMessage.error(添加用户失败);}ElMessage.success(添加用户成功);addDialogVisible.value falsegetPage()
}const findUser () {getPage()
}const handleClose () {addFormRef.value.resetFields()
}onMounted(() {getPage()
})
/scripttemplatediv classindexel-row :gutter20el-col :span4el-button typeprimary clickopenAddDialogVisible添加用户/el-button/el-colel-col :span6el-input v-modelkeyword classw-50 m-2 placeholder请输入用户名或昵称template #appendel-button clickfindUser查找用户/el-button/template/el-input/el-col/el-rowel-table :datatableData border stylewidth: 100% stripeel-table-column propid labelID /el-table-column propusername label用户名 /el-table-column propnickname label昵称 /el-table-column propemail label邮箱 /el-table-column propadd_time label添加时间 /el-table-column label状态template v-slotscopedel-tag v-ifscoped.row.disabled 1 typedanger禁用/el-tagel-tag v-else typesuccess启用/el-tag/template/el-table-columnel-table-column label操作template v-slotscopedel-button sizesmall typeinfo clickdisabledById(scoped.row)禁用/el-buttonel-button sizesmall typesuccess clickenableById(scoped.row)启用/el-buttonel-button sizesmall typewarning clickopenDialogVisible(scoped.row)编辑/el-buttonel-button sizesmall typedanger clickdeleteById(scoped.row)删除/el-button/template/el-table-column/el-tableel-pagination v-model:current-pagecurrentPage v-model:page-sizepageSize :page-sizes[1, 2, 3, 4]:smallsmall :disableddisabled :backgroundbackground layouttotal, sizes, prev, pager, next, jumper:totaltotal size-changehandleSizeChange current-changehandleCurrentChange /el-dialog v-modeldialogVisible title编辑 width30% :before-closehandleCloseel-form :modelform label-width120pxel-form-item labelidel-input v-modelform.id disabled //el-form-itemel-form-item label昵称el-input v-modelform.nickname //el-form-itemel-form-item label邮箱el-input v-modelform.email //el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickdialogVisible false取消/el-buttonel-button typeprimary clickedit确定/el-button/span/template/el-dialogel-dialog v-modeladdDialogVisible title添加用户 width30% closehandleClose el-form :modeladdForm label-width120px :rulesrules refaddFormRefel-form-item label用户名 propusernameel-input v-modeladdForm.username //el-form-itemel-form-item label密码 proppassword el-input v-modeladdForm.password //el-form-itemel-form-item label邮箱el-input v-modeladdForm.email placeholder选填 //el-form-itemel-form-item label昵称el-input v-modeladdForm.nickname placeholder选填 //el-form-item/el-formtemplate #footerspan classdialog-footerel-button clickaddDialogVisible false取消/el-buttonel-button typeprimary clickaddUser添加/el-button/span/template/el-dialog/div
/templatestyle langscss scoped
.index {width: auto;height: auto;padding: 30px;.el-pagination {margin-top: 25px;}.el-row {margin-bottom: 25px;}
}
/style注意事项
后端使用mybatis-plus分页记得添加分页插件 记得配置跨域请求文件 springboot3.2.1 搭配的mybatis-plus 要使用3.5.5其他的会报错
