node实现页面的登录验证功能

一. demo目标

• 制作导航效果，通过链接可以跳转到各个页面
• 制作登录验证功能，资源下载页 只有登录了才能访问

二. 主要实现

• 使用基于node的Koa框架，更便捷地开发web服务器
• nunjucks模板：可以直接响应html页面，能把后台数据绑定在模板中，后发送给浏览器
• 路由功能：根据用户不同的请求路径响应不同的页面
• 表单提交:提交数据

三. 思路解析

1. 制作导航链接，从后台获取数据

//后台数据：头部导航链接
let navLinks=[
    {label:"首页",key:"home",href:"/"},
    {label:"文档",key:"doc",href:"/doc"},
    {label:"博客",key:"blog",href:"/blog"},
    {label:"视频",key:"video",href:"/video"},
    {label:"资源下载",key:"downLoad",href:"/downLoad"}
];

//使用for循环，遍历数据
<ul class="links">
        {% for navLink in navLinks %}
        {% if key==navLink.key %}
            <li class="active"><a  href="{{navLink.href}}">{{navLink.  label}}</a></li>
         {% else %}
            <li><a href="{{navLink.href}}">{{navLink.  label}}</a></li>
          {% endif %}
          {% endfor %}
    </ul>

2. 头部导航效果需要使用模板继承功能

<header>
        <nav>
           <ul class="links">
              {% for navLink in navLinks %}
              {% if key==navLink.key %}
                <li class="active"><a  href="{{navLink.href}}">{{navLink.  label}}</a></li>
              {% else %}
                 <li><a href="{{navLink.href}}">{{navLink.  label}}</a></li>
              {% endif %}
              {% endfor %}
           </ul>
           <form class="search">
              <input type="text" placeholder="搜索">
              <img src="/images/sousuo.png" alt="">
           </form>
           <div class="login">
               {% if user %}
               您好,{{user}}!
               <a href="/logout">注销</a>
               {% else %}
               <a href="/login"><button class="btn">登录</button></a>
               {% endif %}
           </div>
       </nav>
    </header>
    {% block content %}{% endblock %}

3. 登录认证：
   . 使用post请求来提交数据
   . 当用户输入账号为"admin"，密码为"123456",则登录成功，跳转到资源下载页面，如果输入错误，则继续输入

<!--login.html页面-->
{% extends "./views/layout/layout.html" %}
{% block content %}
  <div class="box">
      <form action="/data" method="POST">
        <div class="row">
            <label for="user">账号</label>
            <input id="user" type="text" placeholder="请输入用户名" name="username">
        </div>
        <div class="row">
            <label for="pass">密码</label>
            <input id="pass" type="password" placeholder="请输入密码" name="password">
        </div>
        <input class="sub" type="submit" value="登录">
     </form>
  </div>
{% endblock %}

//后台实现
router.post("/data",async ctx=>{
    let username=ctx.request.body.username;
    let password=ctx.request.body.password;
    if(userame=="admin" && password=="123456"){
        ctx.session.user=username;
        ctx.redirect("/downLoad")
    }
    else{
        ctx.redirect("/login");
    }
})

效果图

1. 首页

2. 登录页
   
3. 登录成功后跳转到资源下载页
   

整体代码可查看链接

上面效果仅我个人想法，写得不好的地方欢迎大家评论