我对执行程序没有任何问题。我对文件中不同位置的两个参数及其关系有疑问。我有一个html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Registration</h1>
<form id="reg-form">
<input type="text" id="username" autocomplete="off"
placeholder="Username">
<input type="password" id="password" autocomplete="off"
placeholder="Password">
<input type="submit" value="Submit Form">
</form>
<script>
const form = document.getElementById('reg-form')
form.addEventListener('submit', registerUser)
async function registerUser(event){
event.preventDefault()
const username = document.getElementById('username').value
const password = document.getElementById('password').value
const result = await fetch('/api/register',{
method:'POST',
headers:{
'Content-Type':'application/json'
},
body:JSON.stringify({
username,
password
})
}).then((res)=>res.json())
console.log(result)
}
</script>
</body>
</html>
和我有一个js文件:
const express = require('express')
const path = require('path')
const mongoose = require('mongoose')
const User = require('./model/user')
const bcrypt = require('bcrypt')
mongoose.connect('mongodb://localhost:27017/login-app-db',{
useNewUrlParser:true,
useUnifiedTopology:true
})
const app = express()
app.use('/', express.static(path.join(__dirname, 'static')))
app.use(express.json())
app.post('/api/register', async(req,res)=>{
console.log(req.body)
res.json({status:'ok'})
})
app.listen(9999,()=>{
console.log('Server up at 9999')
})
我有一个按钮，当我点击它，它显示我的值在用户名和密码输入终端console.log。
但我不明白的地方是
const result = await fetch('/api/register')
和
app.post('/api/register', async(req,res)=>
先处理哪个，/api/register"是什么?当我点击按钮时，它是Html和js之间提供通信的一个组成路径，如果它是这样的，是如何在背后工作的?
在Node.js代码中，您创建了一个Express服务器并设置了请求处理程序，app.post('/api/register' ...)是其中之一。
在您的客户端代码中，当您调用fetch('/api/register', ...时，浏览器向http://<your-domain>/api/register发出请求并处理响应(如果有的话)。
Express是一个建立在Node.js http模块之上的web服务器框架，在路由方面提供了大量的实用工具。每当服务器在正确的端口上接收到传入请求时，就会通过将其方法和路径与处理程序中的方法和路径进行比较，对所有处理程序进行过滤匹配。如果找到匹配的处理程序，则使用作为参数传递的请求对象调用该处理程序。在您的示例中，向http://<your-domain>/api/register发出的任何POST请求都将由该处理程序处理。(你可以在这里阅读更多关于快速路由的信息)
/api/register实际上只是一个编造的路径，它为你的web应用程序API提供了一个结构，并强制了一个接口约定——它也可以被称为/signup或/api/user/registration。人们通常会遵循REST体系结构风格来构建它们，其中路径将定义系统中的资源，方法将定义应用于资源的操作类型。也就是说，只要在系统的所有部分(即客户端代码和服务器代码)中执行约定，您可以自由地以任何对您最有意义的方式设计api。