【持续更新ing】uniapp+springboot实现个人备忘录系统【前后端分离】
2023-12-29 18:46:19
目录
接下来我们使用uniapp+springboot实现一个简单的前后端分离的小项目----个人备忘录系统，适合初学者学习，以下是详细步骤：
（1）项目可行性分析
（一）技术可行性：
1.uniapp是一个基于Vue.js框架的跨平台开发工具，可以在多个平台上实现一次开发多端运行。它提供了丰富的组件和插件，使得开发变得更加高效。
2.uniapp支持多个主流的移动端平台，如iOS和Android，以及微信小程序、H5等。这意味着你可以通过uniapp开发一个备忘录系统，并在多个平台上发布和使用。
3.Vue.js作为uniapp的底层框架，拥有活跃的开发社区和丰富的生态系统，可以提供大量的资源和支持。
（二）经济可行性：
1.uniapp的开发成本相对较低，因为它使用了一套代码可以覆盖多个平台的开发方式，减少了重复的工作量和开发时间。
2.由于uniapp支持多个主流平台，你可以在不同的平台上发布你的备忘录系统，扩大用户群体，增加潜在的收入来源。
3.uniapp的跨平台特性可以降低维护成本，因为你只需要维护一套代码，而不是针对每个平台都进行独立的开发和维护。
（三）社会可行性：
1.备忘录系统是一个常见且实用的应用，它可以帮助个人记录重要事项、提醒任务等。这种类型的应用在社会中有广泛的需求。
2.通过使用uniapp开发备忘录系统，你可以满足不同用户使用不同平台的需求，提高用户体验和满意度。
3.在移动互联网时代，人们越来越依赖手机和移动应用程序进行工作和生活管理。开发备忘录系统可以满足人们随时随地记录和查看备忘录的需求，符合社会的发展趋势。
（2）需求描述
个人备忘录系统主要有登录、注册、查看所有备忘录、创建新的备忘录、删除备忘录、修改备忘录、根据分类查询已完成或未完成的备忘录。
功能模块图
用例图：
（3）界面原型
主要界面如下：
1.登录：
2.注册：
- 我的：
- 分类：
- 记录：
- 主页：
（4）数据库设计
数据库主要有三个表：
（1）User表：
| 表名 | 类型 | 长度 | 注释 |
| id | int | 255 | id |
| username | varchar | 255 | 用户名 |
| password | varchar | 255 | 密码 |
| avatar | varchar | 255 | 头像 |
（2）Notes表：
| 表名 | 类型 | 长度 | 注释 |
| id | int | 255 | id |
| rid | int | 255 | 用户id |
| detail | varchar | 255 | 内容 |
| time | datetime | 255 | 截止时间 |
| type | int | 255 | 类型 |
| finish | int | 255 | 任务是否完成 |
（3）Type表：
| 表名 | 类型 | 长度 | 注释 |
| typeid | int | 255 | 主键 |
| type | varchar | 255 | 是什么类型 |
E-r图如下：
数据库的sql文件：
/*
Navicat Premium Data Transfer
Source Server : mySQL
Source Server Type : MySQL
Source Server Version : 80019
Source Host : localhost:3305
Source Schema : memo
Target Server Type : MySQL
Target Server Version : 80019
File Encoding : 65001
Date: 25/12/2023 11:06:46
*/
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
-- ----------------------------
-- Table structure for notes
-- ----------------------------
DROP TABLE IF EXISTS `notes`;
CREATE TABLE `notes` (
`id` int(0) NOT NULL AUTO_INCREMENT COMMENT 'note表的id',
`rid` int(0) NOT NULL COMMENT '这个笔记是哪个人的',
`detail` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '笔记的内容',
`photo` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '用户上传的图片，null或者0表示无',
`time` datetime(0) NOT NULL COMMENT '笔记的创建时间',
`type` int(0) NOT NULL COMMENT '笔记的类型',
`finish` int(0) NOT NULL COMMENT '任务是否完成',
PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 57 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of notes
-- ----------------------------
INSERT INTO `notes` VALUES (31, 13, '软件设计师考试', 'http://s6422okdy.hn-bkt.clouddn.com/2023/12/23/e7bbeaecf4984a72af03d6d623a4f96c.jpg', '2023-11-04 00:04:28', 2, 1);
INSERT INTO `notes` VALUES (32, 13, '国奖答辩', NULL, '2023-10-16 20:26:27', 2, 1);
INSERT INTO `notes` VALUES (33, 13, 'hehang-blog数据库项目', NULL, '2024-01-07 20:26:56', 2, 1);
INSERT INTO `notes` VALUES (34, 13, '数据库详细设计报告', NULL, '2023-11-08 20:27:24', 2, 1);
INSERT INTO `notes` VALUES (35, 13, '数据库课设验收', NULL, '2023-11-22 20:28:02', 2, 1);
INSERT INTO `notes` VALUES (36, 13, '计算机组成原理期中考试', NULL, '2023-11-24 20:28:44', 2, 1);
INSERT INTO `notes` VALUES (37, 13, '计算机能力挑战赛C语言', NULL, '2023-11-25 08:00:00', 2, 1);
INSERT INTO `notes` VALUES (38, 13, '学生代表大会', '0', '2023-12-07 13:15:00', 3, 1);
INSERT INTO `notes` VALUES (39, 13, '闪聚支付springclound项目', NULL, '2023-12-19 18:30:21', 2, 1);
INSERT INTO `notes` VALUES (40, 13, '英语四级考试', NULL, '2023-12-16 09:00:00', 2, 1);
INSERT INTO `notes` VALUES (41, 13, '数据库课设详细设计文档', '0', '2024-01-07 23:59:59', 2, 0);
INSERT INTO `notes` VALUES (43, 13, '完成代码细节的修改', NULL, '2023-12-18 12:00:00', 2, 1);
INSERT INTO `notes` VALUES (44, 14, '记得吃药', '0', '2023-12-24 14:57:57', 8, 0);
INSERT INTO `notes` VALUES (45, 14, '写完uniapp期末课设的报告', '', '2023-12-24 14:08:58', 2, 1);
INSERT INTO `notes` VALUES (47, 13, '计算机能力挑战赛决赛\n地点：武汉纺织大学阳光校区', 'http://s6422okdy.hn-bkt.clouddn.com/2023/12/23/daa53bce645146d08531649be4308db4.jpg', '2023-12-09 09:00:00', 2, 1);
-- ----------------------------
-- Table structure for type
-- ----------------------------
DROP TABLE IF EXISTS `type`;
CREATE TABLE `type` (
`typeid` int(0) 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, '学习');
INSERT INTO `type` VALUES (3, '工作');
INSERT INTO `type` VALUES (4, '娱乐');
INSERT INTO `type` VALUES (5, '社交');
INSERT INTO `type` VALUES (6, '家庭');
INSERT INTO `type` VALUES (7, '个人');
INSERT INTO `type` VALUES (8, '健康');
INSERT INTO `type` VALUES (9, '财务');
-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user` (
`id` int(0) 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 = 16 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;
-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (13, 'hehang', '123456', 'https://img2.baidu.com/it/u=3841326637,2519425910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501');
INSERT INTO `user` VALUES (14, 'abcd', '123456', 'https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg');
INSERT INTO `user` VALUES (15, 'mynote', '123456', 'https://img2.baidu.com/it/u=3841326637,2519425910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501');
INSERT INTO `user` VALUES (16, '1234', '123456', 'https://img2.baidu.com/it/u=3841326637,2519425910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501');
SET FOREIGN_KEY_CHECKS = 1;
（5）后端工程
首先打开IDEA，选择创建Spring Initializr，按照以下配置，jdk版本无法选择jdk1.8，先不管，进去以后可以改，具体操作可以看我的另一篇相关的博客
配置spring版本，先选择3.2.0，进入项目后再通过pom文件修改
进入项目后修改pom.xml文件为如下配置，我们在pom中手动修改了jdk版本为1.8，spring为2.7.8，这样兼容性比较好，修改后记得刷新maven
<?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>Memo-hehang</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>hehang</name>
<description>memo</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>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</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>
<!--七牛云OOS-->
<dependency>
<groupId>com.qiniu</groupId>
<artifactId>qiniu-java-sdk</artifactId>
<version>[7.13.0, 7.13.99]</version>
</dependency>
<dependency>
<groupId>com.google.code.gson</groupId>
<artifactId>gson</artifactId>
<version>2.10.1</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>
<plugin>
<groupId>org.apache.maven.plugins</groupId>
<artifactId>maven-compiler-plugin</artifactId>
<configuration>
<source>9</source>
<target>9</target>
</configuration>
</plugin>
</plugins>
</build>
</project>
然后我们修改resources文件夹下的application.yml，数据库连接修改成你自己的，七牛云的使用可以看我上一篇博客
server:
port: 2023
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3305/memo?characterEncoding=utf-8&serverTimezone=Asia/Shanghai
username: root
password: 123456
mybatis-plus:
global-config:
db-config:
id-type: auto
# configuration:
# log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# 打开七牛云，找到密钥管理，把相关信息填写到下面3行
myoss:
accessKey: yourAK
secretKey: yourSK
bucket: yourbucket
接下来在项目下创建如下几个包：
在common文件下创建 R.java 类，主要用于封装返回给前端的数据：
package com.example.memohehang.common;
import lombok.Data;
import java.io.Serializable;
/**
* 统一返回类型
*/
@Data
public class R implements Serializable
{
private int code; // 200是正常，非200表示异常
private String msg;
private Object data;
public static R success(Object data)
{
return success(200, "操作成功", data);
}
public static R success(int code, String msg, Object data)
{
R r = new R();
r.setCode(code);
r.setMsg(msg);
r.setData(data);
return r;
}
public static R error(int i, String msg)
{
return error(400, msg, null);
}
public static R error(String msg, Object data)
{
return error(400, msg, data);
}
public static R error(int code, String msg, Object data)
{
R r = new R();
r.setCode(code);
r.setMsg(msg);
r.setData(data);
return r;
}
}
在config包下创建 CorsConfig.java 类，用于解决前端跨域问题，在config.AllowedOrigin中填写你自己的前端端口，一般为8080，或者填 * ,允许所有
package com.example.memohehang.config;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.cors.CorsConfiguration;
//解决前端跨域问题
@Configuration
public class CorsConfig {
@Bean
public CorsFilter corsFilter()
{
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.addAllowedOrigin("http://localhost:8080");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
config.setAllowCredentials(true);
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
}
---------------------------------------------------持续更新ing--------------------------------------------------------------
文章来源:https://blog.csdn.net/m0_60936523/article/details/135293910
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！