小博客练习

博客

（简单的综合运用）

一、了解博客需求

1.主要的分为前台和后台

后台：
注册登录：登录，登录。
分类管理：显示分类，编辑分类，添加分类，删除分类。
文章管理：显示文章，编辑文章，添加文章，删除文章。
用户管理。
标签管理。
···等等功能
前台：
首页面
列表页面
文章详情页面
···等等

2.技术

后端：node.js+express+mongodb+express中间件
前端：html+css+js+jq

二、搭建项目

1.使用express进行搭建脚手架

先确定项目的目录，如下
打开本目录下的cmd窗口进行创建，使用ejs模板引擎

进入项目，安装依赖

此时项目骨架基本完成

项目通过打开Visual Studio Code
运行，浏览器访问

三、载入静态页面

·
将静态资源放在项目的views下面，如下：

我们把后台的静态资源样式放在了views下，所以也要托管views的静态资源

没有样式，把样式放在pubilc下面，把原来自己生成的删除，如下：

按理说，需要把后台的模板的后缀全部改成ejs，这样为了不麻烦，我们可以给ejs模板引擎起个别名，叫html，html就代表ejs模板引擎的别名，就意味着，模板的后缀可以是html了，代码如下：


提醒一下：后台的头尾部单独提了出来

在后台的每个页面就引入了头和尾

四、创建路由

1.设计路由分配

前台的首页面：http://localhost:3000/
前台的文章页面：http://localhost:3000/posts
后台首页面：http://localhost:3000/admin/index
后台分类列表页面：http://localhost:3000/admin/cats/
后台添加分类页面：http://localhost:3000/admin/cats/add
后台文章列表页面：http://localhost:3000/admin/posts/
后台添加文章页面：http://localhost:3000/admin/posts/add

分为前台和后台，直接就把前后的二级路由分离开

2.前台的路由实现

1）实现一级路由

2）实现二级路由
记得修改一下代码


将HTML里的一些ejs语法先去掉

并且还要把二次请求访问的“/”加上

3）此时前台页面可以在浏览器访问了

3.后台的路由实现

1）实现一级路由


2）实现二级路由

3）此时后台首页面就可以显示了

4.处理分类管理的路由

后台分类列表页面：http://localhost:3000/admin/cats/
后台添加分类页面：http://localhost:3000/admin/cats/add
后台编辑分类页面：http://localhost:3000/admin/cats/edit
后台删除分类页面：http://localhost:3000/admin/cats/delete

1）先实现二级路由
2）实现一级路由

5.处理文章管理的路由

后台文章列表页面：http://localhost:3000/admin/posts/
后台添加文章页面：http://localhost:3000/admin/posts/add
后台编辑文章页面：http://localhost:3000/admin/posts/edit
后台删除文章页面：http://localhost:3000/admin/posts/delete

1）先实现二级路由

2）实现一级路由

5.修改右侧的导航，可以点击显示页面

测试之，如下：



····等等，这里就不一一展示了

五、数据库设计

• 博客中有很多数据，分类的数据，文章的数据…，数据之多，我们要丢到数据库中，目前我们先用mongodb来设计。

我们现在需要实现的功能是分类和文章，之后还有用户等功能
设计里面的集合，如下：
分类—cats
文章—posts
用户—users

六、分类管理模块实现

小改动 把之前的routtes改个名字controller.，在建一个models目录。现在controller放路由控制，models放数据库的模板，加上之间的views,就是经典的MVC

1.添加分类

思想：
找到添加分类表单------表单中填写数据-------点击提交,向服务器发送post请求 (这个请求会带上数据—服务器接收数据)------验证数据 (后端一定要指望前端去验证数据的合法性) ------把数据入库

1）找到表单，修改表单的action和method
并且确保input有相对应的name

2）配置body-parser
查看是否有body-parser，我们之前在创建脚手架的时候，默认安装了body-parser，配置一下body-parser。

3）获取数据

测试可以获取内容

4）封装model，对数据进行插入操作

安装驱动

代码如下


测试一下：ok

2.显示分类

• 现在我们的数据已经显示到了数据库中，需要将数据库中内容显示出来

1）操作数据库查找数据

把函数暴露出去

2）通过callback把数据传了过来

3）在模板中渲染数据

测试一下：ok

3.编辑分类

编辑分类分两大步：
点击编辑时，需要获取对应的数据，显示到表单，这叫数据的回显。
修改数据，提交请求。

1）点击编辑按钮的时候跳转到编辑页面

2）利用id实现数据的回显

点击时就会把数据传递给服务器，服务器接收这个_id

数据库操作

根据ID得到对应的数据

在编辑页面渲染模板

测试之，ok

3）利用_id更新数据

检查form表单，并且在编辑页面添加一个隐藏的id

在提交的时候发送一个post的请求

数据库更新数据操作

测试之，ok.

4.删除分类

1）找到删除按钮

2）对应路由


测试之，ok

七、文章管理模块实现

1.添加文章

**1）由于之前数据库中又分类的数据，所以先将分类的选项换成数据库的内容 **

先考虑，上面的页面，是哪个路由渲染出来的，找到，然后加入分类的数据，和模板渲染，如下：

**2）查看表单的注意点 **

**2）编写路由 **


测试之，ok

2.显示文章

1）编写路由

2）数据库查找数据

3）模板中使用数据

测试之，如下：