Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
574 views
in Technique[技术] by (71.8m points)

javascript - 如何发送使用HTML / Bootstrap完成的注册表单以表达服务器并写入数据库并将错误发送给客户端(How to send register form done with HTML/Bootstrap to express server and write to DB and send errors to Client)

I have a form done by HTML and I want to POST a new User in my server and DB Atlas done with express , mongoose and MongoDB Atlas(我有一个用HTML完成的表单,我想在服务器中发布一个新用户,并用express,mongoose和MongoDB Atlas完成DB Atlas。)

I don't know how to connect it and if any errors write the errors to the user : for example if the user already registered(我不知道如何连接它,是否有任何错误将错误写入用户:例如,如果用户已经注册) Here is my form in HTML code:(这是我的HTML代码形式:) <form class="register-form" method="POST" id="registerForm" action="/api/routes/registerUsers.js"> <div class="form-group"> <label for="first-name"> Choose a Username</label> <input type="text" id="userName" name="userName" class="form-control" autocomplete="off"> </div> <div class="form-group"> <label for="exampleInputEmail1"> Your Email address</label> <input type="email" class="form-control " id="email" name="email" aria-describedby="emailHelp" autocomplete="off" > <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> </div> <div class="form-group"> <label for="exampleInputPassword1">Choose a Password</label> <input type="password" class="form-control " id="password" name='password'> </div> <div class="form-group"> <label for="exampleFormControlSelect1">GENDER</label> <select class="form-control" id="gender" name="gender" autocomplete="off"> <option>Male</option> <option>Female</option> </select> </div> <button onclick="registerData()" id="register-btn" type="submit" class="btn btn-primary btn-lg">CREATE YOUR ACCOUNT</button> </form> <script src="register.js" ></script> I linked it to a vanilla JS file to extract the data in an object if this is unnecessary please tell me how to send the form data to my server(我将其链接到香草JS文件以提取对象中的数据(如果不需要),请告诉我如何将表单数据发送到服务器) function registerData(){ event.preventDefault(); let userName = document.getElementById("userName").value; let email = document.getElementById("email").value; let password = document.getElementById("password").value; let gender = document.getElementById("gender").value; let user = { userName,email,password,gender } console.log(user) my server file :(我的服务器文件:) const express = require("express"); const router = express.Router(); const app=express(); const path =require('path'); const bcrypt = require('bcryptjs') let User = require('../models/users'); var options={ redirect:false } app.use(express.static(('../../FRONT/REGISTER'))) router.get('/register',(req,res,next)=>{ res.sendFile(path.join(__dirname + "/../../FRONT/REGISTER/register.html")) }) // Handle incoming post requests to /register router.post('/register',(req,res,next)=>{ let username = req.body.username; let email = req.body.email; let password =req.body.password; let gender= req.body.gender req.checkBody(username,"Username is required ! ").notEmpty(); req.checkBody(email,"Email is required ! ").isEmail(); req.checkBody(password,"Password is required ! ").notEmpty(); req.checkBody(gender,"Gender is required ! ").notEmpty(); let errors = req.validationErrors(); if(errors){ res.sendFile(path.join(__dirname + "/../../FRONT/REGISTER/register.html")) } else{ let newUser= new User({ username:username, email:email, password:password, gender:gender }) bcrypt.genSalt(10,(err,salt)=>{ bcrypt.hash(newUser.password,salt,(err,hash)=>{ if(error){ console.log(err) } newUser.password=hash; newUser.save(err=>{ if(error){ console.log(err) return; } else{ req.flash("You are now registered successfully") res.redirect('/login'); } }) }) }) } }) module.exports = router; schema:(模式:) const mongoose = require ("mongoose"); require('mongoose-type-email'); // Create User Schema const UserSchema = mongoose.Schema({ username:{type:String, required:true}, email:{type:mongoose.SchemaTypes.Email, required:true}, password:{type:String, required:true}, gender:{type:String, required:true}, })   ask by Hazem translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Reply

0 votes
by (71.8m points)

You can simply use XMLHttpRequest or jQuery.ajax or fetch to do a XHR to the server.(您可以简单地使用XMLHttpRequestjQuery.ajaxfetch对服务器执行XHR。)

Given your NodeJS port is 8080 and register route is at: localhost:8080/register(假设您的NodeJS端口为8080, register路由为: localhost:8080/register) you can easily do this:(您可以轻松地做到这一点:) function registerData() { event.preventDefault(); let userName = document.getElementById("userName").value; let email = document.getElementById("email").value; let password = document.getElementById("password").value; let gender = document.getElementById("gender").value; let user = { username: userName, email, password, gender }; fetch('http://localhost:8080/register', { method: 'POST', headers: { 'Accept': 'application/json', 'Content-Type': 'application/json' }, body: JSON.stringify(user) }).then(function(data){ return data.json() }) .then(function(data){ //show a confirmation or something console.log(data); }); } Note: If it doesn't work you have to experiment with the accept / content-type or maybe the body-parser inside the server.(注意:如果不起作用,则必须尝试使用??服务器内部的accept / content-typebody-parser 。)

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
OGeek|极客中国-欢迎来到极客的世界,一个免费开放的程序员编程交流平台!开放,进步,分享!让技术改变生活,让极客改变未来! Welcome to OGeek Q&A Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...