从零开始搭建一个博客网站--项目环境搭建

一、案例初始化

1、 建立项目所需文件夹

• public 静态资源
• model 数据库操作
• route 路由
• views 模板

2、 初始化项目描述文件，package.json 文件

npm init -y

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

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

4、 创建网站服务器

在根目录下新建一个app.js文件

//引入express模块
const express = require('express');
//创建网站服务器
const app = express();

//导入路由模块
const home = require('./route/home');
const admin = require('./route/admin');
//拦截所有请求，为路由匹配请求路径
app.use('/home',home);
app.use('/admin',admin);
//设置监听端口80
app.listen(80);
console.log('服务器启动成功');

5、 构建模块化路由

在route文件夹下新建两个js文件，一个文件命名为admin.js用来写用户管理页面的路由，一个文件命名为home.js用来写博客首页的路由。

admin.js

// 引用expess框架
const express = require('express');
// 创建博客管理页面路由
const admin = express.Router();

admin.get('/', (req, res) => {
	res.send('欢迎来到博客管理页面')
});

// 将路由对象做为模块成员进行导出
module.exports = admin;

home.js

// 引用expess框架
const express = require('express');
// 创建博客展示页面路由
const home = express.Router();

home.get('/', (req, res) => {
	res.send('欢迎来到博客首页')
});

// 将路由对象做为模块成员进行导出
module.exports = home;

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

下图是博客管理页面的静态页面示例图

现在要做的就是利用模板引擎art-template，把现有的静态页面构建成一个个模板。然后通过子模板的方式抽取模板中的公共部分，然后在进一步抽离出骨架文件模板，以此来达到优化模板的目的。

下面是已经提前准备好的博客管理页面和博客首页的静态资源文件。

现在将admin文件夹和home文件夹的静态资源文件放到博客根目录下的public文件夹当中，然后现在要实现网站静态资源的访问。

要实现网站静态资源的访问，就需要在app.js文件中开放静态资源文件，在express框架中提供了开放静态资源的方法express.static()。里面的参数就是需要开放的静态资源的文件夹路径，这里需要使用绝对路径，因此就需要用到Node.js里面的系统模块path，利用path模块获取到当前文件的绝对路径，__dirname的作用就是获取当前文件的绝对路径，而path模块下的join()方法可以很方便的进行路径的拼接，而且对于不同的操作系统path模块会自动去适配路径拼接符。要使用path模块需要先导入path这个模块。

开放静态资源代码：

//引入path系统模块
const path = require('path');
//开放静态资源文件
app.use(express.static(path.join(__dirname,'public')));

现在就实现一个静态网站的功能了，静态网站当然不可能是我的目标，所以继续没有做完的工作，那就是将html文件做成模板文件，这样做的目的就是为了使用模板引擎进行字符串的拼接。现在需要在views文件夹中再新建admin文件夹和home文件夹两个文件夹，admin文件夹存放于博客管理页面的相关模板，home文件夹存放博客首页的相关模板。现在把public文件夹下的admin文件夹下的html文件移动到views文件夹下的admin文件夹当中，同样也把public文件夹下的home文件夹下的html文件移动到views文件夹下的home文件夹当中，然后把html后缀改为art，art这是art-template模板引擎的模板文件的文件后缀，如下图：

现在我们就要去优化模板文件，通过子模板的方式抽取模板中的公共部分，然后在进一步抽离出骨架文件模板。

在admin文件夹中新建一个common文件夹，用来存放博客管理页面的公共模板文件，以及骨架文件。这里操作过于繁琐，所以不再详细说明，需要的基础知识就是art-template模板引擎的使用。

art-template模板引擎的使用参考文章： 模板引擎简介和art-template模板引擎基本使用