LI WENHAO

Update README.md

Showing 1 changed file with 197 additions and 36 deletions
1 -# **Running Football** 1 +# 个人博客
2 +
3 +## About the Project
4 +
5 +​ 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.
6 +
7 +### The main function
8 +
9 +#### Client
10 +
11 +​ Article function: the content of the article supports Markdown syntax and the code is highlighted;
12 +Tag function: retrieve article data by tag classification;
13 +Sidebar function: click ranking, webmaster recommendation, tag classification, etc.;
14 +Search function: search the title and abstract of the article by keywords, and support search highlighting;
15 +Message function: you can like, reply to comments, count comments and the total number of replies, support Emoji emoticons;
16 +Other functions: image lazy loading, paging, sidebar top and one-click top, etc.;
17 +
18 +#### Management
19 +
20 +​ Authority management: CRUD administrator, who can assign authority;
21 +​ Article management: CRUD articles, article covers support local upload, article content supports Markdown syntax editing;
22 +​ Label management: CRUD label, label background color supports custom selection with Vue-Color plug-in;
23 +​ Message management: CRUD comments and replies;
24 +
25 +
26 +
27 +#### Built With
28 +
29 +[Node.js](https://nodejs.org/zh-cn/)
30 +
31 +[Element-UI](https://element.eleme.cn/#/zh-CN)
32 +
33 +[Webpack5](https://webpack.docschina.org/)
34 +
35 +[MongoDB](https://www.mongodb.com/)
36 +
37 +[Koa2](https://www.koajs.com.cn/)
38 +
39 +[Vue2](https://cn.vuejs.org/)
40 +
41 +
42 +
43 +## Getting Started
44 +
45 +1.安装配置git环境,使用git clone指令下载项目
46 +
47 +2.安装、配置node、vue、mongodb环境
48 +
49 +3.查看项目结构,导入相关依赖,加载项目配置
50 +
51 +4.配置数据库环境和初始化用户信息
52 +
53 +5.启动项目
54 +
55 +
56 +
57 +### Installation
58 +
59 +#### 环境准备
60 +
61 +​ node.js环境配置安装
62 +
63 +​ vue、vue-cli环境配置安装
64 +
65 +​ mongodb、mongodb Compass环境配置安装
66 +
67 +
68 +
69 +#### 运行说明
70 +
71 +> vue项目配置启动
72 +
73 +```shell
74 +-- yarn指令安装
75 +npm install -g yarn
76 +npm install yarn --save
77 +
78 +-- vue项目依赖引入
79 +npm install
80 +cnpm install
81 +
82 +-- 扩展组件依赖引入
83 +vue-lazyload插件:yarn add vue-lazyload -S
84 +vue-color插件:yarn add vue-color -S
85 +style-resources-loader插件:yarn add style-resources-loader -D
86 +mdrkdown语法支撑相关插件:marked、highlightJs yarn add marked highlightJs -S
87 +```
88 +
89 +
90 +
91 +> mongodb配置:
92 +
93 +​ mongodb配置信息对应:`code/server/config.js`文件配置数据库信息
94 +
95 +![image-20211207140429580](个人博客_开发记录.assets/image-20211207140429580.png)
96 +
97 +```powershell
98 +// 进入mongodb安装目录,执行指令开启mongo服务
99 +> mongo
100 +
101 +// 显示数据库列表
102 +> show dbs
103 +
104 +// 新建一个rfBlog数据库
105 +> use rfBlog
106 +
107 +// 在rfBlog数据库创建一个rf用户,密码为123456
108 +> db.createUser({user:"rf",pwd:"123456",roles:[{role:"readWrite",db:'rfBlog'}]})
109 +
110 +// 展示该库有哪些用户
111 +> show users
112 +
113 +// 数据库认证一下用户、密码,结果返回 1 表示认证成功
114 +> db.auth("rf", "123456");
115 +```
116 +
117 +
118 +
119 +> 初始化系统用户信息
120 +
121 +```powershell
122 +// 开启mongo服务
123 +> mongo
124 +
125 +// 显示数据库列表
126 +> show dbs
127 +
128 +// 进入到wallBlog数据库
129 +> use rfBlog
130 +
131 +// 往该库的users集合插入一条数据,账号:admin 密码:123456
132 +> db.users.insert({
133 + "pwd" : "e10adc3949ba59abbe56e057f20f883e",
134 + "username" : "admin",
135 + "roles" : [
136 + "admin"
137 + ]
138 +})
139 +
140 + // 查询该库下的集合(类似于关系型数据表)
141 +> show collections
142 +
143 +// 查询users集合下的所有数据
144 +> db.users.find()
145 +```
146 +
147 +
148 +
149 +> 项目启动(前后端分离概念,需对应分别启动前端界面和后台接口服务)
150 +
151 +```powershell
152 +// 本地开发管理端页面
153 +yarn dev:admin
154 +// 本地开发客户端页面
155 +yarn dev:client
156 +// 启动后台接口服务
157 +yarn server
158 +```
159 +
160 +
161 +
162 +> 项目打包
163 +
164 +```powershell
165 +// 项目打包 - 管理端
166 +yarn build:admin
167 +// 项目打包 - 客户端
168 +yarn build:client
169 +// 查看打包信息
170 +yarn analyz
171 +```
172 +
173 +
174 +
175 +### 项目展示
176 +
177 +#### 后台管理
178 +
179 +
180 +
181 +#### 前台展示
182 +
183 +
184 +
185 +
186 +
187 +
188 +
189 +
190 +
191 +
192 +
193 +
194 +
195 +
196 +
197 +
2 198
3 -## contents
4 -* About the Project
5 -* Getting Started
6 -* Usage
7 -* Roadmap
8 -* Contribution
9 -* License
10 -* Contact
11 199
12 ----
13 -***
14 ----
15 200
16 201
17 -## **About the Project**
18 202
19 -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.
20 -###The main function
21 203
22 -#### Client
23 204
24 -1. Article function: the content of the article supports `Markdown` syntax and the code is highlighted;
25 -2. Tag function: retrieve article data by tag classification;
26 -3. Sidebar function: click ranking, webmaster recommendation, tag classification, etc.;
27 -4. Search function: search the title and abstract of the article by keywords, and support search highlighting;
28 -5. Message function: you can like, reply to comments, count comments and the total number of replies, support `Emoji` emoticons;
29 -6. Other functions: image lazy loading, paging, sidebar top and one-click top, etc.;
30 205
31 -####Management
32 206
33 -1. Authority management: CRUD administrator, who can assign authority;
34 -2. Article management: CRUD articles, article covers support local upload, article content supports `Markdown` syntax editing;
35 -3. Label management: CRUD label, label background color supports custom selection with `Vue-Color` plug-in;
36 -4. Message management: RD comments and replies;
37 207
38 -####Built With
39 208
40 - * ![Node.js](https://nodejs.org/zh-cn/)
41 - * ![Element-UI](https://element.eleme.cn/#/zh-CN)
42 - * ![Webpack5](https://webpack.docschina.org/)
43 - * ![MongoDB](https://www.mongodb.com/)
44 - * ![Koa2](https://www.koajs.com.cn/)
45 - * ![Vue2](https://cn.vuejs.org/)
46 209
47 -## **Getting Started**
48 210
49 -### **Prerequisites**
......