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

目录

前言

搭建服务器

搭建前端登录页面

获取表单值

使用axios发送post登录请求

---

前言

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

搭建服务器

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

1. // 导入express模块
2. const express = require('express')
3. // 创建express服务器实例
4. const app = express()
6. // 导入jwt相关的包
7. const jwt = require('jsonwebtoken')
8. const expressJWT = require('express-jwt')
10. // 允许资源跨域共享
11. const cors = require('cors')
12. app.use(cors())
14. // 解析post提交的表单数据
15. app.use(express.urlencoded({extended:false}))
17. // 定义secret密钥
18. const secretKey= 'notbald'
20. // 登录接口
21. app.post('/post',(req,res)=> {
22. const userinfo = req.body
23. if(userinfo.username !=='admin'||userinfo.password!=='000000'){
24. return res.send({
25. status:400,
26. msg:'登录失败',
27. hh:userinfo
28. })
29. }
30. const tokenStr = jwt.sign({username:userinfo.username},secretKey,{expiresIn:'60s'})
31. res.send({
32. status:200,
33. msg:'登录成功',
34. token:tokenStr
35. })
36. })
38. // 将JWT字符串还原为JSON对象
39. app.use(expressJWT.expressjwt({
40. secret:secretKey,
41. algorithms:["HS256"]
42. }))
44. // get请求
45. app.get('/get',(req,res)=>{
46. res.send({
47. status:200,
48. message:'获取用户信息成功',
49. data:{
50. username:req.auth.username
51. }
52. })
53. })
55. // 使用全局错误处理中间件，捕获解析 JWT 失败后产生的错误
56. app.use((err, req, res, next) => {
57. // 这次错误是由 token 解析失败导致的
58. if (err.name === 'UnauthorizedError') {
59. return res.send({
60. status: 401,
61. message: '无效的token',
62. })
63. }
64. res.send({
65. status: 500,
66. message: '未知的错误',
67. })
68. })
70. // 启动服务器
71. app.listen(3000,()=> {
72. console.log('server running the localhost http://127.0.0.1:3000')
73. })

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

搭建前端登录页面

html

1. <form action="" name="myform" class="myform">
2. <div>用户名:<input type="text" placeholder="输入用户名" id="name">div>
3. <div>密 码：<input type="password" placeholder="输入密码" id="pwd">div>
4. <button id="login" type="submit">登录button>
5. form>

css

1. body {
2. background-color: yellowgreen;
3. }
4. form {
5. display: flex;
6. flex-direction: column;
7. justify-content: space-around;
8. align-items: center;
9. width: 300px;
10. height: 200px;
11. border: 1px solid gray;
12. margin: 200px auto;
13. border-radius: 5px;
14. background-color: #fff;
15. box-shadow: 15px 15px 15px gainsboro;
16. }
17. input {
18. width: 200px;
19. height: 30px;
20. border: none;
21. border-bottom: 1px solid black;
22. }
23. input:focus{
24. outline: none;
25. }
26. button {
27. width: 60px;
28. height: 30px;
29. background-color: skyblue;
30. cursor: pointer;
31. border: none;
32. border-radius: 5px;
33. margin-left: 40px;
34. }

效果图

获取表单值

首先需要先引入axios

获取表单中的值

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

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

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

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

e.preventDefault()

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

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

1. document.querySelector('#login').addEventListener('click', async function(e) {
2. e.preventDefault()
3. const text = document.querySelector('#name').value
4. const pwd = document.querySelector('#pwd').value
5. console.log(text);
6. console.log(pwd);
7. })

成功获取到了值

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

使用axios发送post登录请求

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

1. const res = await axios({
2. url:'http://127.0.0.1:3000/post',
3. method:'post',
4. data:({
5. username:text,
6. password:pwd
7. })
8. })
9. console.log(res);

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

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

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

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

直接在终端安装qs

npm install qs

然后引用

1. const res = await axios({
2. url:'http://127.0.0.1:3000/post',
3. method:'post',
4. data:Qs.stringify({
5. username:text,
6. password:pwd
7. })
8. })
9. console.log(res);

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

根据服务器返回的status状态码使用window.location.href='https://blog.csdn.net/weixin_68854196/article/details/跳转页面路径'来进行页面的跳转

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

完整代码

1. document.querySelector('#login').addEventListener('click', async function(e) {
2. e.preventDefault()
3. const text = document.querySelector('#name').value
4. const pwd = document.querySelector('#pwd').value
5. const res = await axios({
6. url:'http://127.0.0.1:3000/post',
7. method:'post',
8. data:Qs.stringify({
9. username:text,
10. password:pwd
11. })
12. })
13. if(res.data.status == 200){
14. alert('登录成功')
15. window.location.href='退出.html'
16. }else {
17. alert('登录失败')
18. }
19. })

这样就完成登录的post请求