vue-cli3+element搭建后台管理项目

我就是我 2022-02-14 11:21 401阅读 0赞

## 一、安装需要的插件 ##

（1）创建项目

vue create admin_project

（2）安装element

npm i element-ui -S

（3）安装js-base64   js-md5 用于账号登录注册

npm install --save js-base64
    npm install --save js-md5

（4）安装默认样式清除 normalize.css

npm i normalize.css --save-dev

报错的话需要安装 原因没有安装：css-loader   和style-loader

npm install css-loader style-loader

（5）安装axios

npm install axios --save

（6）安装cookie js-cookie

npm i js-cookie

//引入
    import Cookies from 'js-cookie'

//具体使用
    Basic Usage
     
    Create a cookie, valid across the entire site:
     
    Cookies.set('name', 'value');
    Create a cookie that expires 7 days from now, valid across the entire site:
     
    Cookies.set('name', 'value', { expires: 7 });//存储7天 过期
    Create an expiring cookie, valid to the path of the current page:
     
    Cookies.set('name', 'value', { expires: 7, path: '' });
    Read cookie:
     
    Cookies.get('name'); // => 'value'
    Cookies.get('nothing'); // => undefined
    Read all visible cookies:
     
    Cookies.get(); // => { name: 'value' }
    Delete cookie:
     
    Cookies.remove('name');
    Delete a cookie valid to the path of the current page:
     
    Cookies.set('name', 'value', { path: '' });
    Cookies.remove('name'); // fail!
    Cookies.remove('name', { path: '' }); // removed!
    IMPORTANT! when deleting a cookie, you must pass the exact same path and domain attributes that was used to set the cookie, unless you're relying on the default attributes.
    Note: Removing unexisting cookie does not raise any exception nor return any value

（7）在项目中安装 [element-resize-detector][]  为了监听某区域size变化插件 [使用详情][Link 1]

npm install element-resize-detector

（8）安装图表 echart

npm install echarts --save

## 二、如何在项目中使用以上的插件 ##

（1）启动项目和如何打包

//终端下在项目里
    //启动项目
    npm run serve
    
    //打包项目
    npm run build

（2）element-ui在项目中如何使用（全局使用）

//main.js
    import ElementUI from 'element-ui'
    
    Vue.use(ElementUI, { size: 'small', zIndex: 3000 })

（3）在项目中应用js-cookie js-md5 js-base64

//main.js
    
    import Cookies from "js-cookie"
    import md5 from "js-md5"
    
    Vue.prototype.$base64 = require("js-base64").Base64

（4）在main.js 全局使用normalize.css

import "normalize.css"

（5）使用axios

//main.js
    
    import axios from "axios"
    Vue.prototype.$axios = axios

（6）在项目中使用element-resize-detector

//在需要用到的组件中使用
    
    //引用
    var elementResizeDetectorMaker = require("element-resize-detector")
    
    
    
      // 区域元素size改变
        var erd = elementResizeDetectorMaker()
        erd.listenTo(document.getElementById("homeTest"), function (element) {
          console.log("echarts区域尺寸改变")
         console.log(element)
        })

(7)全局引用echarts

//main.js
    
    import echarts from "echarts"
    
    Vue.prototype.$echarts = echarts

（8）自定义element主题

在官网下载主题包并放到项目中，[主题包使用教程][Link 2]点击可查看

//本项目主题包地址  ./assets/font/iconfont.css
    
    //main.js 中引用
    
    import "./assets/font/iconfont.css"

（9）使用iconfont图标，从阿里图标库里下载

//main.js 
    import "./assets/font/iconfont.css"

## 三、在项目中封装axios 请求拦截设置 ##

在项目src新建文件夹 utils —> http.js  [详细点击查看][Link 3]

import axios from 'axios' // 引用axios
    import { MessageBox, Message } from 'element-ui'
    import Qs from 'qs'
    import router from '@/router'
    
    /* eslint-disable no-alert, no-console, no-empty,no-unused-vars */
    // axios 配置
    // 设置响应超时
    axios.defaults.timeout = 50000
    // axios.defaults.baseURL = 'https://easy-mock.com/mock/' // 这是调用数据接口,公共接口url+调用接口名
    let httpUrl = window.location.host
    if (httpUrl.indexOf('.com') !== -1) {
      console.log('生产环境', httpUrl)
    } else if (httpUrl.indexOf('.net') !== -1) {
      console.log('测试环境', httpUrl)
      axios.defaults.baseURL = 'http://vk.autobole.net/volkswagen/' // 这是调用数据接口,公共接口url+调用接口名
    } else if (httpUrl.indexOf('localhost:8088') !== -1) {
      console.log('指定开发环境', httpUrl)
      // axios.defaults.baseURL = "https://way.jd.com";
    } else {
      console.log('开发环境', httpUrl)
      // axios.defaults.baseURL = "https://way.jd.com"; // 这是调用数据接口,公共接口url+调用接口名
    }
    
    // http request 拦截器，通过这个，我们就可以把token传到后台
    axios.interceptors.request.use(
      config => {
        // console.log('请求路径', config.url)
        config.headers = {
          'Content-Type': 'application/x-www-form-urlencoded' // 设置跨域头部
        }
        config.data = Qs.stringify(config.data)
        return config
      },
      err => {
        return Promise.reject(err)
      }
    )
    
    // http response 拦截器
    axios.interceptors.response.use(
      response => {
        // console.log('请求拦截返回参数', response)
        if (response.status === 200) {
          // 成功
          let returnCode = response.data.code
          if (returnCode > 10000 && returnCode < 20000) {
            // console.log('成功', response)
            Message.success(response.data.msg)
          } else if (returnCode >= 20000 && returnCode < 30000) {
            // 只弹窗，不操作
            // console.log('失败1', response)
            Message.error(response.data.msg)
          } else if (returnCode >= 30000 && returnCode < 40000) {
            // 只弹窗，点击跳到登入页
            localStorage.removeItem('userInfo')
    
            MessageBox.confirm(response.data.msg, '确定登出', {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }).then(() => {
              // console.log('此处应退出登录  重新实例化')
              router.push({ path: '/login' })
            })
          }
        }
        return response
      },
      error => {
        // console.log('error', error.toString())
        if (
          error.toString().trim() ===
          "TypeError: Cannot read property 'cancelToken' of null"
        ) {
          localStorage.removeItem('userInfo')
          MessageBox.confirm(
            '会话凭证失效，可以取消继续留在该页面，或者重新登录',
            '确定登出',
            {
              confirmButtonText: '重新登录',
              cancelButtonText: '取消',
              type: 'warning'
            }
          ).then(() => {
            //  console.log('此处应退出登录  重新实例化')
            router.push({ path: '/login' })
          })
        }
    
        // console.log(error.toString().trim())
        if (error.toString().trim() === 'Error: Network Error') {
          MessageBox.alert('网络请求异常，请稍后重试', '出错了', {
            confirmButtonText: '确定',
            callback: action => {}
          })
        }
        return Promise.reject(error.response.data)
      }
    )
    
    export default axios
    
    /**
     * fetch 请求方法
     * @param url
     * @param params
     * @returns {Promise}
     */
    export function get (url, params = {}) {
      return new Promise((resolve, reject) => {
        axios
          .get(url, {
            params: params
          })
          .then(response => {
            resolve(response.data)
          })
          .catch(err => {
            reject(err)
          })
      })
    }
    
    /**
     * post 请求方法
     * @param url
     * @param data
     * @returns {Promise}
     */
    export function post (url, data = {}) {
      return new Promise((resolve, reject) => {
        axios.post(url, data).then(
          response => {
            // console.log(response.data.code)
            resolve(response.data)
          },
          err => {
            reject(err)
          }
        )
      })
    }
    
    /**
     * patch 方法封装
     * @param url
     * @param data
     * @returns {Promise}
     */
    export function patch (url, data = {}) {
      return new Promise((resolve, reject) => {
        axios.patch(url, data).then(
          response => {
            resolve(response.data)
          },
          err => {
            reject(err)
          }
        )
      })
    }
    
    /**
     * put 方法封装
     * @param url
     * @param data
     * @returns {Promise}
     */
    export function put (url, data = {}) {
      return new Promise((resolve, reject) => {
        axios.put(url, data).then(
          response => {
            resolve(response.data)
          },
          err => {
            reject(err)
          }
        )
      })
    }

在main.js 中全局使用

// main.js 
    
    import { post, get, patch, put } from "./utils/http"
    
    Vue.prototype.$post = post
    Vue.prototype.$get = get
    Vue.prototype.$patch = patch
    Vue.prototype.$put = put

在需要用到的.vue页面直接使用

//this.logForm 为传参
    this.$post('你的url', this.logForm).then(req => {
            this.logList = req.data
            this.logList.allCount = req.allCount
            this.logList.nowPage = req.nowPage
            this.logList.pageSize = req.pageSize
            this.loading = false
          }).catch(err => {
            console.log(err)
          })

[element-resize-detector]: https://github.com/wnr/element-resize-detector
[Link 1]: https://blog.csdn.net/csl125/article/details/89245267
[Link 2]: https://blog.csdn.net/csl125/article/details/87874048
[Link 3]: https://blog.csdn.net/csl125/article/details/85070597