黑马博客——详细步骤(一)路由跳转和抽取公共部分代码

Bertha 。 2022-12-31 02:18 51阅读 0赞

**1.2 案例初始化**

1. 建立项目所需文件夹

public 静态资源

model 数据库操作

route 路由

views 模板

2. 初始化项目描述文件

npm init -y

3. 下载项目所需第三方模块

npm install express mongoose art-template express-art-template

4. 创建网站服务器

5. 构建模块化路由

6.  构建博客管理页面模板

1. 建立项目所需文件夹

1.  1.  public 静态资源
    2.  model 数据库操作
    3.  route 路由
    4.  views 模板

![20201227184527302.png][]

2. 初始化项目描述文件   npm init -y

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70][]

3. 下载项目所需第三方模块

npm install express mongoose art-template express-art-template

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 1][]

4. 创建网站服务器

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 2][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 3][]

5. 构建模块化路由

![20201227184528316.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 4][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 5][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 6][]

![20201227184527688.png][]

![20201227184527741.png][]

6.  构建博客管理页面模板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 7][]

开放静态资源

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 8][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 9][]

把相应的html文件剪切到views中

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 10][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 11][]

Html后缀全部改成art

小技巧：

bat批量修改文件后缀

@echo off

for /r %%a in (\*.html) do ren "%%a" "%%~na.art"

![20201227184529569.png][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 12][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 13][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 14][]

模板文件中，外联资源添加绝对路径

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 15][]

优化模板（抽离公共部分）

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 16][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 17][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 14][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 18][]

用模板替换原代码头部和侧边栏

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 12][]

模板的骨架文件

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 19][]

填坑

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 20][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 21][]

其它页面也同样删除骨架代码，使用骨架模板

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 22][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 23][]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 24][]

[20201227184527302.png]: /images/20221120/105ef0a40cbe429d9c43c872be227cd9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70]: /images/20221120/56c04dcabc0947fa956668c9acb1e6d1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 1]: /images/20221120/0e610901157e401dab632d0b77c1c52a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 2]: /images/20221120/1c2d57834cf74332af8c08e653c2b9fd.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 3]: /images/20221120/171536f6102549fe870cc0dbdc940b23.png
[20201227184528316.png]: /images/20221120/4131698d9ad149f6ae53c6704cd76aeb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 4]: /images/20221120/336c6799ee464a2cb69e360e6928bd15.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 5]: /images/20221120/1ac5ed20acc64a95baa09d05a7af9aed.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 6]: /images/20221120/d560ed9677f54aa18c41ab82b42577bb.png
[20201227184527688.png]: /images/20221120/a9e15d16114145b1831ef25e817b6a8a.png
[20201227184527741.png]: /images/20221120/9f35dc3471204b118784fd1aafba3415.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 7]: /images/20221120/7d52da7f7f804abfa9fc4083c0e1ffd5.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 8]: /images/20221120/3956bf9fd3144c39aef1a019c4d0bf1c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 9]: /images/20221120/947245b9d55d446eab373f0a466372c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 10]: /images/20221120/1eca1a7599494c56acad76e146e6b745.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 11]: /images/20221120/a1d5f720297b461c811607b35955f06f.png
[20201227184529569.png]: /images/20221120/72d7ce0102144c63bd85f35a3fcf0f8f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 12]: /images/20221120/d9c134ee2da94a1fa48bccec9c3ce40a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 13]: /images/20221120/05b705690ad241ba8d97aff181fd205f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 14]: /images/20221120/b4d4ada8723e462199f4ef92921385af.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 15]: /images/20221120/4a3a9138fb584658bb6452337f0dd966.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 16]: /images/20221120/d9089710556d42eda65a687b6e5fc8a7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 17]: /images/20221120/aff5787dd3ec45b18f5a7dae4479488d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 18]: /images/20221120/087d671c969c47e3800d6164a7aaa64f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 19]: /images/20221120/4951f739964d42a0b51abc63ddbb68f4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 20]: /images/20221120/452ab66a659d427fb044cbe5e2939789.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 21]: /images/20221120/4e8310c01a09442cb27c0447acbeccd7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 22]: /images/20221120/45ece67ab1ea4a898a639707f354c56c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 23]: /images/20221120/d1408ced656b4169a3ed25af2527f540.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwNzk0OTg2_size_16_color_FFFFFF_t_70 24]: /images/20221120/b90d17d5cba64140b5bcdd468076f38f.png