搭建基础vue后台项目

使用vue 2.x版本以及其他技术,搭建的简易vue后台项目,能实现后台的基础功能。
仍在学习中,难免会有错误,如有问题,请多指教。

一、基础搭建配置

查看vue cli版本:

vue --version

创建一个项目:

vue create xxx

搭建基础vue后台项目_第1张图片

目录 简介
api 存放api
assets 存放静态资源
Layout 存放公共组件
router 路由
utils 全局公用方法
views 页面
App.vue 入口页面
main.js 入口,加载组件,初始化等

如果想调整webpack配置,可以在vue.config.js中进行配置。官方文档:https://cli.vuejs.org/zh/guide/webpack.html

(一)封装axios

utils文件夹下的request.js中进行封装,最后导出配置,方便下一步封装请求。

此处涉及到的知识点

  • axios实例:官方文档:Axios 实例
  • 拦截器:官方文档:拦截器
// 封装axios
import axios from "axios";

// 创建axios实例 
const service = axios.create({
  timeout: 120000,
});

// 添加请求拦截器
service.interceptors.request.use((config) => {
  // 在发送请求前做些什么
  // 比如把token放入请求头
  // 登录时就已经把token存到了cookie中
  // const token = cookie.get("token");
  // if (token) {
  //   config.headers.authorization = token;
  // }
  return config;
}, (error) => {
  // 对请求错误做些什么
  console.log(error);
  return Promise.reject(error);
});


// 添加响应拦截器
service.interceptors.response.use((response) => {
  // 2xx 范围内的状态码都会触发该函数
  // 对响应数据做点什么    
  return response;
}, (error) => {
  // 超出 2xx范围的状态码都会触发该函数
  // 对响应错误做点什么
  console.log(error);
  if (error && error.response) {
    switch (error.response.status) {
      case 302: this.$message('接口重定向了!'); break;
      case 400: this.$message('参数不正确!'); break;
      case 401:
        this.$message({
          message: '登录过期,请重新登录',
          type: 'warning'
        });
        break;
      case 403: this.$message('您没有权限操作!'); break;
      case 404: this.$message('请求地址出错!'); break; // 在正确域名下
      case 408: this.$message('请求超时!'); break;
      case 409: this.$message('系统已存在相同数据!'); break;
      case 500: this.$message('服务器内部错误!'); break;
      case 501: this.$message('服务未实现!'); break;
      case 502: this.$message('网关错误!'); break;
      case 503: this.$message('服务不可用!'); break;
      case 504: this.$message('服务暂时无法访问,请稍后再试!'); break;
      case 505: this.$message('HTTP版本不受支持!'); break;
      default: this.$message('异常问题,请联系管理员!'); break
    }
  }
  return Promise.reject(error);
})

export default service;

(二)封装请求

utils文件夹下http.js文件中,进行封装请求。

需要安装 qs 库,qs是一个增加了一些安全性的查询字符串解析和序列化字符串的库。官方文档:

import service from './request';
import qs from 'qs';

const _post = (api, data, headers = {}) => {
  return new Promise((resolve, reject) => {
    service.post(api, data, { headers })
      .then(res => { resolve(res) })
      .catch(error => { reject(error) })
  })
}

const post = (api, data, headers = {}) => {
  headers['Content-Type'] = 'application/x-www-form-urlencoded'
  // qs.stringify()作用是将对象或者数组序列化成URL的格式
  return _post(api, qs.stringify(data), headers);
}

const postJson = (api, data, headers = {}) => {
  headers['Content-Type'] = 'application/json;charset=utf-8'
  return _post(api, JSON.stringify(data), headers)
}

const postFormData = (api, data, headers = {}) => {
  headers['Content-Type'] = 'multipart/form-data'
  return _post(api, data, headers)
}

const get = (api, params = {}, headers = {}) => {
  return new Promise((resolve, reject) => {
    service.get(api, { params, headers })
      .then(res => {
        resolve(res)
      })
      .catch(error => {
        reject(error)
      })
  })
}

export default { post, postJson, postFormData, get }

(三)代理:解决跨域

参考:《Vue Cli官方文档-devServer.proxy》

修改vue.config.js文件

module.exports = {
  devServer: {
    proxy: {
      '^/api': {
        target: 'http://xxx.xxx.x.xx:xx/',//接口的前缀
        ws: true,//代理websocked
        changeOrigin: true,//虚拟的站点需要更管origin
        pathRewrite: {
          '^/api': ''//重写路径
        }
      }
    }
  }   
} 

二、使用Elementui

(一)安装

npm i element-ui -S

(二)引入Element

完整引入,main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';

Vue.use(ElementUI);

new Vue({
  el: '#app',
  render: h => h(App)
});

三、登陆权限

安装vue-router(我用的3.x版本)。两种方式:

  • 安装https://router.vuejs.org/zh/installation.html
npm install vue-router
  • 由于我有一个正在使用 Vue CLI (opens new window)的项目,我就可以以项目插件的形式添加 Vue Router。
vue add router

说明 :如果是添加,会有如下的变化。

  • 增加router文件夹,包含index.js;

  • 增加views文件夹,包含About.vue和Home.vue文件;

  • App.vue文件被修改;

  • main.js文件被修改;

(一)、公共布局

在配置路由之前,先搭建公共布局。

components文件夹下,新建index.js文件,用于将多个组件共同导出:

export {default as HeadBar} from './header.vue';
export {default as SiderBar} from './SideBar/index.vue';
export {default as AppMain} from './main.vue';

Layout文件夹下,新建layout.vue文件,导入各个组件,比如:上方导航栏,侧边栏,内容区。






(二)、配置路由

第一步:定义路由

说明:

  1. 在路由中进行了 路由懒加载 的配置:当打包构建应用时,JavaScript 包会变得非常大,影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块,然后当路由被访问的时候才加载对应组件,这样就更加高效了。
  2. 使用了 vue-router中的 命名视图 ,使用公共布局,具体在后面说明。
// router.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import Layout from '../Layout/layout.vue';

// 懒加载
const Login = () => import('../views/Login/index.vue');

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

// 必须要显示的静态路由表
const routes = [
  {
    path: '/login',
    component: Login,
    hidden: true
  },
  // 只有一级菜单的路由
  {
    path: '',
    // 此处使用了  命名视图
    component: Layout,  // 全局统一的布局文件
    children: [{
      path: '',
      name: 'home',
      // 懒加载
      component: () => import('../views/Home.vue'),
      meta: { title: '首页' }
    }]
  },
  // 有二级菜单的路由
  {
    path: '/user',
    component: Layout,
    name: 'user',
    meta: { title: '用户管理' },
    children: [
      {
        path: 'list',
        name: 'list',
        component: () => import('../views/About.vue'),
        meta: { title: '用户列表' }
      },
      {
        path: 'test1',
        name: 'test1',
        component: () => import('../views/About.vue'),
        meta: { title: '用户测试1' }
      }
    ]
  },
]

// 实例化  
const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

第二步:挂载根实例

main.js 中,

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

new Vue({
  // 挂载
  router,
  render: h => h(App)
}).$mount('#app')

第三步:配置App.vue






(三)、登录

登录界面在此略去,仅记录关键步骤。

在成功登录后,进行存储信息和跳转的操作。

......
if(res.data.code === 200){
	localStorage.setItem('userInfo', res.data.userInfo);
	this.$router.push({ path: '/' });
}
......

(四)、路由守卫(鉴权)

此处使用了vue-router中的 [导航守卫](导航守卫 | Vue Router (vuejs.org))

在没有登录的情况下,是不可以在地址栏通过输入地址进行访问其他页面,所以,必须加上路由鉴权,需要拿到cookie中的数据进行验证后,才可以放行。

使用 router.beforeEach 注册一个全局前置守卫:

// router.js

......
// 实例化  
const router = new VueRouter({
......
})

router.beforeEach((to, from, next) => {
  // to:即将要进入的目标 路由对象(现在的页面)
  // from:当前导航正要离开的路由(上一步的页面)
  // next:
  if (localStorage.getItem('userInfo')) {
    next();
  } else {
    if (to.path === '/login') {
      next();
    } else {
      next('/login');
    }
  }
})

export default router

(五)、侧边栏

侧边栏:根据路由动态显示侧边栏。

主要是通过 this.$router.options.routes 获取到路由,通过 this.$route.path 获取到当前路由。

// Layout/components/SideBar/index.vue

<template>
  <div>
    <h1 style="color: white;">Logo</h1>
    <el-menu
      mode="vertical"
      :unique-opened="true"
      :collapse-transition="false"
      background-color="#304156"
      :default-active="activeMenu"
      text-color="#bfcbd9"
      active-text-color="#409EFF"
    >
      <sidebar-item :routes="routes" />
    </el-menu>
  </div>
</template>

<script> 
import SidebarItem from './sidebarItem.vue'
export default {
  components: {
    SidebarItem
  },
  computed: {
    activeMenu() {
      return this.$route.path
    },
    routes() {
      return this.$router.options.routes
    }
  }
}
</script>

<style scoped>
.el-menu {
  border-right: none;
}
</style>

// sidebarItem.vue







四、优化

(一)简化引用路径:

根目录新建vue.config.js文件

const path = require('path');

const resolve = (dir) => {
  return path.join(__dirname, dir);
}

module.exports = {
  // 允许对内部的 webpack 配置进行更细粒度的修改
  chainWebpack: (config) => {
    config.resolve.alias
      .set('@', resolve('src'))
      .set('components', resolve('src/components'));
  }
}    

(二)关闭vue代码检查

根目录新建.eslintignore文件

src

(三)项目中遇到的问题

1、vue项目中出现Invalid Host header

2、布局自带间距

搭建基础vue后台项目_第2张图片

解决方法:在App.vue中


(四) 无权限无法访问页面

在项目中,虽然根据用户权限显示对应权限展示的侧边栏,但如果这时候某用户知道某页面地址,在地址栏直接输入地址进行访问,就存在一定的风险性,要做的就是通过路由拦截做拦截判断。
解决方法: 在router文件夹下index.js中:

......
{
    path: '',
    component: Layout,
    children: [{
      path: 'user',
      name: 'User',
      component: () => import('../views/User/index.vue'),
      // 重点:加入一个参数:requiresAuth
      meta: { title: '用户管理', requiresAuth: true }
    }]
  },
......

紧接着在导航守卫时,进行判断:

router.beforeEach((to, from, next) => {
  let result = JSON.parse(localStorage.getItem('userInfo'));
  let role = result.is_admin === 0 ? false : true;

  if (localStorage.getItem('userInfo')) {
  	// 此处根据在路由中添加的meta.requiresAuth属性
  	// 若访问的页面中有这属性,那么当用户直接访问该页面时,会进入此项判断
    if (to.matched.some(res => res.meta.requiresAuth)) {
      // 判断是否有权限,有的话放行。 
      if (role) {
        next();
      } else {
        // 没有权限则跳回首页
        next('/');
      }
    } else {
      // 没有对应属性,则直接放行
      next();
    }
  } else {
    if (to.path === '/login') {
      next();
    } else {
      next('/login');
    }
  }
})

五、参考

1、《vue官方文档》

2、《vue-router官方文档》

3、《Elementui官方文档》

4、《手摸手,带你用vue撸后台 系列一(基础篇)》

5、《手把手教你搞定权限管理,结合Vue实现菜单的动态权限控制!》

6、以及各个插件的官方网址已分布在文章内。

你可能感兴趣的:(前端,vue.js,javascript,前端)