Node.js建站之详解express与ejs(二)

上一节讲了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 %>

考虑单独抽取部分来讲会比较容易理解,但难免在抽取中有所遗漏,希望大家指出。差不多准备考试了,今天就更到这…

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值