【持续更新ing】uniapp+springboot实现个人备忘录系统【前后端分离】

目录

（1）项目可行性分析

（2）需求描述

（3）界面原型

（4）数据库设计

（5）后端工程

接下来我们使用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.注册：

  1. 我的：

  1. 分类：

  1. 记录：

  1. 主页：

（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 TransferSource Server         : mySQLSource Server Type    : MySQLSource Server Version : 80019Source Host           : localhost:3305Source Schema         : memoTarget Server Type    : MySQLTarget Server Version : 80019File Encoding         : 65001Date: 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: 2023spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3305/memo?characterEncoding=utf-8&serverTimezone=Asia/Shanghaiusername: rootpassword: 123456mybatis-plus:global-config:db-config:id-type: auto
#  configuration:
#    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
# 打开七牛云，找到密钥管理，把相关信息填写到下面3行
myoss:accessKey: yourAKsecretKey: yourSKbucket: 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 {@Beanpublic 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--------------------------------------------------------------

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://xiahunao.cn/news/2662042.html

如若内容造成侵权/违法违规/事实不符，请联系瞎胡闹网进行投诉反馈，一经查实，立即删除！

相关文章

5天一更新的卫星影像数据来自哪里？

5天一更新的卫星影像数据来自哪里？

这里我们就来分享一下&#xff0c;5天一更新的卫星影像源来自哪里。 哥白尼计划 在开始讲卫星影像数据源时&#xff0c;我们先来了解一下什么是哥白尼计划。 哥白尼计划&#xff08;Copernicus Programme&#xff09;&#xff0c;又称全球环境与安全监测计划&#xff08;Glo…
阅读更多...
HCIA-Datacom题库（自己整理分类的）——ARP协议【完】

HCIA-Datacom题库（自己整理分类的）——ARP协议【完】

一、单选 1.ARP 属于哪一层协议&#xff1f; 数据链路层 网络层 物理层 传输层 2.ARP请求是____发送的 点播 广播 组播 单播 关于ARP报文的说法错误的是? ARP请求报文是广播发送的 ARP报文不能被转发到其他广播域 ARP应答报文是单播方发送的 任何链路层协议都需…
阅读更多...
【并发编程篇】解决线程安全问题 — CopyOnWriteArraySet

【并发编程篇】解决线程安全问题 — CopyOnWriteArraySet

文章目录 &#x1f354;情景引入&#x1f33a;报错了&#xff0c;解决方法⭐方法一⭐方法二 &#x1f354;情景引入 我们看下面这段代码 运行后报错了 我们看看报错原因 报错原因是并发修改异常 &#x1f33a;报错了&#xff0c;解决方法 ⭐方法一 我们使用其他工具类&am…
阅读更多...
【领域驱动设计】模式--通用语言(Ubiquitous language)

【领域驱动设计】模式--通用语言(Ubiquitous language)

一.前言 有道无术术可求&#xff0c;有术无道止于术。方法论的形成都是为了让我们能够更高效&#xff0c;系统的解决问题&#xff0c;而不至于遇到问题不知所措。 二.通用语言的必要性 相信大家在实际的软件开发流程过程中&#xff0c;经常会遇到参照 Prd原型 编码出的系统与实…
阅读更多...
骑砍战团MOD开发(27)-module_tableau_materials.py材质

骑砍战团MOD开发(27)-module_tableau_materials.py材质

一.配置材质资源 OpenBrf寻找对应材质资源. tableau配置材质资源 ("round_shield_1", 0, "sample_shield_round_1", 512, 256, 0, 0, 0, 0,[(store_script_param, ":banner_mesh", 1),(set_fixed_point_multiplier, 100),(init_position, pos1),…
阅读更多...
NFC物联网智能购物车设计方案

NFC物联网智能购物车设计方案

智能购物车是综合利用计算机网络、射频识别技术、数据库技术、单片机于一体的设备具有先进性、便于管理性、经济性、普适性。基于NFC (Near Field Communication&#xff0c;近场通信)技术的智能购物车&#xff0c;能够大幅缩短结账排队时间&#xff0c;实现“无感支付”。NFC是…
阅读更多...
【黑产攻防道04】利用pow工作量证明降低黑产的破解效率

【黑产攻防道04】利用pow工作量证明降低黑产的破解效率

上一期我们提到&#xff0c;黑产有三种常见的破解方式&#xff1a; 1.通过识别出验证码图片答案实现批量破解验证&#xff0c;即图片答案识别&#xff1b; 2.在了解通讯流程之后直接携带相关参数发请求&#xff0c;即协议破解&#xff1b; 3.使用各种客户端模拟器来模拟真人…
阅读更多...
高校实验室安全管理视频监控系统设计：AI视频识别技术智能分析网关V4的应用

高校实验室安全管理视频监控系统设计：AI视频识别技术智能分析网关V4的应用

一、背景 实验室作为科研与教学的核心场所&#xff0c;其重要性不言而喻。高校实验室由于其开放性与多样性&#xff0c;安全管理尤为重要。高校实验室的安全管理&#xff0c;不仅是保障科研与教学质量的基础&#xff0c;更是校园安全的重要组成部分。一旦发生安全事故&#xf…
阅读更多...
FPGA 底层资源介绍

FPGA 底层资源介绍

Xilinx FPGA底层资源介绍 本文转载自&#xff1a;瓜大三哥微信公众号 XILINX FPGA 芯片整体架构如下所示&#xff0c;整个芯片是以BANK进行划分的&#xff0c;不同的工艺、器件速度和对应的时钟具有不同的BANK数量&#xff08;下面截图是以K7325tffg676为例&#xff09;&…
阅读更多...
外汇天眼：仿冒OANDA安达──诓称分析师带领稳赚不赔，恶意爆仓再三骗入金

外汇天眼：仿冒OANDA安达──诓称分析师带领稳赚不赔，恶意爆仓再三骗入金

最近有考虑做美股、期货、外汇的投资人请注意&#xff0c;近期外汇天眼收到一位台湾投资人爆料&#xff0c;分享自己误用仿冒OANDA安达的假券商而损失新台币50万元&#xff0c;以下让我们一起了解这个诈骗案件的详细经过与手法。 今年7月底&#xff0c;受害者在社交平台IG上被…
阅读更多...
解决Github无法上传＞100M文件——只需两行代码

解决Github无法上传＞100M文件——只需两行代码

文章目录 合作推广&#xff0c;分享一个人工智能学习网站。计划系统性学习的同学可以了解下&#xff0c;点击助力博主脱贫( •̀ ω •́ )✧ 废话不多说&#xff0c;如果在githubpush文件太大时&#xff0c;会报错&#xff1a;this exceeds GitHub’s file size limit of 100.…
阅读更多...
SLAM PnP问题以及相关基础知识

SLAM PnP问题以及相关基础知识

目标泛函 目标泛函是在优化问题中使用的一种数学工具&#xff0c;目标泛函是一个函数&#xff0c;它将一个或多个函数映射到一个实数。它常用于描述需要最小化或最大化的函数。在优化问题中&#xff0c;我们通常希望找到使得某个特定函数取得最大值或最小值的变量值。目标泛函…
阅读更多...
喜讯｜极狐GitLab 通过信通院汽车软件研发效能成熟度模型能力

喜讯｜极狐GitLab 通过信通院汽车软件研发效能成熟度模型能力

12 月 27 日&#xff0c;在由中国信息通信研究院&#xff08;下称信通院&#xff09;、中国通信标准化协会联合主办的2023系统稳定性与精益软件工程大会-汽车云质效专场峰会上&#xff0c;信通院发布了“2023年下半年汽车云评估结果”&#xff0c;极狐GitLab 一体化 DevOps 平台…
阅读更多...
c 语言， 随机数，一个不像随机数的随机数

c 语言， 随机数，一个不像随机数的随机数

c 语言&#xff0c; 随机数&#xff0c;一个不像随机数的随机数 使用两种方式获取随机数&#xff0c;总感觉使用比例的那个不太像随机数。 方法一&#xff1a; rand() 获取一个随机数&#xff0c;计算这个随机数跟最大可能值 RAND_MAX&#xff08;定义在 stdlib.h 中&#xf…
阅读更多...
C++初阶（十七）模板进阶

C++初阶（十七）模板进阶

&#x1f4d8;北尘_&#xff1a;个人主页 &#x1f30e;个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上&#xff0c;不忘来时的初心 文章目录 一、非类型模板参数二、模板的特化1、概念2、函数模板特化3、类模板特化1、全特化2、偏特化 三…
阅读更多...
k8s的陈述式资源管理（命令行操作）

k8s的陈述式资源管理（命令行操作）

&#xff08;一&#xff09;k8s的陈述式资源管理 1、命令行&#xff1a;kubectl命令行工具——用于一般的资源管理 &#xff08;1&#xff09;优点&#xff1a;90%以上ce场景都可以满足 &#xff08;2&#xff09;特点&#xff1a;对资源的增、删、查比较方便&#xff0c;对…
阅读更多...
7+衰老+WGCNA+机器学习+实验，非肿瘤领域的衰老相关研究

7+衰老+WGCNA+机器学习+实验，非肿瘤领域的衰老相关研究

今天给同学们分享一篇生信文章“Identification of aging-related biomarkers and immune infiltration characteristics in osteoarthritis based on bioinformatics analysis and machine learning”&#xff0c;这篇文章发表在Front Immunol期刊上&#xff0c;影响因子为7.3…
阅读更多...
C语言——小细节和小知识7

C语言——小细节和小知识7

一、逆序字符串 1、递归1 #include <stdio.h> #include <string.h>void ReverseArray(char *str) {char temp *str;//1int len (int)strlen(str);*str *(str len - 1);//2*(str len - 1) \0;//3if(strlen(str 1) > 2)//只要字符串还大于2&#xff0c;就…
阅读更多...
解锁小程序UI设计的奥秘：必须知晓的相关事项

解锁小程序UI设计的奥秘：必须知晓的相关事项

一、什么是小程序 2016年张小龙首次提出小程序概念&#xff0c;全称为“微信小程序”&#xff0c;英文名为“微信小程序”MiniProgram它是一种基于微信生态系统、开发周期短、成本低、无需下载安装、即用即走的应用。 到目前为止&#xff0c;小程序不仅是微信独有的&#xff…
阅读更多...
4-链表-合并两个有序链表

4-链表-合并两个有序链表

这是链表的第4题&#xff0c;来个简单算法玩玩。力扣链接。 将两个升序链表合并为一个新的 升序 链表并返回。新链表是通过拼接给定的两个链表的所有节点组成的。 示例 1&#xff1a; 输入&#xff1a;l1 [1,2,4], l2 [1,3,4] 输出&#xff1a;[1,1,2,3,4,4]示例 2&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023