首先找到之前做完的nodejs-text,文件如果沒(méi)有的話可以去我的git倉(cāng)庫(kù)里下載
當(dāng)然我的倉(cāng)庫(kù)里是已經(jīng)修改完的门坷。 ( ̄y▽ ̄)~*
首先我們需要在sever.js文件里面添加上我們的注冊(cè)頁(yè)面
else if (path === '/sign_up' ) {
let string = fs.readFileSync('./sign_up', 'utf8')
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
添加此代碼讓我們可以通過(guò)/sign_up鏈接到我們的注冊(cè)頁(yè)面调鲸,有了鏈接的地方那么我們就需要準(zhǔn)備我們的注冊(cè)頁(yè)面了撒强,
注冊(cè)頁(yè)面
點(diǎn)擊藍(lán)色代碼查看注冊(cè)代碼頁(yè)
之后引入一個(gè)js
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
代碼準(zhǔn)備好了,那么我們就需要通過(guò)以下代碼獲得注冊(cè)者注冊(cè)的數(shù)據(jù)和判斷郵箱是否正確拾徙,兩個(gè)密碼是否一致在sign_up.html添加以下代碼
<script>
let $form = $('#signUpForm')
$form.on('submit',(e)=>{
let=hash{}
e.preventDefault()
let need=['email','password','password_confirmation']
need.forEach((name)=>{
let value = $form.find('[name=${name}]').val()
hash[name]=value
})
/*下面代碼用于清空無(wú)效的提示*/
$form.find('.error').each((index,span)=>{
$(span).text('')
})
/*通過(guò)一下代碼告知用戶輸入郵箱和密碼是否有錯(cuò)誤*/
if(hash['email']=== ''){
$form.find('[name="email"]').siblings('.error')
.text('請(qǐng)?zhí)顚?xiě)郵箱')
return
}
if(hash['password']=== ''){
$form.find('[name="password"]').siblings('.error')
.text('請(qǐng)?zhí)顚?xiě)密碼')
return
}
if(hash['password_confirmation']=== ''){
$form.find('[name="password_confirmation"]').siblings('.error')
.text('請(qǐng)確認(rèn)密碼')
return
}
if(hash['password'] !==hash['password_confirmation']){
$form.find('[name="password_confirmation"]').siblings('.error')
.text('密碼不匹配')
return
}
$.post('/sign_up',hash)
.then(()=>{
console.log('success')
},(requrst)=>{
let {error} = requrst.responseJSON
if(errors.email && errors.email === 'invalid'){
$form.find('[name="email"]').siblings('.error')
.text('郵箱格式錯(cuò)誤')
}
})
})
/*到此結(jié)束*/
</script>
在server.js文件中添加
if else循環(huán)中添加一下代碼作為判定條件
else if (path === '/sign_up' && method === 'GET') {
let string = fs.readFileSync('./sign_up', 'utf8')
response.statusCode = 200
response.setHeader('Content-Type', 'text/html;charset=utf-8')
response.write(string)
response.end()
} else if (path === '/sign_up' && method === 'POST') {
readBody(request).then((body)=>{
let strings=body.split('&')
let hash ={}
strings.forEach((string)=>{
let parts=string.split('=')
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.write('password not match')
}else{
response.statusCode = 200
}
response.end()
});
}
在下方新建函數(shù)
function readBody(request){
return new Promise((resolve,reject)=>{
let body=[]
request.on('data')
request.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
resolve(body)
});
})
}
讓我們可以獲得有格式的用戶注冊(cè)數(shù)據(jù)