您的位置：首页 > Web前端 > Node.js

node.js学习笔记(4)--使用Express完成简单的登陆

2016-03-29 14:39 1126 查看

1.设计路由

主页：home.ejs 用户登陆后进入的页面访问路径：/home
登陆页面：login.ejs 用户输入用户名密码页面访问路径：/login
退出页面：无用户点击后回到登陆页面访问路径：/logout

2.新增页面

我们上一节中已经知道了如何利用Express创建一个简单的项目。Express创建项目
项目创建好之后，打开views文件夹创建home.ejs页面和login.ejs页面。
home.ejs

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
    <link rel='stylesheet' href='/stylesheets/style.css' />
  </head>
  <body>
    <h1>Welcome <%= user.username %>, 欢迎登陆！！</h1>
    <a claa="btn" href="/logout">退出</a>
  </body>
</html>

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<form action="login" method="post">
用户名：<input type="text" name="username">
密码：<input type="password" name="pwd">
<input type="submit" value="登陆">
</form>
</body>
</html>

OK 我们需要的页面已经建好了！！！！！

3.增加路由配置

我们打开routes/index.js 文件在里面增加如下方法其中router.get是get请求 router.post是post请求

router.get('/login', function (req,res,next){
res.render('login', {title:'主页' })
})

router.post('/login', function (req,res,next){
var user={
username:'admin',
pwd:123456
}
if(req.body.username==user.username && req.body.pwd==user.pwd){
res.redirect('home')
}
res.redirect('login');
})

router.get('/home', function (req,res,next){
var user={
username:'admin',
pwd:123456
}
res.render('home', { title: 'home',user: user })
})

router.get('/logout', function(req, res, next) {
res.redirect('login');
});

4.启动项目查看效果

我们的项目已经写好了。快去试试吧。

5.页面模块化

我们在建立新的页面的时候是不是发现头部和底部的代码是一样的呢。所以我们可以把页面的头部和底部拿出来，使得我们以后更好的管理。
建立head.ejs,foot.ejs文件
head.ejs

<!DOCTYPE html>
<html>
<head>
<title><%= title %></title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>

foot.ejs

</body>
</html>

修改home.ejs页面为

<% include head%>
<h1>Welcome <%= user.username %>, 欢迎登陆！！</h1>
<a claa="btn" href="/logout">退出</a>
<% include foot %>

是不是简洁很多恩！！！！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航