项目整体预览
项目的github地址
界面逼格还行-_-
主要功能:
登陆;
退出;
所用的主要模块:
express, 路由.静态文件.模块分工等;
express-session, 采用session的方式解决http无状态;
body-parse: 解析body;
ejs模板引擎;
path模块;
配置使用: 直接下载, 运行即可,配置详看: package.json;
项目讲解过程
1.初始化package.json; 2.下载express 'npm install express --save' 3.app.js 中
var express = require('express');
var routes = require('./routes/index');
var app = express();
app.use('/', routes);
app.use('/login',routes);
app.listen(3000);
4.创建index.js
var express = require('express');
var router = express.Router();
/* GET index page. */
router.get('/', function(req, res,next) {
res.send('hello 51code')
});
router.get('/login', function (request, response) {
res.send('hello 51code')
});
//导出接口
module.exports = router;
5.截取404错误;app.js
// // 捕获404错误
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
//现在是打印全部信息
next(err);
});
5.创建HTML文件,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login</title>
</head>
<body>
<form action="/login" method="POST">
<input type="text" name="username" placeholder="username">
<input type="password" name="password" placeholder="password">
<input type="submit" value="Login">
</form>
</body>
</html>
6.加载HTML文件, express框架中有专门处理静态文件的方法--static,
既然是存在关于路径相关的内容, 就需要下载
npm install path --save
npm install ejs --save
为了提供诸如图像、CSS 文件和 JavaScript 文件之类的静态文件，可以使用 Express 中的 express.static 内置中间件函数。 将包含静态资源的目录的名称传递给 express.static 中间件函数，以便开始直接提供这些文件。例如，使用以下代码在名为 public 的目录中提供图像、CSS 文件和 JavaScript 文件：
var path = require('path');
//// 设置views文件夹为存放视图文件的目录，
//__dirname为全局变量，存放当前正在执行的脚本所在的目录
app.set('views', path.join(__dirname, 'views'));
//注册ejs模板为html页。简单的讲，就是原来以.ejs为后缀的模板页，现在的后缀名可以//是.html了
app.engine("html",require("ejs").__express);
//app.engine("html",require("ejs").renderFile);
//app.set("view engine","ejs");
//设置视图模板的默认后缀名为.html,避免了每次res.Render("xx.html")的尴尬以及加载的是html.jade(因为jade是默认的引擎)
app.set('view engine', 'html');
Express默认使用jade模板。如果要使用其他模板引擎，如：将EJS模板映射至".html"文件：实际调用了EJS的.renderFile()方法，ejs.__express是该方法在EJS内部的另一个名字。
因为加载的模板引擎后调用的是同一个方法.__express，所以如果使用的是ejs模板，不用配置该项。
总结：使用html模板，需增加 app.engine('html', require('ejs').__express);
使用EJS模板，不用配置该项。 app.set(name, value); 在.set()方法的参数中，有一项是'view engine'，表示没有指定文件模板格式时，默认使用的引擎插件(.jade)。, 所以需要app.set('view engine', 'html');
渲染页面
router.get('/login', function (request, response) {
response.render("index",{title:'User Login'});
});
index.js 添加方法 /post
router.post('/login', function (req, resp) {
//取session, 如果没有, 证明没有登录
var session = req.session;
console.log('+++++++' + req.body.username + req.session.uniqueId);
<!--if(session.uniqueId){
resp.redirect('/redirects');
}else{
// 存储uniqueid
session.uniqueId = req.body.username;
resp.redirect('/redirects');
}-->
});
更改HTML代码
//post 访问/login
<form action="/login" method="post">
<input type="text" name="username" placeholder="username">
<input type="text" name="password" placeholder="password">
<input type="submit" name="提交">
</form>
此时可以访问/post方法, 但是读取body内容, 需要body-parse 模块
$ npm install body-parser --save
试想一个内容, 我们如果登陆过后, 关闭浏览器, 在此打开是否认得我们是网站用户, 那么面临的就是http无状态问题, 我们有两种方法解决, cookie与session, 在这里我们采用session的方法解决
$ npm install express-session --save
接下来开始配置
//引用body-parse
var bodyParser = require('body-parser');
//引用express-session模块
var session = require('express-session');
//解析数据 常用的两种格式
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true}));
//session 相关
app.use(session({
secret: 'asdfoii9838u923$%^&*(',
cookie:{
maxAge: 1000 * 60
},
//每次访问都重新更新
resave: true,
//强制“未初始化”的会话保存到存储。
saveUninitialized: true,
}));
http 重定向问题 :
router.post('/login', function (req, resp) {
//取session, 如果没有, 证明没有登录
var session = req.session;
console.log('+++++++' + req.body.username + req.session.uniqueId);
if(session.uniqueId){
resp.redirect('/redirects');
}else{
// 存储uniqueid
session.uniqueId = req.body.username;
resp.redirect('/redirects');
}
});
//专门处理更改路径的问题 (重定向)
router.get('/redirects', function(req, res){
res.send('aaaa');
});
在Web应用中，有时会遇到页面需要 Url重定向的情况。Url重定向分为 301、 302两种。 301、302都是HTTP状态的编码，都代表着某个Url发生了转移。
1. 301重定向是永久的重定向（Moved Permanently），表示本网页永久性转移到另一个地址，搜索引擎在抓取新内容的同时也将旧的网址替换为重定向之后的网址。
2. 302重定向是临时的重定向（Moved Temporarily），表示本网页暂时性转移到另一个地址，搜索引擎会抓取新的内容而保留旧的网址。
Express是一个基于Node.js实现的Web框架，其响应HTTP请求的response对象中有两个用于URL跳转方法 res.location()和 res.redirect()，使用它们可以实现URL的 301或302重定向。
要更改cookie时间 1000 * 60 代表一分钟
router.get('/redirects', function(req, res) {
// res.send('我是操作重定向的方法');
//类似中间变量, 将session传至该方法
// req.session;全局变量
var session = req.session;
console.log('-99999---' + session.uniqueId);
//如果登陆成功,跳转到首页
if(session.uniqueId == 'admin'){
res.redirect('/home');
}else{
res.send(req.session.uniqueId + ' not found ! <a href="/logout"> Logout </a> ');
}
})
//首页
router.get('/home', function (req, res) {
var session = req.session;
console.log('------9---' + session.uniqueId);
if(session.uniqueId != 'admin'){
res.send('Unauthorized <a href="/login"> Login again </a>' );
}else{
//展示Home页面
res.render('home');
//resp.send('Welcome admin <a href="/logout"> Logout </a>');
}
});
退出登陆
//退出方法
router.get('/logout', function (req, resp) {
// 删除session
req.session.destroy();
// 重定向至login
resp.redirect('/login');
});
// // 捕获404错误
app.use(function(req, res, next) {
var err = new Error('Not Found');
err.status = 404;
next(err);
});
更多精彩内容请关注“IT实战联盟”哦~~~
注意：本文归作者所有，未经作者允许，不得转载
