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循环，遍历数据

        {% for navLink in navLinks %}
        {% if key==navLink.key %}
            
{{navLink.  label}}
         {% else %}
            
{{navLink.  label}}
          {% endif %}
          {% endfor %}
    

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

        

           

              {% for navLink in navLinks %}
              {% if key==navLink.key %}
                
{{navLink.  label}}
              {% else %}
                 
{{navLink.  label}}
              {% endif %}
              {% endfor %}
           
           

              
              
           
           

               {% if user %}
               您好,{{user}}!
               注销
               {% else %}
               登录
               {% endif %}
           
       
    
    {% block content %}{% endblock %}

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

{% extends "./views/layout/layout.html" %}
{% block content %}
  

      

        

            账号
            
        
        

            密码
            
        
        
     
  
{% 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. 登录成功后跳转到资源下载页
   

整体代码可查看链接

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