第七天学习后端——登录登录： 1.前端表单验证-减轻服务器的负载-DOM操作写特效 1.账号验证：绑定change事件，

代码实例：

前端：

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="pwd">
<div class="pwdgs">至少4-10个字符,至少1个大写字母,1个小写字母和1个数字</div>
<br><br>
验证码：<input type="text" id="auth">
<br><br>
<div class="verif"></div>
<br><br>
<button onclick="fn()">登录</button>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<button onclick="fm()">注册</button>

css样式：

   <style>
     .accountgs{
        font-size: 1px;
    }
    .pwdgs{
        font-size: 1px;

    }
</style>

js文件：

<script>
  //利用Dom操作获取元素
    var account=document.querySelector("#account")
    var accountgs=document.querySelector(".accountgs")
    var pwd=document.querySelector("#pwd")
    var pwdgs=document.querySelector(".pwdgs")
    var verif=document.querySelector(".verif")
    var auth=document.querySelector("#auth")
    var arr=[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
        }
    })

    // 用正则表达式设置密码的格式： 至少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[1]=false
        }
    })

    // 验证码
    // 需使用svg-captcha第三方模块
    // 绑定一个点击事件，如果用户看不懂，点击可以帮它重新请求一个新的验证码
    verif.onclick=getverif
    function getverif(){
        // 点击验证码盒子，就重新请求后端发送一个新的验证码
        // 做网络请求，后端返回一个数据包
        // 返回值是一个字符串，字符串，浏览器是可以识别的
        axios.get("/verif").then(res=>{
        console.log(res)
        verif.innerHTML=res.data
    })
    }
    getverif()

    // 点击登录按钮，去首页
    async function fn(){
        if(arr.includes(false)){
        alert("请按照格式要求填写信息")
        }else{
            var re1=account.value
            var re2=pwd.value
            var re3=auth.value
            var data=new FormData()
            data.append("account",`${re1}`)
            data.append("pwd",`${re2}`)
            data.append("auth",`${re3}`)
            var data2=await axios.post("/login",data)
            if(data2.data.code==4004){
                alert("验证码输入错误")
            }else{
                if(data2.data.code==4001){
                window.open("/../public/Homepage/Homepage.html")
            }else if(data2.data.code==4002){
                alert("该账号未注册")
                re1=""
                re2=""
            }else if(data2.data.code==4003){
                alert("密码错误")
                re1=""
                re2=""
            }
            }
        }
    }

    // 点击注册按钮，直接跳转到注册页面
    var fm=function(){
        window.open("/../public/registered/registered.html")
    }
</script>

后端：

home.js文件：

1.登录

   // 登录页面的后端
 async login(){
// 接收前端发送的数据包
console.log(2222222222)
var filed=this.ctx.request.body

// 先验证验证码是否正确
// 防止脚本一直登录
// 取出缓存中加密的验证码
// console.log(111111111)
let verif=this.ctx.session.verif
if(filed.auth==verif){
  // this.ctx.body={info:"验证码正确",code:4005}
  // 在mysql数据库中查询账号是否存在
var sql1=`SELECT account FROM user WHERE account="${filed.account}"`
var data1=await this.app.mysql.query(sql1)
if(data1[0]){
  // 如果账号存在
  // 我们就查询前端发送的密码是否该账号在数据库中的密码一致
  // 如果一致，就返回4001
  // 如果不一致，就返回4003

  // 1.查询该账号的密码
  var sql2=`SELECT pwd FROM user WHERE account="${filed.account}"`
  var data2=await this.app.mysql.query(sql2)
  // 由于账号名不是唯一的，一个账号名可以有多个用户，不同的密码
  // 所以我们创建一个空数组，有一个密码相同，就在数组中添加一个true
  // 只要数据库中账号名对应的密码有一个和前端发送过来的密码一致
  // 也就是只要数组中存在true，后端就向前端返回一个4001
  // 就可以登录成功
  // 如果数组中全是false，后端就向前端返回一个4003
 

    // console.log(data2[i].pwd,111111111111111111111111111)
    // console.log(filed.pwd,2222222222)
    if(data2[0].pwd==filed.pwd){
      // 如果密码正确，用户就会登录成功
  // 但是每次用户进入网页后，一直登录，就会很麻烦
  // 于是，当用户登录成功后
  // 我们给用户信息的设置缓存，在一定的时间范围内，将用户的一些非隐私信息缓存在浏览器中
  // 只要用户进入这个网页
  // 我们就会为这个用户自动登录
  
    this.ctx.body={info:"密码正确",code:4001}
    // 给用户的账号，设置缓存
    // this.ctx.cookies.set("account",`${filed.account}`)
    // 取出缓存(在进入首页时，就获取缓存的信息，渲染到页面)
    // this.ctx.cookies.get("account")
    this.ctx.cookies.set("account",`${filed.account}`)
    }else{
      this.ctx.body={info:"密码错误",code:4003}
    }
  }
  else{
  // 如果账号不存在，就返回4002
  this.ctx.body={info:"账号不存在",code:4002}
}
}else{
  this.ctx.body={info:"验证码错误",code:4004}
}

}

2.验证码：

   // 验证码
 async verif(){
// 1.生成验证码
var captcha=svgcaptcha.create({
  size:4,
  color:true,
  background:"gray"
});
// console.log(captcha.data,11111111)
// 2.设置缓存
// 将验证码的信息加密缓存到浏览器中
// 验证码里面的字母、数字：captcha.text
// console.log(captcha.text,222222222222)
this.ctx.session.verif=captcha.text
// 3.发送给前端
this.ctx.body=captcha.data
}

router.js文件：

   // 注册登录页面的路由
 router.post("/login",controller.user.login)
 
 
 // 注册验证码的路由
router.get("/verif",controller.user.verif)

第七天学习后端——登录

登录：

1.前端表单验证-减轻服务器的负载-DOM操作写特效

2.post暗文把密码发送给后端--（还有一种技术JWT）

3.等待后端返回数据

4.验证码：

代码实例：

前端：

后端：