个人博客
About the Project
A minimalistic version of PC football blog. The front-end project is mainly built using Vue2 and Element-UI; it is built and packaged using Webpack5. The back-end project is mainly designed using the Node framework Koa2 and the MongoDB database.
The main function
Client
Article function: the content of the article supports Markdown syntax and the code is highlighted; Tag function: retrieve article data by tag classification; Sidebar function: click ranking, webmaster recommendation, tag classification, etc.; Search function: search the title and abstract of the article by keywords, and support search highlighting; Message function: you can like, reply to comments, count comments and the total number of replies, support Emoji emoticons; Other functions: image lazy loading, paging, sidebar top and one-click top, etc.;
Management
Authority management: CRUD administrator, who can assign authority; Article management: CRUD articles, article covers support local upload, article content supports Markdown syntax editing; Label management: CRUD label, label background color supports custom selection with Vue-Color plug-in; Message management: CRUD comments and replies;
Built With
Getting Started
1.安装配置git环境，使用git clone指令下载项目
2.安装、配置node、vue、mongodb环境
3.查看项目结构，导入相关依赖，加载项目配置
4.配置数据库环境和初始化用户信息
5.启动项目
Installation
环境准备
node.js环境配置安装
vue、vue-cli环境配置安装
mongodb、mongodb Compass环境配置安装
运行说明
vue项目配置启动
-- yarn指令安装
npm install -g yarn
npm install yarn --save
-- vue项目依赖引入
npm install
cnpm install
-- 扩展组件依赖引入
vue-lazyload插件：yarn add vue-lazyload -S
vue-color插件：yarn add vue-color -S
style-resources-loader插件：yarn add style-resources-loader -D
mdrkdown语法支撑相关插件：marked、highlightJs yarn add marked highlightJs -S
mongodb配置：
mongodb配置信息对应：code/server/config.js文件配置数据库信息
// 进入mongodb安装目录，执行指令开启mongo服务
> mongo
// 显示数据库列表
> show dbs
// 新建一个rfBlog数据库
> use rfBlog
// 在rfBlog数据库创建一个rf用户，密码为123456
> db.createUser({user:"rf",pwd:"123456",roles:[{role:"readWrite",db:'rfBlog'}]})
// 展示该库有哪些用户
> show users
// 数据库认证一下用户、密码，结果返回 1 表示认证成功
> db.auth("rf", "123456");
初始化系统用户信息
// 开启mongo服务
> mongo
// 显示数据库列表
> show dbs
// 进入到wallBlog数据库
> use rfBlog
// 往该库的users集合插入一条数据，账号：admin 密码：123456
> db.users.insert({
"pwd" : "e10adc3949ba59abbe56e057f20f883e",
"username" : "admin",
"roles" : [
"admin"
]
})
// 查询该库下的集合（类似于关系型数据表）
> show collections
// 查询users集合下的所有数据
> db.users.find()
项目启动（前后端分离概念，需对应分别启动前端界面和后台接口服务）
// 本地开发管理端页面
yarn dev:admin
// 本地开发客户端页面
yarn dev:client
// 启动后台接口服务
yarn server
项目打包
// 项目打包 - 管理端
yarn build:admin
// 项目打包 - 客户端
yarn build:client
// 查看打包信息
yarn analyz