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

最新推荐文章于 2024-01-16 19:13:16 发布

mnixu

最新推荐文章于 2024-01-16 19:13:16 发布

阅读量4.4k

点赞数 1

分类专栏： node.js node-js 文章标签： node.js express

本文链接：https://blog.youkuaiyun.com/a1104258464/article/details/51005784

版权

node.js 同时被 2 个专栏收录

15 篇文章

订阅专栏

node-js

14 篇文章

订阅专栏

这篇博客详细记录了如何利用Express框架在Node.js中设计并实现一个简单的登录功能，包括路由设计、页面创建、路由配置以及项目的启动和页面模块化的实践步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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 %>

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