在前端html页面中向服务器发送post登录请求

03-27 8278阅读 0评论

目录

前言

搭建服务器

搭建前端登录页面

获取表单值

使用axios发送post登录请求

前言

一般在html页面中向服务器发送post请求的模块为登录请求，本文将介绍如何向服务器发送post请求

搭建服务器

如何搭建服务器请看JWT认证这篇文章，有详细的解说。这里之所以使用JWT认证是因为在前端html页面发起post请求会有跨域问题。这里直接附上完整代码

// 导入express模块
const express = require('express')
// 创建express服务器实例
const app = express()
// 导入jwt相关的包
const jwt = require('jsonwebtoken')
const expressJWT = require('express-jwt')
// 允许资源跨域共享
const cors = require('cors')
app.use(cors())
// 解析post提交的表单数据
app.use(express.urlencoded({extended:false}))
// 定义secret密钥
const secretKey= 'notbald'
// 登录接口
app.post('/post',(req,res)=> {
    const userinfo = req.body
    if(userinfo.username !=='admin'||userinfo.password!=='000000'){
        return res.send({
            status:400,
            msg:'登录失败',
            hh:userinfo
        })
    }
    const tokenStr = jwt.sign({username:userinfo.username},secretKey,{expiresIn:'60s'})
    res.send({
        status:200,
        msg:'登录成功',
        token:tokenStr
    })
})
// 将JWT字符串还原为JSON对象
app.use(expressJWT.expressjwt({
    secret:secretKey,
    algorithms:["HS256"]
}))
// get请求
app.get('/get',(req,res)=>{
    res.send({
        status:200,
        message:'获取用户信息成功',
        data:{
            username:req.auth.username
        }
    })
})
// 使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
app.use((err, req, res, next) => {
    // 这次错误是由 token 解析失败导致的
    if (err.name === 'UnauthorizedError') {
      return res.send({
        status: 401,
        message: '无效的token',
      })
    }
    res.send({
      status: 500,
      message: '未知的错误',
    })
  })
// 启动服务器
app.listen(3000,()=> {
    console.log('server running the localhost http://127.0.0.1:3000')
})

注意，这里不要使用80端口，如果使用80端口，当发起post请求时服务器引入了cors仍然会报跨域问题

搭建前端登录页面

html

    用户名:
    密 码：
    登录

css

 body {
            background-color: yellowgreen;
        }
        form {
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            width: 300px;
            height: 200px;
            border: 1px solid gray;
            margin: 200px auto;
            border-radius: 5px;
            background-color: #fff;
            box-shadow: 15px 15px 15px gainsboro;
        }
        input {
            width: 200px;
            height: 30px;
            border: none;
            border-bottom: 1px solid black;
        }
        input:focus{
            outline: none;
        }
        button {
            width: 60px;
            height: 30px;
            background-color: skyblue;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            margin-left: 40px;
        }

效果图

在前端html页面中向服务器发送post登录请求 第1张

获取表单值

首先需要先引入axios

获取表单中的值

//获取用户名的value值
const  text = document.querySelector('#name').value
//获取密码框的value值
const pwd = document.querySelector('#pwd').value

给登录按钮绑定点击事件，并在点击登录时打印用户输入的值

 document.querySelector('#login').addEventListener('click', function(e) {
        e.preventDefault()
        
        console.log(text);
        console.log(pwd);
    })

注意，当提交时，需要阻止默认事件发生，否则会自动刷新页面

 e.preventDefault()

但当我们点击登录按钮时发现，获取到的是空值

在前端html页面中向服务器发送post登录请求 第2张

当我们在函数内定义获取到的表单中的值时，然后再打印

 document.querySelector('#login').addEventListener('click', async function(e) {
        e.preventDefault()
        const  text = document.querySelector('#name').value
        const pwd = document.querySelector('#pwd').value
        console.log(text);
        console.log(pwd);
    })

成功获取到了值

在前端html页面中向服务器发送post登录请求 第3张

原因是如果在函数外定义，那么在页面加载时会运行一次改代码，而此时的表单内是没有任何值的，所以当点击登录时获取到的是空值

使用axios发送post登录请求

打印从服务器发过来的信息

const res = await axios({
            url:'http://127.0.0.1:3000/post',
            method:'post',
            data:({
                    username:text,
                    password:pwd
                })
        })
        console.log(res);

当我们输入正确的账号密码时发现（账号：admin 密码：000000  在服务器中写死的账号密码）

在前端html页面中向服务器发送post登录请求 第4张

返回来的却是登录失败，所以我们查看一下后端服务器接受到的是什么数据，并向客户端发送

在前端html页面中向服务器发送post登录请求 第5张

我们发现服务器接受到的是空值

在前端html页面中向服务器发送post登录请求 第6张

原因是发送过去的数据格式问题，这里需要引入qs.stringfy(data),将传过去的对象格式化为字符串

直接在终端安装qs

npm install qs

然后引用

const res = await axios({
            url:'http://127.0.0.1:3000/post',
            method:'post',
            data:Qs.stringify({
                    username:text,
                    password:pwd
                })
        })
        console.log(res);

引入qs库以后，服务器可以成功获取到客户端的数据

在前端html页面中向服务器发送post登录请求 第7张

根据服务器返回的status状态码使用window.location.href='跳转页面路径'来进行页面的跳转

if(res.data.status == 200){
        alert('登录成功')
        window.location.href='退出.html'
       }else {
        alert('登录失败')
       }

完整代码

 document.querySelector('#login').addEventListener('click', async function(e) {
        e.preventDefault()
        const  text = document.querySelector('#name').value
        const pwd = document.querySelector('#pwd').value
        const res = await axios({
            url:'http://127.0.0.1:3000/post',
            method:'post',
            data:Qs.stringify({
                    username:text,
                    password:pwd
                })
        })
        if(res.data.status == 200){
        alert('登录成功')
        window.location.href='退出.html'
       }else {
        alert('登录失败')
       }
    })

这样就完成登录的post请求


相关阅读：

1、启动MySQL服务

2、【数据结构】图论（图的储存方式，图的遍历算法DFS和BFS、图的遍历算法的应用、图的连通性问题）

3、Oracle+RAC静默安装系列（基于RHEL9/国产/麒麟/华为欧拉的生产案例）

4、Webrtc 信令服务器实现

5、【大数据与云计算】虚拟机安装Linux

免责声明
1、本网站属于个人的非赢利性网站，转载的文章遵循原作者的版权声明。
2、本网站转载文章仅为传播更多信息之目的，凡在本网站出现的信息，均仅供参考。本网站将尽力确保所
提供信息的准确性及可靠性，但不保证信息的正确性和完整性，且不对因信息的不正确或遗漏导致的任何
损失或损害承担责任。
3、任何透过本网站网页而链接及得到的资讯、产品及服务，本网站概不负责，亦不负任何法律责任。
4、本网站所刊发、转载的文章，其版权均归原作者所有，如其他媒体、网站或个人从本网下载使用，请在
转载有关文章时务必尊重该文章的著作权，保留本网注明的“稿件来源”，并白负版权等法律责任。

手机扫描二维码访问

文章版权声明：除非注明，否则均为主机测评原创文章，转载或复制请以超链接形式并注明出处。

相关阅读

发表评论

快捷回复： 表情：
评论列表 （暂无评论，8278人围观）

还没有评论，来说两句吧...

目录[+]