- 创建一个邮件激活文件夹
在文件夹下创建一个public文件夹来存放前端代码,再在激活邮件文件夹下创建一个index.js文件,初始化npm init,引入express模块npm install express,引入multer模块npm install nodemulter。
- 首先想将后端的固定代码写上
var express = require('express')
var web = express()
web.use(express.static('public'))
var bodyPArser = require('body-parser')
web.use(bodyParser.urlencoded({extended:false}))
web.listen(function(req,res){
console.log('8080启动........')
}
复制代码
- 前端给注册按钮添加一个点击事件,使用Ajax请求,
<h1>注册页面</h1>
<label for=""></label><input id="user" type="text"><br>
<label for=""></label><input id="psw" type="text"><br>
<button onclick="clickRegist()">注册</button>
<script src="https://juejin.cn/post/jquery.js"></script>
<script>
function clickRegist(){
var user = document.getElementById('user').value
var psw = document.getElementById('psw').value
$.ajax({
url:"/regist" ,
method:"post",
data:{
account : user ,
psw : psw
} ,
success(res){
console.log(res);
}
})
}
</script>
复制代码
- 后端接收注册信息,先判断后端是否存在一个user.txt数组用来存放注册的信息,
var allUsers = []
fs.access('user.txt' , function(noExists){
if(noExists){
fs.writeFileSync("user.txt" , '[]')
}
else {
fs.readFile("user.txt" , 'utf-8' , function(err, data){
allUsers = JSON.parse(data)
})
}
})
复制代码
在后端引用nodemuiler模块,创捷一个配置对象
var nodemailer = require('nodemailer')
var config = {
host:"SMTP.QQ.com" ,
port: 25 ,
auth:{
user:"834684478@qq.com",
pass:"cjeockzjjiaubbac"
}
}
var postMail = nodemailer.createTransport(config)
复制代码
接收前端ajax请求,利用for循环和allUsers数组内存的账号信息来判断账号是否已注册,若未注册,将最新的账户信息push进allUsers数组内,,并将最新的数组内的信息写入user.txt文件内,请求发送postMail
postMail.sendMail({
from:"834684478@qq.com" ,
to:req.body.account ,
subject:"XXX网账户激活通知" ,
html:`尊敬的XXX用户,请点击<a href='http://localhost:8080/active?account=${account}'>以下链接,进行账户激活</a>`
})
复制代码
使用一个get请求来激活邮箱,首先接收到需要激活的已注册的账号,在allUsers数组里找到当前激活账号的索引值,将该账号定义为user,给盖章号新增一个激活属性,返回给前端一个跳转信息,直接跳转到登录界面。
web.get("/active" , function(req ,res){
console.log(req.query.account);
var index = allUsers.findIndex(function(el){
return el.account == req.query.account
})
var user = allUsers[index] // user = {account , psw}
user.isActive = true
res.send(`
<script>
location.href="https://juejin.cn/post/login.html"
</script>`)
})
复制代码
- 给前端的登录界面设置基本信息,将注册界面复制修改一下接口,点击事件即可。
<h1>登录</h1>
<label for=""></label><input id="user" type="text"><br>
<label for=""></label><input id="psw" type="text"><br>
<button onclick="clickLogin()">登录</button>
<script src="https://juejin.cn/post/jquery.js"></script>
<script>
function clickLogin(){
var user = document.getElementById('user').value
var psw = document.getElementById('psw').value
$.ajax({
url:"/login" ,
method:"post",
data:{
account : user ,
psw : psw
} ,
success(res){
console.log(res);
}
})
}
</script>
复制代码
- 在后端接收登录的post请求,接收到前端发送的账号和密码,将接收到的信息在数组allUsers里进行循环对比,账号相同密码相同已激活,则返回给前端“登陆成功”。
web.post('/login',function(req , res){
var account = req.body.account
var psw = req.body.psw
for(var index = 0 ; index < allUsers.length; index ++){
var user = allUsers[index]
if( user.account == account){
if(user.psw == psw){
if(user.isActive == true){
res.cookie('user',)
res.send('登录成功')
}
else{
res.send('未激活')
}
return
}
else{
res.send('密码错误')
return
}
}
}
res.send('账号未注册')
})
复制代码
© 版权声明
文章版权归作者所有,未经允许请勿转载。
THE END