项目记录

登陆退出

  • 通过vue ui新建项目 添加element-ui拓展

  • 梳理项目结构

  • 按需导入 在element.js中import Vue.use使用

  • 字体图标的使用

    • 将font文件夹和style.css放入assets
    • main.js引用style.css 在style.css中找到小图标的名字
    • class中使用 如:prefix-icon=”icon-shocked”

  • 表单绑定:

    • v-model
    • data中定义loginForm
    • 用户名密码使用v-model双向绑定

  • 表单添加验证规则

    • 为el-form通过属性绑定指定rules
    • 定义rules
    • 为不同的表单通过prop指定验证规则 注:加给item

  • 重置功能

    • 拿到表单实例对象 通过为表单添加ref=’ ‘,里面的值就是组件的实例对象
    • this.$refs.loginFormRef.resetFields();

  • 登陆弹窗功能

    • element.js中import {Message} from “element-ui”,并且在原型上定义Vue.prototype.$message=Message
    • 用this.$message即可调用

  • 登陆成功之后处理

    • 将登录成功之后的toke 保存到sessionStorage中,因为sessionStorage是会话期存储机制,,localStorage是持久化存储机制
      • 项目中除了登陆之外的API接口,必须在登录之后才能访问
      • token只应在当前网站打开期间生效
    • 通过编程式导航跳转到后台主页,路由地址this.$router.push(‘/home’)
    • 路由导航守卫 beforeEach 
1
2
3
4
5
6
7
8
9
10
11
12
//挂载路由导航守卫
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()
})

  • 退出 功能 清空token， 跳转到登录页

    •     window.sessionStorage.clear()
    this.$router.push('/login')
<!--hexoPostRenderEscape:<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">## 主页</span><br><span class="line"></span><br><span class="line">* element.js引入</span><br><span class="line"></span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->
Container,
Header,
Aside,
Main,
Menu,
Submenu,
MenuItem,
MenuItemGroup
<!--hexoPostRenderEscape:<figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line"></span><br><span class="line">* 通过axios拦截器添加token验证</span><br><span class="line"></span><br><span class="line">* &#96;&#96;&#96;javascript</span><br><span class="line">  axios.interceptors.request.use(config&#x3D;&gt;&#123;</span><br><span class="line">    config.headers.Authorization&#x3D;window.sessionStorage.getItem(&#39;token&#39;)</span><br><span class="line">    &#x2F;&#x2F;必须 return config</span><br><span class="line">    return config</span><br><span class="line">  &#125;)</span><br></pre></td></tr></table></figure>:hexoPostRenderEscape-->