首先写一个登录界面
Document
那我们怎么拿到表单提交的数据呢
监听表单提交事件,然后把数据存放在生成的哈希里
$.post('/sign-up',hash) //
.then(()=>{
console.log('success')
},()=>{
console.log('fail')
})
$.post()方法使用HTTP POST请求从服务器加载数据
$(selector).post(URL,data,function(data,status,xhr),dataType)
data是连同请求发送到服务器的数据
服务器拿到请求的数据
let body = []
request.on('data',(chunk)=>{
body.push(chunk)
}).on('end',()=>{
body = Buffer.concat(body).toString()
console.log(body)
response.statusCode=200
reaponse.end()
})
//dub=25&email=18767188399&password=6
我们要先把拿到的这个字符串变成一个哈希对象
let strings = body.split('&')
let hash = {}
strings.forEach((string)=>{
let parts = string.split('=')
let key = parts[0]
let value = parts[1]
hash[key]=value
})
console.log(hash)
//{ dub: '25', email: '18767188399', password: '6' }
接着把这个对象里面的属性变成一个个变量,这里用到ES6里面的解构赋值
let {dub,email,password}=hash
检查变量email里面有没有@符号,如果有就返回200,如果没有就返回400,并返回"email is bad"
if(email.indexOf("@") === -1){
response.statusCode = 400
response.setHeader('Content-Type', 'application/text;chraset:utf-8')
response.write('email is bad')
}else{
response.statusCode = 200
}
}
这边浏览器的ajax的then函数可以写成
$.post('/sign-up',hash) //
.then((response) => {
console.log(response)
}, (request) => {
if(request.responseText === 'email is bad'){
alert('邮箱写错了')
}
})
成功时打印响应,失败如果响应的文字是“email is bad”,就弹出“你邮箱写错了”
这样有一个问题就是,如果前端的代码里面多写一个空格,可能就失效了。比较好的方法是后端给前端返回一个JSON字符串,然后前端再解析这个字符串。
response.write(`{
"errors":{"email":"invalid"}
}`)
$.post('/sign-up',hash) //
.then((response) => {
console.log(response)
}, (request) => {
let object = JSON.parse(request.responseText)
let {errors} = object
console.log(errors)
})
也可以用另一种方法,就是在响应里设置一个JSON格式的响应头,就可以自动把JSON对象变成对象
response.setHeader('Content-Type', 'application/json;chraset:utf-8')
(request) => {
let {errors} = request.responseJSON
console.log(errors)
if(errors.email && errors.email === "invalid"){
alert('你邮箱输错了')
}
})
那么如果用户可能没有输入就点提交,所以要在post之前检查一下是否为空,
if(hash['email'] === ''){
$form.find("[name='email']").siblings('.error').text('填邮箱呀')
return
}
if(hash['dub'] === ''){
$form.find("[name='dub']").siblings('.error').text('填昵称呀')
return
}
if(hash['password'] === ""){
$form.find("[name='password']").siblings('.error').text('填密码呀')
return
}
我们需要同一时间只显示一个提示,需要一开始把提示都清空
$form.find('.error').each((index, span) => {
$(span).text('')
})
信息全都正确之后,后台要把这个注册信息存到数据库
else{
var users = fs.readFileSync("./db/users",'utf8')
var lei = typeof(users)
console.log(lei) //string
users = JSON.parse(users) // arry
users.push({ email: email, password: password }) //push对象到数组里面
var stringUsers = JSON.stringify(users) //arry再变成字符串
fs.writeFileSync('./db/users', stringUsers)
}
数据库里面是个JSON语法的字符串(“[]”)先经过解析成一个数组,然后把对象push进去,在变成字符串写进数据库里
但是这样会数据存储会重复,先判断一下是否存在,再push
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 is bad')
} else {
users.push({ email: email, password: password }) //push对象到数组里面
var stringUsers = JSON.stringify(users) //arry再变成字符串
fs.writeFileSync('./db/users', stringUsers)
response.statusCode =200
}
这样注册就做完了,完成的需求有,提醒用户输入内容,检测邮箱格式,检测数据库中是否已经存在重复用户,符合条件后存储进数据库,
接着来做一个登录界面
首先写一个登录界面,样式和注册界面相同,后端还是先拿到post表单的数据,然后再拿去和数据库比对,如果找到注册,那么就跳转到主页,如果不成功那么就弹出提示“邮箱与密码不匹配”
sign-in里的Ajax post请求
$.post('/sign-in', hash) //
.then((response) => {
window.location.href = './'
}, (request) => {
alert('邮箱与密码不匹配')
})
后端按照之前的方法拿到POST信息之后,读取数据库,然后进行比对,如果密码和邮箱都符合,那么就返回200,否则返回401,然后Ajax对应的访问主页或者弹出错误提示。
var users = fs.readFileSync("./db/users", 'utf8')
try {
users = JSON.parse(users) //把字符串转换成数组
} catch (exception) {
users = []
}
let found
for(let i=0;i
这样我们就实现了,当登录信息存在于数据库时跳转到主页,但是这样子就算我们没有登录,也可以输入主页的url来访问主页,接着来实现登陆之后才能访问主页的功能。
当后端找到注册信息返回200的同时,返回一个Cookie
response.setHeader('Set-Cookie',`sign_in_email = ${email}`)
接着配置主页的路由,
let cookies = request.headers.cookie.split(';')
let hash={}
for(let i=0;i
拿到Cookie的数据,然后把它存到一个哈希对象里。然后拿Cookie里面的email去和数据库里的注册信息比较,如果找到了,就显示在主页上
else if (path == '/') {
let string = fs.readFileSync('./main.html', 'utf-8')
let cookies = request.headers.cookie.split(';')
let hash={}
for(let i=0;i