当前位置： 首页 > news >正文

云南网站开发培训机构,网页版word在线编辑,网站设计制作步骤,低价网站制作顺德目录 #xff08;1#xff09;项目可行性分析 #xff08;2#xff09;需求描述 #xff08;3#xff09;界面原型 #xff08;4#xff09;数据库设计 #xff08;5#xff09;后端工程 接下来我们使用uniappspringboot实现一个简单的前后端分离的小项目—-个…目录 1项目可行性分析 2需求描述 3界面原型 4数据库设计 5后端工程 接下来我们使用uniappspringboot实现一个简单的前后端分离的小项目—-个人备忘录系统适合初学者学习以下是详细步骤 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数据库设计 数据库主要有三个表 1User表 表名 类型 长度 注释 id int 255 id username varchar 255 用户名 password varchar 255 密码 avatar varchar 255 头像
2Notes表 表名 类型 长度 注释 id int 255 id rid int 255 用户id detail varchar 255 内容 time datetime 255 截止时间 type int 255 类型 finish int 255 任务是否完成
3Type表 表名 类型 长度 注释 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/u3841326637,2519425910fm253fmtautoapp138fJPEG?w500h501); 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/u3841326637,2519425910fm253fmtautoapp138fJPEG?w500h501); INSERT INTO user VALUES (16, 1234, 123456, https://img2.baidu.com/it/u3841326637,2519425910fm253fmtautoapp138fJPEG?w500h501);SET FOREIGN_KEY_CHECKS 1;5后端工程 首先打开IDEA选择创建Spring Initializr按照以下配置jdk版本无法选择jdk1.8先不管进去以后可以改具体操作可以看我的另一篇相关的博客 配置spring版本先选择3.2.0进入项目后再通过pom文件修改 进入项目后修改pom.xml文件为如下配置我们在pom中手动修改了jdk版本为1.8spring为2.7.8这样兼容性比较好修改后记得刷新maven ?xml version1.0 encodingUTF-8? project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion2.7.8/versionrelativePath/ !– lookup parent from repository –/parentgroupIdcom.example/groupIdartifactIdMemo-hehang/artifactIdversion0.0.1-SNAPSHOT/versionnamehehang/namedescriptionmemo/descriptionpropertiesjava.version1.8/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.3.0/version/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion2.3.0/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-data-jpa/artifactId/dependencydependencygroupIdcom.mysql/groupIdartifactIdmysql-connector-j/artifactIdscoperuntime/scope/dependencydependencygroupIdorg.projectlombok/groupIdartifactIdlombok/artifactIdoptionaltrue/optional/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdcom.baomidou/groupIdartifactIdmybatis-plus-boot-starter/artifactIdversion3.4.2/version/dependency!–七牛云OOS–dependencygroupIdcom.qiniu/groupIdartifactIdqiniu-java-sdk/artifactIdversion[7.13.0, 7.13.99]/version/dependencydependencygroupIdcom.google.code.gson/groupIdartifactIdgson/artifactIdversion2.10.1/version/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactIdconfigurationexcludesexcludegroupIdorg.projectlombok/groupIdartifactIdlombok/artifactId/exclude/excludes/configuration/pluginplugingroupIdorg.apache.maven.plugins/groupIdartifactIdmaven-compiler-plugin/artifactIdconfigurationsource9/sourcetarget9/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?characterEncodingutf-8serverTimezoneAsia/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————————————————————–