基于node.js的博客搭建

2022-08-24 20:00:27

一个博客应当具备哪些功能？

前台展示

点击下一页，可以点击分类导航。
可以点击进入到具体博文页面
下方允许评论。显示发表时间。允许留言分页。
右侧有登录注册界面。

后台管理

管理员账号：登陆后看到页面不一样，有后台页面。
允许添加新的分类。从后台添加新的文章。
编辑允许markdown写法。
评论管理。

安装模块

Express

一个简洁灵活的node.js WEB应用框架，提供一系列强大的特性帮助我们创建web应用。
Mongodb

用于保存产生的数据

　　第三方模块和中间件：

bodyParser，解析post请求数据
cookies：读写cookie
swig：模板解析引擎
mongoose：操作Mongodb数据
markdown：语法解析生成模块

创建应用

const express=require('express')
const app=express()
app.get('/',(req,res,next)=>{
  res.send('<h1>欢迎光临我的博客！</h1>')            // req:request对象，保存客户请求相关的一些数据——http.request 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// res：response对象，服务端输出对象，停工了一些服务端相关的输出方法——http.response 　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　// next：方法，用于执行下一个和路径相匹配的函数(行为)。
})
app.listen(8010,()=>{
  console.log('123')
})

在Express框架下，可以通过app.get()或app.post()等方式，把一个url路径和（1-n）个函数进行绑定。当满足对应的规则时，对应的函数将会被执行，该函数有三个参数res，req，next

模板引擎的配置和使用

// 定义模板引擎，使用swig.renderFile方法解析后缀为html的文件
var swig=require('swig');
app.engine('html',swig.renderFile);

// 设置模板存放目录
app.set('views','./views');
// 注册模板引擎
app.set('view engine','html');

swig.setDefaults({cache:false});

配置模板的基本流程是：

请求swig模块=>定义模板引擎=>注册模板引擎=>设置调试方法

我们可以使用var swig=require('swig');定义了swig方法。

以下进行逐行解析——

定义模板引擎

app.engine('html',swig.renderFile);

第一个参数：模板引擎的名称，同时也是模板引擎的后缀，你可以定义打开的是任何文件格式，比如json，甚至tdl等。
第二个参数表示用于解析处理模板内容的方法。
第三个参数：使用swig.renderFile方法解析后缀为html的文件。

设置模板目录

现在就用express组件提供的set方法标设置模板目录：

app.set('views','./views');

定义目录时也有两个参数，注意，第一个参数必须为views！第二个参数可以是我们所给出的路径。因为之前已经定义了模板文件夹为views。所以，使用对应的路径名为./views。

注册模板引擎

app.set('view engine','html');

还是使用express提供了set方法。
第一个参数必须是字符串'view engine'。
第二个参数和app.engine方法定义的模板引擎名称（第一个参数）必须是一致的（都是“html”）。

在app.get()方法里面，使用res.render()方法重新渲染指定内容

app.get('/',function(req,res,next){

    /*
    * 读取指定目录下的指定文件，解析并返回给客户端
    * 第一个参数：模板文件，相对于views目录,views/index.html
    * */

    res.render('index');
});

这时候，我们定义了返回值渲染index文件，就需要在views文件夹下新创建一个index.html。

调试方法

我们在不停止服务器的情况下，重新修改index的文件内容，发现并没有刷新。

什么问题呢？出于性能上考虑，node把第一次读取的index放到了内容中，下次访问时，就是缓存中的内容了，而不是真正的index文件。因此需要重启。

开发过程中，为了减少麻烦，需要取消模板缓存。

swig.setDefaults({cache:false});

当然，当项目上线时，可以把这一段删除掉。

静态文件托管

在网页中经常引入外部css js等外链，直接引入浏览器报错

Refused to apply style from 'http://localhost:8010/public/css/base.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.

问题不在于css.css是否存在，而在于请求失败。因为外链文件本质也是一个请求，但是在app.js中还没有对应设置。

app.get('/css.css', function (req,res,next) {
    res.setHeader('content-type','text/css');
    res.send('body {background: red;}');
});

静态文件托管目录

最好的方法是，把所有的静态文件都放在一个public的目录下，划分并存放好。

然后在开头就通过以下方法，把public目录下的所有静态文件都渲染了：

app.use('/public',express.static(__dirname+'/public'));

以上方法表示：当遇到public文件下的文件，都调用第二个参数里的方法(注意是两个下划线)。

当用户访问的url以public开始，那么直接返回对应__dirname+'public'下的文件。因此我们的css应该放到public下。

引用方式为：

<link rel="stylesheet" type="text/css" href="../public/css.css"/>

分析

在以上的内容中，我们实现了初始化项目，可以调用html和css文件。基本过程逻辑是：

用户发送http请求（url）=>解析路由=>找到匹配的规则=>指定绑定函数，返回对应内容到用户。

访问的是public：静态——直接读取指定目录下的文件，返回给用户。

=>动态=>处理业务逻辑

码农公寓