前后端交互项目板块写法--注册

注册页面:

写一个arr数组保存i个true  i取决于有多少个上传后端的数据

先写完静态页面 input邮箱 密码 重复密码 头像等

用addEventListener监听事件的change事件监听各个input

用正则表达式判断格式是否正确  正确或错误边框变色 如if (reg.test(email.value))是否匹配

正确arr中t保留rue

input:files文件：

对files文件类型input

change事件  用var url=window.URL.createObjectURL(idcardimg.files[0])获取上传的文件  idcard为目标文件id

idcardimgbox.style.backgroundImage = `url(${url1})` 把文件图片设置为input的父元素背景

判断文件类型:

var arr = ["image/png", "image/jpg", "image/jpeg"]

if (arr.includes(idcardimg.files[0].type))  //判断arr中是否包括了文件的类型 包括了就通过arr中一个保留为true 

判断文件尺寸:

 if (15 * 1024 > idcardimg.files[0].size || idcardimg.files[0].size > 1 * 1024 * 1024)

提交按钮绑定οnclick=fn()

fn()函数判断if(arr.includes(false))  arr中是否包含了false 有一个就不通过

else 就创建表单var fdata=new FormData()  document.querySelect获取每个数据

然后fdata.append（"email",email.value）添加表单中 

最后上传表单数据给后端：

var re=await axios.post("/register",fdata)

然后设置好路由router

在路由函数中设置后端

先获取前端上传的字段let ziduan=this.ctx.request.body 因为注册数据要post上传所以用body

获取前端上传的文件 let f1=this.ctx.request.files

处理数据:

因为上传的文件是图片所以要将文件保存到本地

for(var i=0;i<f1.length;i++){
       1.获取老路径  let oldpath=f1[i].filepath

        2.获取新路径 要保存到的本地  __dirname+"/../public/user/"+path.basename(oldpath)

         2.1path.basename(oldpath) 为文件名

        3.转移文件位置 fs.renameSync(oldpath,newpath)

  4.将转移完的files数据添加到字段中    ziduan[f1[i].field]="/public/user/"+ path.basename(oldpath)
}

mysql操作:

判断邮箱是否注册过

let sql=`SELECT * FROM user WHERE email="${ziduan.email}"`   mysql语句在数据库寻找所有email=字段中email的数据

运行mysql语句 : let re1 = await this.app.mysql.query(sql1) 

判断返回的数据:

if(re1[0]) 这里必须加[0]意为re1存在

成立就 this.ctx.body={info:"邮箱已注册",code:4001}//code码返回前端用res.data.code来获取并判断结果

else没有注册过就有mysql语句存到数据库中

let ctime = new Date().toLocaleDateString()获取当前时间

      let sql2 =

        `INSERT INTO user (ctime,screenname,touxiang,email,password,idcardimg) VALUES ("${ctime}","${ziduan.screenname}","${ziduan.touxiang}","${ziduan.email}","${ziduan.pwd}","${ziduan.idcardimg}")`  存入所有前端传入的数据   

await this.app.mysql.query(sql2)运行mysql

this.ctx.bodu 返回code码