nodejs框架express准备登录

目录:

  1. 安装模板
  2. 静态资源
  3. 添加视图
  4. 渲染视图
  5. url重定向

模板引擎

从本节课程开始我们要使用express框架实现一个简单的用户登陆功能,让我们先准备一下相关资源。

在nodejs中使用express框架,它默认的是ejs和jade渲染模板,今天我们就以ejs模板为例,讲述模板渲染网页模板的基础功能。

1. ejs模板安装方法

npm install ejs

2. 目录下安装好了之后,如何调用呢,如下所示:

//指定渲染模板文件的后缀名为ejs
app.set('view engine', 'ejs');

3. 默认ejs模板只支持渲染以ejs为扩展名的文件,可能在使用的时候会觉得它的代码书写方式很不爽还是想用html的形式去书写,该怎么办呢,这时就得去修改模板引擎了,也就会用到express的engine函数。

4. engine注册模板引擎的函数,处理指定的后缀名文件。

// 修改模板文件的后缀名为html
app.set( 'view engine', 'html' );
// 运行ejs模块
app.engine( '.html', require( 'ejs' ).__express );//两个下划线

"__express",ejs模块的一个公共属性,表示要渲染的文件扩展名。

静态资源

由于环境的限制,这里我们就不使用静态资源了,但是实际开发中我们肯定会用到,具体使用规则已在下面列出,可参考。

如果要在网页中加载静态文件(css、js、img),就需要另外指定一个存放静态文件的目录,当浏览器发出非HTML文件请求时,服务器端就会到这个目录下去寻找相关文件。

1. 项目目录下添加一个存放静态文件的目录为public。

2. 在public目录下在添加三个存放js、css、img的目录,相应取名为javascripts、stylesheets、images。

3. 然后就可以把相关文件放到相应的目录下了。

4. 比如,浏览器发出如下的样式表请求:

<link href="/stylesheets/bootstrap.min.css" rel="stylesheet" media="screen">

服务器端就到public/stylesheets/目录中寻找bootstrap.min.css文件。

有了静态目录文件,我们还得在启动文件里告诉它这个静态文件路径,需要指定一下,如下所示:

app.use(express.static(require('path').join(__dirname, 'public')));

PS:express.static —— 指定静态文件的查找目录。

使用use函数调用中间件指定express静态访问目录,'public'就是我们我们新建的用来存放静态文件的总目录。

添加视图

好,下面我们就来添加网页模板了,项目中我们会新建一个目录用来单独存放模板文件,这里我们就统一放到根路径上了。

下面开始新建index.html、login.html、home.html三个页面。

1. index.html页面参考内容如下:

<div >
    <div >
        <h1>首页</h1>
        <form action="#"  role="form" >
            <h1>欢迎进入首页!</h1>
            <div >
                <input type="button" value="登 陆">
            </div>
        </form>
    </div>
</div>

2. login.html页面参考内容如下:

...
<title>用户登录</title>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
...
 
<div >
  <div >
    <h1>用户登录</h1>
    <form action="#" role="form" method="post">
      <input  type="text" name="username" >
      <input  type="password" name="password">
      <div >
        <input type="button" value="登 陆">
      </div>
    </form>
  </div>
</div>

3. home.html页面参考内容如下:

<div >
  <div >
    <h1>主页</h1>
    <form action="#" role="form" >
      <h1>登陆成功!</h1>
      <div >
        <input type="button" value="退 出">
      </div>
    </form>
  </div>
</div>

访问视图

我们要如何对网页模板进行访问呢,这就要用到res对象的render函数了。

1. render函数,对网页模板进行渲染。

2. 格式:res.render(view, [locals], callback);

3. 参数view就是模板的文件名callback用来处理返回的渲染后的字符串,options、callback可省略,在渲染模板时[locals](JSON格式)可为其模板传入变量值,在模板中就可以调用所传变量了,在后面我们会讲述具体使用方法,也可先自行使用看其效果。

4. 比如渲染我们刚刚添加的index.html页面,我们就可以在app.js中写入如下内容:

var express = require('express');
var app = express();
var path = require('path');
 
app.set('views', __dirname);
 
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
 
app.get('/', function(req, res) {
  res.render('index');
});
 
app.listen(80);

运行之后在测试地址我们就可以看到所渲染的index页面了,试一试其他页面是否也可渲染成功?

4. 和静态文件一样,我们也要设置views存放的目录,如下:

// 设定views变量,意为视图存放的目录
app.set('views', __dirname);

有了网页模板和指定目录,下面就可以访问它们了。

redirect基本用法

redirect方法允许网址的重定向,跳转到指定的url并且可以指定status,默认为302方式。

格式:res.redirect([status], url);

例1:使用一个完整的url跳转到一个完全不同的域名。

res.redirect("http://www.hub wiz.com");

例2:跳转指定页面,比如登陆页,如下:

res.redirect("login");

后面我们开始实现登陆功能,先试一下redirect重定向,跳转到我们网站如何?

参考资料:http://www.dwz.cn/3e6UbG

本文链接:http://www.cnblogs.com/jasonnode/p/4487510.html