发布时间:2025-06-24 19:35:50 作者:北方职教升学中心 阅读量:524
数据库简介
数据库的账号密码记得改为自己的
url: jdbc:mysql://localhost:3306/springboot?serverTime=UTC&useUnicode=true&charcterEncoding=utf-8&useSSl=flase//springboot为我用的数据库的名字driver-class-name: com.mysql.cj.jdbc.Driverusername: root //账号password: 123456 //密码
完整项目代码:
https://github.com/liupeng0531/book
密码和所选角色后进行登陆。前端
1.使用vue脚手架创建前端项目
安装脚手架 npm install -g @vue/cli创建项目:vue init webpack 项目名
2.导入Element-ui
1. 安装命令 npm i element-ui -S2. mainjs全局引⼊import ElementUI from 'element-ui';import 'element-ui/lib/theme-chalk/index.css';Vue.use(ElementUI);3. 测试是否引⼊成功
3. 安装axios与处理跨域
1.安装axiosnpm install axios --save2.在main.js全局引⼊axiosimport axios from ‘axios’;Vue.prototype.$axios =axios;
五、Hamcrest 和 Mockito。 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <!-- jdbc --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-jdbc</artifactId> </dependency> <!-- MySQL --> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <!-- 热部署lombok --> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <!--https://mvnrepository.com/artifact/org.mybatis.spring.boot/mybatis-spring-boot-starter--> <!-- mybatis-spring-boot-starter: 整合 --> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.3.2</version> </dependency> <!-- mybatis-plus --> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.1</version> </dependency> <!--代码生成器依赖包--> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-generator</artifactId> <version>3.4.1</version> </dependency> <dependency> <groupId>org.freemarker</groupId> <artifactId>freemarker</artifactId> <version>2.3.30</version> </dependency> <dependency> <groupId>com.spring4all</groupId> <artifactId>spring-boot-starter-swagger</artifactId> <version>1.5.1.RELEASE</version> </dependency></dependencies>
3.2 yml⽂件的配置
#端口server: port: 8090spring: datasource: url: jdbc:mysql://localhost:3306/vue?serverTime=UTC&useUnicode=true&charcterEncoding=utf-8&useSSl=flase driver-class-name: com.mysql.cj.jdbc.Driver username: root //账号 password: 123456 //密码
3.3 编写测试代码
3.3.1 创建实体类User
@Data@EqualsAndHashCode(callSuper = false)@ApiModel(value="User对象", description="")public class User implements Serializable { private static final long serialVersionUID = 1L; @TableId(value = "id", type = IdType.AUTO) private Integer id; @ApiModelProperty(value = "账号") private String no; @ApiModelProperty(value = "名字") private String name; @ApiModelProperty(value = "密码") private String password; private Integer age; @ApiModelProperty(value = "性别") private Integer sex; @ApiModelProperty(value = "电话") private String phone; @ApiModelProperty(value = "角色 0超级管理员,1管理员,2普通账号") private Integer roleId; @ApiModelProperty(value = "是否有效,Y有效,其他无效") @TableField("isValid") private String isvalid;}
3.3.2 创建mapper接⼝UserMapper
@Mapperpublic interface UserMapper extends BaseMapper<User> { public List<User> selectAll();}
创建service接⼝UserService
public interface UserService extends IService<User> { public List<User> selectAll();}
创建service实现类UserServiceImpl
@Servicepublic class UserServiceImpl extends ServiceImpl<UserMapper, User> implementsUserService { @Resource private UserMapper userMapper; @Override public List<User> selectAll() { return userMapper.selectAll(); }}
3.3.3 创建配置⽂件UserMapper.xml
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mapper namespace="com.wms.mapper.UserMapper"><select id="selectAll" resultType="com.wms.entity.User"> select * from user</select></mapper>
3.3.4 测试类
@RestControllerpublic class HelloController { @Autowired private UserService userService; @GetMapping public List<User> hello(){ return userService.selectAll(); }}
3.4 实现增删改查
@RestController@RequestMapping("/user")public class UserController { @Autowired private UserService userService; /** * 查询所有 */ @GetMapping("/list") public List<User> list() { return userService.list(); } /** * 修改 */ @PostMapping("/mod") public boolean mod(@RequestBody User user) { return userService.updateById(user); } /** * 增加或修改 */ @PostMapping("/saveOrMod") public boolean saveOrMod(@RequestBody User user) { return userService.saveOrUpdate(user); } /** * 删除 */ @GetMapping("/delete") public boolean delete(Integer id) { return userService.removeById(id); } /** * 查询(模糊,匹配) */ @PostMapping("/listP") public Result ListP(@RequestBody User user) { LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper(); if (StringUtils.isNotBlank(user.getName())) { lambdaQueryWrapper.like(User::getName, user.getName()); } //完全匹配// lambdaQueryWrapper.eq(User::getName,user.getName()); return Result.suc(userService.list(lambdaQueryWrapper)); }}
3.5 实现分页功能
3.5.1 添加分页拦截器
@Configurationpublic class MybatisPlusConfig { @Bean public MybatisPlusInterceptor mybatisPlusInterceptor() { MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor(); interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL)); return interceptor; }}
3.5.2 编写mapper方法
@Mapperpublic interface UserMapper extends BaseMapper<User> { IPage pageC(IPage<User> page);}
3.5.3 实现类
@PostMapping("/listPageC") public List<User> listPageC(@RequestBody QueryPageParam query) { HashMap param = query.getParam(); String name = (String) param.get("name"); System.out.println("name===" + (String) param.get("name")); Page<User> page = new Page(); page.setCurrent(query.getPageNum()); page.setSize(query.getPageSize()); LambdaQueryWrapper<User> lambdaQueryWrapper = new LambdaQueryWrapper(); lambdaQueryWrapper.like(User::getName, name); //IPage result = userService.pageC(page); IPage result = userService.pageCC(page, lambdaQueryWrapper); System.out.println("total==" + result.getTotal()); return result.getRecords(); }
四、项目概述
后端:SpringBoot,MyBatis-Plus ,Java
前端:nodejs,Vue脚⼿架,Element-ui
数据库:MySQL
使用工具:IntelliJ IDEA,Visual Studio Code
二、2.2 首页
登陆成功后进入首页面

2.3 图书管理-图书信息管理

2.4图书分类
管理员对所有书籍进行分类

2.5记录管理
项目会自动记录管理员和用户的行为

三、一、后端
3.1 项目依赖
<dependencies> <!-- 用于web开发场景,包含了 RESTful 和 Spring MVC,并且默认使用了内置的Tomcat。效果展示2.1登录界面
输入正确的用户名、 --> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <!-- 用于测试,提供了多个测试库,包括 JUnit Jupiter、