小菜家教平台：基于SpringBoot+Vue打造一站式学习管理系统

前言

现在已经学习了很多与Java相关的知识，但是迟迟没有进行一个完整的实践（之前这个项目开发到一半，很多东西没学搁置了，同时原先的项目中也有很多的问题），所以现在准备从零开始做一个基于SpringBoot+Vue的大学生家教平台，打算边写项目的过程中写一个系列博客用于记录，故有了这篇文章。这个项目是从零开始做起，预计周期一个月，希望大家能多多支持，那样我就更多的动力能进行下去，同时大家也可以提出建议，我会积极采纳合理建议的！让我们一起见证一个从零开始的项目开发过程！

项目相关说明

技术栈

后端：SpringBoot、MyBatis-Plus、MySQL、Redis、SpringSecurity、Swagger等

前端：Vue

主要功能

1.用户注册与登录：提供安全的用户注册和登录机制，支持不同角色（家长、学生、教师）的账户管理。 

2.家教信息管理：家长可以发布家教信息，教师可以接家教，管理员能对家教信息进行管理等。

3.家教沟通：在课后教师可以线上布置作业、与家长交流等，同时家长在学生完成作业后可以进行上传、查看完成结果、对教师进行评价等。

4.信息发布与查询：在这个系统中，所有用户可以查看管理员发布的系统公告，同时所有人都能对系统进行反馈保证系统在不断修改的过程中变得更好~

项目开发

DAY 1任务 创建项目并进行一些依赖配置

一、创建SpringBoot项目

首先创建一个普通的SpringBoot项目

添加几个普通的依赖，后面其他依赖可以在pom.xml中进行添加

创建完项目后我们可以写一个简单controller进行测试

如图，我创建了一个简单Hellocontroller输出信息

package com.example.familyeducation.controller;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
public class HelloController {@RequestMapping("/hello")public String hello(){return "hello";}
}

接着去application.properties中修改一下端口保证不会冲突

好，现在运行项目，并在浏览器中输入localhost:8889/hello进行访问，输出hello说明SpringBoot项目创建成功，没有什么问题

二、初步配置SpringSecurity

这个SpringSecurity的配置是跟着B站一个播放量最多的视频学的，推荐大家也可以去看看哦~

我们先在pom.xml文件中添加上依赖，同时我们可以去右侧maven中进行检查依赖是否添加成功

添加完依赖启动项目，继续访问localhost:8889/hello，界面跳转至SpringSecurity的默认登录界面

现在我们使用SpringSecurity的账号密码进行登录，后面会进行修改

登录名写test，密码去IDEA的输出框中查找，接着点击Sign in，界面成功跳转到hello中

接着我们继续配置Redis和一些登录相关的东西（fastjson、jwt、序列化器等）

我们先添加一下redis、fastjson、jwt的依赖同时去右侧maven进行检查

同时添加以下代码

package com.example.familyeducation.config;import com.example.familyeducation.utils.FastJsonRedisSerializer;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.data.redis.connection.RedisConnectionFactory;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.serializer.StringRedisSerializer;
/*** @author 小菜* @date  2024/11/4* @description Redis序列化配置**/
@Configuration
public class RedisConfig {@Bean@SuppressWarnings(value = { "unchecked", "rawtypes" })//注解：用于告诉编译器在检查代码时忽略特定类型的警告public RedisTemplate<Object, Object> redisTemplate(RedisConnectionFactory connectionFactory){RedisTemplate<Object, Object> template = new RedisTemplate<>();template.setConnectionFactory(connectionFactory);FastJsonRedisSerializer serializer = new FastJsonRedisSerializer(Object.class);// 使用StringRedisSerializer来序列化和反序列化redis的key值template.setKeySerializer(new StringRedisSerializer());template.setValueSerializer(serializer);// Hash的key也采用StringRedisSerializer的序列化方式template.setHashKeySerializer(new StringRedisSerializer());template.setHashValueSerializer(serializer);template.afterPropertiesSet();return template;}
}

package com.example.familyeducation.utils;import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.serializer.SerializerFeature;
import com.fasterxml.jackson.databind.JavaType;
import com.fasterxml.jackson.databind.ObjectMapper;
import com.fasterxml.jackson.databind.type.TypeFactory;
import org.springframework.data.redis.serializer.RedisSerializer;
import org.springframework.data.redis.serializer.SerializationException;
import com.alibaba.fastjson.parser.ParserConfig;
import org.springframework.util.Assert;
import java.nio.charset.Charset;/*** Redis使用FastJson序列化*/
public class FastJsonRedisSerializer<T> implements RedisSerializer<T>
{public static final Charset DEFAULT_CHARSET = Charset.forName("UTF-8");private Class<T> clazz;static{ParserConfig.getGlobalInstance().setAutoTypeSupport(true);}public FastJsonRedisSerializer(Class<T> clazz){super();this.clazz = clazz;}@Overridepublic byte[] serialize(T t) throws SerializationException{if (t == null){return new byte[0];}return JSON.toJSONString(t, SerializerFeature.WriteClassName).getBytes(DEFAULT_CHARSET);}@Overridepublic T deserialize(byte[] bytes) throws SerializationException{if (bytes == null || bytes.length <= 0){return null;}String str = new String(bytes, DEFAULT_CHARSET);return JSON.parseObject(str, clazz);}protected JavaType getJavaType(Class<?> clazz){return TypeFactory.defaultInstance().constructType(clazz);}
}

package com.example.familyeducation.utils;import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.data.redis.core.BoundSetOperations;
import org.springframework.data.redis.core.HashOperations;
import org.springframework.data.redis.core.RedisTemplate;
import org.springframework.data.redis.core.ValueOperations;
import org.springframework.stereotype.Component;import java.util.*;
import java.util.concurrent.TimeUnit;
/*** @author 小菜* @date  2024/11/4* @description Redis工具类，可以快速进行Redis操作**/@SuppressWarnings(value = { "unchecked", "rawtypes" })
@Component
public class RedisCache
{@Autowiredpublic RedisTemplate redisTemplate;/*** 缓存基本的对象，Integer、String、实体类等** @param key 缓存的键值* @param value 缓存的值*/public <T> void setCacheObject(final String key, final T value){redisTemplate.opsForValue().set(key, value);}/*** 缓存基本的对象，Integer、String、实体类等** @param key 缓存的键值* @param value 缓存的值* @param timeout 时间* @param timeUnit 时间颗粒度*/public <T> void setCacheObject(final String key, final T value, final Integer timeout, final TimeUnit timeUnit){redisTemplate.opsForValue().set(key, value, timeout, timeUnit);}/*** 设置有效时间** @param key Redis键* @param timeout 超时时间* @return true=设置成功；false=设置失败*/public boolean expire(final String key, final long timeout){return expire(key, timeout, TimeUnit.SECONDS);}/*** 设置有效时间** @param key Redis键* @param timeout 超时时间* @param unit 时间单位* @return true=设置成功；false=设置失败*/public boolean expire(final String key, final long timeout, final TimeUnit unit){return redisTemplate.expire(key, timeout, unit);}/*** 获得缓存的基本对象。** @param key 缓存键值* @return 缓存键值对应的数据*/public <T> T getCacheObject(final String key){ValueOperations<String, T> operation = redisTemplate.opsForValue();return operation.get(key);}/*** 删除单个对象** @param key*/public boolean deleteObject(final String key){return redisTemplate.delete(key);}/*** 删除集合对象** @param collection 多个对象* @return*/public long deleteObject(final Collection collection){return redisTemplate.delete(collection);}/*** 缓存List数据** @param key 缓存的键值* @param dataList 待缓存的List数据* @return 缓存的对象*/public <T> long setCacheList(final String key, final List<T> dataList){Long count = redisTemplate.opsForList().rightPushAll(key, dataList);return count == null ? 0 : count;}/*** 获得缓存的list对象** @param key 缓存的键值* @return 缓存键值对应的数据*/public <T> List<T> getCacheList(final String key){return redisTemplate.opsForList().range(key, 0, -1);}/*** 缓存Set** @param key 缓存键值* @param dataSet 缓存的数据* @return 缓存数据的对象*/public <T> BoundSetOperations<String, T> setCacheSet(final String key, final Set<T> dataSet){BoundSetOperations<String, T> setOperation = redisTemplate.boundSetOps(key);Iterator<T> it = dataSet.iterator();while (it.hasNext()){setOperation.add(it.next());}return setOperation;}/*** 获得缓存的set** @param key* @return*/public <T> Set<T> getCacheSet(final String key){return redisTemplate.opsForSet().members(key);}/*** 缓存Map** @param key* @param dataMap*/public <T> void setCacheMap(final String key, final Map<String, T> dataMap){if (dataMap != null) {redisTemplate.opsForHash().putAll(key, dataMap);}}/*** 获得缓存的Map** @param key* @return*/public <T> Map<String, T> getCacheMap(final String key){return redisTemplate.opsForHash().entries(key);}/*** 往Hash中存入数据** @param key Redis键* @param hKey Hash键* @param value 值*/public <T> void setCacheMapValue(final String key, final String hKey, final T value){redisTemplate.opsForHash().put(key, hKey, value);}/*** 获取Hash中的数据** @param key Redis键* @param hKey Hash键* @return Hash中的对象*/public <T> T getCacheMapValue(final String key, final String hKey){HashOperations<String, String, T> opsForHash = redisTemplate.opsForHash();return opsForHash.get(key, hKey);}/*** 删除Hash中的数据** @param key* @param hkey*/public void delCacheMapValue(final String key, final String hkey){HashOperations hashOperations = redisTemplate.opsForHash();hashOperations.delete(key, hkey);}/*** 获取多个Hash中的数据** @param key Redis键* @param hKeys Hash键集合* @return Hash对象集合*/public <T> List<T> getMultiCacheMapValue(final String key, final Collection<Object> hKeys){return redisTemplate.opsForHash().multiGet(key, hKeys);}/*** 获得缓存的基本对象列表** @param pattern 字符串前缀* @return 对象列表*/public Collection<String> keys(final String pattern){return redisTemplate.keys(pattern);}
}

package com.example.familyeducation.utils;import com.fasterxml.jackson.annotation.JsonInclude;/*** @author 小菜* @date  2024/11/4* @description 结果封装类**/
//注解：减少数据冗余，当你将 ResponseResult 对象序列化为 JSON 时，只有当对象的属性不为 null 时，才会包含在生成的 JSON 中
@JsonInclude(JsonInclude.Include.NON_NULL)
public class ResponseResult<T> {/*** 状态码*/private Integer code;/*** 提示信息，如果有错误时，前端可以获取该字段进行提示*/private String msg;/*** 查询到的结果数据，*/private T data;public ResponseResult(Integer code, String msg) {this.code = code;this.msg = msg;}public ResponseResult(Integer code, T data) {this.code = code;this.data = data;}public Integer getCode() {return code;}public void setCode(Integer code) {this.code = code;}public String getMsg() {return msg;}public void setMsg(String msg) {this.msg = msg;}public T getData() {return data;}public void setData(T data) {this.data = data;}public ResponseResult(Integer code, String msg, T data) {this.code = code;this.msg = msg;this.data = data;}
}

package com.example.familyeducation.utils;import javax.servlet.http.HttpServletResponse;
import java.io.IOException;public class WebUtils
{/*** 将字符串渲染到客户端** @param response 渲染对象* @param string 待渲染的字符串* @return null*/public static String renderString(HttpServletResponse response, String string) {try{response.setStatus(200);response.setContentType("application/json");response.setCharacterEncoding("utf-8");response.getWriter().print(string);}catch (IOException e){e.printStackTrace();}return null;}
}

由于我们是要去数据库中进行用户账号密码的匹配登录，所以我们还要添加一下Mybatis-Plus和Mysql驱动器

然后去application.properties中配置一下Mysql的相关信息

都配置完之后我们就可以进行测试了

先添加一下实体类和mapper接口信息，我之前的项目中是直接将用户分成了三个表，又使用视图将三个表连接起来，后面出现了很多问题，后续也会进行全部修改，这里先进行演示

package com.example.familyeducation.entity;import com.baomidou.mybatisplus.annotation.TableName;
import lombok.Data;import java.io.Serializable;@Data
@TableName(value = "user_view")
public class User implements Serializable {//因为这个类要存数据到Redis中，所以要进行序列化操作，继承Serializableprivate static final long serialVersionUID = 1L;private Integer userId;private String userPhone;private String userPassword;private String userName;private String userPicture;private String userRole;
}

package com.example.familyeducation.mapper;import com.baomidou.mybatisplus.core.mapper.BaseMapper;
import com.example.familyeducation.entity.User;public interface UserMapper extends BaseMapper<User> {
}

编写测试类进行测试，成功得到视图中的所有用户信息，说明我们的Mysql和Mybatis-Plus配置地都没有问题

这里运行过程中出现了一个小问题，好像是MyBatis-Plus和SpringBoot的版本冲突引起的问题，将SpringBoot版本变为2.7.16解决

同时运行还报了一个错，是密码加密存储的问题，我们要添加一个BCryptPasswordEncoder来将密码进行加密存储

package com.example.familyeducation.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {@Beanpublic PasswordEncoder passwordEncoder(){return new BCryptPasswordEncoder();}}

然后我们编写一个测试类输出加密后的密码并添加到数据库中，不然登录的时候会显示密码不是BCryptPassword报错

package com.example.familyeducation.config;import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.security.crypto.password.PasswordEncoder;/*** @ClassDescription:* @Author:小菜* @Create:2024/11/4 19:20**/
@SpringBootTest
public class PasswordEncoderTest {@Autowiredprivate PasswordEncoder passwordEncoder;@Testpublic void testPassword(){String rawPassword = "123456"; // 用户输入的明文密码String encodedPassword = passwordEncoder.encode(rawPassword);System.out.println(encodedPassword);}}

package com.example.familyeducation.service.impl;import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
import com.example.familyeducation.entity.LoginUser;
import com.example.familyeducation.entity.User;
import com.example.familyeducation.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.security.core.userdetails.UserDetails;
import org.springframework.security.core.userdetails.UserDetailsService;
import org.springframework.security.core.userdetails.UsernameNotFoundException;
import org.springframework.stereotype.Service;import java.util.Objects;/*** @ClassDescription:* @Author:小菜* @Create:2024/11/4 19:06**///这里继承的是security中的一个默认接口，重写其中的查询用户方法
@Service
public class UserDetailsServiceImpl implements UserDetailsService {@Autowiredprivate UserMapper userMapper;@Overridepublic UserDetails loadUserByUsername(String username) throws UsernameNotFoundException {//根据用户名查询用户信息LambdaQueryWrapper<User> wrapper = new LambdaQueryWrapper<>();wrapper.eq(User::getUserName,username);User user = userMapper.selectOne(wrapper);//如果查询不到数据就通过抛出异常来给出提示if(Objects.isNull(user)){throw new RuntimeException("用户名或密码错误");}//TODO 根据用户查询权限信息 添加到LoginUser中//封装成UserDetails对象返回return new LoginUser(user);}
}

最后我们重启项目，输入我们数据库中视图的对应数据

成功登录！

总结

到此为止，今天的项目大概就进行到这里，我们已经创建了一个最基本的SpringBoot项目并配置了一些组件，但是原先的数据库中有很大问题，需要返工。。。

那今天就这样，先去改改数据库，我们下篇再见！