NodeJS实战利用Express&MongoDB搭建博客（2）前后端分离

最新推荐文章于 2024-04-27 20:07:47 发布

cellinlab

最新推荐文章于 2024-04-27 20:07:47 发布

阅读量1.1k

点赞数 3

分类专栏：后端 JavaScript NodeJS 文章标签： Node 前后端分离静态资源托管划分模块 Node实战

本文链接：https://blog.csdn.net/funkstill/article/details/87827385

版权

JavaScript 同时被 3 个专栏收录

152 篇文章 2 订阅

订阅专栏

NodeJS

35 篇文章 0 订阅

订阅专栏

后端

17 篇文章 0 订阅

订阅专栏

使用模板

后端逻辑和页面表现分离——前后端分离

模板配置

/**
 * app.js
 * 应用程序启动文件
 */
//加载express模块
var express = require('express');
//加载模板处理模块
var swig = require('swig');


/**
 * 首页
 * req request对象
 * res response对象
 * next 函数
 *
 */
var app = express();//创建app 应用 -》NodeJS Http.createServer();
//配置应用模板
//定义当前应用使用的模板引擎。第一个参数：模板引擎的名称，同时也是模板文件的后缀；第二个参数：用于处理模板内容的方法
app.engine('html',swig.renderFile);
//设置模板存放目录，第一个参数必须是views，第二个参数是目录
app.set('views','./views');
//注册所使用的模板引擎。第一个参数为view engine；第二个参数和模板引擎一致
app.set('view engine','html');

app.get('/',function (req,res,next) {
    //res.send('<h1>Wellcom to my blog!</h1>');
    /**
     * 读取views目录下的指定文件，解析并返回给客户端
     * 第一个参数：表示模板的文件，相对于views目录 views/index.html
     * 第二个参数：传递给模板使用的数据
     */
    res.render('index');
})
//监听http请求
app.listen(8080);

index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>Wellcom to my blog!</h1>
</body>
</html>

由于缓存机制，模板只加载一次，在开发过程中便于调试课设置缓存关闭。

//开发过程，取消模板缓存
swig.setDefaults({cache:false});

静态资源文件处理

app.js

//设置静态文件托管
//当用户访问的URL以/public 开始，那么直接返回 __dirname+'/public' 对应下文件
app.use('/public',express.static(__dirname+'/public'));

/views/index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" type="text/css" href="/public/main.css"/>
</head>
<body>
    <h1>Wellcom to my blog!!!</h1>
</body>
</html>

/public/main.css

body{
    background: blue;
}

整体流程

用户发送http请求->url->解析路由->找到匹配的规则->执行指定的绑定函数，返回对应内容至用户
/public ->静态->直接读取指定目录下的文件，返回给用户
->动态->处理业务逻辑，加载模板，解析模板->返回数据给用户

划分模块

模块划分

根据功能进行模块划分：前台模块，后台管理模块，API模块

使用app.use()进行模块划分

app.js

/**
 * 根据不同的功能划分模块
 */
app.use('/admin',require('./routers/admin'));

app.use('/api',require('./routers/api'));

app.use('/',require('./routers/main'));

/routers/admin.js

var express = require('express');
var router = express.Router();

router.get('/user',function (req,res,next) {
    res.send('User');
});

module.exports = router;

/routers/api.js

var express = require('express');
var router = express.Router();

router.get('/user',function (req,res,next) {
    res.send('API-User');
});

module.exports = router;

/routers/main.js

var express = require('express');
var router = express.Router();

router.get('/main',function (req,res,next) {
    res.send('HomePage');
});

module.exports = router;

前台路由&模板

main模块

/ 首页

/view 内容页

api模块

/ 首页

/register 用户注册

/login 用户登录

/comment 评论获取

/comment/pots 评论提交

后台路由&模板

admin模块

/ 首页

用户管理

/user 用户列表

分类管理

/catagory 分类列表

/catagory/add 分类添加

/catagory/edit 分类修改

/catagory/delete 分类删除

文章内容管理

/article 内容列表

/article/add 内容添加

/article/edit 内容修改

/aticle/delete 内容删除

评论内容管理

/comment 评论列表

/comment/delete 评论删除

功能开发顺序

功能模块开发顺序

用户

栏目

内容

编码顺序

通过Schema定义设计数据存储结构

功能逻辑

页面展示

cellinlab

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
NodeJS实战利用Express&MongoDB搭建博客（2）前后端分离

使用模板后端逻辑和页面表现分离——前后端分离模板配置/** * app.js * 应用程序启动文件 *///加载express模块var express = require('express');//加载模板处理模块var swig = require('swig');/** * 首页 * req request对象 * res respon...
复制链接

扫一扫