Node.js建站之详解express与ejs（二）_node express res.render 与ejs.render区别-优快云博客

上一节讲了express的目录结构和其中一些文件的主要内容，今天补充express的路由控制

express路由控制

工作原理

上面提到过 app.js 中

var users = require('./routes/index');
app.use('/', index);

可以用以下代码取代：

app.get('/', function(req, res){ res.render('index', { title: 'Express' });
};)

这段代码的意思是当访问主页时，调用 ejs 模板引擎，来渲染 index.html模版文件（即将 title 变量全部替换为字符串 Express），生成静态页面并显示在浏览器里。

我们把路由放到一个单独的文件routes/routes.js文件，便于我们管理路由。把实现路由的函数抽取出来plugins文件夹下

修改下面代码

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

修改后，依然使用ejs引擎，但文件后缀名已经变为我们熟悉的html

app.set('view engine', 'html');
app.engine('html', require('ejs').__express);

在 app.js 最后添加一行代码：

routes(app);

这里只放登录注册部分代码，博客方面可以自己试着扩展，如果实在写不出，参考github地址：https://github.com/Destinygu/node-blog ，修改 routes.js 如下：

var userPlugin = require('../plugins/user');

module.exports = function (app) {

    app.use(function (req, res,next) {
        var user = req.session.user;
        if(user){
            //一次性存入的变量
            app.locals.user = user;
        }else{
            app.locals.user = user;
        }
        next();
    });

    //首页
    app.get('/',blogPlugin.indexList.get);

    //登录
    app.get('/login',userPlugin.loginNo.no,userPlugin.login.get);
    app.post('/login',userPlugin.login.post);
    //注册
    app.get('/reg',userPlugin.loginNo.no,userPlugin.reg.get);
    app.post('/reg',userPlugin.reg.post);
    //404
    app.use(function(req, res){
        res.render("404");
    });
};

路由规则

express 封装了多种 http 请求方式，我们主要只使用 get 和 post 两种。get和 post的第一个参数为请求的路径，第二个参数为处理请求的回调函数，回调函数有两个参数分别是 req 和 res，代表请求信息和响应信息。路径请求及对应的获取路径有以下几种形式：

req.query ：处理 get请求

req.params ：处理 /:xxx形式的 get请求

req.body ：处理 post请求

req.param() ：可以处理 get和 post请求，但查找优先级由高到低为req.params→ req.body→ req.query

注意以上不带括号的为非函数，使用时如：req.params.user,至此我们新建文件plugins/user.js

var ModelUser = require('../model/user');
var crypto=require('crypto');

//登录
module.exports.login = {

    get : function(req,res,next){
        res.render('login',{title:'login'});
    },

    post : function (req, res, next) {
        var postData = {
            email : req.body.email
        };
        var md5=crypto.createHash('md5');
        var password_md5 =md5.update(req.body.password).digest('hex');

        var resJson = {
            status: false,
            msg: ''
        };
        // 向界面返回获取到的数据
        // res.send(postData);
        ModelUser.findOne(postData,function (err, data) {
            if(err){
                console.log(err);
            }
            if(data) {
                if (data.password == password_md5) {
                    req.session.user = data;
                    resJson.msg = '登录成功';
                    resJson.status = true;
                    res.send(resJson);
                    // res.redirect('/user/'+data._id);
                } else {
                    resJson.msg = '密码错误';
                    res.send(resJson);
                }
            }else{
                resJson.msg = '没有此用户';
                res.send(resJson);
            }
        });
    }
};

//注册
module.exports.reg = {
    get : function(req,res,next){
        res.render('reg',{title:'reg'});
    },
    post: function(req,res,next){
        //进行md5加密
        var md5=crypto.createHash('md5');
        var password_md5 =md5.update(req.body.password).digest('hex');

        var postData = {
            name : req.body.name,
            password :password_md5,
            email : req.body.email
        };

        var resJson = {
            status : false,
            msg : ''
        };

        ModelUser.findOne({
            email:req.body.email
        },function (err, data) {
            if( err ) console.log(err);
            if(data){
                resJson.msg = '此邮箱已被注册';
                res.send(resJson);
            }else{
                ModelUser.create(postData,function (err, data) {
                    if(err){
                        resJson.msg = '注册错误';
                        res.send(resJson);
                        console.log(err);
                    }else{
                        resJson.msg = '注册成功';
                        resJson.status = true;
                        req.session.user = data;
                        res.send(resJson);
                    }
                });
            }
        });
    }
};

ejs模板引擎

虽然express现在默认的模板引擎是jade，但个人比较喜欢用ejs，写法上感觉有点像jsp，下面简单介绍到本站开发用到的ejs技术。

ejs 的标签有三种：
<% code %>：JavaScript 代码。
<%= code %>：显示替换过 HTML 特殊字符的内容。
<%- code %>：显示原始 HTML 内容。

注意：
<%=code%> 和 <%- code%> 的区别，当变量 code 为字符串时，两者没有区别。当 code 比如为 <h1>node</h1>时， <%=code %> 会原样输出<h1>node</h1> ，而 <%-code%> 则会将h1解析出大标题node。

模块的逻辑支持

所有使用 <% %> 括起来的内容都会被编译成 Javascript，你可以在模版文件中像写 js 一样写自己的代码，也允许你声明变量，作用域就是当前模版，因为一个模版会被编译成一个 Javascript 函数，这点真的很像Jsp
示例:

    <% var name = "littledu" %>
    <div>
    Hello, My Name is <%-name %>
    </div>

循环

就像写 Javascript 一样

<ul>
    <% for(var i = 0; i < 10; i++) {%>
    <li>我是列表 <%-i %></li>
    <% } %>
<ul>

Includes

Include 可以引用相对路径的模版文件，在view中创建common文件夹，添加header.js，footer.js。

header.js

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
</head>
<body>

footer.js

</body>
</html>

于是view目录下的index.html就可以写成这样

<% include common/header.html %>
    <h1>我是主页</h1>
<% include common/footer.html %>

Node.js建站之详解express与ejs（二）

express路由控制

工作原理

路由规则

ejs模板引擎

相关推荐