??📝個人主頁:哈__
期待您的關注?
🌼環境準備
想要搭建自己的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
?
在瀏覽器中打開。證明我們安裝成功。
好了,我們前期的準備差不多就這些,我給大家放一下前端打開后的樣子,但是并沒有具體的文章內容,這些后續我會添加上去。 還有一些其他的配置文件,我之后也會提供給大家。