电商后台管理1-初始化+登陆页面

前言

大学断断续续自学小一年已经做过的项目再做一遍
因为一些外界因素 考试等等 一年没用碰前端 所以重做一遍复习一下vue项目

初始化

安装

插件
router创建自带
elementui

运行依赖
router创建时自带
axios

开发依赖
less
less-loader

登录界面

首先清空vue初始项目

创建login页面 写进路由

创建login.vue
写进路由表 重定向

路由表
import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../components/Login"
Vue.use(VueRouter)
const routes = [
  {path:"/",redirect:"/login"},
  { path: "/login", component: Login }
]
const router = new VueRouter({
  routes
})
export default router

router-view占位符写进App.vue

by the way安装less和less-loader报错说明loader版本太高

npm install less-loader@7.3.0 --save-dev

在assets下新建global.css全局样式表

然后在main.js中导入

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import axios from 'axios'

import './assets/global.css'; //这句话用来导入！！！

Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

写好页面后 请求返回的值为

引入阿里图标库

把阿里的文件夹放入assets文件夹
main.js当中引入阿里文件夹里面的css文件
组件中类名写为iconfont icon-user等等

login页面代码

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import './assets/global.css'
import './plugins/element.js'
import './assets/fonts/iconfont.css'
import axios from 'axios'


axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
Vue.prototype.$axios = axios





Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

App.vue 里面记得写路由占位符
router.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../components/Login"
import Home from "../components/Home"
Vue.use(VueRouter)

const routes = [
  { path: "/", redirect: "/login" },
  { path: "/login", component: Login },
  { path: "/home", component: Home }
]



const router = new VueRouter({
  routes
})



//路由守卫
router.beforeEach((to,from,next)=>{
  //to将要访问的路径
  //from从那个路径来
  //next()放行函数 next('login')强制转跳

  if(to.path == '/login'){ //如果访问的是登陆页 直接放行
    return next();
  }
  //如果不是登陆页 获取token
  const tokenStr = window.sessionStorage.getItem('token');
  if(!tokenStr){ //没有token就去登陆页
    return next('/login');
  }
  //如果有token 直接放行
  next();

})



export default router

login页面

<template>
  <div class="login_cotainer">
    <div class="login_box">


      <!-- 头像区域 -->
      <div class="avatar_box">
        <img src="../assets/login_admin.jpg" alt="" />
      </div>



      <!-- 登陆表单区域 -->
      <el-form class="login_from" :model="loginFrom" :rules="loginRules" ref="loginFromRef">

        <!-- 用户名 -->
        <el-form-item prop="username">
          <el-input v-model="loginFrom.username" placeholder="默认为admin" prefix-icon="iconfont icon-user"></el-input>
        </el-form-item>

        <!-- 密码 -->
        <el-form-item prop="password">
          <el-input v-model="loginFrom.password" placeholder="默认为123456" prefix-icon="iconfont icon-3702mima" show-password></el-input>
        </el-form-item>

        <!-- 按钮 -->
        <el-form-item class="btns">
          <el-button type="primary" @click="btnLogin">登陆</el-button>
          <el-button type="info" @click="btnRemake">重置</el-button>
        </el-form-item>

      </el-form>


    </div>
  </div>
</template>


<script>
export default {
  data(){
    return{
      request:0,
      loginFrom:{ //登陆数据
        username:'admin',
        password:'123456',
      },
      loginRules:{ //登陆数据的验证规则
        username:[
          {required:true,message:'请输入用户名',trigger:'blur'},
          {min:3,max:6,message:'长度在3-6个字符',trigger:'blur'}
        ],
        password:[
          {required:true,message:'请输入密码',trigger:'blur'},
          {min:3,max:6,message:'长度在3-6个字符',trigger:'blur'}
        ],
      },
      res:{}
    }
  },
  mounted(){
  },
  methods:{
    async btnLogin(){ //登陆按钮
      if(this.request != 0){return}; //做个简单的节流
      this.request++; //节流

      // 表单数据验证是否成功element自带的方法
      this.$refs.loginFromRef.validate(async (boolean)=>{
        if(!boolean){return};
         //成功发起请求
        const {data} = await this.$axios.post("login",this.loginFrom);
        // 判断请求返回是否登陆成功
        if(data.meta.status != 200){
          this.$message.error('登陆失败!');
          return;
        }else{
          this.$message.success('登陆成功!');
          // 先把token存了 兄弟们
          window.sessionStorage.setItem("token",data.data.token);
          // 转跳到主页
          this.$router.push('/home');
        }
      });



      setTimeout(() => { //节流
        this.request--;
      }, 800);
    },
    btnRemake(){ //重置按钮
      this.$refs.loginFromRef.resetFields() //elementui自带的重置函数自动重置上面绑定的loginFrom
    }
  }
};
</script>


<style lang="less">
.login_cotainer {
  height: 100%;
  background-color: #ccc;
  .login_box {
    width: 450px;
    height: 300px;
    background-color: white;
    border-radius: 3px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    .avatar_box {
      width: 120px;
      height: 120px;
      border: 5px solid rgb(163, 163, 163);
      border-radius: 50%;
      position: absolute;
      left: 50%;
      transform: translate(-50%, -50%);
      box-shadow: 0 0 20px white;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .btns {
      display: flex;
      justify-content: center;
    }
    .login_from{
      width: 100%;
      padding: 0 20px;
      box-sizing: border-box;
      position: absolute;
      bottom: 0;
    }
  }
}
</style>

导航守卫

从登陆页login到主页home必须守卫 要不然上面输入/home直接就不用登陆转跳了

import Vue from 'vue'
import VueRouter from 'vue-router'
import Login from "../components/Login"
import Home from "../components/Home"
Vue.use(VueRouter)

const routes = [
  { path: "/", redirect: "/login" },
  { path: "/login", component: Login },
  { path: "/home", component: Home }
]



const router = new VueRouter({
  routes
})



//路由守卫
router.beforeEach((to,from,next)=>{
  //to将要访问的路径
  //from从那个路径来
  //next()放行函数 next('login')强制转跳

  if(to.path == '/login'){ //如果访问的是登陆页 直接放行
    return next();
  }
  //如果不是登陆页 获取token
  const tokenStr = window.sessionStorage.getItem('token');
  if(!tokenStr){ //没有token就去登陆页
    return next('/login');
  }
  //如果有token 直接放行
  next();

})



export default router

退出登陆

退出只需要清除token
在转跳到登陆页即可