LI WENHAO / Running-Football

Go to a project
Toggle navigation Toggle navigation pinning
LI WENHAO
c032f891 1 parent 6e8f6904

Update README.md

Inline Side-by-side
Showing 1 changed file with 52 additions and 53 deletions
# 个人博客
# Running Football Blog
## About the Project
......@@ -8,20 +8,19 @@
#### 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.;
​ 1. Article function: the content of the article supports `Markdown` syntax and the code is highlighted;
2. Tag function: retrieve article data by tag classification;
3. Sidebar function: click ranking, webmaster recommendation, tag classification, etc.;
4. Search function: search the title and abstract of the article by keywords, and support search highlighting;
5. Message function: you can like, reply to comments, count comments and the total number of replies, support `Emoji` emoticons;
6. 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;
​ 1. Authority management: CRUD administrator, who can assign authority;
​ 2. Article management: CRUD articles, article covers support local upload, article content supports `Markdown` syntax editing;
​ 3. Label management: CRUD label, label background color supports custom selection with `Vue-Color` plug-in;
​ 4. Message management: RD comments and replies
#### Built With
......@@ -42,92 +41,92 @@ Other functions: image lazy loading, paging, sidebar top and one-click top, etc.
## Getting Started
1.安装配置git环境，使用git clone指令下载项目
1. Install and configure the git environment, use the git clone command to download the project
2.安装、配置node、vue、mongodb环境
2. Install and configure node, vue, mongodb environment
3.查看项目结构，导入相关依赖，加载项目配置
3. View the project structure, import related dependencies, load the project configuration
4.配置数据库环境和初始化用户信息
4. Configure the database environment and initialize user information
5.启动项目
5. Start the project
### Installation
#### 环境准备
#### Environmental preparation
​ node.js环境配置安装
​ node.js Environment configuration installation
​ vue、vue-cli环境配置安装
​ vue、vue-cli Environment configuration installation
​ mongodb、mongodb Compass环境配置安装
​ mongodb、mongodb Compass Environment configuration installation
#### 运行说明
#### Operating instructions
> vue项目配置启动
> Vue project configuration start
```shell
-- yarn指令安装
-- yarn Instruction to install
npm install -g yarn
npm install yarn --save
-- vue项目依赖引入
-- Vue project dependency introduction
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
-- Extension component dependency introduction
vue-lazyload Plugin：yarn add vue-lazyload -S
vue-color plugin：yarn add vue-color -S
style-resources-loader plugin：yarn add style-resources-loader -D
mdrkdown syntax support related plugins：marked、highlightJs yarn add marked highlightJs -S
```
> mongodb配置：
>mongodb configuration：
​ mongodb配置信息对应：`code/server/config.js`文件配置数据库信息
​ Mongodb configuration information correspondence：`code/server/config.js`File configuration database information
```powershell
// 进入mongodb安装目录，执行指令开启mongo服务
// Enter the ‘mongodb’ installation directory and execute the command to start the ‘mongo’ service
> mongo
// 显示数据库列表
// Display database list
> show dbs
// 新建一个rfBlog数据库
// Create a new ‘rfBlog’ database
> use rfBlog
// 在rfBlog数据库创建一个rf用户，密码为123456
// Create an rf user in the ‘rfBlog’ database with a password of 123456
> db.createUser({user:"rf",pwd:"123456",roles:[{role:"readWrite",db:'rfBlog'}]})
// 展示该库有哪些用户
// Show who the library has users
> show users
// 数据库认证一下用户、密码，结果返回 1 表示认证成功
// The database authenticates the user and password, and the result returns 1 to indicate successful authentication
> db.auth("rf", "123456");
```
> 初始化系统用户信息
> Initialize system user information
```powershell
// 开启mongo服务
// Start ‘mongo’ service
> mongo
// 显示数据库列表
// Display database list
> show dbs
// 进入到wallBlog数据库
// Access to the ‘wallBlog’ database
> use rfBlog
// 往该库的users集合插入一条数据，账号：admin 密码：123456
// Insert a piece of data into the ‘users’ collection of the library, account number: admin password: 123456
> db.users.insert({
"pwd" : "e10adc3949ba59abbe56e057f20f883e",
"username" : "admin",
......@@ -136,36 +135,36 @@ mdrkdown语法支撑相关插件：marked、highlightJs yarn add marked highlig
]
})
// 查询该库下的集合（类似于关系型数据表）
// Query the collection under the library (similar to a relational data table)
> show collections
// 查询users集合下的所有数据
// Query all data in the ‘users’ collection
> db.users.find()
```
> 项目启动（前后端分离概念，需对应分别启动前端界面和后台接口服务）
> Project start (the concept of front-end and back-end separation, the front-end interface and back-end interface services need to be started respectively)
```powershell
// 本地开发管理端页面
// Local development management page
yarn dev:admin
// 本地开发客户端页面
// Local development of the client page
yarn dev:client
// 启动后台接口服务
// Start the background interface service
yarn server
```
> 项目打包
> Project packaging
```powershell
// 项目打包 - 管理端
// Project packaging-management side
yarn build:admin
// 项目打包 - 客户端
// Project packaging-client
yarn build:client
// 查看打包信息
// View packaging information
yarn analyz
```
......