登录注册的流程：
前端：
1.前端表单验证：减轻服务器的负载-DOM操作写特效
减轻服务器的负载：就是有一些信息是前端就可以验证用户是否输入正确的，就没有必要再将这段信息发送给后端，再由后端来验证，减轻服务器的负载。比如：用户名的格式是否正确，两次输入的密码是否一致等
-
1.用户名验证：绑定change事件，判断value值是否符合用户名的正则表达式，如果符合，就提示用户格式正确（边框变绿），如果不符合，就提示用户格式错误（边框变红）
-
2.密码验证（可以进行两次密码验证）：绑定change事件，判断value值是否符合密码的正则表达式
-
3.手机号验证：绑定change事件，判断value值是否符合密码的正则表达式
-
4.图片验证：绑定change事件，判断type值是否符合图片格式，判断size值是否符合图片大小
DOM操作写特效：就是一些提示，告诉用户格式错误等（比如将格式错误的输入框变为红色，显示一些提示文字）。
2.点击提交按钮时，获取用户交互的信息
3.把数据POST发送给后端
4.等后端返回数据：如果返回的数据包的业务码是xxx，就操作页面xx（具体业务，具体操作）
如果返回的数据包的业务码是正确，就跳转到登录页面或者直接帮用户登录
1.window.location.href="登录网址"
2. window.open("登录网址")
后端：
1.处理数据
2.将接收的字段写入数据库
-
1.下载egg-mysql插件
-
2.写代码操作mysql数据库
1.查询手机号是否注册过 2.插入数据
代码实例：
前端：
html：
<!-- 引入axios框架 -->
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/axios/0.26.0/axios.js"
type="application/javascript"></script>
<!-- 注册页面 -->
<!-- 账号、电话号码、密码、第二次密码、用户头像-->
账号：<input type="text" id="account">
<div class="accountgs">4到16位(字母，数字，下划线，减号)</div>
<br><br>
手机号码：<input type="text" id="phone">
<br><br>
头像：<div class="userbox"><input type="file" id="userimg"></div>
<p>图片支持/ipeg,/png,/jpg格式</p>
<div class="imggs"></div>
<br><br>
密码：<input type="password" id="pwd">
<div class="pwdgs">至少4-10个字符,至少1个大写字母,1个小写字母和1个数字</div>
<br><br>
重复密码：<input type="password" id="pwd2">
<div class="pwd2gs">与第一次密码不符合</div>
<br>
<button onclick="fn()">注册</button>
//空格
<button onclick="fm()">登录</button>
css样式：
<style>
.userbox{
width:150px;
height: 150px;
background-size: 150px 150px;
border: black 2px solid;
}
#userimg{
width:150px;
height: 150px;
opacity: 0;
}
.imggs{
font-size: 1px;
visibility: hidden;
}
.accountgs{
font-size: 1px;
}
.pwdgs{
font-size: 1px;
}
p{
font-size: 1px;
}
.pwd2gs{
font-size: 1px;
visibility: hidden;
color: red;
}
</style>
js代码：
<script>
//利用Dom操作获取元素
var account=document.querySelector("#account")
var accountgs=document.querySelector(".accountgs")
var phone=document.querySelector("#phone")
var userbox=document.querySelector(".userbox")
var userimg=document.querySelector("#userimg")
var imggs=document.querySelector(".imggs")
var pwd=document.querySelector("#pwd")
var pwdgs=document.querySelector(".pwdgs")
var pwd2=document.querySelector("#pwd2")
var pwd2gs=document.querySelector(".pwd2gs")
//声明一个数组，里面全部写true
//如果下面代码中那个条件不能满足，就使它相对应的i的值为false
//如果最后数组中包含一个false
//我们就不用做网络请求（减轻服务器的负载），直接告诉用户，它的格式出现了错误
var arr=[true,true,true,true,true]
// 用正则表达式设置用户名的格式:4到16位（字母，数字，下划线，减号）
account.addEventListener("change",function(){
let reg=/^[a-zA-Z0-9_-]{4,16}$/
if(reg.test(account.value)){
accountgs.style.color=""
account.style.border="2px green solid"
}else{
accountgs.style.color="red"
account.style.border="red 2px solid"
arr[0]=false
}
})
// 用正则表达式设置电话号码的格式
phone.addEventListener("change",function(){
let reg=/^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
if(reg.test(phone.value)){
phone.style.border="2px green solid"
}else{
phone.style.border="red 2px solid"
arr[1]=false
}
})
// 用正则表达式设置密码的格式： 至少4-10个字符，至少1个大写字母，1个小写字母和1个数字，其他可以是任意字符
pwd.addEventListener("change",function(){
let reg=/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[^]{4,10}$/
if(reg.test(pwd.value)){
pwdgs.style.color=""
pwd.style.border="2px green solid"
}else{
pwdgs.style.color="red"
pwd.style.border="red 2px solid"
arr[2]=false
}
})
// 验证第二次密码与第一次输入的密码是否是一致的
pwd2.addEventListener("change",function(){
if(pwd2.value==pwd.value){
pwd2.style.border="2px green solid"
pwd2gs.style.visibility="hidden"
}else{
pwd2gs.style.visibility="visible"
pwd2.style.border="red 2px solid"
arr[3]=false
}
})
// 给用户头像绑定点击事件，实现头像预览
userimg.addEventListener("change",function(){
// 打印，看一下它的属性
// console.log(userimg.files)
// 验证图片是否符合下面这些格式和大小
// 验证图片格式
let arr1=["image/png","image/jpg","image/jpeg"]
if(arr1.includes(userimg.files[0].type)){
imggs.style.visibility="hidden"
// 验证图片大小
if(0<userimg.files[0].size&&userimg.files[0].size<1*1024*1024){
imggs.style.visibility="hidden"
//当 图片的大小、格式1都符合要求时，为这张图片创建一个网址
let url=window.URL.createObjectURL(userimg.files[0])
userbox.style.backgroundImage=`url(${url})`
}else{
imggs.innerHTML="图片大小不符合"
imggs.style.visibility="visible"
imggs.style.color="red"
arr[4]=false
}
}else{
imggs.innerHTML="图片格式不符合"
imggs.style.visibility="visible"
imggs.style.color="red"
arr[4]=false
}
})
// 点击注册按钮，注册一个账号
async function fn(){
// console.log(arr)
if(arr.includes(false)||userimg.files[0]==undefined){
alert("请按照格式要求填写注册信息")
account.value=""
phone.value=""
pwd.value=""
pwd2.value=""
}else{
var re1=account.value
var re2=pwd.value
var re3=pwd2.value
var re4=phone.value
// 创建表单数据
let data=new FormData()
// 向表单中添加数据
data.append("account",`${re1}`)
data.append("phone",`${re4}`)
data.append("userimg",userimg.files[0])
data.append("pwd",`${re2}`)
// 将文件data发送给后端，data2：后端返回的数据
// console.log(data)
let data2=await axios.post("/registered",data)
// 打印后端返回的数据
// console.log(data2)
if(data2.data.code==4001){
window.open("/../public/login/login.html")
account.value=""
phone.value=""
pwd.value=""
pwd2.value=""
}else{
alert("该账号已注册过，请去登录")
account.value=""
phone.value=""
pwd.value=""
pwd2.value=""
}
}
}
// 点击登录按钮，直接去登录页面
var fm=function(){
window.open("/../public/login/login.html")
}
</script>
后端：
home.js文件：
// 注册页面的后端
async registered(){
// 接收数据
let filed=this.ctx.request.body
let file=this.ctx.request.files
// console.log(filed,2222222222222)
// console.log(file,111111111111111)
// 前端上传的文件的路径位置
let oldpath=file[0].filepath
// console.log(oldpath)
// 创建一个新路径
let newpath=__dirname+"/../public/user/img/"+path.basename(oldpath)
// 将临时路径的文件拷贝到新路径里面
fs.copyFileSync(oldpath,newpath)
// console.log(4444444444444444)
// 删除临时目录里面的文件
fs.unlink(oldpath,err=>{
console.log(err)
})
// 网址如果要存入数据库，建议使用根路径（不要使用绝对网址）
// 后续项目上线（项目迁移），ip和端口都要改变
// 而如果是绝对路径，前端使用时，就是一个绝对网址,后端就不能改ip和端口
// 所以，使用根路径,前端就不在意ip和端口
let imgpath="/public/user/img/"+path.basename(oldpath)
// console.log(filed,111111111)
// 将数据写入数据库中
//1.下载egg-mysql插件
// 2.写代码操作mysql数据库
// 查询账号是否已经被注册过
// 如果已经被注册过就停止将数据写入mysql数据库中
// 在user数据库中查询数据：this.app.mysql.query(sql1)
// console.log(22222222222222)
let sql1=`SELECT account FROM user WHERE account="${filed.account}"`
let data1=await this.app.mysql.query(sql1)
// console.log(data1,11111111111111111)
if(data1[0]){
this.ctx.body={info:"该账号已注册过，请去登录",code:4002}
}else{
// 给每一个创建的账号创建一个时间
let Creationtime1=new Date().toLocaleDateString()
let Creationtime2=new Date().toLocaleTimeString()
let Creationtime=Creationtime1+" "+Creationtime2
// console.log(Creationtime)
// 给user数据库添加数据 :this.app.mysql.query(sql)
let sql2=`INSERT INTO user (account,phone,userimg,pwd,Creationtime) VALUES("${filed.account}","${filed.phone}","${imgpath}","${filed.pwd}","${Creationtime}") `
// console.log(111111111111111,sql)
// console.log(555555555)
// 取出数据库的数据
var data2=await this.app.mysql.query(sql2)
// 将数据库里面的数据传给前端
this.ctx.body={info:"注册成功",code:4001}
}
}
router.js文件：
// 注册页面
router.post("/registered",controller.home.registered)
