实习日记6/15 完成登录页面啦~

6月的目标就是自己做一个边缘云的后台管理项目，首先实现师傅说的功能，然后看边缘云后台管理项目它有哪些功能，以及具体实现，把这个项目跑通。这半个月加油！宝贝今天也入职啦！

边缘云后台管理项目mini：

今日完成登录页面的开发：

需求：

1、登录页用户名、密码验证 （不能为空）

2、登录密码加密 （rsa加密）

3、记住用户名功能（储存在localstrorge）

4、登录成功和失败的提示框

5、点击确定或者回车键都可以实现登录

6、用户直接用url输入地址的话跳转到登录页

开发：

1、√ （axios发送请求时没有配置什么请求拦截什么的后期要用功能的话需要补充）

2、√

Trim是String型数据的一个方法，作用是去掉字符串开头和结尾的空格，比如说字符串a="____a__"，其中_表示一个空格，那么a.Trim() = "a"，字符串前后的空格都被清掉了。调用这个方法后，a的值是不变的，也就是说，虽然a.Trim() = "a"，但a="____a__"还是成立的。

首先获取公钥
然后把密码加密
再用加密后的密码等信息发起请求

  let jse = new JSEncrypt({ default_key_size: 2048 });
         jse.setPublicKey(this.publickey);
         this.loginForm.password=jse.encrypt(this.loginForm.password)
        const { data } = await loginService.login(this.loginForm)
        console.log(data)
        if (data.code == 200) {
          this.$message('登录成功')
        } else {
           this.$message('账户或密码错误')
        }

3、√（这个功能写了好久，实现啦）

<el-checkbox v-model="rememberUserName"
                       @change="getUserName">记住用户名</el-checkbox>

 data () {
    return {
      publickey: '',
      rememberUserName: '',  

  getUserName () {
      if (!!this.rememberUserName) {  // ！！把string转换成布尔值
        localStorage.setItem('username', this.loginForm.name); //已经记住用户名了      l 
        localStorage.setItem('remember', true);//记住勾选状态
      } else {
        localStorage.removeItem('username');
        localStorage.removeItem('remember');
      }
    },
    replay () {  //用于刷新后渲染在页面
      if (localStorage.getItem('remember')) {  //直接如果能取到值，不用特别在意值是啥
        this.loginForm.name = localStorage.getItem('username');
        this.rememberUserName = !!localStorage.getItem('remember');
      }
    }

注意值是字符串还是布尔值，这个踩坑了很久

还有就是checkbox里面的change事件会把多选框的值传入（默认的功能）

4、√  利用弹窗组件就可实现

5、 √

点击回车键，触发登录
给登录的大盒子绑定事件@keyup.enter='login'
当填完密码时还在盒子内，点击回车就会触发事件，但是输入完以后在别处点击后点击回车就不会触发了
 
要想全局的话：
给登录按钮绑定两个点击事件：（代码如下）
<el-button type="primary" @click="login（）" @keyup.enter="keyDown(e)">登录</el-button>
login 是直接点击按钮的登录事件：（代码如下）
  methods: {
    login() {
      
    },
    
    // 点击回车键登录
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode == 13 || e.keyCode == 100) {
        this.login(); // 定义的登录方法
      }
    },
  },
  mounted() {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },

6、常规通过路由跳转

路由配置页面
import Home from '@/pages/home/index'
{
      path: '/home',
      name: 'Home',
      component: Home,
    },

登录页：
  if (data.code == 200) {
          this.$message('登录成功')
          this.$router.push('/home') //路由跳转

采用路由导航守卫来实现： 

const router = new Router({  //要采用这种暴露方式
  routes: [
    {
      path: "/",
      name: "Login",
      component: Login
    },
    {
      path: "/home",
      name: "Home",
      component: Home
    },
    {
      path: "/first",
      name: "First",
      component: First
    },
    {
      path: "/seconed/:name",
      name: "Seconed",
      component: Seconed
    }
  ]
});
//为创建的router实例挂载路由导航
router.beforeEach((to, from, next) => {
  if (to.path === '/') return next()
  if (!sessionStorage.getItem('token')) {
    this.$message('您还没有登录，请登录')
    next('/');
  }
  next()
});
export default router;