数据工厂系列（8）引入vue-admin-template初始化前端项目

阅读 6月前 0 38

持续创造，加速成长！这是我参加「日新计划 6 月更文挑战」的第8天，点击查看活动概况

咱们好~我是小方，欢迎咱们关注笋货测验笔记体完记得俾个like呀

回忆

上篇咱们现已完成了token校验和权限校验功用的开发，咱们现已开发了两个接口，能够跟前端开始联调，在此之前，咱们需要将前端项目全体搭建好

烦琐一下

在此之前，希望咱们能对前端有一定的常识，了解前端Vue、html、css和js等…~~前端给我感觉不难，但是需要前期打好基础，特别是css，咱们之后就不要吐槽我写的页面丑呀~~

引荐咱们先看一下这些常识

html/css/js

这儿首选w3cschool，从基础的 HTML 到 CSS，甚至进阶的 XML、SQL、JS、PHP 和 ASP.NET，你都能够学习
es6语法

ECMAScript 6入门这儿主张了解即可，每天看一点好了
Vue2教程

Vue.js教程 Vue2的教程还是挺好理解的，假如你有Python基础，我觉得问题不大~
Element组件

Element组件官方教程官网上超级多demo，你想要用哪个组件，就把代码copy下来，改改就完事了

vue-admin-template引入

Vue比较好用的办理后台模板之一，字节大佬出品，谁用谁知道！数据工厂前端主要用的是极简版的vue-admin-template，功用的话没vue-element-admin那么多，二次开发起来比较顺手。vue-element-admin详细介绍可看==>这个网址

前期准备

电脑现已安装Nodejs和包办理工具Npm
安装

# 克隆项目
git clone https://github.com/PanJiaChen/vue-admin-template.git

# 进入项目目录
cd vue-element-admin

# 安装依赖，二选一即可
npm install

# 主张不要用 cnpm 安装 会有各种怪异的bug 能够通过如下操作处理 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org

本地发动

# 本地开发 发动项目
npm run dev

发动成功

浏览器打开http://localhost:9528/，能够看到vue-admin-template成功部署了！！！

改造vue-admin-template

添加tagsview

从vue-element-admin仿制文件里仿制文件：

vue-element-admin/src/layout/components/TagsView
vue-element-admin/src/store/modules/tagsView.js

/src/layout/components/AppMain.vue添加以下代码：

<template>
  <section class="app-main">
    <transition name="fade-transform" mode="out-in">
      <keep-alive :include="cachedViews">
        <router-view></router-view>
      </keep-alive>
    </transition>
  </section>
</template>
<script>
export default {
  name: 'AppMain',
  computed: {
    cachedViews() {
      // 新增tagsview
      return this.$store.state.tagsView.cachedViews
    }
  }
}
</script>
<style lang="scss" scoped>
.app-main {
  /*50 = navbar  */
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: hidden;
}
.fixed-header + .app-main {
  padding-top: 50px;
}
.hasTagsView {
  .app-main {
    /* 84 = navbar + tags-view = 50 + 34 */
    min-height: calc(100vh - 84px);
  }
  .fixed-header+.app-main {
    padding-top: 84px;
  }
}
</style>

修正src/layout/components/index.js文件，新增如下代码

export { default as TagsView } from './TagsView'

修正src/layout/index.vue文件，新增如下代码

<template>
  <div :class="classObj" class="app-wrapper">
    <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
    <sidebar class="sidebar-container" />
    <div class="main-container">
      <div :class="{'fixed-header':fixedHeader}">
        <navbar />
      </div>
      <tags-view />    <!-- 此处添加tag-->
      <app-main />
    </div>
  </div>
</template>

修正src/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import settings from './modules/settings'
import user from './modules/user'
import tagsView from './modules/tagsView'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    app,
    settings,
    user,
    tagsView
  },
  getters
})
export default store

修正src/store/getters.js

const getters = {
  sidebar: state => state.app.sidebar,
  device: state => state.app.device,
  token: state => state.user.token,
  avatar: state => state.user.avatar,
  name: state => state.user.name,
  visitedViews: state => state.tagsView.visitedViews,
  cachedViews: state => state.tagsView.cachedViews
}
export default getters

修正src/settings.js修正如下

tagsView: true

修正src/store/modules/settings.js

const { showSettings, tagsView, fixedHeader, sidebarLogo } = defaultSettings
const state = {
  showSettings: showSettings,
  fixedHeader: fixedHeader,
  tagsView: tagsView,
  sidebarLogo: sidebarLogo
}

修正src/layout/components/TagsView/index.vue去掉权限校验

这儿会有个问题，改写页面后，标签丢掉了，这儿要加个监听办法，

beforeUnload() {
      // 监听页面改写
      window.addEventListener('beforeunload', () => {
        // visitedViews数据结构太杂乱无法直接JSON.stringify处理，先转换需要的数据
        console.log(this.visitedViews, 'this.visitedViews')
        const tabViews = this.visitedViews.map((item) => {
          return {
            fullPath: item.fullPath,
            hash: item.hash,
            meta: { ...item.meta },
            name: item.name,
            params: { ...item.params },
            path: item.path,
            query: { ...item.query },
            title: item.title
          }
        })
        sessionStorage.setItem('tabViews', JSON.stringify(tabViews))
      })
      // 页面初始化加载判别缓存中是否有数据
      const oldViews = JSON.parse(sessionStorage.getItem('tabViews')) || []
      // console.log(oldViews, 'this.visitedViews2')
      if (oldViews.length > 0) {
        this.$store.state.tagsView.visitedViews = oldViews
      }
    }

tagsview 功用done~

修正request.js

import axios from 'axios'
import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'
// create an axios instance
const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 300000 // request timeout
})
// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent
    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
// response interceptor
service.interceptors.response.use(
  /**
   * If you want to get http information such as headers or status
   * Please return  response => response
  */
  /**
   * Determine the request status by custom code
   * Here is just an example
   * You can also judge the status by HTTP Status Code
   */
  response => {
    const res = response.data
    // if the custom code is not 20000, it is judged as an error.
    if (res.code !== 200) {
      Message({
        message: res.message || 'Error',
        type: 'error',
        duration: 5 * 1000
      })
      // 401: token解析失利或者token失效了
      if (res.code === 401) {
        // 重定向到登录页面
        MessageBox.confirm('您已退出登录，您能够撤销以留在此页面，或从头登录', 'token失效了', {
          confirmButtonText: '从头登录',
          cancelButtonText: '撤销',
          type: 'warning'
        }).then(() => {
          store.dispatch('user/resetToken').then(() => {
            location.reload()
          })
        })
      }
      return Promise.reject(new Error(res.message || 'Error'))
    } else {
      return res
    }
  },
  error => {
    console.log('err' + error) // for debug
    Message({
      message: error.message,
      type: 'error',
      duration: 5 * 1000
    })
    return Promise.reject(error)
  }
)
export default service

解释一下，假如Response里的code不是等于200，就抛出过错提示语，假如code等于401，那就是token失效了或者解析失利了，就呈现弹框，选择留在此页面还是重定向到登录页面从头登录，在之后的华章咱们来测验一下这个功用~

总结

今日讲了前端项目的初始化，要改的东西比较多，咱们渐渐看看吧，今日先到这儿了，咱们下期进行登录和注册功用的联调~

项目地址
- 后端：github.com/JokerChat/F…
- 前端：github.com/JokerChat/F…

回忆