二 .vue项目搭建(v2)

• axios

下载axios 引入

npm install axios

在main.js中挂载到全局可以使用

import axios from 'axios';
Vue.prototype.axios = axios

token封装

export function setToken (tokenKey, token) {
  return localStorage.setItem(tokenKey, token) //存
}
export function getToken (tokenKey) {
  return localStorage.getItem(tokenKey)   // 取
}
export function removeToken (tokenKey) {
  return localStorage.removeItem(tokenKey)  //移除
}

Axios的二次封装以及跨域的处理

• Axios二次封装,在src文件夹下新建service.js,写入封装的内容,然后再在main.js中引入service

// service.js
import axios from 'axios'

const service = axios.create({
    // baseURL会自动加在接口地址上
    baseURL: "/api",
    timeout: 3000 // 指定请求的超时毫秒数，如果请求超过这个时间，那么请求就会中断。
})

// 添加请求拦截器
service.interceptors.request.use((config) => {
    // 在发送请求前做些什么
    // 获取并设置token
    // console.log(getToken('token'))
    // config.headers['token'] = getToken('token')
    return config
},(error) => {
    // 对请求错误做些什么
    return Promise.reject(error)
})

// 添加响应拦截器
service.interceptors.response.use((response) => {
    // 对响应数据做些什么
    console.log(response)
    let { status, message } = response.data
    if (status !== 200) {
        Message({message: message || 'error', type: 'warning'})
    }
    return response
}, (error) => {
    // 对响应错误做点什么
    return Promise.reject(error)
})

export default service

// main.js
import service from './service'

Vue.prototype.service = service // 挂载到原型,可在全局使用

• 跨域的处理在vue.config.js中设置代理

// vue.config.js
module.exports = {
    devServer: {
        open: true,
        proxy: {
            '/api': {
                target: 'http://localhost:3000', //这里是代理地址
                changeOrigin: true, // 允许跨域
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
}

重启项目，即可进行登录页的登录功能的数据交互,登录成功需要存储用户名和token 这里我们去新建一个setToken.js去封装一下设置token和获取token以及删除token的方法 然后在axios的二次封装的请求头里携带上token,至此,我们的axios二次封装和跨域完美解决。

vuex

具体参考：blog.csdn.net/m0_70477767…

• router

下载router

npm install vue-router@3.5.0

新建router文件夹 在index.js中做路由配置

import Vue from "vue";
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)
export default new Router({
  routes: [
   {
      path: '/',
      redirect:'/myLogin',   //重定向
      component: () => import('@/components/myLogin') //懒加载
      // component:resolve =>require(['@/components/HelloWorld'],resolve)  //异步组件
    },
    {
      path: '*',
      name:'NoFound',   // 404页面
      component: () => import('@/components/NoFound') //懒加载
      // component:resolve =>require(['@/components/HelloWorld'],resolve)  //异步组件
    },
    {
      path: '/hello',
      component:HelloWorld
    }
  ],
  mode:'history'  //使用history模式  （默认hash模式）
})

在main.js中引入

在App.vue中设置挂载点

<router-view></router-view>

具体如下：

// 1. 下载依赖
在下载路由依赖时一定要写上版本号，因为现在有vue2和vue3的版本，路由也有2和3的版本，
如果不加上版本号，那么下载时会默认下载成3的版本
vue2的稳定版本号 —>3.5.1 —> npm i vue-router@3.5.1

// 2. 在main.js中引入路由
import VueRouter from 'vue-router'

// 3. 使用路由组件
Vue.use(VueRouter)

// 4. 设置路由规则数组 --> 确定路由与组件的一一对应关系
// 4.1 引入组件
import Find from './views/Find.vue'
import My from './views/My.vue'
import Part from './views/Part.vue'

// 4.2 配置规则数组
let routes = [
  {
    path: '/find', //路由
    component: Find //组件
  },
  {
    path: '/my', //路由
    component: My //组件
  },
  {
    path: '/part', //路由
    component: Part //组件
  },
]

// 5. 创建路由对象，传入规则数组
const router = new VueRouter({
  routes //对象的解构赋值 - routes是VueRouter构造函数中的一个固定参数名，如果规则数组名称不叫routes，那么需要用完整的对象写法
})

new Vue({ // 实例化vue对象
  // 6. 关联vue实例
  router,
  render: h => h(App), // 告诉vue去渲染 App.vue 页面
}).$mount('#app') // $mount是让这个渲染页面放置在public/index.html中带有id为app的div中


//App.vue
<template>
  <div>
    <div class="footer_wrap">
      <a href="#/find">发现音乐</a>
      <a href="#/my">我的音乐</a>
      <a href="#/part">朋友</a>
    </div>
    <div class="top">
      <!-- 7. 设置挂载点-当url的hash(路由路径)值路径切换, 显示规则里对应的组件到这 -->
      <router-view></router-view>
    </div>
  </div>
</template>

设置路由懒加载和异步组件

路由守卫（前置守卫）

router.beforeEach((to, form, next)=>{
  if (!localStorage.getItem('token')) {  //如果没有token
    if (to.path !== '/myLogin') {  //如果没有在登录页面
      next('/myLogin')     //跳转到登录
    }else next()
  } next()