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** | ... | ... |
-
Please register or login to post a comment