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

我很方
1,375 阅读3分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 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失效了或者解析失败了，就出现弹框，选择留在此页面还是重定向到登录页面重新登录，在之后的篇章我们来测试一下这个功能~

总结

今天讲了前端项目的初始化，要改的东西比较多，大家慢慢看看吧，今天先到这里了，我们下期进行登录和注册功能的联调~

avatar
文章
阅读
粉丝