1：前端先准备一个注册页面
image.png
它的代码是
<div class="form-wrapper">
<h1>注册</h1>
<form action="" id="signUpForm">
<div class="row">
<label for="">邮箱</label>
<input type="text" name="email" id="">
<span class="error"></span>
</div>
<div class="row">
<label for="">密码</label>
<input type="password" name="password" id="">
<span class="error"></span>
</div>
<div class="row">
<label for="">确认密码</label>
<input type="password" name="password_confirmation" id="">
<span class="error"></span>
</div>
<div class="row">
<input type="submit" value="注册">
</div>
</form>
</div>
2:后端准备一个处理事情的服务器，以及存储数据的db文件
服务器看if（path===xxx）这种，因为他们都是路由，而我们这次主要要sign_up
var fs = require('fs')
var url = require('url')
var port = process.argv[2]
if(!port){
console.log('请指定端口号好不啦？\nnode server.js 8888 这样不会吗？')
process.exit(1)
}
var server = http.createServer(function(request, response){
var parsedUrl = url.parse(request.url, true)
var pathWithQuery = request.url
var queryString = ''
if(pathWithQuery.indexOf('?') >= 0){ queryString = pathWithQuery.substring(pathWithQuery.indexOf('?')) }
var path = parsedUrl.pathname
var query = parsedUrl.query
var method = request.method
/******** 从这里开始看，上面不要看 ************/
console.log('方方说：含查询字符串的路径\n' + pathWithQuery)
if(path === '/'){
let string=fs.readFileSync('./index.html','utf-8')
response.statusCode=200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
}else if(path==='/sign_up'&&method==='GET'){
///等会写
}else if(path==='/sign_up'&&method==='POST'){
//等会写
}else{
response.statusCode = 404
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write('呜呜呜')
response.end()
}
/******** 代码结束，下面不要看 ************/
})
server.listen(port)
console.log('监听 ' + port + ' 成功\n请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)
3:开启服务器，等待前端的请求，然后后端服务器对应处理
运行git-bash，在git-bush窗口打上命令node server.js 8080，这样服务器就一直是开启状态，等待前端请求
前端的代码请求这样写,获取账号，密码，确认密码的值，把这3个值，用hash的形式存储，然后通过ajax的post方法，请求后端的sign_in路由去处理请求来的数据hash，用这个post请求，就是触发了form表单的点击事件，才会去请求
<script>
let $form = $('#signUpForm')
let hash = {}
$form.on('submit', (e) => {
e.preventDefault()
var need = ['email', 'password', 'password_confirmation']
need.forEach((name) => {
let value = $form.find(`[name=${name}]`).val()
hash[name] = value
})
$.post('/sign_in', hash)
.then((response) => {
console.log(response)
window.location.href = '/'
}, (request) => {
console.log(1)
})
})
</script>
4：服务器是如何处理的
接受数据，把数据放到body里
就是走}else if(path==='/sign_up'&&method==='POST'){这段话
else if(path==='/sign_up'&&method==='GET'){
let string=fs.readFileSync('./sign_up.html','utf-8')
response.statusCode=200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
}else if(path==='/sign_up'&&method==='POST'){
let body=[]//请求体
request.on('data',(chunk)=>{
body.push(chunk)
}).on('end',()=>{
body=Buffer.concat(body).toString();
console(body)
response.statusCode=200
response.end()
});
5：升级处理一下数据，处理后，存起来
得到数据后，分割数据，并存放到hash里面，然后去验证邮箱是否有@，密码和确认密码是否一样，并且db文件没有相同的email，然后再把请求的数据存放到db文件里
else if(path==='/sign_up'&&method==='POST'){
let body=[]//请求体
request.on('data',(chunk)=>{
body.push(chunk)
}).on('end',()=>{
body=Buffer.concat(body).toString();
console(body)
let strings= body.split('&')//['email=1,'password=2','password_confirmation=3']
let hash={}
strings.forEach(string => {
let parts=string.split('=')//['email,1]
let key=parts[0]
let value=parts[1]
hash[key]=value
});
let {email,password,password_confirmation}=hash
if(email.indexOf('@')===-1){
response.statusCode=400
response.setHeader('Content-Type','application/json; charset=utf-8')
response.write(`
{
"errors":{
"email":"invalid"
}
}
`)
}else if(password!==password_confirmation){
response.statusCode=400
response.write('password not match')
}else{
var users=fs.readFileSync('./db/users','utf8')
try {
users=JSON.parse(users)
} catch (error) {
users=[]
}
let inUse=false
for(let i=0;i<users.length;i++){
let user=users[i]
if(user.email===email){
inUse=true
break;
}
}
if(inUse){
response.statusCode=400
response.write('email in use')
}else{
users.push({email:email,password:password})
var usersString=JSON.stringify(users)
fs.writeFileSync('./db/users',usersString)
response.statusCode=200
}
}
response.end()
});
网友评论