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

哈__

发布于 2024-05-27 08:08:48

1240

发布于 2024-05-27 08:08:48

文章被收录于专栏：哈哈熊

🌼环境准备

想要搭建自己的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"
  }
}

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