vue电商管理项目-一一网

1.导入全局样式表

在main.js将相关样式导入
import ‘./assets/css/global.css’

2.如何重定向路由

在router配置页中使用redirect属性

import Vue from 'vue'
import VueRouter from 'vue-router
import Login from '../components/Login.vue'
Vue.use(VueRouter)
const routes=[
  {path:'/',redirect:'/login'},
  {path:'/login',component:Login}
  ]
const router=new VueRouter({
    routes
 })
 export default router
复制代码

3.element-ui如何按需导入

在element.js文件中import {Button,Form,Input} from ‘element-ui’
Vue.use(Button)

4.配置axios

在main.js文件中配置

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

复制代码

此时我们就可以通过this访问$http方法来发起对后端的请求

login(){
   this.$refs.loginFormRef.validate((valid)=>{
     if(!valid)return 0
     this.$http.post('login',this.loginForm)
    })
  }
复制代码

5.保存token

每一个用户都有一个token值他从服务端传过来，token只应在当前网站打开期间生效所以可以将他保存在sessionStorage中

login(){
  this.$refs.loginFormRef.validate(async (valid)=>{
    if(!valid)return 0
    const {data:res}=await this.$http.post('login',this.loginForm)
    
    //data重命名为res es6语法
    if(res.meta.status!==200)return this.$message.error('登录失败')
    this.$messgae.success('登录success')
    window.sessionStorage.setItem('token',res.data.token)
    this.$router.push('/home')
    
复制代码

6.路由导航守卫控制访问权限

token不需要前端检测，后端以及检测好了他只要传过来就一定是对的，用户身份失败一定传不过来token。所以我们在router/index.js中进行配置

const router=new VueRouter({
   routes
  })
router.beforeEach((to,from,next)=>{
  if(to.path==='/login')return next()
  const tokenStr=window.sessionStorage.getItem('token')
  if(!tokenStr)return next('/login')
  next()
 })
复制代码

7.退出功能

为按钮绑定一个事件。先清空token然后跳转到我们的登录页面
window.sessionStorage.clear() this.$router.push(‘login’)

8.json格式的配置文件

项目根目录创建.prettierrc的文件

{
  “semi”:false,
  "singleQuote":true
}
semi设置false为去掉分号，下面是指使用单引号
还有禁用function处空格报错
‘space-before-function-paren’:0
 rules:{
  ........................and so on
  }
复制代码

9.通过axios请求拦截器添加token

因为后台那边除了登录的api其他时候其他api都需要授权。必须在请求头中使用Authorization字段提供token令牌

main.js
axios.interceptors.request.use(config=>{
  config.headers.Authorization=window.sessionStorage.getItem('token')
  console.log(config)
  return config
 }
 登录期间服务器不颁发令牌所以authorization为null
 登录之后调用相应的api就会办法相应的token令牌
 
 
复制代码

10.在sessionStorage保存左侧菜单栏的激活状态

  default-active
  saveNavState(activePath){
   window.sessionStorage.setItem('activePath',activePath)
   this.activePath=activePath
   
复制代码

11.slot插槽的使用

由于服务端传来的是true、false值无法渲染成我们想要的switch所以

<el-table-column label="状态" prop="mg_state">
   <template slot-scope="scope">
      <el-switch v-model="scope.row.mg_state" @change="userStateChanged(scope.row)"></el-switch>
   </template>
<el-table-column>
复制代码