vue + springboot备忘录
简介
本文讲解如何使用,vue+springboot制作备忘录系统,前端文章作者已经写好了,本文主要讲解如何制作后端。
然后前端部分我已经写完了,这里就是前端的部分的文章vue创建备忘录
在这个备忘录系统中,我主要制作了,备忘录的分类查询,备忘录的增加,删除,修改,根据id进行查询,查询全部功能,还有根据是否完成的情况,进行查询,查询的过程中还根据笔记的创建时间进行排序,这样可以让快结束的放到上面,然后给用户一种警示的效果。
创建项目
新建项目
创建数据库
通过这个数据库就大概知道了这个,项目的这个逻辑大概是一个什么样子,首先是用户登录,登录成功之后,会显示他自己的备忘录,然后备忘录中的信息,还会按照不通类型进行分类处理。
创建user表
创建用户表,user,这个表中存放的是,用户的id,username,password还有用户的头像。
user表的sql语句
/* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Type : MySQL Source Server Version : 80028 Source Host : localhost:3306 Source Schema : todolist Target Server Type : MySQL Target Server Version : 80028 File Encoding : 65001 Date: 17/02/2023 11:41:26 */ SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for user -- ---------------------------- DROP TABLE IF EXISTS `user`; CREATE TABLE `user` ( `id` int NOT NULL AUTO_INCREMENT COMMENT '用户的id', `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '用户名字', `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '用户密码', `avatar` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '用户的头像', PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 12 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic; -- ---------------------------- -- Records of user -- ---------------------------- INSERT INTO `user` VALUES (1, 'lihua', '123456', 'https://pic2.zhimg.com/v2-dcc1ea1a8b0c398c826ef9469d1e8b96.jpg'); INSERT INTO `user` VALUES (2, 'zhangsan', '123456', 'https://pic2.zhimg.com/v2-98974f8aaa0c9bf54ca16fac5c3fc4b5_r.jpg'); INSERT INTO `user` VALUES (3, 'lihua2', '123456', 'https://pic4.zhimg.com/v2-797973e16edcd0ccaab44cfbfa08d2d3_r.jpg'); INSERT INTO `user` VALUES (4, 'lexian', '1111', 'https://pic3.zhimg.com/v2-d6ddf0128212235dddf76df7f4383f53.jpg'); INSERT INTO `user` VALUES (5, 'lexian1', '1111', 'https://pic4.zhimg.com/v2-797973e16edcd0ccaab44cfbfa08d2d3_r.jpg'); INSERT INTO `user` VALUES (6, 'sdadasd', '1111', 'https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg'); INSERT INTO `user` VALUES (7, 'henl', '111', 'https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg'); INSERT INTO `user` VALUES (8, 'wwww', '111', 'https://pic4.zhimg.com/v2-797973e16edcd0ccaab44cfbfa08d2d3_r.jpg'); INSERT INTO `user` VALUES (9, 'eee', '111', 'https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg'); INSERT INTO `user` VALUES (10, '111sss', 'aaa', 'https://pic3.zhimg.com/v2-65020b1231ba55d55ee3d6a29ff3df26_r.jpg'); INSERT INTO `user` VALUES (11, '1111111', '111', 'https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg'); INSERT INTO `user` VALUES (12, '418564641564', '111', 'https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg'); SET FOREIGN_KEY_CHECKS = 1;
创建notes表
这个表的目的是存放用户的自己笔记的,这里不仅会记录这个备忘录的内容,创建时间,还有这个备忘录是否完成的情况。
建表sql语句
/* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Type : MySQL Source Server Version : 80028 Source Host : localhost:3306 Source Schema : todolist Target Server Type : MySQL Target Server Version : 80028 File Encoding : 65001 Date: 17/02/2023 11:40:10 */ SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for notes -- ---------------------------- DROP TABLE IF EXISTS `notes`; CREATE TABLE `notes` ( `id` int NOT NULL AUTO_INCREMENT COMMENT 'note表的id', `rid` int NOT NULL COMMENT '这个笔记是哪个人的', `detail` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '笔记的内容', `time` datetime NOT NULL COMMENT '笔记的创建时间', `type` int NOT NULL COMMENT '笔记的类型', `finish` int NOT NULL COMMENT '任务是否完成', PRIMARY KEY (`id`) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 15 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic; -- ---------------------------- -- Records of notes -- ---------------------------- INSERT INTO `notes` VALUES (4, 2, '我要去跑步', '2023-02-08 02:10:54', 2, 0); INSERT INTO `notes` VALUES (10, 1, '658848', '2023-02-12 08:00:00', 2, 1); INSERT INTO `notes` VALUES (12, 1, '56464687487487498', '2023-02-10 08:00:00', 2, 1); SET FOREIGN_KEY_CHECKS = 1;
type表
这里存放的是用户的,笔记类型与一直对应的解释。
type表建表sql语句
/* Navicat MySQL Data Transfer Source Server : localhost_3306 Source Server Type : MySQL Source Server Version : 80028 Source Host : localhost:3306 Source Schema : todolist Target Server Type : MySQL Target Server Version : 80028 File Encoding : 65001 Date: 08/02/2023 00:59:51 */ SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0; -- ---------------------------- -- Table structure for type -- ---------------------------- DROP TABLE IF EXISTS `type`; CREATE TABLE `type` ( `typeid` int NOT NULL COMMENT '主键', `type` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '是什么类型', PRIMARY KEY (`typeid`) USING BTREE ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic; -- ---------------------------- -- Records of type -- ---------------------------- INSERT INTO `type` VALUES (1, '美食'); INSERT INTO `type` VALUES (2, '学习'); SET FOREIGN_KEY_CHECKS = 1;
pom.xml
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.7.8</version> <relativePath/> <!-- lookup parent from repository --> </parent> <groupId>com.example</groupId> <artifactId>todolist-back</artifactId> <version>0.0.1-SNAPSHOT</version> <name>todolist-back</name> <description>todolist-back</description> <properties> <java.version>1.8</java.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.3.0</version> </dependency> <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis-spring-boot-starter</artifactId> <version>2.3.0</version> </dependency> <dependency> <groupId>com.mysql</groupId> <artifactId>mysql-connector-j</artifactId> <scope>runtime</scope> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> <optional>true</optional> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> <dependency> <groupId>com.baomidou</groupId> <artifactId>mybatis-plus-boot-starter</artifactId> <version>3.4.2</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> <configuration> <excludes> <exclude> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </exclude> </excludes> </configuration> </plugin> </plugins> </build> </project>
application.yml
server: port: 8081 spring: datasource: driver-class-name: com.mysql.cj.jdbc.Driver url: jdbc:mysql://localhost:3306/todolist?serverTimezone=GMT%2B8&useOldAliasMetadataBehavior=true username: root password: 123456 mybatis-plus: global-config: db-config: id-type: auto # configuration: # log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
代码
创建统一消息封装内Result
对于统一消息封装类,对返回的消息进行处理,可以使得消息更加的便于查看,与处理。
package com.example.todolistback.common.lang; import lombok.Data; import java.io.Serializable; @Data public class Result implements Serializable { private int code; // 200是正常,非200表示异常 private String msg; private Object data; public static Result succ(Object data) { return succ(200, "操作成功", data); } public static Result succ(int code, String msg, Object data) { Result r = new Result(); r.setCode(code); r.setMsg(msg); r.setData(data); return r; } public static Result fail(int i, String msg) { return fail(400, msg, null); } public static Result fail(String msg, Object data) { return fail(400, msg, data); } public static Result fail(int code, String msg, Object data) { Result r = new Result(); r.setCode(code); r.setMsg(msg); r.setData(data); return r; } }
创建Bean
文件结构,在这个Bean中存放的就是这个项目的会使用的各种类,也就是数据库中的实例化。
User
用户类
package com.example.todolistback.Bean; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class User { @TableId(value = "id", type = IdType.AUTO) private Integer id; private String username; private String password; // 头像 private String avatar; }
Type
备忘录类型类
package com.example.todolistback.Bean; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; @Data @AllArgsConstructor @NoArgsConstructor public class Type { private Integer typeid; private String type; }
Notes
备忘录内容类
package com.example.todolistback.Bean; import com.baomidou.mybatisplus.annotation.IdType; import com.baomidou.mybatisplus.annotation.TableId; import lombok.AllArgsConstructor; import lombok.Data; import lombok.NoArgsConstructor; import java.util.Date; import java.util.HashMap; @Data @AllArgsConstructor @NoArgsConstructor public class Notes { @TableId(value = "id", type = IdType.AUTO) private Integer id; private Integer rid; // 内容 private String detail; // 截止时间 private Date time; // 类型 private Integer type; // 是否完成 0表示还没有 表示完成了 private Integer finish; }
mapper层编写
需要在启动类设置扫包
package com.example.todolistback; import org.mybatis.spring.annotation.MapperScan; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication @MapperScan("com.example.todolistback.mapper") public class TodolistBackApplication { public static void main(String[] args) { SpringApplication.run(TodolistBackApplication.class, args); } }
项目结构,在mapper层里面存放各种mapper文件
UserMapper
package com.example.todolistback.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.todolistback.Bean.User; public interface UserMapper extends BaseMapper<User> { }
TypeMapper
package com.example.todolistback.mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; import com.example.todolistback.Bean.Type; public interface TypeMapper extends BaseMapper<Type>{
NotesMapper
package com.example.todolistback.mapper; import com.example.todolistback.Bean.Notes; import org.apache.ibatis.annotations.Mapper; import com.baomidou.mybatisplus.core.mapper.BaseMapper; @Mapper public interface NotesMapper extends BaseMapper<Notes> { }
service层编写
项目结构
UserService
package com.example.forum1.service; import com.baomidou.mybatisplus.extension.service.IService; import com.example.forum1.entity.User; public interface UserService extends IService<User> { }
TypeService
package com.example.todolistback.serviec; import com.baomidou.mybatisplus.extension.service.IService; import com.example.todolistback.Bean.Type; public interface TypeService extends IService<Type> { }
NotesService
package com.example.todolistback.serviec; import com.baomidou.mybatisplus.extension.service.IService; import com.example.todolistback.Bean.Notes; import com.example.todolistback.Bean.User; public interface NotesService extends IService<Notes> { }
UserServiceImpl
package com.example.todolistback.serviec.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.todolistback.Bean.User; import com.example.todolistback.mapper.UserMapper; import com.example.todolistback.serviec.UserService; import org.springframework.stereotype.Service; @Service public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService { }
TypeServiceImpl
package com.example.todolistback.serviec.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.todolistback.Bean.Type; import com.example.todolistback.Bean.User; import com.example.todolistback.mapper.TypeMapper; import com.example.todolistback.mapper.UserMapper; import com.example.todolistback.serviec.TypeService; import com.example.todolistback.serviec.UserService; import org.springframework.stereotype.Service; @Service public class TypeServiceImpl extends ServiceImpl<TypeMapper, Type> implements TypeService { }
NotesServiceImpl
package com.example.todolistback.serviec.impl; import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl; import com.example.todolistback.Bean.Notes; import com.example.todolistback.mapper.NotesMapper; import com.example.todolistback.serviec.NotesService; import org.springframework.stereotype.Service; @Service public class NotesServiceImpl extends ServiceImpl<NotesMapper, Notes> implements NotesService { }
controller编写
Usercontroller
在User的控制层中,存放的是用户的登录方法,用户的注册方法,还有一个可以根据用户的id对用户进行查询的方法。
对于
主体代码
package com.example.todolistback.Controller; import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.example.todolistback.Bean.Notes; import com.example.todolistback.Bean.User; import com.example.todolistback.common.lang.Result; import com.example.todolistback.serviec.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.ArrayList; import java.util.List; import java.util.Random; @RestController @RequestMapping("/user") public class UserController { private int userId; @Autowired private UserService userService; // 登录功能 @RequestMapping(value = "/login", method = RequestMethod.POST) public Result login(@RequestBody User user) { // 判断用户账号是否正确 User one = userService.getOne(new QueryWrapper<User>() .eq("username", user.getUsername()) .eq("password", user.getPassword()) ); if (one != null) { userId = one.getId(); return Result.succ(200,"登录成功", one); } else { return Result.fail(405, "账号或密码错误"); } } // 注册功能 @RequestMapping(value = "/register", method = RequestMethod.POST) public Result register(@RequestBody User user) { LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>(); queryWrapper.eq(User::getUsername, user.getUsername()); System.out.println(user); User tempUsername = userService.getOne(queryWrapper); // 先判断一下用户是否存在 存在就返回false if (tempUsername != null) { return Result.fail(405,"账户已存在"); } else { // 随机生成一个头像 ArrayList<String> arrayList = new ArrayList<>(); arrayList.add("https://pic3.zhimg.com/v2-d6ddf0128212235dddf76df7f4383f53.jpg"); arrayList.add("https://p0.ssl.img.360kuai.com/t01948ff2341a5d1ac3.jpg"); arrayList.add("https://pic3.zhimg.com/v2-65020b1231ba55d55ee3d6a29ff3df26_r.jpg"); arrayList.add("https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg"); arrayList.add("https://pic4.zhimg.com/v2-797973e16edcd0ccaab44cfbfa08d2d3_r.jpg"); Random random = new Random(); user.setAvatar(arrayList.get(random.nextInt(arrayList.size()))); // 反之加入 userService.save(user); return Result.succ(user); } } // 根据用户id查询 @RequestMapping ("/selectUserById/{userid}") @ResponseBody public Result selectUserById(@PathVariable("userid") Integer userid) { // 判断用户账号是否正确 User one = userService.getOne(new QueryWrapper<User>() .eq("id", userid) ); if (one != null) { userId = one.getId(); return Result.succ(200,"查询成功", one); } else { return Result.fail(405, "查询是啊比"); } } }
Typecontroller
主体代码
这里面的主要函数的作用是,获取type表的类型与解释的映射表。
package com.example.todolistback.Controller; import com.baomidou.mybatisplus.core.conditions.Wrapper; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.todolistback.Bean.Notes; import com.example.todolistback.Bean.Type; import com.example.todolistback.common.lang.Result; import com.example.todolistback.serviec.NotesService; import com.example.todolistback.serviec.TypeService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import java.util.HashMap; import java.util.List; @Controller public class TypeController { @Autowired private TypeService typeService; // 获取编号与类型的映射表 @ResponseBody @GetMapping("/getMapping") public HashMap<Integer, String> typeMapping(){ List<Type> types = typeService.list(); HashMap<Integer, String> hashMap = new HashMap<>(); for (Type type : types){ hashMap.put(type.getTypeid(), type.getType()); } return hashMap; } }
Notescontroller
在Notes控制层中,存放的是这个保存备忘的功能,分页查询功能,查询全部,修改功能,删除功能,在查询的过程中还包括了根据时间进行排序的功能,可以起到警示作用,还有可以根据是否完成的情况,进行分类查询。
主体代码
package com.example.todolistback.Controller; import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper; import com.baomidou.mybatisplus.core.metadata.IPage; import com.baomidou.mybatisplus.extension.plugins.pagination.Page; import com.example.todolistback.Bean.Notes; import com.example.todolistback.common.lang.Result; import com.example.todolistback.serviec.NotesService; import com.example.todolistback.serviec.TypeService; import com.example.todolistback.serviec.UserService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.*; import java.util.Date; import java.util.HashMap; import java.util.List; import java.util.Map; @Controller public class NotesController { @Autowired private NotesService notesService; // 查询文章 // 最开始查询的时候默认值是1 防止没有数据的情况 @ResponseBody @GetMapping("/selectAllByPage/{useid}") public Result list(@PathVariable("userid") Integer userid,@RequestParam(defaultValue = "1") Integer currentPage) { Page page = new Page(currentPage, 20); // 查询条件 分页的基础上 再按照创建时间排序 IPage pageData = notesService.page(page, new QueryWrapper<Notes>().orderByAsc("time").eq("rid", userid)); List records = pageData.getRecords(); for(int i = 0; i < records.size(); ++ i) { System.out.println(records.get(i)); } // System.out.println(pageData); // 如果成功了返回分页查询的数据 return Result.succ(pageData); } // 添加 @RequestMapping("/save") @ResponseBody public Result save(@RequestBody Notes notes){ System.out.println("notes save..." + notes); boolean b = notesService.save(notes); if (b){ return Result.succ(200, "添加成功", null); } return Result.fail(405, "添加失败"); } // 查询 测试用的 @RequestMapping ("/selectAll") @ResponseBody public Result selectAll(Integer userid){ List<Notes> notes = notesService.list(); System.out.println(notes); if (notes == null){ return Result.fail(405, "查询失败", null); } else { return Result.succ(200, "查询成功", notes); } } // 查询 只显示用户自己的 @RequestMapping ("/selectAllByUserID/{userid}") @ResponseBody public Result selectAllById(@PathVariable("userid") Integer userid,@RequestParam(defaultValue = "1") Integer currentPage){ Page page = new Page(currentPage, 20); // 查询条件 分页的基础上 再按照创建时间排序 IPage pageData = notesService.page(page, new QueryWrapper<Notes>().orderByAsc("time").eq("rid", userid)); return Result.succ(pageData); } // 根据类型查询 @RequestMapping ("/selectByType/{type}") @ResponseBody public Result selectByType(@PathVariable("userid") Integer userid, @PathVariable("type") Integer type){ QueryWrapper<Notes> wrapper = new QueryWrapper<>(); wrapper.eq("type", type); List<Notes> notes = notesService.list(wrapper); System.out.println(notes); if (notes == null){ return Result.fail(405, "查询失败", null); } else { return Result.succ(200, "查询成功", notes); } } // 查询全部的类型 @RequestMapping ("/selectIsFinish/{userid}/{isFinish}") @ResponseBody public Result selectType(@PathVariable("userid") Integer userid, @PathVariable("isFinish") Integer isFinish,@RequestParam(defaultValue = "1") Integer currentPage){ Page page = new Page(currentPage, 20); // 查询条件 分页的基础上 再按照创建时间排序 IPage pageData = notesService.page(page, new QueryWrapper<Notes>().orderByAsc("time").eq("rid", userid).eq("finish", isFinish)); return Result.succ(pageData); } // 修改 @RequestMapping("/update") @ResponseBody public Result update(@RequestBody Notes notes){ System.out.println("开始更新"); System.out.println(notes); boolean b = notesService.update(notes, new QueryWrapper<Notes>().eq("id", notes.getId())); if (b){ System.out.println("更新成功"); return Result.succ(200, "更新成功", null); } System.out.println("更新失败"); return Result.fail(405, "更新失败"); } // 删除 @RequestMapping("/delete/{id}") @ResponseBody public Result delete(@PathVariable("id") Integer id){ System.out.println("user delete..." + id); boolean b = notesService.removeById(id); if (b){ return Result.succ(200, "删除成功", null); } return Result.fail(405, "删除失败"); } }












