【wiki知识库】01.wiki知识库前后端项目搭建(SpringBoot+Vue3)

  📝个人主页:哈__

期待您的关注 

🌼环境准备

想要搭建自己的wiki知识库,要提前搭建好自己的开发环境,后端我使用的是SpringBoot,前端使用的是Vue3,采用前后端分离的技术实现。同时使用了Mysql数据库,开发工具我使用的是IDEA2021

主要需要安装配置的有以下几个内容:

  • Redis【Spring】SpringBoot整合Redis,用Redis实现限流(附Redis解压包)_spring boot redis流控-CSDN博客
  • JDK1.8
  • Node.js 16
  • MySql 5.6  【MySQL】MySQL5.6---windows版本安装(附安装包)_windows mysql5.6 下载-CSDN博客,这里我使用的是本地的数据库,后续可能会把数据库放到服务器上使用。

这里我提供了MySql 5.6和Redis的下载方式,另外两种就需要大家自行百度下载了。

🍎数据库的搭建

新建一个名为wiki的知识库,然后字符集和排序规则选择我选的就可以。

数据库的代码如下。

SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;-- ----------------------------
-- Table structure for category
-- ----------------------------
DROP TABLE IF EXISTS `category`;
CREATE TABLE `category`  (`id` bigint(20) NOT NULL COMMENT 'id',`parent` bigint(20) NOT NULL DEFAULT 0 COMMENT '父id',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '名称',`sort` int(11) NULL DEFAULT NULL COMMENT '顺序',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '分类' ROW_FORMAT = Compact;-- ----------------------------
-- Records of category
-- ----------------------------
INSERT INTO `category` VALUES (100, 0, '前端开发', 100);
INSERT INTO `category` VALUES (101, 100, 'Vue', 101);
INSERT INTO `category` VALUES (102, 100, 'HTML & CSS', 102);
INSERT INTO `category` VALUES (200, 0, 'Java', 200);
INSERT INTO `category` VALUES (201, 200, '基础应用', 201);
INSERT INTO `category` VALUES (202, 200, '框架应用', 202);
INSERT INTO `category` VALUES (300, 0, 'Python', 300);
INSERT INTO `category` VALUES (301, 300, '基础应用', 301);
INSERT INTO `category` VALUES (302, 300, '进阶方向应用', 302);
INSERT INTO `category` VALUES (400, 0, '数据库', 400);
INSERT INTO `category` VALUES (401, 400, 'MySQL', 401);
INSERT INTO `category` VALUES (500, 0, '其它', 500);
INSERT INTO `category` VALUES (501, 500, '服务器', 501);
INSERT INTO `category` VALUES (502, 500, '开发工具', 502);
INSERT INTO `category` VALUES (503, 500, '热门服务端语言', 503);-- ----------------------------
-- Table structure for content
-- ----------------------------
DROP TABLE IF EXISTS `content`;
CREATE TABLE `content`  (`id` bigint(20) NOT NULL COMMENT '文档id',`content` mediumtext CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '内容',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '文档内容' ROW_FORMAT = Compact;-- ----------------------------
-- Records of content
-- ----------------------------
INSERT INTO `content` VALUES (1, '<p>gsdgsdgsdgsd</p>');
INSERT INTO `content` VALUES (2, '<p>sdgsdgs</p>');
INSERT INTO `content` VALUES (3, '<p>sdgsdgsdg</p>');
INSERT INTO `content` VALUES (5, '');
INSERT INTO `content` VALUES (449588120711729152, '<p>hahahaha</p>');-- ----------------------------
-- Table structure for demo
-- ----------------------------
DROP TABLE IF EXISTS `demo`;
CREATE TABLE `demo`  (`id` bigint(20) NOT NULL COMMENT 'id',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '名称',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '测试' ROW_FORMAT = Compact;-- ----------------------------
-- Records of demo
-- ----------------------------
INSERT INTO `demo` VALUES (1, '测试');-- ----------------------------
-- Table structure for doc
-- ----------------------------
DROP TABLE IF EXISTS `doc`;
CREATE TABLE `doc`  (`id` bigint(20) NOT NULL COMMENT 'id',`ebook_id` bigint(20) NOT NULL DEFAULT 0 COMMENT '电子书id',`parent` bigint(20) NOT NULL DEFAULT 0 COMMENT '父id',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '名称',`sort` int(11) NULL DEFAULT NULL COMMENT '顺序',`view_count` int(11) NULL DEFAULT 0 COMMENT '阅读数',`vote_count` int(11) NULL DEFAULT 0 COMMENT '点赞数',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '文档' ROW_FORMAT = Compact;-- ----------------------------
-- Records of doc
-- ----------------------------
INSERT INTO `doc` VALUES (1, 1, 0, '文档1', 1, 2, 0);
INSERT INTO `doc` VALUES (2, 1, 1, '文档1.1', 1, 3, 0);
INSERT INTO `doc` VALUES (3, 1, 0, '文档2', 2, 2, 0);
INSERT INTO `doc` VALUES (4, 1, 3, '文档2.1', 1, 2, 0);
INSERT INTO `doc` VALUES (5, 1, 3, '文档2.2', 2, 0, 0);
INSERT INTO `doc` VALUES (6, 1, 5, '文档2.2.1', 1, 1, 1);
INSERT INTO `doc` VALUES (449588120711729152, 1, 1, '1.2', 2, 5, 0);-- ----------------------------
-- Table structure for ebook
-- ----------------------------
DROP TABLE IF EXISTS `ebook`;
CREATE TABLE `ebook`  (`id` bigint(20) NOT NULL COMMENT 'id',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '名称',`category1_id` bigint(20) NULL DEFAULT NULL COMMENT '分类1',`category2_id` bigint(20) NULL DEFAULT NULL COMMENT '分类2',`description` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '描述',`cover` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '封面',`doc_count` int(11) NOT NULL DEFAULT 0 COMMENT '文档数',`view_count` int(11) NOT NULL DEFAULT 0 COMMENT '阅读数',`vote_count` int(11) NOT NULL DEFAULT 0 COMMENT '点赞数',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '电子书' ROW_FORMAT = Compact;-- ----------------------------
-- Records of ebook
-- ----------------------------
INSERT INTO `ebook` VALUES (1, 'Spring Boot 入门教程', 200, 202, '零基础入门 Java 开发,企业级应用开发最佳首选框架', NULL, 7, 9, 0);
INSERT INTO `ebook` VALUES (2, 'Vue 入门教程', NULL, NULL, '零基础入门 Vue 开发,企业级应用开发最佳首选框架', NULL, 0, 0, 0);
INSERT INTO `ebook` VALUES (3, 'Python 入门教程', NULL, NULL, '零基础入门 Python 开发,企业级应用开发最佳首选框架', NULL, 0, 0, 0);
INSERT INTO `ebook` VALUES (4, 'Mysql 入门教程', NULL, NULL, '零基础入门 Mysql 开发,企业级应用开发最佳首选框架', NULL, 0, 0, 0);
INSERT INTO `ebook` VALUES (5, 'Oracle 入门教程', NULL, NULL, '零基础入门 Oracle 开发,企业级应用开发最佳首选框架', NULL, 0, 0, 0);-- ----------------------------
-- Table structure for ebook_snapshot
-- ----------------------------
DROP TABLE IF EXISTS `ebook_snapshot`;
CREATE TABLE `ebook_snapshot`  (`id` bigint(20) NOT NULL AUTO_INCREMENT COMMENT 'id',`ebook_id` bigint(20) NOT NULL DEFAULT 0 COMMENT '电子书id',`date` date NOT NULL COMMENT '快照日期',`view_count` int(11) NOT NULL DEFAULT 0 COMMENT '阅读数',`vote_count` int(11) NOT NULL DEFAULT 0 COMMENT '点赞数',`view_increase` int(11) NOT NULL DEFAULT 0 COMMENT '阅读增长',`vote_increase` int(11) NOT NULL DEFAULT 0 COMMENT '点赞增长',PRIMARY KEY (`id`) USING BTREE,UNIQUE INDEX `ebook_id_date_unique`(`ebook_id`, `date`) USING BTREE
) ENGINE = InnoDB AUTO_INCREMENT = 8 CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '电子书快照表' ROW_FORMAT = Compact;-- ----------------------------
-- Records of ebook_snapshot
-- ----------------------------
INSERT INTO `ebook_snapshot` VALUES (1, 1, '2024-05-25', 9, 0, 9, 0);
INSERT INTO `ebook_snapshot` VALUES (2, 2, '2024-05-25', 0, 0, 0, 0);
INSERT INTO `ebook_snapshot` VALUES (3, 3, '2024-05-25', 0, 0, 0, 0);
INSERT INTO `ebook_snapshot` VALUES (4, 4, '2024-05-25', 0, 0, 0, 0);
INSERT INTO `ebook_snapshot` VALUES (5, 5, '2024-05-25', 0, 0, 0, 0);-- ----------------------------
-- Table structure for test
-- ----------------------------
DROP TABLE IF EXISTS `test`;
CREATE TABLE `test`  (`id` bigint(20) NOT NULL COMMENT 'id',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '名称',`password` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '密码',PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '测试' ROW_FORMAT = Compact;-- ----------------------------
-- Records of test
-- ----------------------------
INSERT INTO `test` VALUES (1, '测试', 'password');-- ----------------------------
-- Table structure for user
-- ----------------------------
DROP TABLE IF EXISTS `user`;
CREATE TABLE `user`  (`id` bigint(20) NOT NULL COMMENT 'ID',`login_name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '登陆名',`name` varchar(50) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '昵称',`password` char(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '密码',PRIMARY KEY (`id`) USING BTREE,UNIQUE INDEX `login_name_unique`(`login_name`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8mb4 COLLATE = utf8mb4_general_ci COMMENT = '用户' ROW_FORMAT = Compact;-- ----------------------------
-- Records of user
-- ----------------------------
INSERT INTO `user` VALUES (1, 'test', '测试', 'e70e2222a9d67c4f2eae107533359aa4');SET FOREIGN_KEY_CHECKS = 1;

🚗SpringBoot项目的搭建 

我直接使用的IDEA创建的SpringBoot项目,当然也还有一些其他的方式,比如官网创建,Maven转SpringBoot等。

1.打开IDEA后点击新建项目


2.选择Spring Initializr

在这里我配置了阿里云的服务器,因为官网的SpringBoot创建时并没有Java8的环境选择。先将URL改为以下内容。

https://start.aliyun.com/

之后大家可以自己填写自己的项目名称,如果你不熟悉,那么可以选择和我一样的内容填写 


3.点击下一步 

选择SpringBoot的版本,这里我是随便选择的一个2.7.6版本,之后我会切换为2.7.16版本,然后点击完成就可以创建SpringBoot项目了。

想要把版本修改为2.7.16,找到图中的位置。

 之后点击旁边的Maven,选择你的项目,然后点击刷新按钮,等一段时间后SpringBoot的版本就可以切换了。

 4.在main包下新建resouces文件夹

在新建的resources文件夹下,我们创建一个application.yml配置文件。后端的内容我们先创建这么多,这篇文章主要就是为了带领大家搭一个架子出来。

📚Vue3环境的搭建

 注意:一定要先安装你的Node.js环境。

1.设置淘宝镜像(加速脚手架安装速度)

选择你的项目,并且在IDEA的终端中打开。

输入以下命令。

npm config set registry https://registry.npmmirror.com

 2.创建vue-cli

在终端中输入指令如下。

vue install -g @vue/cli@4.5.9

出现以下内容安装成功 。

 之后就需要我们创建Web项目,也就是我们的前端项目。

vue create web

之后需要我们选择一些内容。

这是第一个选择,我们选择最下边的手动安装,大家可能没有最上边的那个选项,因为那是我之前创建的一个项目模板,不重要。

 接下来就需要我们安装一些依赖。我一共选择了下边的几个内容,通过键盘的上下按钮切换,空格是选择。

 接下来还有一些选项,我就不一一展示了,下面就是我全部的选择。

出现以下内容我们的项目创建成功。

 来看看我们的项目结构。

为了让我们后续代码正常启动,我在这个项目的结构中加了一个文件:vue.config.js。文件的具体内容如下。

module.exports = { lintOnSave: false }

还需要一个.env文件。文件里的内容如下。

VUE_APP_SERVER = 'http://localhost:8080'

在这里我直接给大家一个package.json,这个文件是用来管理我们项目的依赖版本的。 把这些代码替换到package.json中,然后在终端输入以下代码。注意:先修改你的package.json文件。

npm install
{"name": "web","version": "0.1.0","private": true,"scripts": {"serve-dev": "vue-cli-service serve --mode dev --port 8081","serve-prod": "vue-cli-service serve --mode prod","build-dev": "vue-cli-service build --mode dev","build-prod": "vue-cli-service build --mode prod","lint": "vue-cli-service lint"},"dependencies": {"@ant-design/icons-vue": "^5.1.8","ant-design-vue": "^2.0.0-rc.3","axios": "^0.21.0","vue": "^3.0.0","vue-router": "^4.0.0-0","vuex": "^4.0.0-0","wangeditor": "^4.6.3"},"devDependencies": {"@typescript-eslint/eslint-plugin": "^2.33.0","@typescript-eslint/parser": "^2.33.0","@vue/cli-plugin-eslint": "~4.5.0","@vue/cli-plugin-router": "~4.5.0","@vue/cli-plugin-typescript": "~4.5.0","@vue/cli-plugin-vuex": "~4.5.0","@vue/cli-service": "~4.5.0","@vue/compiler-sfc": "^3.0.0","@vue/eslint-config-typescript": "^5.0.2","eslint": "^6.7.2","eslint-plugin-vue": "^7.0.0-0","typescript": "^4.4.3"}
}

然后输入下方指令启动我们的项目。

npm run serve-dev

 

在浏览器中打开。证明我们安装成功。

好了,我们前期的准备差不多就这些,我给大家放一下前端打开后的样子,但是并没有具体的文章内容,这些后续我会添加上去。 还有一些其他的配置文件,我之后也会提供给大家。

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

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

浪潮信息IPF24:AI+时代,创新驱动未来,携手共创智慧新纪元

如今&#xff0c;数字化时代的浪潮席卷全球&#xff0c;人工智能已经成为推动社会进步的重要引擎。浪潮信息IPF24作为行业领先的AI技术盛会&#xff0c;不仅为业界提供了交流合作的平台&#xff0c;更在激发创新活力、拓展发展路径、加速AI技术落地等方面发挥了重要作用。 升级…

【调和级数】100321. 优质数对的总数 II

本文涉及知识点 调和级数 质数、最大公约数、菲蜀定理 LeetCode100321. 优质数对的总数 II 给你两个整数数组 nums1 和 nums2&#xff0c;长度分别为 n 和 m。同时给你一个正整数 k。 如果 nums1[i] 可以被 nums2[j] * k 整除&#xff0c;则称数对 (i, j) 为 优质数对&#…

手机版AI写作软件哪个好用?5款AI写作软件分享

在这个快节凑的时代&#xff0c;人们对于高效、便捷的创作方式很是追求。尤其是在人工智能技术发展迅速的今天&#xff0c;AI写作软件的出现&#xff0c;让很多自媒体创作者都会想到在手机上面进内容创作&#xff0c;这样不仅能提高工作效率&#xff0c;而且工作的自由度会更高…

ciscn2024(上传一下,有侵权什么的问题的话联系删除)

Web Simple_php 这个Simple_php一点儿也不Simple (⋟﹏⋞) 源码放这儿了&#xff1a; <?phpini_set(open_basedir, /var/www/html/); error_reporting(0);if(isset($_POST[cmd])){$cmd escapeshellcmd($_POST[cmd]); if (!preg_match(/ls|dir|nl|nc|cat|tail|more|flag…

Java中IO流类的体系

Java为我们提供了多种多样的IO流&#xff0c;我们可以根据不同的功能及性能要求挑选合适的IO流&#xff0c;如图所示&#xff0c;为Java中IO流类的体系。 从上图发现&#xff0c;很多流都是成对出现的&#xff0c;比如&#xff1a; FileInputStream/FileOutputStream&#xff0…

vue3的api风格

Vue的组件有两种不同的风格&#xff1a;组合式API 和 选项式API 选项式api 选项式API&#xff0c;可以用包含多个选项的对象来描述组件的逻辑&#xff0c;如&#xff1a;data&#xff0c;methods&#xff0c;mounted等。 组合式api setup&#xff1a;是一个标识&#xff0c;告…

【全开源】答题考试系统源码(FastAdmin+ThinkPHP+Uniapp)

答题考试系统源码&#xff1a;构建高效、安全的在线考试平台 引言 在当今数字化时代&#xff0c;在线考试系统已成为教育机构和企业选拔人才的重要工具。一个稳定、高效、安全的答题考试系统源码是构建这样平台的核心。本文将深入探讨答题考试系统源码的关键要素&#xff0c;…

民宿bug

前端 后端 1 订单管理 订单日期已过&#xff0c;状态没有变成已完成

window环境下QT5开发环境的搭建

1、安装visual Stusio 15 生成工具2012 2、安装Visual studio Enterprise 2017 3、Visual studio Enterprise 2017安装完成之后&#xff0c; 修改&#xff1a;选择桌面调试&#xff0c;如下&#xff1a; 4、打开QTcreator&#xff0c;选项中&#xff0c;配置编译器&#xff…

C++学习/复习5--构造函数与初始化/static成员/友元/内部类/匿名对象/编译器的拷贝构造优化

一、本章概要 二、再谈构造函数 1.构造体赋初值与初始化 2.初始化列表与初始化 2.1定义 2.2注意事项与举例 3.explicit关键字与构造函数 3.1隐式类型转换 也叫做自动类型转换 这种转换通常是从存储范围小的类型到存储范围大的类型&#xff0c;或者是从低精度的数值类型到高…

利用基于CNN的人员检测与关键词识别的TinyML实现无接触电梯

目录 说明 论文概述 摘要 引言 现有非接触式电梯解决方案 新解决方案的需求 tinyML实施 系统构建和算法管道 CNN和TinyML实现 结果与讨论 结论 视频演示和代码可用性 一点感想 说明 我一直使用Google Schloar订阅最新的论文消息&#xff0c;今天看到一篇论文的标…

租赁系统|北京租赁系统|租赁软件开发流程

在数字化时代的浪潮下&#xff0c;小程序成为了各行各业争相探索的新领域。租赁行业亦不例外&#xff0c;租赁小程序的开发不仅提升了用户体验&#xff0c;更为商家带来了更多商业机会。本文将详细解析租赁小程序的开发流程&#xff0c;为有志于进军小程序领域的租赁行业从业者…

【C语言】指针作为参数(传值调用vs传址调用)

前言 在前面讲了那些指针相关的内容后&#xff0c;是时候探讨一下指针有什么作用了。 在C语言中&#xff0c;指针有多种各不相同的应用&#xff0c;在本篇文章中&#xff0c;我们探讨一下指针作为函数参数的作用&#xff08;对比传值与传址两种不同函数调用方式&#xff09;。…

OS复习笔记ch6-1

死锁的原理 定义 一组进程中&#xff0c;其中每个进程因等待事件而阻塞&#xff0c;且所等待的事件只能被这组进程中的另一阻塞进程激发称之为死锁。 举例如下 四个车辆希望紧迫的希望能很快通过&#xff0c;每辆车需要两个象限的资源&#xff0c;然而四个车都只得到一个象…

【uni-best+UView】使用mitt实现自定义错误对话框

痛点 目前在设计一个uni-best的前端全局的异常提示信息&#xff0c;如果采用Toast方式&#xff0c;对微信支持的不友好。微信的7中文长度连个NPE信息都无法完整显示&#xff0c;更不用提Stacktrace的复杂报错了。如果使用对话框&#xff0c;必须在页面先预先定义&#xff0c;对…

嵌入式实时操作系统笔记3:FreeRTOS移植(STM32F407)_编写简单的FreeRTOS任务例程

上文讲到UC/OS III系统的移植&#xff0c;那篇文章是失败了的&#xff0c;网络上的资料真是层次不清&#xff0c;多有遗漏步骤&#xff0c;导致单片机连操作系统的初始化都卡在那&#xff0c;这次换个赛道&#xff0c;学FreeRTOS吧...... 今日任务如标题所示&#xff1a;FreeR…

手机端如何访问本地vue+vite项目,实现实时调试?

一、应用场景 h5&#xff08;vuevite&#xff09;嵌入app后&#xff0c;出现某种问题时&#xff0c;需要每次发布坏境后&#xff0c;才能才看效果&#xff0c;这种来回很耗时间&#xff0c;本文章在于解决手机端直接访问本地启动应用项目&#xff0c;无需重复发布坏境 二、实…

春秋CVE-2022-23906

简介 CMS Made Simple v2.2.15 被发现包含通过上传图片功能的远程命令执行 (RCE) 漏洞。此漏洞通过精心制作的图像文件被利用。 正文 1.进入靶场2.进入登录界面&#xff0c;弱口令admin/123456 3.进入后台&#xff0c;文件上传点 4.上传一句话木马图片 5.复制图片&#xf…

Mysql之主从同步

1.BinLog同步机制 Mysql要去保证高可用&#xff0c;或者去分担请求压力&#xff0c;一般会去主从部署&#xff0c;读写分离。写库只负责写&#xff0c;而读库更多的去承担读的请求&#xff0c;从库不写数据&#xff0c;数据从主库同步&#xff0c;那么到底是怎么同步的呢&…

嵌入式全栈开发学习笔记---C语言笔试复习大全23

目录 联合体 联合体的定义 联合体的长度 如果来判断设备的字节序&#xff1f; 如何把大端数据转换成小端数据&#xff1f; 枚举 枚举的定义 上一篇复习了结构体&#xff0c;这一节复习联合体和枚举。 说明&#xff1a;我们学过单片机的一般都是有C语言基础的了&#xff…