devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp+springboot 实现前后端分离的个人备忘录系统【超详细】_uniapp springboot

作者：羊村懒王 | 2024-03-18 13:07:31

赞

踩

uniapp springboot

目录

（1）项目可行性分析

（一）技术可行性：

（二）经济可行性：

（三）社会可行性：

（2）需求描述

功能模块图

用例图：

（3）界面原型

1.登录：

2.注册：

3.我的： 

4.分类: 

5.记录： 

6.主页： 

（4）数据库设计

（1）User表：

（2）Notes表：

（3）Type表：

E-r图如下：

数据库的sql文件：

（5）后端工程

common包： 

R.java

config包： 

CorsConfig.java

domain包：

Notes.java

Type.java

User.java

utils包：

PathUtils.java

controller包：

NotesController.java

TypeController.java

UploadController.java

 UserController.java

 service包：

NotesService

OssUploadService

TypeService

UserService

Impl包：

NotesServiceImpl.java

OssUploadServiceImpl.java

TypeServiceImpl.java

UserServiceImpl.java

（6）前端工程

index.js

pages.json

addNote.vue

 catNote.vue

 Login.vue

 Main.vue

 mine.vue

Register.vue

接下来我们使用uniapp+springboot实现一个简单的前后端分离的小项目----个人备忘录系统，适合初学者学习，全文大约5w字，全部免费，以下是详细步骤：

（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.注册：

3.我的： 

4.分类: 

5.记录： 

6.主页： 

（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文件：
  1. /*
  2.  Navicat Premium Data Transfer
  4.  Source Server         : mySQL
  5.  Source Server Type    : MySQL
  6.  Source Server Version : 80019
  7.  Source Host           : localhost:3305
  8.  Source Schema         : memo
  10.  Target Server Type    : MySQL
  11.  Target Server Version : 80019
  12.  File Encoding         : 65001
  14.  Date: 25/12/2023 11:06:46
  15. */
  16.  
  17. SET NAMES utf8mb4;
  18. SET FOREIGN_KEY_CHECKS = 0;
  19.  
  20. -- ----------------------------
  21. -- Table structure for notes
  22. -- ----------------------------
  23. DROP TABLE IF EXISTS `notes`;
  24. CREATE TABLE `notes`  (
  25.   `id` int(0) NOT NULL AUTO_INCREMENT COMMENT 'note表的id',
  26.   `rid` int(0) NOT NULL COMMENT '这个笔记是哪个人的',
  27.   `detail` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '笔记的内容',
  28.   `photo` varchar(255) CHARACTER SET utf8mb4 COLLATE utf8mb4_0900_ai_ci NULL DEFAULT NULL COMMENT '用户上传的图片，null或者0表示无',
  29.   `time` datetime(0) NOT NULL COMMENT '笔记的创建时间',
  30.   `type` int(0) NOT NULL COMMENT '笔记的类型',
  31.   `finish` int(0) NOT NULL COMMENT '任务是否完成',
  32.   PRIMARY KEY (`id`) USING BTREE
  33. ) ENGINE = InnoDB AUTO_INCREMENT = 57 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;
  34.  
  35. -- ----------------------------
  36. -- Records of notes
  37. -- ----------------------------
  38. 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);
  39. INSERT INTO `notes` VALUES (32, 13, '国奖答辩', NULL, '2023-10-16 20:26:27', 2, 1);
  40. INSERT INTO `notes` VALUES (33, 13, 'hehang-blog数据库项目', NULL, '2024-01-07 20:26:56', 2, 1);
  41. INSERT INTO `notes` VALUES (34, 13, '数据库详细设计报告', NULL, '2023-11-08 20:27:24', 2, 1);
  42. INSERT INTO `notes` VALUES (35, 13, '数据库课设验收', NULL, '2023-11-22 20:28:02', 2, 1);
  43. INSERT INTO `notes` VALUES (36, 13, '计算机组成原理期中考试', NULL, '2023-11-24 20:28:44', 2, 1);
  44. INSERT INTO `notes` VALUES (37, 13, '计算机能力挑战赛C语言', NULL, '2023-11-25 08:00:00', 2, 1);
  45. INSERT INTO `notes` VALUES (38, 13, '学生代表大会', '0', '2023-12-07 13:15:00', 3, 1);
  46. INSERT INTO `notes` VALUES (39, 13, '闪聚支付springclound项目', NULL, '2023-12-19 18:30:21', 2, 1);
  47. INSERT INTO `notes` VALUES (40, 13, '英语四级考试', NULL, '2023-12-16 09:00:00', 2, 1);
  48. INSERT INTO `notes` VALUES (41, 13, '数据库课设详细设计文档', '0', '2024-01-07 23:59:59', 2, 0);
  49. INSERT INTO `notes` VALUES (43, 13, '完成代码细节的修改', NULL, '2023-12-18 12:00:00', 2, 1);
  50. INSERT INTO `notes` VALUES (44, 14, '记得吃药', '0', '2023-12-24 14:57:57', 8, 0);
  51. INSERT INTO `notes` VALUES (45, 14, '写完uniapp期末课设的报告', '', '2023-12-24 14:08:58', 2, 1);
  52. 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);
  53.  
  54. -- ----------------------------
  55. -- Table structure for type
  56. -- ----------------------------
  57. DROP TABLE IF EXISTS `type`;
  58. CREATE TABLE `type`  (
  59.   `typeid` int(0) NOT NULL COMMENT '主键',
  60.   `type` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '是什么类型',
  61.   PRIMARY KEY (`typeid`) USING BTREE
  62. ) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;
  63.  
  64. -- ----------------------------
  65. -- Records of type
  66. -- ----------------------------
  67. INSERT INTO `type` VALUES (1, '日常');
  68. INSERT INTO `type` VALUES (2, '学习');
  69. INSERT INTO `type` VALUES (3, '工作');
  70. INSERT INTO `type` VALUES (4, '娱乐');
  71. INSERT INTO `type` VALUES (5, '社交');
  72. INSERT INTO `type` VALUES (6, '家庭');
  73. INSERT INTO `type` VALUES (7, '个人');
  74. INSERT INTO `type` VALUES (8, '健康');
  75. INSERT INTO `type` VALUES (9, '财务');
  76.  
  77. -- ----------------------------
  78. -- Table structure for user
  79. -- ----------------------------
  80. DROP TABLE IF EXISTS `user`;
  81. CREATE TABLE `user`  (
  82.   `id` int(0) NOT NULL AUTO_INCREMENT COMMENT '用户的id',
  83.   `username` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '用户名字',
  84.   `password` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '用户密码',
  85.   `avatar` varchar(255) CHARACTER SET utf8 COLLATE utf8_bin NOT NULL COMMENT '用户的头像',
  86.   PRIMARY KEY (`id`) USING BTREE
  87. ) ENGINE = InnoDB AUTO_INCREMENT = 16 CHARACTER SET = utf8 COLLATE = utf8_bin ROW_FORMAT = Dynamic;
  88.  
  89. -- ----------------------------
  90. -- Records of user
  91. -- ----------------------------
  92. 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');
  93. INSERT INTO `user` VALUES (14, 'abcd', '123456', 'https://pic2.zhimg.com/v2-fc348d5e926116782149d2151dc09834.jpg');
  94. 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');
  95. 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');
  96.  
  97. 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

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  3.          xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
  4.     <modelVersion>4.0.0</modelVersion>
  5.     <parent>
  6.         <groupId>org.springframework.boot</groupId>
  7.         <artifactId>spring-boot-starter-parent</artifactId>
  8.         <version>2.7.8</version>
  9.         <relativePath/> <!-- lookup parent from repository -->
  10.     </parent>
  11.     <groupId>com.example</groupId>
  12.     <artifactId>Memo-hehang</artifactId>
  13.     <version>0.0.1-SNAPSHOT</version>
  14.     <name>hehang</name>
  15.     <description>memo</description>
  16.     <properties>
  17.         <java.version>1.8</java.version>
  18.     </properties>
  19.     <dependencies>
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-web</artifactId>
  23.         </dependency>
  24.         <dependency>
  25.             <groupId>org.mybatis.spring.boot</groupId>
  26.             <artifactId>mybatis-spring-boot-starter</artifactId>
  27.             <version>2.3.0</version>
  28.         </dependency>
  29.         <dependency>
  30.             <groupId>org.mybatis.spring.boot</groupId>
  31.             <artifactId>mybatis-spring-boot-starter</artifactId>
  32.             <version>2.3.0</version>
  33.         </dependency>
  34.         <dependency>
  35.             <groupId>org.springframework.boot</groupId>
  36.             <artifactId>spring-boot-starter-data-jpa</artifactId>
  37.         </dependency>
  38.         <dependency>
  39.             <groupId>com.mysql</groupId>
  40.             <artifactId>mysql-connector-j</artifactId>
  41.             <scope>runtime</scope>
  42.         </dependency>
  43.         <dependency>
  44.             <groupId>org.projectlombok</groupId>
  45.             <artifactId>lombok</artifactId>
  46.             <optional>true</optional>
  47.         </dependency>
  48.         <dependency>
  49.             <groupId>org.springframework.boot</groupId>
  50.             <artifactId>spring-boot-starter-test</artifactId>
  51.             <scope>test</scope>
  52.         </dependency>
  53.         <dependency>
  54.             <groupId>com.baomidou</groupId>
  55.             <artifactId>mybatis-plus-boot-starter</artifactId>
  56.             <version>3.4.2</version>
  57.         </dependency>
  58.  
  59.         <!--七牛云OOS-->
  60.         <dependency>
  61.             <groupId>com.qiniu</groupId>
  62.             <artifactId>qiniu-java-sdk</artifactId>
  63.             <version>[7.13.0, 7.13.99]</version>
  64.         </dependency>
  65.         <dependency>
  66.             <groupId>com.google.code.gson</groupId>
  67.             <artifactId>gson</artifactId>
  68.             <version>2.10.1</version>
  69.         </dependency>
  70.     </dependencies>
  71.  
  72.     <build>
  73.         <plugins>
  74.             <plugin>
  75.                 <groupId>org.springframework.boot</groupId>
  76.                 <artifactId>spring-boot-maven-plugin</artifactId>
  77.                 <configuration>
  78.                     <excludes>
  79.                         <exclude>
  80.                             <groupId>org.projectlombok</groupId>
  81.                             <artifactId>lombok</artifactId>
  82.                         </exclude>
  83.                     </excludes>
  84.                 </configuration>
  85.             </plugin>
  86.             <plugin>
  87.                 <groupId>org.apache.maven.plugins</groupId>
  88.                 <artifactId>maven-compiler-plugin</artifactId>
  89.                 <configuration>
  90.                     <source>9</source>
  91.                     <target>9</target>
  92.                 </configuration>
  93.             </plugin>
  94.         </plugins>
  95.     </build>
  96.  
  97. </project>
  98.  
  99.

然后我们修改resources文件夹下的application.yml，数据库连接修改成你自己的，七牛云的使用可以看我上一篇博客

  1. server:
  2.   port: 2023
  3.  
  4. spring:
  5.   datasource:
  6.     driver-class-name: com.mysql.cj.jdbc.Driver
  7.     url: jdbc:mysql://localhost:3305/memo?characterEncoding=utf-8&serverTimezone=Asia/Shanghai
  8.     username: root
  9.     password: 123456
  10.  
  11. mybatis-plus:
  12.   global-config:
  13.     db-config:
  14.       id-type: auto
  15. #  configuration:
  16. #    log-impl: org.apache.ibatis.logging.stdout.StdOutImpl
  17. # 打开七牛云，找到密钥管理，把相关信息填写到下面3行
  18. myoss:
  19.   accessKey: yourAK
  20.   secretKey: yourSK
  21.   bucket: yourbucket
  22.  
  23.  
  24.

接下来在项目下创建如下几个包：

common包： 
R.java

在common文件下创建 R.java 类，主要用于封装返回给前端的数据：

  1. package com.example.memohehang.common;
  2.  
  3. import lombok.Data;
  4.  
  5. import java.io.Serializable;
  6.  
  7. /**
  8.  * 统一返回类型
  9.  */
  10. @Data
  11. public class R implements Serializable
  12. {
  13.  
  14.     private int code; // 200是正常，非200表示异常
  15.     private String msg;
  16.     private Object data;
  17.  
  18.     public static R success(Object data)
  19.     {
  20.         return success(200, "操作成功", data);
  21.     }
  22.  
  23.     public static R success(int code, String msg, Object data)
  24.     {
  25.         R r = new R();
  26.         r.setCode(code);
  27.         r.setMsg(msg);
  28.         r.setData(data);
  29.         return r;
  30.     }
  31.  
  32.     public static R error(int i, String msg)
  33.     {
  34.         return error(400, msg, null);
  35.     }
  36.  
  37.     public static R error(String msg, Object data)
  38.     {
  39.         return error(400, msg, data);
  40.     }
  41.  
  42.     public static R error(int code, String msg, Object data)
  43.     {
  44.         R r = new R();
  45.         r.setCode(code);
  46.         r.setMsg(msg);
  47.         r.setData(data);
  48.         return r;
  49.     }
  50.  
  51. }
config包： 
CorsConfig.java

在config包下创建 CorsConfig.java 类，用于解决前端跨域问题，在config.AllowedOrigin中填写你自己的前端端口，一般为8080，或者填 * ,允许所有

  1. package com.example.memohehang.config;
  2.  
  3.  
  4. import org.springframework.context.annotation.Bean;
  5. import org.springframework.context.annotation.Configuration;
  6. import org.springframework.web.filter.CorsFilter;
  7. import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
  8. import org.springframework.web.cors.CorsConfiguration;
  9.  
  10. //解决前端跨域问题
  11. @Configuration
  12. public class CorsConfig {
  13.     @Bean
  14.     public CorsFilter corsFilter()
  15.     {
  16.         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
  17.         CorsConfiguration config = new CorsConfiguration();
  18.         config.addAllowedOrigin("http://localhost:8080");
  19.         config.addAllowedHeader("*");
  20.         config.addAllowedMethod("*");
  21.         config.setAllowCredentials(true);
  22.         source.registerCorsConfiguration("/**", config);
  23.         return new CorsFilter(source);
  24.     }
  25. }
domain包：

对应数据库的实体类

Notes.java

这里我们利用jsonformat注解进行时间格式化

  1. package com.example.memohehang.domain;
  2.  
  3. import com.baomidou.mybatisplus.annotation.IdType;
  4. import com.baomidou.mybatisplus.annotation.TableId;
  5. import com.fasterxml.jackson.annotation.JsonFormat;
  6. import lombok.AllArgsConstructor;
  7. import lombok.Data;
  8. import lombok.NoArgsConstructor;
  9.  
  10. import java.util.Date;
  11.  
  12. @Data
  13. @AllArgsConstructor
  14. @NoArgsConstructor
  15. public class Notes {
  16.     @TableId(value = "id", type = IdType.AUTO)
  17.     private Integer id;
  18.     private Integer rid;
  19.     // 内容
  20.     private String detail;
  21.     // 截止时间
  22.     @JsonFormat(locale = "zh", timezone = "GMT+8", pattern = "yyyy-MM-dd HH:mm:ss")
  23.     private Date time;
  24.     // 类型
  25.     private Integer type;
  26.  
  27.     //图片
  28.     private String photo;
  29.     // 是否完成 0表示还没有 1表示完成了
  30.     private Integer finish;
  31.  
  32.  
  33. }
Type.java
  1. package com.example.memohehang.domain;
  2.  
  3. import lombok.AllArgsConstructor;
  4. import lombok.Data;
  5. import lombok.NoArgsConstructor;
  6.  
  7. @Data
  8. @AllArgsConstructor
  9. @NoArgsConstructor
  10. public class Type
  11. {
  12.     private Integer typeid;
  13.     private String type;
  14. }
User.java
  1. package com.example.memohehang.domain;
  2.  
  3. import lombok.AllArgsConstructor;
  4. import com.baomidou.mybatisplus.annotation.IdType;
  5. import com.baomidou.mybatisplus.annotation.TableId;
  6. import lombok.Data;
  7. import lombok.NoArgsConstructor;
  8.  
  9. @Data
  10. @AllArgsConstructor
  11. @NoArgsConstructor
  12. public class User
  13. {
  14.     //主键自增
  15.     @TableId(value = "id", type = IdType.AUTO)
  16.     private Integer id;
  17.     private String username;
  18.     private String password;
  19.     // 头像
  20.     private String avatar;
  21. }
utils包：
PathUtils.java

这是对上传的文件进行重命名，在后面的七牛云相关的service中会用到

  1. package com.example.memohehang.utils;
  2.  
  3. import java.text.SimpleDateFormat;
  4. import java.util.Date;
  5. import java.util.UUID;
  6.  
  7.  
  8. //对原始文件名进行修改文件名，并修改存放目录
  9. public class PathUtils
  10. {
  11.  
  12.     public static String generateFilePath(String fileName)
  13.     {
  14.         //根据日期生成路径
  15.         SimpleDateFormat sdf = new SimpleDateFormat("yyyy/MM/dd/");
  16.         String datePath = sdf.format(new Date());
  17.         //uuid作为文件名
  18.         String uuid = UUID.randomUUID().toString().replaceAll("-", "");
  19.         //后缀和文件后缀一致
  20.         int index = fileName.lastIndexOf(".");
  21.         // test.jpg -> .jpg
  22.         String fileType = fileName.substring(index);
  23.         return new StringBuilder().append(datePath).append(uuid).append(fileType).toString();
  24.     }
  25. }

 我一般写代码的顺序为：Controller----service----serviceImpl----mapper，在方法学一般先写调用体，根据调用写对应的实现，下面我们按照这个顺序来写：

controller包：
NotesController.java
  1. package com.example.memohehang.controller;
  2.  
  3. import com.example.memohehang.common.R;
  4. import com.example.memohehang.domain.Notes;
  5. import com.example.memohehang.service.NotesService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.stereotype.Controller;
  8. import org.springframework.web.bind.annotation.*;
  9.  
  10.  
  11. @Controller
  12. @RequestMapping("/note")
  13. public class NotesController {
  14.     @Autowired
  15.     private NotesService notesService;
  16.  
  17.  
  18.     // 添加
  19.     @RequestMapping("/save")
  20.     @ResponseBody
  21.     public R save(@RequestBody Notes notes)
  22.     {
  23.         System.out.println("添加备忘录：" + notes);
  24.         return notesService.addNote(notes);
  25.     }
  26.  
  27.  
  28.     // 根据noteid查询对应的note
  29.     @RequestMapping ("/selectByNote/{noteid}")
  30.     @ResponseBody
  31.     public R selectByNote(@PathVariable("noteid") Integer noteid)
  32.     {
  33.  
  34.         return notesService.selectByNote(noteid);
  35.     }
  36.  
  37.     // 查询 只显示用户自己的
  38.     @RequestMapping ("/selectAllByUserID/{userid}")
  39.     @ResponseBody
  40.     public R selectAllById(@PathVariable("userid") Integer userid,@RequestParam(defaultValue = "1") Integer currentPage)
  41.     {
  42.         return notesService.selectAllById(userid,currentPage);
  43.     }
  44.  
  45.     // 查询最近即将截止的未完成的备忘录的时间差
  46.     @RequestMapping ("/selectTime/{userid}")
  47.     @ResponseBody
  48.     public R selectcutDownTime(@PathVariable("userid") Integer userid)
  49.     {
  50.         return notesService.selectcutDownTime(userid);
  51.     }
  52.  
  53.  
  54.  
  55.     // 分类查询
  56.     @RequestMapping ("/selectByType/{userid}/{type}/{isFinish}")
  57.     @ResponseBody
  58.     public R selectByType(@PathVariable("userid") Integer userid, @PathVariable("type") Integer type,@PathVariable("isFinish") Integer isFinish,@RequestParam(defaultValue = "1") Integer currentPage)
  59.     {
  60.  
  61.         return notesService.selectByType(userid,type,isFinish,currentPage);
  62.  
  63.     }
  64.  
  65.  
  66.     // 修改
  67.     @RequestMapping("/update")
  68.     @ResponseBody
  69.     public R update(@RequestBody Notes notes)
  70.     {
  71.         return notesService.update(notes);
  72.     }
  73.  
  74.     // 删除
  75.     @DeleteMapping("/delete/{id}")
  76.     @ResponseBody
  77.     public R delete(@PathVariable("id") Integer id)
  78.     {
  79.         return notesService.delete(id);
  80.     }
  81.  
  82.  
  83.  
  84. }
  85.  
  86.
TypeController.java
  1. package com.example.memohehang.controller;
  2.  
  3. import com.example.memohehang.common.R;
  4. import com.example.memohehang.service.TypeService;
  5. import org.springframework.beans.factory.annotation.Autowired;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.*;
  8.  
  9.  
  10. @Controller
  11. @RequestMapping("/type")
  12. public class TypeController
  13. {
  14.     @Autowired
  15.     private TypeService typeService;
  16.  
  17.     // 获取编号与类型的映射表
  18.     @ResponseBody
  19.     @GetMapping("/getMapping")
  20.     public R typeMapping()
  21.     {
  22.         return typeService.typeMapping();
  23.     }
  24.  
  25. }
  26.  
  27.
UploadController.java
  1. package com.example.memohehang.controller;
  2.  
  3.  
  4. import com.example.memohehang.common.R;
  5. import com.example.memohehang.service.OssUploadService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.PostMapping;
  8. import org.springframework.web.bind.annotation.RestController;
  9. import org.springframework.web.multipart.MultipartFile;
  10.  
  11. @RestController
  12. public class UploadController
  13. {
  14.     @Autowired
  15.     private OssUploadService ossUploadService;
  16.  
  17.     @PostMapping("/upload")
  18.     public R uploadImg(MultipartFile img)
  19.     {
  20.  
  21.         return ossUploadService.uploadImg(img);
  22.     }
  23. }
 UserController.java
  1. package com.example.memohehang.controller;
  2.  
  3. import com.example.memohehang.common.R;
  4. import com.example.memohehang.domain.User;
  5. import com.example.memohehang.service.UserService;
  6. import org.springframework.beans.factory.annotation.Autowired;
  7. import org.springframework.web.bind.annotation.*;
  8.  
  9.  
  10. @RestController
  11. @RequestMapping("/user")
  12. public class UserController {
  13.  
  14.  
  15.     @Autowired
  16.     private UserService userService;
  17.  
  18.     // 登录功能
  19.     @RequestMapping(value = "/login", method = RequestMethod.POST)
  20.     public R login(@RequestBody User user)
  21.     {
  22.         return userService.login(user);
  23.  
  24.     }
  25.  
  26.     // 注册功能
  27.     @RequestMapping(value = "/register", method = RequestMethod.POST)
  28.     public R register(@RequestBody User user)
  29.     {
  30.         return userService.register(user);
  31.     }
  32.  
  33.     // 根据用户id查询
  34.     @RequestMapping ("/selectUserById/{userid}")
  35.     @ResponseBody
  36.     public R selectUserById(@PathVariable("userid") Integer userid)
  37.     {
  38.         return userService.selectUserById(userid);
  39.     }
  40.  
  41. }
  42.  
  43.  
  44.

我们用mybatisplus自带的查询函数即可完成所有的CRUD，因此我们不需要写SQL语句

 service包：
NotesService
  1. package com.example.memohehang.service;
  2.  
  3.  
  4.  
  5. import com.baomidou.mybatisplus.extension.service.IService;
  6. import com.example.memohehang.common.R;
  7. import com.example.memohehang.domain.Notes;
  8. import com.example.memohehang.domain.User;
  9. import org.springframework.web.bind.annotation.PathVariable;
  10. import org.springframework.web.bind.annotation.RequestBody;
  11. import org.springframework.web.bind.annotation.RequestParam;
  12.  
  13. public interface NotesService extends IService<Notes>
  14. {
  15.     /**
  16.      * 添加备忘录
  17.      * @param notes
  18.      * @return
  19.      */
  20.     public R addNote(Notes notes);
  21.  
  22.     /**
  23.      * 根据noteid查询note
  24.      * @param noteid
  25.      * @return
  26.      */
  27.     public R selectByNote(Integer noteid);
  28.  
  29.     /**
  30.      * 查询 只显示用户自己的
  31.      * @param userid
  32.      * @param currentPage
  33.      * @return
  34.      */
  35.     public R selectAllById(Integer userid,Integer currentPage);
  36.  
  37.     /**
  38.      * 查询最近即将截止的未完成的备忘录的时间差
  39.      * @param userid
  40.      * @return
  41.      */
  42.     public R selectcutDownTime(Integer userid);
  43.  
  44.     /**
  45.      * 分类查询
  46.      * @param userid
  47.      * @param type
  48.      * @param isFinish
  49.      * @param currentPage
  50.      * @return
  51.      */
  52.     public R selectByType(Integer userid, Integer type,Integer isFinish,Integer currentPage);
  53.  
  54.     /**
  55.      * 修改
  56.      * @param notes
  57.      * @return
  58.      */
  59.     public R update(Notes notes);
  60.  
  61.     /**
  62.      * 删除
  63.      * @param id
  64.      * @return
  65.      */
  66.     public R delete(Integer id);
  67. }
  68.  
  69.
OssUploadService
  1. package com.example.memohehang.service;
  2.  
  3. import com.example.memohehang.common.R;
  4. import org.springframework.web.multipart.MultipartFile;
  5.  
  6. public interface OssUploadService {
  7.     //图片上传到七牛云
  8.     R uploadImg(MultipartFile img);
  9. }
TypeService
  1. package com.example.memohehang.service;
  2. import com.baomidou.mybatisplus.extension.service.IService;
  3. import com.example.memohehang.common.R;
  4. import com.example.memohehang.domain.Type;
  5.  
  6.  
  7. public interface TypeService extends IService<Type>
  8. {
  9.     /**
  10.      * 获取所有类型
  11.      * @return
  12.      */
  13.     public R typeMapping();
  14. }
  15.  
  16.
UserService
  1. package com.example.memohehang.service;
  2. import com.baomidou.mybatisplus.extension.service.IService;
  3. import com.example.memohehang.common.R;
  4. import com.example.memohehang.domain.User;
  5.  
  6.  
  7.  
  8. public interface UserService extends IService<User>
  9. {
  10.     /**
  11.      * 登录
  12.      * @param user
  13.      * @return
  14.      */
  15.     public R login(User user);
  16.  
  17.     /**
  18.      * 注册
  19.      * @param user
  20.      * @return
  21.      */
  22.     public R register(User user);
  23.  
  24.     /**
  25.      * 根据id查询用户
  26.      * @param userid
  27.      * @return
  28.      */
  29.     public R selectUserById(Integer userid);
  30. }
  31.  
  32.

接下来在service包中创建Impl，注意第一个 “ I ” 是大写的 “ i ”，第二个是小写的 “ L ”

Impl包：
NotesServiceImpl.java
  1. package com.example.memohehang.service.Impl;
  2.  
  3.  
  4.  
  5. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  6. import com.baomidou.mybatisplus.core.metadata.IPage;
  7. import com.baomidou.mybatisplus.extension.plugins.pagination.Page;
  8. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  9. import com.example.memohehang.common.R;
  10. import com.example.memohehang.domain.Notes;
  11. import com.example.memohehang.mapper.NotesMapper;
  12. import com.example.memohehang.service.NotesService;
  13. import org.springframework.stereotype.Service;
  14.  
  15. import java.time.Duration;
  16. import java.time.Instant;
  17. import java.time.LocalDateTime;
  18. import java.time.ZoneId;
  19. import java.util.Date;
  20. import java.util.HashMap;
  21. import java.util.List;
  22. import java.util.Map;
  23.  
  24. @Service
  25. public class NotesServiceImpl extends ServiceImpl<NotesMapper, Notes> implements NotesService
  26. {
  27.     private NotesMapper notesMapper;
  28.     /**
  29.      * 添加备忘录
  30.      * @param notes
  31.      * @return
  32.      */
  33.     @Override
  34.     public R addNote(Notes notes)
  35.     {
  36.         boolean b = save(notes);//调用mybatis-plus
  37.         if (b)
  38.         {
  39.             return R.success(200, "添加成功", null);
  40.         }
  41.         else
  42.         {
  43.             return R.error(405, "添加失败");
  44.         }
  45.  
  46.     }
  47.  
  48.     /**
  49.      * 根据noteid查询note
  50.      * @param noteid
  51.      * @return
  52.      */
  53.     @Override
  54.     public R selectByNote(Integer noteid)
  55.     {
  56.         QueryWrapper<Notes> wrapper = new QueryWrapper<>();
  57.  
  58.         wrapper.eq("id", noteid);
  59.         List<Notes> note =  list(wrapper);
  60.  
  61.         if (note == null)
  62.         {
  63.             return R.error(400,"查询失败");
  64.         }
  65.         else
  66.         {
  67.             return R.success(note.get(0));
  68.         }
  69.     }
  70.  
  71.     /**
  72.      * 查询 只显示用户自己的
  73.      * @param userid
  74.      * @param currentPage
  75.      * @return
  76.      */
  77.     @Override
  78.     public R selectAllById(Integer userid, Integer currentPage)
  79.     {
  80.         Page page = new Page(currentPage, 20);
  81.         // 查询条件 分页的基础上 再按照创建时间排序
  82.         IPage pageData = page(page, new QueryWrapper<Notes>().orderByAsc("finish","time").eq("rid", userid));
  83.  
  84.         return R.success(pageData);
  85.     }
  86.  
  87.     /**
  88.      * 查询最近即将截止的未完成的备忘录的时间差
  89.      * @param userid
  90.      * @return
  91.      */
  92.     @Override
  93.     public R selectcutDownTime(Integer userid)
  94.     {
  95.         QueryWrapper<Notes> wrapper = new QueryWrapper<>();
  96.         wrapper.eq("rid", userid).orderByAsc("finish", "time");
  97.         List<Notes> note = list(wrapper);
  98.  
  99.         // 处理查询结果
  100.         if (note != null && !note.isEmpty())
  101.         {
  102.             Notes firstUnfinishedNote = null;
  103.             for (Notes n : note)
  104.             {
  105.                 if (n.getFinish() == 0)
  106.                 {
  107.                     firstUnfinishedNote = n;
  108.                     break;
  109.                 }
  110.             }
  111.  
  112.             if (firstUnfinishedNote != null)
  113.             {
  114.                 LocalDateTime currentTime = LocalDateTime.now();
  115.                 Date noteTime = firstUnfinishedNote.getTime();
  116.  
  117.                 Instant instant = noteTime.toInstant();
  118.                 LocalDateTime noteLocalDateTime = instant.atZone(ZoneId.systemDefault()).toLocalDateTime();
  119.  
  120.                 Duration duration = Duration.between(currentTime, noteLocalDateTime);
  121.                 long days = duration.toDays();
  122.                 long hours = duration.toHoursPart();
  123.                 long minutes = duration.toMinutesPart();
  124.                 long seconds = duration.toSecondsPart();
  125.  
  126.                 // 构造返回结果
  127.                 Map<String, Object> resultMap = new HashMap<>();
  128.                 resultMap.put("days", days);
  129.                 resultMap.put("hours", hours);
  130.                 resultMap.put("minutes", minutes);
  131.                 resultMap.put("seconds", seconds);
  132.  
  133.                 System.out.println(resultMap);
  134.                 // 返回结果
  135.                 return R.success(200, "duration", resultMap);
  136.             }
  137.             else
  138.             {
  139.                 return R.error(405, "没有找到未完成的备忘录");
  140.             }
  141.         }
  142.         else
  143.         {
  144.             return R.error(405, "没有找到备忘录");
  145.         }
  146.     }
  147.  
  148.     /**
  149.      * 分类查询
  150.      * @param userid
  151.      * @param type
  152.      * @param isFinish
  153.      * @param currentPage
  154.      * @return
  155.      */
  156.     @Override
  157.     public R selectByType(Integer userid, Integer type, Integer isFinish, Integer currentPage)
  158.     {
  159.         Page page = new Page(currentPage, 20);
  160.  
  161.         IPage pageData = page(page, new QueryWrapper<Notes>().orderByAsc("time").eq("rid", userid).eq("finish", isFinish).eq("type", type));
  162.  
  163.         return R.success(pageData);
  164.     }
  165.  
  166.     /**
  167.      * 修改
  168.      * @param notes
  169.      * @return
  170.      */
  171.     @Override
  172.     public R update(Notes notes)
  173.     {
  174.         System.out.println("开始更新");
  175.         System.out.println(notes);
  176.         boolean b = update(notes, new QueryWrapper<Notes>().eq("id", notes.getId()));
  177.         if (b)
  178.         {
  179.             System.out.println("更新成功");
  180.             return R.success(200, "更新成功", null);
  181.         }
  182.         System.out.println("更新失败");
  183.         return R.error(405, "更新失败");
  184.     }
  185.  
  186.     /**
  187.      * 删除
  188.      * @param id
  189.      * @return
  190.      */
  191.     @Override
  192.     public R delete(Integer id)
  193.     {
  194.         System.out.println("user delete..." + id);
  195.         boolean b = removeById(id);
  196.         if (b)
  197.         {
  198.             return R.success(200, "删除成功", null);
  199.         }
  200.         return R.error(405, "删除失败");
  201.     }
  202. }
  203.  
  204.
OssUploadServiceImpl.java

注意这里需要修改外链回显链接

  1. package com.example.memohehang.service.Impl;
  2.  
  3. import com.example.memohehang.common.R;
  4. import com.example.memohehang.service.OssUploadService;
  5. import com.example.memohehang.utils.PathUtils;
  6. import com.google.gson.Gson;
  7. import com.qiniu.common.QiniuException;
  8. import com.qiniu.http.Response;
  9.  
  10. import com.qiniu.storage.Configuration;
  11. import com.qiniu.storage.Region;
  12. import com.qiniu.storage.UploadManager;
  13. import com.qiniu.storage.model.DefaultPutRet;
  14. import com.qiniu.util.Auth;
  15. import lombok.Data;
  16. import org.springframework.boot.context.properties.ConfigurationProperties;
  17. import org.springframework.stereotype.Service;
  18. import org.springframework.web.multipart.MultipartFile;
  19.  
  20. import java.io.InputStream;
  21.  
  22.  
  23. @Service
  24. @Data//为成员变量生成get和set方法
  25. @ConfigurationProperties(prefix = "myoss")
  26. //把文件上传到七牛云
  27. public class OssUploadServiceImpl implements OssUploadService {
  28.  
  29.     @Override
  30.     //MultipartFile是spring提供的接口
  31.     public R uploadImg(MultipartFile img) {
  32.  
  33.         //获取原始文件名
  34.         String originalFilename = img.getOriginalFilename();
  35.  
  36.         // 获取文件大小
  37.         long fileSize = img.getSize();
  38.  
  39.         //PathUtils.generateFilePath(originalFilename)表示把原始文件名转换成指定文件名
  40.  
  41.         String filePath = PathUtils.generateFilePath(originalFilename);
  42.  
  43.         //下面用于调用的uploadOss方法返回的必须是String类型
  44.         String url = uploadOss(img,filePath);
  45.         System.out.println("外链地址："+url);
  46.         //把得到的外链地址返回给前端
  47.         return R.success(200,"操作成功",url);
  48.     }
  49.  
  50.     //----------------------------------上传文件到七牛云----------------------------------------
  51.  
  52.     //注意要从application.yml读取属性数据，下面的3个成员变量的名字必须对应application.yml的myoss属性的三个子属性名字
  53.     private String accessKey;
  54.     private String secretKey;
  55.     private String bucket;
  56.  
  57.     //上传文件的具体代码。MultipartFile是spring提供的接口，作用是实现文件上传
  58.     private String uploadOss(MultipartFile imgFile, String filePath){
  59.         //构造一个带指定 Region 对象的配置类。你的七牛云OSS创建的是哪个区域的，那么就调用Region的什么方法即可
  60.         Configuration cfg = new Configuration(Region.huanan());
  61.         cfg.resumableUploadAPIVersion = Configuration.ResumableUploadAPIVersion.V2;// 指定分片上传版本
  62.         UploadManager uploadManager = new UploadManager(cfg);
  63.  
  64.         //打开七牛云，把鼠标悬浮在右上角的个人头像，然后就会看到'密钥管理'，点击进入就有你的密钥，把其中的AK和SK复制到下面两行
  65.         //String accessKey = "_ibGP9wytjLCAZPqcFaWQNxbw7fMUvofSOvOFFR3";
  66.         //String secretKey = "QSOAU-cv3sSDGNfVNPF6iXz-PsP5X9QTrjFI9zYw";
  67.         //String bucket = "hehang-blog";
  68.         //为避免上面3行暴露信息，我们会把信息写到application.yml里面，然后添加ConfigurationProperties注解、3个成员变量即可读取
  69.  
  70.         //文件名，如果写成null的话，就以文件内容的hash值作为文件名
  71.         String key = filePath;
  72.  
  73.         try {
  74.  
  75.             //byte[] uploadBytes = "hello qiniu cloud".getBytes("utf-8");
  76.             //ByteArrayInputStream byteInputStream=new ByteArrayInputStream(uploadBytes);
  77.  
  78.             //上面两行是官方写的(注释掉)，下面那几行是我们写的
  79.             //把前端传过来的文件转换成InputStream对象
  80.             InputStream xxinputStream = imgFile.getInputStream();
  81.  
  82.             Auth auth = Auth.create(accessKey, secretKey);
  83.             String upToken = auth.uploadToken(bucket);
  84.  
  85.             try {
  86.                 //把前端传过来的xxinputStream图片上传到七牛云
  87.                 Response response = uploadManager.put(xxinputStream,key,upToken,null, null);
  88.                 //解析上传成功的结果
  89.                 DefaultPutRet putRet = new Gson().fromJson(response.bodyString(), DefaultPutRet.class);
  90.                 System.out.println("上传成功! 生成的key是: "+putRet.key);
  91.                 System.out.println("上传成功! 生成的hash是: "+putRet.hash);
  92.                 return "http://s6422okdy.hn-bkt.clouddn.com/"+key;//注意这个地方替换成自己的域名，http://不能掉
  93.  
  94.             } catch (QiniuException ex) {
  95.                 Response r = ex.response;
  96.                 System.err.println(r.toString());
  97.                 try {
  98.                     System.err.println(r.bodyString());
  99.                 } catch (QiniuException ex2) {
  100.                     //ignore
  101.                 }
  102.             }
  103.         }catch (Exception e) {
  104.             //ignore
  105.         }
  106.         return "上传失败";
  107.     }
  108. }
  109.  
  110.
TypeServiceImpl.java
  1. package com.example.memohehang.service.Impl;
  2.  
  3.  
  4.  
  5. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  6.  
  7. import com.example.memohehang.common.R;
  8. import com.example.memohehang.domain.Type;
  9. import com.example.memohehang.mapper.TypeMapper;
  10. import com.example.memohehang.service.TypeService;
  11. import org.springframework.stereotype.Service;
  12.  
  13. import java.util.HashMap;
  14. import java.util.List;
  15.  
  16. @Service
  17. public class TypeServiceImpl extends ServiceImpl<TypeMapper, Type> implements TypeService
  18. {
  19.     /**
  20.      * 获取所有类型
  21.      * @return
  22.      */
  23.     @Override
  24.     public R typeMapping()
  25.     {
  26.         List<Type> types = list();
  27.         HashMap<Integer, String> hashMap = new HashMap<>();
  28.         for (Type type : types)
  29.         {
  30.             hashMap.put(type.getTypeid(), type.getType());
  31.         }
  32.         return R.success(hashMap);
  33.     }
  34. }
  35.  
  36.
UserServiceImpl.java
  1. package com.example.memohehang.service.Impl;
  2.  
  3.  
  4.  
  5. import com.baomidou.mybatisplus.core.conditions.query.LambdaQueryWrapper;
  6. import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
  7. import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
  8.  
  9. import com.example.memohehang.common.R;
  10. import com.example.memohehang.domain.User;
  11. import com.example.memohehang.mapper.UserMapper;
  12. import com.example.memohehang.service.UserService;
  13. import org.springframework.stereotype.Service;
  14.  
  15. import java.util.List;
  16.  
  17. @Service
  18. public class UserServiceImpl extends ServiceImpl<UserMapper, User> implements UserService
  19. {
  20.  
  21.     /**
  22.      * 登录
  23.      * @param user
  24.      * @return
  25.      */
  26.     @Override
  27.     public R login(User user)
  28.     {
  29.         // 判断用户账号是否正确
  30.         User one = getOne(new QueryWrapper<User>()
  31.                 .eq("username", user.getUsername())
  32.                 .eq("password", user.getPassword())
  33.         );
  34.  
  35.         if (one != null)
  36.         {
  37.             return R.success(200,"登录成功", one);
  38.         }
  39.         else
  40.         {
  41.             return R.error(405, "账号或密码错误");
  42.         }
  43.     }
  44.  
  45.     @Override
  46.     public R register(User user)
  47.     {
  48.         LambdaQueryWrapper<User> queryWrapper = new LambdaQueryWrapper<>();
  49.         queryWrapper.eq(User::getUsername, user.getUsername());
  50.         System.out.println(user);
  51.         User tempUsername = getOne(queryWrapper);
  52.         // 先判断一下用户是否存在 存在就返回false
  53.         if (tempUsername != null)
  54.         {
  55.             return R.error(405,"账户已存在");
  56.         }
  57.         else
  58.         {
  59.             //网上随机找的一个图片
  60.             user.setAvatar("https://img2.baidu.com/it/u=3841326637,2519425910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501");
  61.             // 反之加入
  62.             save(user);
  63.             return R.success(user);
  64.         }
  65.     }
  66.  
  67.     /**
  68.      * 根据id查询用户
  69.      * @param userid
  70.      * @return
  71.      */
  72.     @Override
  73.     public R selectUserById(Integer userid)
  74.     {
  75.         // 判断用户账号是否正确
  76.         User one = getOne(new QueryWrapper<User>()
  77.                 .eq("id", userid)
  78.         );
  79.  
  80.         if (one != null)
  81.         {
  82.             return R.success(200,"查询成功", one);
  83.         }
  84.         else
  85.         {
  86.             return R.error(405, "查询失败");
  87.         }
  88.     }
  89. }
  90.  
  91.

至此后端工程全部创建完毕，按照下图检查一下是否有缺少，注意Mapper可写也可以不写，因为我们不需要写SQL语句，不需要调用Mapper，全部完毕后就可以运行项目，利用apipost进行测试，或者前端创建完后直接集成测试

（6）前端工程

我们采用uniapp来写前端代码，按照以下步骤建立项目

输入项目名称，选择vue2

我们需要用到以下uniapp的组件，可以从uniapp组件库下载，链接为：组件使用的入门教程 | uni-app官网

对应的矢量图标可以在阿里巴巴矢量图库下载，链接为iconfont-阿里巴巴矢量图标库

然后我们在根目录下建立store文件夹，在此文件夹下建立index.js，用于存放一些函数

index.js
  1. export function getUserid() {
  2. 	let userid = uni.getStorageSync("userid");
  3. 	if (userid == null || userid === '')
  4. 		return '';
  5. 	else
  6. 		return userid;
  7. }
  8.  
  9. export function getNoteid()
  10. {
  11. 	let noteid = uni.getStorageSync("noteid");
  12. 	if (noteid == null || noteid === '')
  13. 		return '';
  14. 	else
  15. 		return noteid;
  16. }
  17.  
  18. export function getUsername()
  19. {
  20. 	let username = uni.getStorageSync("username");
  21. 	if (username == null || username === '')
  22. 		return '';
  23. 	else
  24. 		return username;
  25. }
  26.  
  27.  
  28. export function hasLogin() {
  29. 	let userid = uni.getStorageSync("userid");
  30. 	if (userid == null || userid === '') {
  31. 		return false;
  32. 	} else
  33. 		return true;
  34. }
  35.  
  36. export function logout() {
  37. 	uni.removeStorageSync("userid");
  38. 	uni.removeStorageSync("noteid");
  39. 	uni.removeStorageSync("username");
  40. 	uni.redirectTo({
  41. 		url: "/pages/mine"
  42. 	});
  43. }

随后修改pages.json中修改相关页面配置文件，可以先创建相关页面后再进行此步骤，以免编译时报错

pages.json
  1. {
  2. 	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
  3. 		{
  4. 			"path": "pages/Main",
  5. 			"style": {
  6. 				"navigationBarTitleText": "个人备忘录"
  7. 			}
  8. 		}
  9. 	    ,{
  10.             "path" : "pages/Login",
  11.             "style" :                                                                                    
  12.             {
  13.                 "navigationBarTitleText": "登录",
  14.                 "enablePullDownRefresh": false
  15.             }
  16.             
  17.         }
  18.         ,{
  19.             "path" : "pages/Main",
  20.             "style" :                                                                                    
  21.             {
  22.                 "navigationBarTitleText": "所有备忘录",
  23.                 "enablePullDownRefresh": false
  24.             }
  25.             
  26.         },
  27. 				{
  28. 				    "path" : "pages/mine",
  29. 				    "style" :                                                                                    
  30. 				    {
  31. 				        "navigationBarTitleText": "个人中心",
  32. 				        "enablePullDownRefresh": false
  33. 				    }
  34. 				    
  35. 				}
  36.         ,{
  37.             "path" : "pages/addNote",
  38.             "style" :                                                                                    
  39.             {
  40.                 "navigationBarTitleText": "添加/修改备忘录",
  41.                 "enablePullDownRefresh": false
  42.             }
  43.             
  44.         }
  45.         ,{
  46.             "path" : "pages/catNote",
  47.             "style" :                                                                                    
  48.             {
  49.                 "navigationBarTitleText": "查询备忘录",
  50.                 "enablePullDownRefresh": false
  51.             }
  52.             
  53.         }
  54.         ,{
  55.             "path" : "pages/Register",
  56.             "style" :                                                                                    
  57.             {
  58.                 "navigationBarTitleText": "注册",
  59.                 "enablePullDownRefresh": false
  60.             }
  61.             
  62.         }
  63.     ],
  64. 	"globalStyle": {
  65. 		"navigationBarTextStyle": "black",
  66. 		"navigationBarTitleText": "个人备忘录",
  67. 		"navigationBarBackgroundColor": "#F8F8F8",
  68. 		"backgroundColor": "#F8F8F8"
  69. 	},
  70. 	"tabBar": {
  71. 		"list": [
  72. 			{
  73. 				"text": "首页",
  74. 				"pagePath": "pages/Main",
  75. 				"iconPath": "static/images/首页.png",
  76. 				"selectedIconPath": "static/images/首页2.png"
  77. 			},
  78. 			{
  79. 				"text": "记录",
  80. 				"pagePath": "pages/addNote",
  81. 				"iconPath": "static/images/记录.png",
  82. 				"selectedIconPath": "static/images/记录1.png"
  83. 			},
  84. 			{
  85. 				"text": "分类",
  86. 				"pagePath": "pages/catNote",
  87. 				"iconPath": "static/images/分类.png",
  88. 				"selectedIconPath": "static/images/分类2.png"
  89. 			},
  90. 			{
  91. 				"text": "我的",
  92. 				"pagePath": "pages/mine",
  93. 				"iconPath": "static/images/我的.png",
  94. 				"selectedIconPath": "static/images/我的2.png"
  95. 			}
  96. 		]
  97. 	},
  98. 	"uniIdRouter": {}
  99. }

 然后再pages中建立以下页面文件，我这里没有创建同名目录

addNote.vue
  1. <template>
  2.   <view>
  3. 			<uni-card title="添加/修改笔记" extra="必填">
  4. 		<uni-section>
  5. 					<view class="example">
  6. 						<uni-forms>
  7. 							<uni-forms-item label="截止时间">
  8. 									<uni-datetime-picker type="datetime" return-type="timestamp" v-model="time"/>
  9. 							</uni-forms-item>
  10. 							
  11. 							<uni-forms-item label="分类">
  12. 									<select v-model="selectedType" class="select">
  13. 									  <option v-for="(value, key) in types" :key="key" :value="key">{{ value }}</option>
  14. 									</select>
  15. 							</uni-forms-item>
  16. 							
  17. 							<uni-forms-item label="内容">
  18. 								<uni-section type="line" padding>
  19. 									<uni-easyinput type="textarea" autoHeight v-model="context" placeholder="请输入内容"></uni-easyinput>
  20. 								</uni-section>
  21. 							</uni-forms-item>
  22. 							
  23. 							<uni-forms-item label="完成？">
  24. 								<zero-switch  v-model="finish"></zero-switch>
  25. 							</uni-forms-item>
  26. 							
  27. 						</uni-forms>
  28. 						<button type="primary" @click="saveNote()">提交</button>
  29. 					</view>
  30. 		</uni-section>
  31. 		</uni-card>
  32.  
  33. 			<uni-card title="上传文件" extra="可选">
  34. 				 <view>
  35. 				   <div class="button-container">
  36. 				     <button type="primary" @tap="chooseFile">选择文件</button>
  37. 				     <button type="primary" @click="cancelChooseFile">取消选择</button>
  38. 				   </div><br>
  39. 						<image class="myimg" v-if="this.filePath != null && this.filePath != '0'" :src="this.filePath"></image>
  40. 				    <button  type="primary" @tap="uploadFile">上传文件</button>
  41. 				  </view>
  42.       </uni-card>
  43. 			
  44.  
  45.   </view>
  46. </template>
  47.  
  48. <script>
  49. 	import {getUserid,getNoteid} from "@/store/index.js"
  50. 	export default {
  51. 		data(){
  52. 				return{
  53. 					noteId: '',
  54. 					userId: '',
  55. 					time: '',
  56. 					selectedType: '',
  57. 					types: {},
  58. 					context: '',
  59. 					finish: false,
  60. 					note:{},
  61. 					
  62. 					filePath: null,
  63. 					fileUrl: null,
  64. 					
  65.  
  66.     };
  67.   },
  68.   onLoad() {
  69.     this.noteId = getNoteid()//获取缓存中的noteid
  70.     this.userId = getUserid()
  71. 		
  72.     uni.request({
  73.       url:`http://localhost:2023/type/getMapping`,
  74.       method:"GET",
  75.       success:(res)=>{
  76.         // 将返回的备忘录类型数据赋值给types数组
  77.         this.types = res.data.data
  78.     }  
  79.     });
  80. 		
  81. 		if(this.noteId != null && this.noteId != '')
  82. 		{//noteId不为空查询对应的note
  83.     uni.request({
  84.       url: `http://localhost:2023/note/selectByNote/${this.noteId}`,
  85. 			method:"POST",
  86.       success: (res) => {
  87. 				this.note = res.data.data
  88. 				//console.log(this.note);
  89.         this.time = this.note.time
  90.         this.selectedType = this.note.type
  91.         this.context = this.note.detail
  92.         this.finish = this.note.finish !== 0;
  93. 				//uni.removeStorageSync("noteid");
  94. 				this.filePath = this.note.photo;
  95. 				this.fileUrl = this.note.photo
  96. 				
  97.       }
  98.     })
  99. 		}
  100.   },
  101.  
  102.   methods: {
  103. 		
  104. 		cancelChooseFile() {
  105. 				this.filePath = null;
  106. 				this.fileUrl = null;
  107. 		    console.log('用户取消选择文件');
  108. 		  },
  109. 		chooseFile() {
  110. 		      uni.chooseImage({
  111. 		        count: 1,
  112. 		        success: (res) => {
  113. 		          // 选择文件成功
  114. 		          this.filePath = res.tempFilePaths[0];
  115. 		        },
  116. 		        fail: (error) => {
  117. 		          // 选择文件失败
  118. 		          console.error(error);
  119. 		        },
  120. 		      });
  121. 		    },
  122. 		uploadFile() {
  123. 		      uni.uploadFile({
  124. 		        url: 'http://localhost:2023/upload',
  125. 		        filePath: this.filePath,
  126. 		        name: 'img',
  127. 						method:"POST",
  128. 		       success: function (res) {
  129. 		          // 上传成功
  130. 		        console.log(res);
  131. 						let responseData = JSON.parse(res.data); // 解析字符串为JSON对象
  132. 						console.log(responseData);
  133. 						 if(responseData.code === 200)
  134. 						 {
  135. 							 uni.showToast({
  136. 							 	title: "上传成功",
  137. 							 	icon: "success",
  138. 							 	duration: 2000
  139. 							 });
  140. 							 	 this.fileUrl = responseData.data;
  141. 								 console.log( "上传后:"+ this.fileUrl);
  142. 								 uni.setStorageSync("fileurl", this.fileUrl);
  143. 						 }
  144. 						 else
  145. 						 {
  146. 							 uni.showToast({
  147. 							 	title: "上传失败",
  148. 							 	icon: "error",
  149. 							 	duration: 2000
  150. 							 });
  151. 						 }
  152. 		
  153. 		        }
  154. 		      })
  155. 					console.log(this.filePath);
  156. 		    },
  157. 		
  158. 		
  159. 		
  160.     saveNote() {
  161. 			if(this.fileUrl === null || this.fileUrl === '0')
  162. 			{
  163. 			  this.fileUrl = uni.getStorageSync("fileurl");				
  164. 			}
  165. 			//this.noteId = uni.getStorageSync('noteid')
  166. 			if(this.noteId === null || this.noteId === '')
  167. 			{//添加note	
  168.       // 构造备忘录的请求参数
  169. 			console.log("添加:"+this.fileUrl);
  170.       const note = {
  171.         //id: this.noteId,
  172.         rid: this.userId,
  173. 				detail: this.context,
  174.         time: this.time,
  175.         type: this.selectedType,
  176.         finish: this.finish ? 1 : 0,
  177. 				photo: this.fileUrl ? this.fileUrl : 0
  178.       }
  179.       uni.request({
  180.         url: 'http://localhost:2023/note/save',
  181.         method: 'POST',
  182.         data: note,
  183.         success: (res) => {
  184.           // 备忘录添加成功的处理逻辑
  185. 					if(res.data.code === 200)
  186. 					{
  187. 						uni.showToast({
  188. 							title: "添加成功",
  189. 							icon: "success",
  190. 							duration: 2000
  191. 						});
  192. 					}
  193. 					else
  194. 					{
  195. 						uni.showToast({
  196. 							title: "添加失败",
  197. 							icon: "error",
  198. 							duration: 2000
  199. 						});
  200. 					}
  201.  
  202.         }
  203.       })
  204.     }
  205. 		else
  206. 		{//更新note,更新完后要在缓存中移除noteid
  207. 		console.log("更新:" +this.fileUrl);
  208. 			const notes = {
  209. 			  id: this.noteId,
  210. 			  rid: this.userId,
  211. 				detail: this.context,
  212. 			  time: this.time,
  213. 			  type: this.selectedType,
  214. 			  finish: this.finish ? 1 : 0,
  215. 				photo: this.fileUrl ? this.fileUrl : 0//因为mybatisplus不能更新为null
  216. 			}
  217. 			uni.request({
  218. 			  url: 'http://localhost:2023/note/update',
  219. 			  method: 'POST',
  220. 			  data: notes,
  221. 			  success: (res) => {
  222. 			    // 备忘录更新成功的处理逻辑
  223. 					if(res.data.code === 200)
  224. 					{
  225. 						uni.showToast({
  226. 							title: "修改成功",
  227. 							icon: "success",
  228. 							duration: 2000
  229. 						});
  230. 					}
  231. 					else
  232. 					{
  233. 						uni.showToast({
  234. 							title: "修改失败",
  235. 							icon: "error",
  236. 							duration: 2000
  237. 						});
  238. 					}
  239.  
  240. 					uni.removeStorageSync("noteid");
  241. 					this.userId = null;
  242. 					
  243. 			  }
  244. 			})
  245. 			
  246. 		}
  247. 		uni.removeStorageSync("fileurl");
  248. 		uni.reLaunch({
  249. 			url:`/pages/Main`
  250. 		});
  251. 		},
  252. 		
  253.  
  254. 		
  255.   }
  256. }
  257. </script>
  258.  
  259.  
  260. <style lang="scss">
  261.  
  262. 	.example {
  263. 		padding: 15px;
  264. 		background-color: #fff;
  265. 	}
  266.  
  267. 	.segmented-control {
  268. 		margin-bottom: 15px;
  269. 	}
  270.  
  271. 	.button-group {
  272. 		margin-top: 15px;
  273. 		display: flex;
  274. 		justify-content: space-around;
  275. 	}
  276.  
  277. 	.form-item {
  278. 		display: flex;
  279. 		align-items: center;
  280. 	}
  281.  
  282. 	.button {
  283. 		display: flex;
  284. 		align-items: center;
  285. 		height: 35px;
  286. 		margin-left: 10px;
  287. 	}
  288. 	.select{
  289. 		//display: flex;
  290. 		//align-items: center;
  291. 		height: 65rpx;
  292. 		width: 250rpx;
  293. 	  background-color: #fff;
  294. 		 border-radius: 10rpx;
  295. 			
  296. 		
  297. 		//margin-left: 10px;
  298. 	}
  299. 	
  300. 	.button-container {
  301. 	  display: flex; /* 使用flex布局 */
  302. 	  justify-content: center; /* 水平居中对齐按钮 */
  303. 	}
  304. 	.myimg{
  305. 		width: 600rpx;
  306. 		height: 400rpx;
  307. 	}
  308. </style>
 catNote.vue
  1. <template>
  2. 	<view>
  3. 		<uni-card title="分类查询">
  4. 			<uni-forms-item label="分类">
  5. 					<select v-model="selectedType" class="select">
  6. 					  <option v-for="(value, key) in types" :key="key" :value="key" class="">{{ value }}</option>
  7. 					</select>
  8. 			</uni-forms-item>
  9. 			<uni-forms-item label="完成？">
  10. 				<zero-switch  v-model="finish"></zero-switch>
  11. 			</uni-forms-item>
  12. 			<button type="primary" @click="findNotes()">查询</button>
  13. 		</uni-card>
  14. 		
  15. 		<uni-swipe-action>
  16. 		<view v-for="note in notes" :key="note.id" >
  17. 		 <uni-swipe-action-item :right-options="options" :auto-close="false" @click="bindClick(note.id)">
  18. 			<uni-card title="" extra="">
  19. 				<view class="" @click="updateNote(note.id)">
  20. 				<p>截止日期：{{note.time}}</p><br>
  21. 				<p>内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容：{{note.detail}}</p><br>
  22. 				<p>任务类型：{{types[""+note.type]}}</p><br>
  23. 				<p><image class="myimg" v-if="note.photo != null && note.photo != '0'" :src='note.photo'></image></p><br>
  24. 				<p :class="{'finished': note.finish === 1, 'unfinished': note.finish !== 1}">
  25. 				是否完成：{{ note.finish === 1 ? "完成" : "未完成" }}
  26. 				</p>
  27. 				</view>
  28. 				</uni-card>
  29. 				</uni-swipe-action-item>
  30. 		</view>
  31. 		</uni-swipe-action>
  32. 		
  33. 	</view>
  34. </template>
  35.  
  36. <script>
  37. 	import {getUserid} from "@/store/index.js"
  38. 	export default {
  39. 		data() {
  40. 			return {
  41. 				userId: '',
  42. 				selectedType: '',
  43. 				finish: false,
  44. 				
  45. 				types: {},
  46. 				notes: {},
  47. 				currentPage: 0,
  48. 				total: 0,
  49. 				pageSize: 0,
  50. 				options:[
  51. 				        {
  52. 				            text: '删除',
  53. 				            style: {
  54. 				                backgroundColor: '#dd524d'
  55. 				            }
  56. 				        }
  57. 				      ],
  58. 			};
  59. 		},
  60. 		onLoad() {
  61. 			this.userId = getUserid();
  62. 			uni.request({
  63. 			  url:`http://localhost:2023/type/getMapping`,
  64. 			  method:"GET",
  65. 			  success:(res)=>{
  66. 			    // 将返回的备忘录类型数据赋值给types数组
  67. 			    this.types = res.data.data
  68. 			}  
  69. 			});
  70. 		},
  71. 		methods:{
  72. 			findNotes()
  73. 			{
  74. 				const isfinish = this.finish ? 1 : 0
  75. 				uni.request({					
  76. 					url:`http://localhost:2023/note/selectByType/${this.userId}/${this.selectedType}/${isfinish}?currentPage=${this.currentPage}`,
  77. 					method:"POST",
  78. 				
  79. 					success:(res)=>{
  80. 					   this.notes = res.data.data.records 
  81. 					   this.currentPage = res.data.data.current
  82. 					   this.total = res.data.data.total
  83. 					   this.pageSize = res.data.data.size
  84. 						
  85. 					}
  86. 				});
  87. 			},
  88. 			onReachBottom(){
  89. 				this.pageSize += 1;
  90. 				this.findNotes();
  91. 			},
  92. 			bindClick(noteid) {
  93. 							uni.showModal({
  94. 								title: "是否确定删除",
  95. 								success: res => {
  96. 									if (res.confirm) {
  97. 										//删除
  98. 										uni.request({
  99. 											url:`http://localhost:2023/note/delete/${noteid}`,
  100. 											method:"DELETE",
  101. 										
  102. 											success:(res)=>{
  103. 											  //删除成功
  104. 												uni.showToast({
  105. 													title: "删除成功",
  106. 													icon: "success",
  107. 													duration: 2000
  108. 												});
  109. 												uni.reLaunch({
  110. 													url:`/pages/catNote`
  111. 												});
  112. 											}
  113. 										});
  114. 									}
  115. 								}
  116. 							});
  117. 			},
  118. 			updateNote(id){
  119. 				uni.setStorageSync("noteid",id);
  120. 				uni.reLaunch({
  121. 					url:`/pages/addNote`
  122. 				});
  123. 			},
  124. 		}
  125. 	}
  126. </script>
  127.  
  128. <style lang="scss">
  129. 	.select{
  130. 		//display: flex;
  131. 		//align-items: center;
  132. 		height: 65rpx;
  133. 		width: 250rpx;
  134. 	  background-color: #fff;
  135. 		border-radius: 10rpx;
  136. 			
  137. 		
  138. 		//margin-left: 10px;
  139. 	}
  140. 	.select2{
  141. 		//display: flex;
  142. 		//align-items: center;
  143. 		height: 55rpx;
  144. 		width: 50rpx;
  145. 	  background-color: #fff;
  146. 		border-radius: 10rpx;
  147. 			
  148. 		
  149. 		//margin-left: 10px;
  150. 	}
  151. 	.finished {
  152. 	  color: green; /* 已完成的备忘录显示为绿色 */
  153. 	}
  154. 	
  155. 	.unfinished {
  156. 	  color: red; /* 未完成的备忘录显示为红色 */
  157. 	}
  158. 	.myimg{
  159. 		width: 600rpx;
  160. 		height: 400rpx;
  161. 	}
  162. </style>

 Login.vue
  1. <template>
  2. 	<uni-card title="个人备忘录" extra="">
  3. 	<view class="loginform">
  4. 		<uni-forms ref="form" :model="user" >
  5. 			<uni-forms-item label="账号" name="username" required>
  6. 				<uni-easyinput type="text" v-model="user.username" placeholder="请输入账号..." />
  7. 			</uni-forms-item>
  8. 			<uni-forms-item label="密码" name="password" required>
  9. 				<uni-easyinput type="password" v-model="user.password" placeholder="请输入密码..." />
  10. 			</uni-forms-item>
  11. 		</uni-forms>
  12. 		<button @tap="submitForm" class="submit">登录</button>
  13. 		<view class="noaccount">
  14. 			<view @tap="gotoRegister">没有账号，<text>注册</text>一个</view>
  15. 		</view>
  16. 	</view>
  17. 	</uni-card>
  18. </template>
  19.  
  20. <script>
  21. 	import {getUserid} from "@/store/index.js"
  22. 	export default {
  23. 		data() {
  24. 			return {
  25. 				user: {
  26. 				  id:"",
  27. 				  username: "",
  28. 				  password: "",
  29. 				  avatar:""
  30. 				},
  31. 			};
  32. 		},
  33. 		methods:{
  34. 			submitForm() {
  35. 				this.$refs.form.validate().then((res) => {
  36. 					uni.request({
  37. 						url: `http://localhost:2023/user/login`,
  38. 						method: "POST",
  39. 						data: {
  40. 							username: this.user.username,
  41. 							password: this.user.password
  42. 						},
  43. 						success: (result) => {
  44. 							if (result.data.code === 200) {
  45. 								uni.showToast({
  46. 									title: "登录成功",
  47. 									icon: "success",
  48. 									duration: 2000
  49. 								});
  50. 								setTimeout(() => {
  51. 									this.user = result.data.data,
  52. 									uni.setStorageSync("userid", result.data.data.id);
  53. 									uni.setStorageSync("username", result.data.data.username);
  54. 									uni.reLaunch({
  55. 										url: "/pages/Main"
  56. 									})
  57. 								}, 2000);
  58. 			
  59. 							} else {
  60. 								uni.showToast({
  61. 									title: result.data.msg,
  62. 									icon: "error"
  63. 								});
  64. 							}
  65. 						}
  66. 					});
  67. 				});
  68. 			},
  69. 			gotoRegister()
  70. 			{
  71. 				uni.reLaunch({
  72. 					url: "/pages/Register"
  73. 				})
  74. 			}
  75. 		}
  76. 	}
  77. </script>
  78.  
  79. <style lang="scss" scoped>
  80. 	.loginform {
  81. 		margin: 6rpx;
  82.  
  83. 		.submit {
  84. 			background-color: $uni-color-primary;
  85. 			color: white;
  86. 		}
  87.  
  88. 		.noaccount {
  89. 			font-size: 30rpx;
  90. 			display: flex;
  91. 			justify-content: space-between;
  92. 			margin: 10rpx;
  93.  
  94. 			text {
  95.  
  96. 				color: red;
  97. 			}
  98. 		}
  99. 	}
  100. </style>
 Main.vue
  1. <template>
  2. 	<view>
  3. 					<uni-notice-bar show-icon scrollable
  4. 						:text="this.msg"/>
  5.  
  6. 			<uni-card title="最近一条待办的截止时间" extra="">
  7. 				<uni-section type="line" padding>
  8. 						<uni-countdown :font-size="30" :day="this.days" :hour="this.hours" :minute="this.minutes" :second="this.seconds" color="#FFFFFF" background-color="#007AFF" />
  9. 				</uni-section>	
  10. 			</uni-card >
  11.  
  12. 	   <uni-swipe-action>
  13. 	   	<!-- 基础用法 -->
  14. 			<view v-for="note in notes" :key="note.id" >	
  15. 	   	<uni-swipe-action-item :right-options="options" :auto-close="false" @click="bindClick(note.id)">
  16. 			<uni-card title="" extra="">
  17. 				<view class="" @click="updateNote(note.id)">
  18. 				<p>截止日期：{{note.time}}</p><br>
  19. 				<p>内&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;容：{{note.detail}}</p><br>
  20. 				<p>任务类型：{{typeMap[""+note.type]}}</p><br>
  21. 				<p><image class="myimg" v-if="note.photo != null && note.photo != '0'" :src='note.photo'></image></p><br>
  22. 				<p :class="{'finished': note.finish === 1, 'unfinished': note.finish !== 1}">
  23. 				是否完成：{{ note.finish === 1 ? "完成" : "未完成" }}
  24. 				</p>
  25. 				</view>
  26. 				</uni-card>
  27. 	   	</uni-swipe-action-item>
  28. 			</view>
  29. 	   </uni-swipe-action>
  30. 		
  31. 	</view>
  32. </template>
  33.  
  34. <script>
  35. 	import {getUserid,getUsername} from "@/store/index.js"
  36. 	export default {
  37. 		data() {
  38. 			return {
  39. 				imgP:"https://img2.baidu.com/it/u=3841326637,2519425910&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501",
  40. 				options:[
  41. 				        {
  42. 				            text: '删除',
  43. 				            style: {
  44. 				                backgroundColor: '#dd524d'
  45. 				            }
  46. 				        }
  47. 				      ],
  48.  
  49. 				userid:0,
  50. 				user:{},
  51. 				notes: [],
  52. 				currentPage: 0,
  53. 				total: 0,
  54. 				pageSize: 0,
  55. 				typeMap:{},
  56. 				finish:0,
  57. 				
  58. 				msg:'',
  59. 				days:0,
  60. 				hours:0,
  61. 				minutes:0,
  62. 				seconds:0,
  63. 				
  64. 			};
  65. 		},
  66. 		methods:{
  67. 			
  68. 			showNotes(){
  69. 				uni.request({
  70. 					url:`http://localhost:2023/note/selectAllByUserID/${this.userid}?currentPage=${this.currentPage}`,
  71. 					method:"POST",
  72.  
  73. 					success:(res)=>{
  74. 					   this.notes = res.data.data.records 
  75. 					   this.currentPage = res.data.data.current
  76. 					   this.total = res.data.data.total
  77. 					   this.pageSize = res.data.data.size
  78. 						
  79. 					}
  80. 				});
  81. 				
  82. 				uni.request({
  83. 					url:`http://localhost:2023/type/getMapping`,
  84. 					method:"GET",
  85. 				
  86. 					success:(res)=>{
  87. 					   this.typeMap = res.data.data;
  88. 						
  89. 					}
  90. 				});
  91. 				
  92. 			},
  93. 			updateNote(id){
  94. 				uni.setStorageSync("noteid",id);
  95. 				uni.reLaunch({
  96. 					url:`/pages/addNote`
  97. 				});
  98. 			},
  99. 			bindClick(noteid) {
  100. 							uni.showModal({
  101. 								title: "是否确定删除",
  102. 								success: res => {
  103. 									if (res.confirm) {
  104. 										//删除
  105. 										uni.request({
  106. 											url:`http://localhost:2023/note/delete/${noteid}`,
  107. 											method:"DELETE",
  108. 										
  109. 											success:(res)=>{
  110. 											  //删除成功
  111. 												if(res.data.code === 200)
  112. 												{
  113. 													uni.showToast({
  114. 														title: "删除成功",
  115. 														icon: "success",
  116. 														duration: 2000
  117. 													});
  118. 													uni.reLaunch({
  119. 														url:`/pages/Main`
  120. 													});
  121. 												}
  122. 												else
  123. 												{
  124. 													uni.showToast({
  125. 														title: "删除失败",
  126. 														icon: "error",
  127. 														duration: 2000
  128. 													});
  129. 												}
  130.  
  131. 											}
  132. 										});
  133. 									}
  134. 								}
  135. 							});
  136. 			},
  137. 			 SetCountdown() {
  138. 							uni.request({
  139. 								url:`http://localhost:2023/note/selectTime/${this.userid}`,
  140. 								method:"GET",
  141. 							
  142. 								success:(res)=>{
  143. 								   const { days, hours, minutes, seconds } = res.data.data
  144. 								      this.days = parseInt(days)
  145. 								      this.hours = parseInt(hours)
  146. 								      this.minutes = parseInt(minutes)
  147. 								      this.seconds = parseInt(seconds)
  148. 									
  149. 								}
  150. 			     });
  151. 					},
  152. 			
  153. 		},
  154. 		onLoad(){
  155. 			this.userid = getUserid();
  156. 			this.showNotes();
  157. 			this.msg = '欢迎' + getUsername() + '回来，您有以下几条待办事件';
  158. 			this.SetCountdown();
  159. 		},
  160. 		onReachBottom(){
  161. 			this.pageSize += 1;
  162. 			this.showNotes();
  163. 		},
  164.  
  165. 	}
  166. </script>
  167.  
  168.  
  169. <style lang="scss">
  170. 	
  171. 		.a0{
  172. 			//align-items: center;
  173. 			padding-left: 40rpx;
  174. 			
  175. 		}
  176. 		.a1{
  177. 		   border: 1px solid #ccc;
  178. 			 border-radius: 5rpx;
  179. 			 width: 650rpx;
  180. 			//text-align: center;
  181. 			  //display: flex;
  182. 			 // justify-content: center;
  183. 			  // align-items: center;
  184. 				padding-left: 10rpx;
  185. 				padding-top: 20rpx;
  186. 				
  187.  
  188. 		}
  189. 		.content-box {
  190. 				flex: 1;
  191. 				/* #ifdef APP-NVUE */
  192. 				justify-content: center;
  193. 				/* #endif */
  194. 				height: 44px;
  195. 				line-height: 44px;
  196. 				padding: 0 15px;
  197. 				position: relative;
  198. 				background-color: #fff;
  199. 				border-bottom-color: #f5f5f5;
  200. 				border-bottom-width: 1px;
  201. 				border-bottom-style: solid;
  202. 			}
  203. 		
  204. 			.content-text {
  205. 				font-size: 15px;
  206. 			}
  207. 		
  208. 			.example-body {
  209. 				/* #ifndef APP-NVUE */
  210. 				display: flex;
  211. 				/* #endif */
  212. 				flex-direction: row;
  213. 				justify-content: center;
  214. 				padding: 10px 0;
  215. 				background-color: #fff;
  216. 			}
  217. 		
  218. 			.button {
  219. 				border-color: #e5e5e5;
  220. 				border-style: solid;
  221. 				border-width: 1px;
  222. 				padding: 4px 8px;
  223. 				border-radius: 4px;
  224. 			}
  225. 		
  226. 			.button-text {
  227. 				font-size: 15px;
  228. 			}
  229. 		
  230. 			.slot-button {
  231. 				/* #ifndef APP-NVUE */
  232. 				display: flex;
  233. 				height: 100%;
  234. 				/* #endif */
  235. 				flex: 1;
  236. 				flex-direction: row;
  237. 				justify-content: center;
  238. 				align-items: center;
  239. 				padding: 0 20px;
  240. 				background-color: #ff5a5f;
  241. 			}
  242. 		
  243. 			.slot-button-text {
  244. 				color: #ffffff;
  245. 				font-size: 14px;
  246. 			}
  247. 			.finished {
  248. 			  color: green; /* 已完成的备忘录显示为绿色 */
  249. 			}
  250. 			
  251. 			.unfinished {
  252. 			  color: red; /* 未完成的备忘录显示为红色 */
  253. 			}
  254. 				.container {
  255. 					/* #ifndef APP-NVUE */
  256. 					position: absolute;
  257. 					left: 0;
  258. 					right: 0;
  259. 					top: 0;
  260. 					bottom: 0;
  261. 					/* #endif */
  262. 				}
  263. 				.myimg{
  264. 					width: 600rpx;
  265. 					height: 400rpx;
  266. 				}
  267. </style>
  268.  
  269.  
  270.
 mine.vue
  1. <template>
  2. 	<view class="mine">
  3. 		<!--顶部信息：头像，昵称，发文收藏和点赞数据-->
  4. 		<view class="top">
  5. 			<view class="userinfo">
  6. 				<view class="group">
  7. 					<view class="pic">
  8. 						<image v-if="user.avatar != null" :src="user.avatar"></image>
  9. 						<image v-else src="/static/tabs/member.png" mode="aspectFit"></image>
  10. 					</view>
  11. 					<view>
  12. 						<text v-if="user.username != null" v-text="user.username"></text>
  13. 						<text v-else class="login" @tap="gotoLogin" v-text="'点击登录'"></text>
  14. 					</view>
  15.  
  16. 				</view>
  17. 				<view class="more">
  18. 					<text class="iconfont icon-a-10-you"></text>
  19. 				</view>
  20. 			</view>
  21. 		</view>
  22. 		<!-- 登录后的补充组件-->
  23. 		<view v-if="user.username !=null">
  24.  
  25. 			<!--退出登录-->
  26. 			<view class="itemgroup">
  27. 				<view class="item">
  28. 					<view class="left" @tap="gotoLogout">
  29. 						<text class="iconfont icon-a-73-tuichu"></text>
  30. 						<text>退出登录</text>
  31. 					</view>
  32. 					<view>
  33. 						<text class="iconfont icon-a-10-you"></text>
  34. 					</view>
  35. 				</view>
  36. 			</view>
  37. 		</view>
  38. 	</view>
  39. </template>
  40.  
  41. <script>
  42. 	import {
  43. 		hasLogin,
  44. 		logout,
  45. 		getUserid
  46. 	} from '@/store/index.js'
  47.  
  48. 	export default {
  49. 		data() {
  50. 			return {
  51. 				user: {
  52. 					username: null, //用户账号
  53. 					avatar: null, //个人照片
  54. 					
  55. 				}
  56. 			};
  57. 		},
  58.  
  59. 		onLoad() {
  60. 			if (hasLogin()) {
  61. 				this.getUserInfo();
  62. 			}
  63. 		},
  64.  
  65. 		methods: {
  66. 			gotoLogin() {
  67. 				//跳转到的登录页面
  68. 				uni.redirectTo({
  69. 					url:"/pages/Login"
  70. 				});
  71. 			},
  72.  
  73. 			getUserInfo() {
  74. 				this.userid = getUserid();
  75. 				if (this.userid != null) {
  76. 					uni.request({
  77.  
  78. 						url: `http://localhost:2023/user/selectUserById/${this.userid}`,
  79. 						method: "GET",
  80. 						success: (res) => {
  81. 							this.user = res.data.data;
  82. 						}
  83. 					});
  84. 				}
  85. 			},
  86.  
  87.  
  88. 			gotoLogout() {
  89. 				uni.showModal({
  90. 					title: "是否确定退出",
  91. 					success: res => {
  92. 						if (res.confirm) {
  93. 							logout();
  94. 							this.user = {
  95. 								username: null,
  96. 								avatar: null,
  97. 							}
  98. 						}
  99. 					}
  100. 				});
  101. 			}
  102.  
  103. 		}
  104.  
  105. 	}
  106. </script>
  107.  
  108. <style lang="scss">
  109. 	.mine {
  110. 		margin: 30rpx 30rpx;
  111.  
  112. 		.top {
  113. 			display: flex;
  114. 			flex-direction: column;
  115. 			justify-content: space-between;
  116.  
  117. 			.userinfo {
  118. 				display: flex;
  119. 				flex: row;
  120. 				justify-content: space-between;
  121. 				align-items: center;
  122.  
  123. 				.group {
  124. 					display: flex;
  125. 					align-items: center;
  126.  
  127. 					.pic {
  128. 						width: 120rpx;
  129. 						height: 120rpx;
  130. 						border-radius: 50%;
  131. 						overflow: hidden;
  132. 						border: 2rpx solid red;
  133. 						margin-right: 10rpx;
  134.  
  135. 						image {
  136. 							width: 100%;
  137. 							height: 100%;
  138. 						}
  139. 					}
  140.  
  141. 					.login {
  142. 						margin-left: 16rpx;
  143. 						font-size: 40rpx;
  144. 					}
  145. 				}
  146.  
  147. 				.more {
  148. 					.iconfont {
  149. 						font-size: 40rpx;
  150. 					}
  151. 				}
  152. 			}
  153.  
  154. 			.bloginfo {
  155. 				display: flex;
  156. 				flex: row;
  157. 				margin-top: 20rpx;
  158.  
  159. 				view {
  160. 					margin-right: 30rpx;
  161. 					font-size: 26rpx;
  162. 				}
  163. 			}
  164. 		}
  165.  
  166. 		.itemgroup {
  167. 			border-top: 4rpx solid #f4f4f4;
  168. 			margin-top: 30rpx;
  169.  
  170. 			.item {
  171. 				padding: 24rpx 0;
  172. 				display: flex;
  173. 				justify-content: space-between;
  174. 				align-items: center;
  175.  
  176. 				.left {
  177. 					text {
  178. 						margin-right: 16rpx;
  179. 						font-size: 36rpx;
  180. 					}
  181. 				}
  182. 			}
  183. 		}
  184. 	}
  185. </style>
Register.vue

  1. <template>
  2. 	<uni-card>
  3. 	<view class="registerform">
  4. 		<uni-forms ref="form" :model="user" :rules="rules" :labelWidth="85">
  5. 			<uni-forms-item label="账号" name="username" required>
  6. 				<uni-easyinput type="text" v-model="user.username" placeholder="请输入账号" />
  7. 			</uni-forms-item>
  8. 			<uni-forms-item label="密码" name="password" required>
  9. 				<uni-easyinput type="password" v-model="user.password" placeholder="请输入密码" />
  10. 			</uni-forms-item>
  11. 			<uni-forms-item label="再次输入" name="passwordconfirm" required>
  12. 				<uni-easyinput type="password" v-model="user.passwordconfirm" placeholder="再次输入密码" />
  13. 			</uni-forms-item>
  14. 		</uni-forms>
  15. 		<button @tap="submitForm" class="submit">注册</button>
  16. 	</view>
  17. 	</uni-card>
  18. </template>
  19.  
  20. <script>
  21. 	
  22. 	export default {
  23. 		data() {
  24. 			return {
  25. 				user: {},
  26. 				rules: {
  27. 					username: {
  28. 						rules: [{
  29. 								required: true,
  30. 								errorMessage: '请输入账号',
  31. 							},
  32. 							{
  33. 								minLength: 2,
  34. 								maxLength: 20,
  35. 								errorMessage: '账号长度在 {minLength}到 {maxLength}个字符 ',
  36. 							}
  37. 						]
  38. 					},
  39. 					password: {
  40. 						rules: [{
  41. 								required: true,
  42. 								errorMessage: '请输入密码',
  43. 							},
  44. 							{
  45. 								minLength: 2,
  46. 								maxLength: 20,
  47. 								errorMessage: '密码长度在 {minLength}到 {maxLength}个字符 ',
  48. 							}
  49.  
  50. 						]
  51. 					},
  52. 					passwordconfirm: {
  53. 						rules: [{
  54. 								required: true,
  55. 								errorMessage: '请输入密码',
  56. 							},
  57. 							{
  58. 								minLength: 2,
  59. 								maxLength: 20,
  60. 								errorMessage: '密码长度在 {minLength}到 {maxLength}个字符 ',
  61. 							},
  62. 							{
  63. 								validateFunction: function(rule, value, data, callback) {
  64. 									if (value !== data.password) {
  65. 										callback("两次输入的密码不一致");
  66. 										}
  67. 										return true;
  68. 									}
  69. 								}
  70. 							]
  71. 						},
  72.  
  73. 					}
  74.  
  75. 				};
  76. 			},
  77. 			methods: {
  78. 				submitForm() {
  79. 					this.$refs.form.validate().then((res) => {
  80.  
  81. 						Reflect.deleteProperty(this.user, "passwordconfirm");
  82. 						// console.log('user 模型',this.user);
  83.  
  84. 						uni.request({
  85. 							url: "http://localhost:2023/user/register",
  86. 							method: "POST",
  87. 							data: {
  88. 								username: this.user.username,
  89. 								password: this.user.password,
  90. 							},
  91. 							success: (result) => {
  92. 								if (result.data.msg) {
  93. 									uni.showToast({
  94. 										title: "用户注册成功",
  95. 										duration: 2000
  96. 									});
  97.  
  98. 									//注册成功则转到登录页面
  99. 									setTimeout(() => {
  100. 										uni.redirectTo({
  101. 											url: "/pages/Login"
  102. 										});
  103. 										this.user = {};
  104. 									}, 2000);
  105. 								} else {
  106. 									uni.showToast({
  107. 										title: result.data.describe,
  108. 										duration: 2000,
  109. 										icon: "error"
  110. 									})
  111. 								}
  112.  
  113. 							} //end of success
  114.  
  115. 						});
  116. 					}).catch(err => {
  117. 						// console.log(err);
  118. 					})
  119. 				},
  120. 			}
  121.  
  122. 		}
  123. </script>
  124.  
  125. <style lang="scss" scoped>
  126. 	.registerform {
  127. 		margin: 6rpx;
  128.  
  129. 		.submit {
  130. 			background-color: $uni-color-primary;
  131. 			color: white;
  132. 		}
  133. 	}
  134. </style>

到这里前后端代码已经全部完成，下面是运行的截图

到此全部结束啦，如果此文章对你有帮助，希望给一个关注+点赞+收藏

若需要源码可以私信我，免费分享

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/263251
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号