Vue项目03 电商系统 登陆

🌰

跨域用token
同域用session,cookie 同域：协议&&端口&&主机全都得一致

---

删掉了一些标签，如果报错需要关闭语法检查
在vue.config.js中添加以下但是我把原来的那个也改成false了，但运行成功

lintOnSave: false

梳理完整后..

---

.vue后缀分别有三部分
分别是模板、行为、样式

---

用到什么组件需要在element内全局注册

---

使用第三方UI库 现在main.js中link，然后就可以在Vue.app使用了

---

表单规则验证
首先给整体绑定 :rules=””
指定的rule在data方法的return中
然后想呈现信息的元素 的标签 绑定 prop=””
请留意prop的值是rules的成员变量
🌰

loginFormRules:{
        username:[
          //required相当于校验是否为空，就是说不满足第一个，将执行第二个，第三个是当失去聚焦时
               { required: true, message: '请输入登录名称', trigger: 'blur' },
            { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        password:[
           { required: true, message: '请输入登录密码', trigger: 'blur' },
            { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'blur' }
        ]

      }

其中loginFormRules对应的是:rules=””
里的两个对象对应prop=””,想在哪显示就绑定哪里

---

修改ElementUI的input输入框背景颜色和输入框字体颜色

修改/deep/input::-webkit-input-placeholder {
  color: #17a1e5;
  font-size: 15px;
}

// 改变input框背景颜色
/deep/.el-input__inner {
  background-color: transparent !important;
  border: 1px solid #1296db;
}

因为框架把设定都默认了，可以使用深度选择器

原来《el-XXXXX》 标签本身就是个类名字

---

重置功能：
给父标签定义一个ref 推荐命名以_______Ref为后缀
为按钮绑定一个点击事件*当点击触发一个函数👉this.$refs.刚才父标签命名的那个名字.resetFields(); 就会重置
效果为：点击重置，清空输入框

---

校验功能：
给父标签定义一个ref 推荐命名以_______Ref为后缀
为按钮绑定一个点击事件*当点击触发一个函数👉this.$refs.刚才父标签命名的那个名字.validate(); 如果符合rules（rules和__Ref那个在同一个父标签内）将返回true，和一个obj

---

网络请求：配置axios 根目录，将路径以及对象{username:xxx,password:xxx}其实就是双向绑定的那组数据

---

技巧性东西：
对象.属性
👇
{属性：小名} = 对象

login() {
      this.$refs.loginFormRef.validate(async valid => {
        if (!valid) return;
        const {data:res} = await this.$http.post("login", this.loginForm);
        console.log(res);

其中这个async 和 await 把我整晕了

---

友好的弹窗提醒：
首先在element.js导入Message 并挂载到this方法，

import { Message } from 'element-ui'
Vue.prototype.$message = Message

$message 只是一个自定义の合法の名字
在vue.app中就可以使用一系列message弹窗了
登陆成功之后
将token记录下
创建一个页面.vue,在路由.js里导入页面.vue
验证登录信息
用到路由导航守卫：如果用户没有登录，但是直接通过url访问特定页面，需要重新导航到登陆页面

const router = new VueRouter({
    routes: [
        { path: "/", redirect: "/login" },
        { path: "/login", component: Login },
        { path: "/home", component: Home },
    ],
});
//挂载路由导航守卫
router.beforeEach((to, from, next) => {
    //to将要访问的路径
    //from从原来的页面
    //next是一个函数，表示放行
    //next() 放行  next('./login')强制跳转
    if (to.path === "/login") return next();
    //获取token
    const tokenStr = window.sessionStorage.getItem("token");
    if (!tokenStr) return next("/login");
    next();
});
export default router;

to👉将要去的那个页面
from 👉原来的页面
next👉 放行

行为描述：当我输入账号密码，浏览器记录一个token在Storage里，此时检测页面如果需要权限，则需要验证token，如果没有则返回login，有则放行
基于token的退出功能
销毁本地のtoken核心代码就两行

export default {
  methods:{
    logout(){
        window.sessionStorage.clear()
        this.$router.push("/login")
    }
  }
};

关闭自动把’’替换成””和关闭自动添加;