<template> <div class=  "   login-container   "  > <div class=  "   login-box   "  > <!-- 头像区域 --> <div class=  "   text-center avatar-box   "  > <img src=  "   ../assets/logo.png   "  class=  "   img-thumbnail avatar   "  alt=  ""  > </div> <!-- 表单区域 --> <div class=  "   form-login p-4   "  > <!-- 登录名称 --> <div class=  "   form-group form-inline   "  > <label  for  =  "   username   "  >账号:</label> <input type=  "   text   "  class=  "   form-control ml-2   "   id  =  "   username   "  placeholder=  "   请输入账号   "  autocomplete=  "   off   "   v  -model.trim=  "   loginForm.loginName   "  /> </div> <!-- 登录密码 --> <div class=  "   form-group form-inline   "  > <label  for  =  "   password   "  >密码:</label> <input type=  "   password   "  class=  "   form-control ml-2   "   id  =  "   password   "  placeholder=  "   请输入密码   "   v  -model.trim=  "   loginForm.password   "  /> </div> <!-- 登录和重置按钮 --> <div class=  "   form-group form-inline d-flex justify-content-end   "  > <button type=  "   button   "  class=  "   btn btn-secondary mr-2   "  @click=  "   writenum   "  >测试</button> <button type=  "   button   "  class=  "   btn btn-secondary mr-2   "  @click=  "   toregister   "  >去注册</button> <button type=  "   button   "  class=  "   btn btn-primary   "  @click=  "   login   "  >登录</button> </div> </div> </div> </div> </template> <script>  import bus from   '   ../js/eventBus   '   export default { name:   '   MyLogin   '   , data() { return { loginForm: {   id  :  ''   , password:   ''   , life:   null   , score:   null   , loginName:   null   , isFirst:   true   } } }, methods: { writenum() { this.loginForm.loginName  =  123456   ; this.loginForm.password  =  123456   ; },   login   () {   //   console.log(this.$store.state.count)   //   console.log('submit!',this.loginForm);   //   表单验证   if  (this.loginForm.loginName ==  ""   ) { this.$message({ message:   '   请输入用户名   '   , type:   '   error   '   }); return; }   if  (this.loginForm.password ==  ""   ) { this.$message({ message:   '   请输入密码   '   , type:   '   error   '   }); return; }   //   发送登陆请求   if  (this.loginForm.loginName !=  ""  && this.loginForm.password !=  ""   ) { this.axios.post(   '   http://localhost:3312/sys-user/login   '  , this.loginForm).  then  ((resp) =>  { console.log(   "   this is login   "   , resp); let data  =  resp.data;   //   console.log(this.$store.state.user)   console.log(resp.data.content)   //   es6语法,扩展操作符,找到resp.data.content的每一个属性然后赋值给新的对象   //   this.$store.state.user = { ...resp.data.content }   //   console.log(this.$store.state.user)   //   localStorage存  localStorage.setItem(  "   insuranceCode   "   , JSON.stringify(resp.data.content)); console.log(this.loginForm.isFirst) localStorage.setItem(   "   getisFirst   "   , JSON.stringify(this.loginForm.isFirst)); console.log(JSON.parse(localStorage.getItem(   "   getisFirst   "   )))   //   localStorage取  console.log(JSON.parse(localStorage.getItem(  "   insuranceCode   "   )))   if   (data.success) { this.loginForm  =  {}; this.$message({ message:   '   登陆成功!!!   '   , type:   '   success   '   }); this.$router.push({ path:   '   /game   '   }) }   else   { this.$message({ message:   '   登陆失败,密码错误或用户名未注册   '   , type:   '   error   '   }); console.log(data) } }) } }, toregister() { this.$router.push(   '   /register   '   ) }, }, mounted() {   //   bus.$emit('getLoginName', this.loginForm)   } }  </script> <style lang=  "   less   "  scoped>  .   login  -  container { background  -  color: #35495e; height:   100  %  ; .   login  -  box { width: 400px; height: 250px; background  -  color: #fff; border  -  radius: 3px; position: absolute; left:   50  %  ; top:   50  %  ; transform: translate(  -  50  %, -  50  %  ); box  -shadow:  0   0  6px rgba(  255  ,  255  ,  255  ,  0.5   ); .form  -  login   { position: absolute; bottom:   0   ; left:   0   ; width:   100  %  ; box  -sizing: border-  box; } } } .form  -  control { flex:   1   ; } .avatar  -  box { position: absolute; width:   100  %  ; top:  -  65px; left:   0   ; .avatar { width: 120px; height: 120px; border  -radius:  50  % !  important; box  -shadow:  0   0   6px #efefef; } }  </style>