一、基于Springboot+MybatisPlus+Vue前后端分离的共享笔记管理系统

简介: 一、基于Springboot+MybatisPlus+Vue前后端分离的共享笔记管理系统

一、基于Springboot+MybatisPlus+Vue前后端分离的共享笔记管理系统


(1)创建我的文章,填写标题和内容啥的。设置是否公开,如果公开的话,别人就可以看见,可以点评收藏,也可以用积分购买,多少积分,就是作者可以自己设置的。

(2)如果不公开,那就是私密文章,只能自己看见,别人看不见。

(3)智能推荐,根据收藏和购买的行为习惯进行自动推荐相似的文章。

(4)回收站,里面暂存删除掉的文章,在这里可以进行找回,或者彻底删除,类似电脑上的回收站。

(5)点评评论,对公开的文章进行评论及回复评论。

(6)私密文章管理

(7)我的收藏、我的购买管理,并且可以取消收藏,就像“抖音取关”一样。

(8)数据分析:分析积分来源:创作、被收藏、购买等。分析公开笔记受欢迎情况等。这样可以进一步提高用户学习的积极性。\


源码+数据库:https://download.csdn.net/download/wyn_365/85577239


1.1 项目概述


开发语言:Java8


数据库:Mysql5


前端框架:Vue,ElementUI组件


后端框架:Springboot【内嵌】 MybatisPlus 【ORM javabean – 数据库表实体 】


数据库连接池:Duriud【当一堆连接】


服务器:Tomcat,SSM SHH【自己部署】


开发工具:IDEA VScode Navicat Maven


代码设计:MVC HTTP-----> Controlller----->service------>dao【Model


1.2 项目详解


1.登录【正则表达式】


用户名:


密码:


验证码:


1.HTTP地址:post[form] ----Controller


2.首先验证码对不对?


3.通过之后查库


4.查询数据库有没有该用户?


2.注册


1.检验数据格式


2.判断两次密码是否一致


3.form 提交到后台Controller


4.插入数据库


3.展示所有笔记,查看某一条笔记


http: listALLData?page=1&limit=10



SQL: select * from note limit 0,9;

this.$http({
          url: this.$http.adornUrl('/generator/note/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
})
this.$http({
          url: this.$http.adornUrl('/generator/note/list'),
          method: 'get',
          params: this.$http.adornParams({
            'page': this.pageIndex,
            'limit': this.pageSize,
            'key': this.dataForm.key
})

4.修改笔记:


1.数据回显 id select * from note where id = ?

2.数据插入操作


5.更新笔记、新增笔记


更新:复用弹窗 url http: id, update note set [] where id = ?

新增:没有id insert


6.购买笔记 收藏笔记


update note set num = 2+1 where id =?


1.3 项目总结


1.先看前台发送请求的地方在哪里 http url:

2.后台:controller映射路径

3.解析程序

743d3087803148d9b3c464c2ea56d4d2.png

a092b7fec14b4874922c319c28392672.png

602335413f1e48b7a64342873e4a8aca.png

c3b75728531349e58dd558725a69ae77.png

cd1f74bcf046483bba4b117a8ca46d3c.png

2770488c441e413f8da918ebbfc44235.png

34c34b0aa5d6406f8ae74d30155430d4.png

a33a4ab967764ebf90f867059e9a2d2d.png

c02a77b176fe4ea099f5a81869ae20a4.png


6801848e5c4e4df1aaa2a73005e97b35.png

59960a59ea6541c9a608a5a0cf881df5.png

21640de245a3430a96a6ee13be64a094.png2600aa6de70b4402b8af768c45c7e0d7.png

57e241c6627c4f17a16538d3fc9ec4dd.png

6299b3ea50604e8690b7d6284d63c897.png

9d9dca9e67c94266a729d861838a2434.png

目录
相关文章
|
7月前
|
JavaScript 前端开发 Java
Spring Boot 与 Vue.js 前后端分离中的数据交互机制
本文深入探讨了Spring Boot与Vue.js在前后端分离架构下的数据交互机制。通过对比传统`model.addAttribute()`方法与RESTful API的设计,分析了两者在耦合性、灵活性及可扩展性方面的差异。Spring Boot以RESTful API提供数据服务,Vue.js借助Axios消费API并动态渲染页面,实现了职责分明的解耦架构。该模式显著提升了系统的灵活性和维护性,适用于复杂应用场景如论坛、商城系统等,为现代Web开发提供了重要参考。
768 0
|
JavaScript 前端开发 开发者
Vue v-for 进阶指南:in 与 of 的区别及应用场景 | 笔记
Vue.js 中的 v-for 是强大的遍历指令,但其中的 in 和 of 关键字往往被开发者忽视。尽管它们的用法相似,但适用的场景和数据结构却各有不同。本文将详细探讨 v-for 中 in 和 of 的区别、适用场景以及在实际开发中的最佳使用时机。通过理解它们的差异,你将能够编写更加高效、简洁的 Vue.js 代码,灵活应对各种数据结构的遍历需求。
553 6
|
JavaScript 索引
Vue 3 数组变更详解:哪些操作会修改原数组?| 笔记
在处理数组时,了解哪些操作会修改原数组,哪些操作不会修改原数组,对高效编写 Vue 应用程序至关重要。本文将详细介绍 Vue 3 中的常见数组操作,并按照是否会修改原数组进行分类说明。
657 2
|
JavaScript NoSQL Java
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
CC-ADMIN后台简介一个基于 Spring Boot 2.1.3 、SpringBootMybatis plus、JWT、Shiro、Redis、Vue quasar 的前后端分离的后台管理系统
393 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的大学生勤工助学管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
294 7
|
JavaScript Java 测试技术
基于SpringBoot+Vue的志愿服务管理系统设计和实现(源码+LW+部署讲解)
基于SpringBoot+Vue的志愿服务管理系统设计和实现(源码+LW+部署讲解)
231 6
|
JavaScript Java 测试技术
基于SpringBoot+Vue的医疗废弃物收运管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue的医疗废弃物收运管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
181 6
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的公园管理系统的详细设计和实现(源码+lw+部署文档+讲解等)
235 0
|
JavaScript Java 测试技术
基于SpringBoot+Vue的街道办管理系统的详细设计和实现(源码+lw+部署文档+讲解等
基于SpringBoot+Vue的街道办管理系统的详细设计和实现(源码+lw+部署文档+讲解等
137 0
|
JavaScript 算法 Java
springboot vue二手交易市场毕设源码(毕设)
springboot vue二手交易市场毕设源码
451 0
springboot vue二手交易市场毕设源码(毕设)
下一篇
oss云网关配置