1. 接口模块处理 1.1 axios二次封装 这里封装的依据是后台传的JWT，已封装好的请跳过。import axios from 'axios'
import router from '../router'
import {MessageBox, Message} from 'element-ui'
let loginUrl = '/login'
// 根据环境切换接口地址
axios.defaults.baseURL = process.env.VUE_APP_API
axios.defaults.headers = {'X-Requested-With': 'XMLHttpRequest'}
axios.defaults.timeout = 60000
// 请求拦截器
axios.interceptors.request.use(
config => {
if (router.history.current.path !== loginUrl) {
let token = window.sessionStorage.getItem('token')
if (token == null) {
router.replace({path: loginUrl, query: {redirect: router.currentRoute.fullPath}})
return false
} else {
config.headers['Authorization'] = 'JWT ' + token
}
}
return config
}, error => {
Message.warning(error)
return Promise.reject(error)
})
玖叶教程网
前端编程开发入门
2024年04月03日
VUE-武装你的项目（vue自带webpack）
2024年04月03日
一步一步实现现代前端单元测试（前端测试项目）
今天我们一步一步把各种不同的技术结合一起来完成页面的单元测试和 e2e 测试。 karma是一款测试流程管理工具，包含在执行测试前进行一些动作，自动在指定的环境（可以是真实浏览器，也可以是PhantamJS 等 headless browser）下运行测试代码等功能。mocha测试框架，类似的有 jasmine 和 jest 等。个人感觉 mocha 对异步的支持和反馈信息的显示都非常不错。power asser断言库，特点是 1 karma + mocha + power assert
2024年04月03日
想在vue内使用svg:如何展示?如何改色?
说实话问题来的有点突然，只要我不使用svg图标，问题不是都解决了吗？ 灵魂拷问：iconfont难道不香吗？ 此事说来话长，长话短说就是：设计只认svg 「纯展示」最快最简单的办法就是插件：vue-svg-icon、svg-sprite-loader、vue-svgicon
2024年04月03日
Vue前端开发——数据交互axios（vue前端向后端传递数据）
Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中 说明： 本文介绍Vue 开发中对axios 的封装处理，不对axios 概念详细介绍
2024年04月03日
VUE实战技巧，让你的代码少一点（vue项目代码规范）
这三个小技巧应该熟知：
2024年04月03日
Vue组件的注册使用（vue注册插件）
前言：在单页面应用开发中，大多数情况下只有一个html页面，那么单页面的页面跳转，其实就是各组件之间的切换，那么这个组件其实就充当的是一个一个独立的html页面的角色，只不过这个组件之间可以复用，传值，随意调用，在vue中通常由（vue-router）和组件（component）来配合完成，那么这个component就是我们下来将要学习的组件。
2024年04月03日
39、vue如何实现整体注册组件（vue实现注册功能）
import Vue from 'vue'
// 使用的是webpack require.context(路径【表示公共的组件的目录】,文件深入循环查找【bool】,正则【最终要使用的组件】 )
const requireComponent = require.context('./', true, /\.vue$/)
console.log(requireComponent.keys(), 3344222)
requireComponent.keys().forEach((item) => {
// console.log(requireComponent[item], 77) // ['./bread.vue', './pubArt.vue', './qq/q.vue']
/* 获取的是 每一个组件暴露出来的对象 */
const defaultObj = requireComponent(item).default
Vue.component(defaultObj.name, defaultObj)
})
最后main.js中导入