express登录例子

不念不忘少年蓝@ 2023-02-18 14:08 32阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]

本实例主要涉及红框圈出的文件：  
![在这里插入图片描述][20200618094529231.png]

## 文件描述： ##

www 里面存放静态文件  
a.html是我们的表单文件  
ajax.js是封装的一个ajax  
server2.js是建立的服务端文件

--------------------

代码简述：

**server2.js**

const express = require('express')
    const expressStatic = require('express-static') //用于改变静态资源路径
    
    var server = express()
    server.listen(8087) //监听到8087端口
    
    //用户数据（后面会使用数据库代替）
    var users = { 
      blue: '1234',
      zhangsan: '654321',
      lisi: '987987',
      mayouchen: '1234',
    }
    
    console.log('开始运行数据~')
    //请求方式 get post。use通用兼容get post的请求~
    server.get('/login', function (req, res) { 
      var user = req.query['user']
      var pass = req.query['pass']
    
      if (users[user] == null) { 
        res.send({  ok: false, msg: '此用户不存在' })
      } else { 
        if (users[user] != pass) { 
          res.send({  ok: false, msg: '密码错了' })
        } else { 
          res.send({  ok: true, msg: '成功' })
        }
      }
    })
    
    server.use(expressStatic('./www'))

**a.html**

<!DOCTYPE html>
    <html>
    
    <head>
      <meta charset="utf-8">
      <title></title>
      <script src="ajax.js" charset="utf-8"></script>
      <script type="text/javascript">
        window.onload = function () { 
    
          var oUser = document.getElementById('user');
          var oPass = document.getElementById('pass');
          var oBtn = document.getElementById('btn1');
    
          oBtn.onclick = function () { 
            ajax({ 
              url: '/login',
              data: {  user: oUser.value, pass: oPass.value },
              success: function (str) { 
                var json = eval('(' + str + ')');
                if (json.ok) { 
                  alert('登录成功');
                } else { 
                  alert('失败：' + json.msg);
                }
              },
              error: function () { 
                alert('通信失败');
              }
            });
          };
        };
      </script>
    </head>
    
    <body>
      用户：<input type="text" id="user" /><br>
      密码：<input type="password" id="pass" /><br>
      <input type="button" value="登录" id="btn1" />
    </body>
    
    </html>

**ajax.js**

function json2url(json) { 
      var arr = []
      for (var name in json) { 
        arr.push(name + '=' + json[name])
      }
      return arr.join('&')
    }
    function ajax(json) { 
      json = json || { }
      if (!json.url) return
      json.data = json.data || { }
      json.type = json.type || 'get'
    
      var timer = null
    
      if (window.XMLHttpRequest) { 
        var oAjax = new XMLHttpRequest()
      } else { 
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP')
      }
    
      switch (json.type) { 
        case 'get':
          oAjax.open('GET', json.url + '?' + json2url(json.data), true)
          oAjax.send()
          break
        case 'post':
          oAjax.open('POST', json.url, true)
          oAjax.setRequestHeader(
            'Content-Type',
            'application/x-www-form-urlencoded'
          )
          oAjax.send(json2url(json.data))
          break
      }
    
      oAjax.onreadystatechange = function () { 
        if (oAjax.readyState == 4) { 
          clearTimeout(timer)
          if ((oAjax.status >= 200 && oAjax.status < 300) || oAjax.status == 304) { 
            json.success && json.success(oAjax.responseText)
          } else { 
            json.error && json.error(oAjax.status)
          }
        }
      }
    }

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200618094232593.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI0MTQ3MDUx,size_16,color_FFFFFF,t_70
[20200618094529231.png]: https://img-blog.csdnimg.cn/20200618094529231.png