一、项目概述
后端:SpringBoot,MyBatis-Plus ,Java
前端:nodejs,Vue脚⼿架,Element-ui
数据库:MySQL
使用工具:IntelliJ IDEA,Visual Studio Code
二、效果展示
2.1登录界面
输入正确的用户名、密码和所选角色后进行登陆。
2.2 首页
登陆成功后进入首页面
*2.3 图书管理-图书信息管理*
2.4图书分类
管理员对所有书籍进行分类
2.5记录管理
项目会自动记录管理员和用户的行为
三、后端
3.1 项目依赖
<dependencies>
<!-- 用于web开发场景,包含了 RESTful 和 Spring MVC,并且默认使用了内置的Tomcat。 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!-- 用于测试,提供了多个测试库,包括 JUnit Jupiter、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: 8090
spring:
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
@Mapper
public interface UserMapper extends BaseMapper<User> {
public List<User> selectAll();
}
创建service接⼝UserService
public interface UserService extends IService<User> {
public List<User> selectAll();
}
创建service实现类UserServiceImpl
@Service
public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements
UserService {
@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 测试类
@RestController
public 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 添加分页拦截器
@Configuration
public class MybatisPlusConfig {
@Bean
public MybatisPlusInterceptor mybatisPlusInterceptor() {
MybatisPlusInterceptor interceptor = new MybatisPlusInterceptor();
interceptor.addInnerInterceptor(new PaginationInnerInterceptor(DbType.MYSQL));
return interceptor;
}
}
3.5.2 编写mapper方法
@Mapper
public 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();
}
四、前端
1.使用vue脚手架创建前端项目
安装脚手架 npm install -g @vue/cli
创建项目:vue init webpack 项目名
2.导入Element-ui
1. 安装命令
npm i element-ui -S
2. mainjs全局引⼊
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
3. 测试是否引⼊成功
3. 安装axios与处理跨域
1.安装axios
npm install axios --save
2.在main.js全局引⼊axios
import axios from ‘axios’;
Vue.prototype.$axios =axios;
五、数据库简介
数据库的账号密码记得改为自己的
url: jdbc:mysql://localhost:3306/springboot?serverTime=UTC&useUnicode=true&charcterEncoding=utf-8&useSSl=flase
//springboot为我用的数据库的名字
driver-class-name: com.mysql.cj.jdbc.Driver
username: root //账号
password: 123456 //密码
完整项目代码:
本文转载自: https://blog.csdn.net/qq_52236360/article/details/137827341
版权归原作者 べ承诺ゞ都苍茫的可笑の、 所有, 如有侵权,请联系我们删除。
版权归原作者 べ承诺ゞ都苍茫的可笑の、 所有, 如有侵权,请联系我们删除。