vue-admin-tamplate项目
最新回答
春夜浅
2024-09-19 02:34:35
使用axios封装请求，实现跨域问题的解决，通过vue-cli代理跨域请求。首先，设置基础地址与超时时间，配置请求拦截器携带token，响应拦截器处理异常并解构数据。在router路由中全局守卫配置，根据token展示页面。区分环境变量使用VUE_APP_前缀，并在.env.development环境文件中设置。接口输出格式以业务状态码为主，HTTP状态码为辅。
在permission.js中配置路由全局守卫，处理有无token的跳转。请求拦截器携带token，响应拦截器对token失效处理。针对token失效，请求响应拦截器需做对应处理，使用native特性解决vue组件与普通HTML元素点击事件冲突问题。路由管理中，定义1级路由为dashboard，二级路由为空时，表示一级路由加上二级路由。左侧菜单解析通过siderbar组件生成sidebarItem列表，根据路由hidden属性判断显示与隐藏，同时注意顶部图片的显示控制。
$event实例在父组件中解决异步问题，使用$nextTick确保请求所需值更新后再发请求。利用this.$set解决对象追加数据时响应式问题。在分页器中，注意部门等因素改变时，从第1页开始查询数据。防抖与节流技术适用于高频事件处理，如搜索框与文本实时保存。递归将数组转成树形结构，用于数据展示与操作。
Excel上传下载功能中，修改request响应拦截器以实现下载至本地，需配合file-saver包使用。上传本地Excel至浏览器，使用element的Upload组件处理FormData。nextTick用于解决异步问题，确保值更新后再进行请求。向后端发送头像信息时，使用腾讯云存储桶进行存储，涉及三步操作：创建存储桶、添加跨域访问规则、请求接口。权限管理中，根据权限筛选路由，动态添加路由并显示左侧菜单，利用vuex管理用户权限。操作权限时，封装自定义指令控制权限。
滚动数字插件 vue-count-to用于动态展示数值变化。打包上线时，将路由改为history模式，使用cdn加速，排除特定包后在index.html中引入。上线流程包括项目打包、托管服务器、生成可访问地址。Vue2后台打包命令为：pnpm build:prod。Windows安装nginx，将dist目录内容复制到nginx/html下，并修改nginx.conf文件以解决历史模式的404问题。使用nginx代理解决生产环境的跨域问题。
热门标签
