# bigevent **Repository Path**: lc2677/bigeventb ## Basic Information - **Project Name**: bigevent - **Description**: 黑马前端项目vue+element - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2022-10-09 - **Last Updated**: 2023-03-13 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README 1.ESLint（代码检查工具）在哪里生效? webpack开发服务器(终端和网页)+vscode(前提安装了eslint插件) 2.为何elementUI注册单独封装个模块文件? 分散管理, 方便查找 3.为何要把网络请求封层, 分文件模块来管理? 便于管理和查找, 以及替换和修改 4.网络请求, 封装了哪些东西? utils/request.js网络请求工具函数, api/index.js定义具体请求的接口方法和传参, 在任意组件调用接口方法请求拿到数据 5.路由表是什么? 路由规则对象的数组, 路由对象是路径和组件的映射关系 6.注册（登录）的业务逻辑？ 把前端标签准备好, 数据绑定好, 在点击事件中走完表单验证逻辑, 调用接口传参给后台, 根据后台返回的code做前端页面结果提示 7.登录后获取token, 保存vuex的代码执行思路是? 在登录接口返回响应成功后, 提取后台返回的token字符串, 调用mutations方法, 把值暂存到vuex的state内变量上, 但是仅仅在内存中, 刷新后state里token变量会变成空字符串(又相当于没登录一样) 8.vuex为何要做持久化? vuex运行时的值保存在内存里, 如果刷新vuex的变量会变成初始化的,所以让他的默认初始化的值从本地取, 当有人赋值给vuex也同步覆盖式保存到本地一份 9.怎么持久化存储vuex？ 使用一个vuex的插件包叫做'vuex-persistedstate@xxx',然后在src/store/index.js中, 导入并配置 10.退出登录思想？ 清除vuex和本地所有缓存的值, 然后页面强制切换到登录页面 11.vuex保存用户信息的思路是? 定义state变量和mutations以及actions方法, 在路由守卫中判断有token无vuex中userInfo用户信息的时候, 调用actions里的方法请求用户信息保存到state里userInfo中 12.渲染用户信息思路？ 在vuex中把state映射成getters, 再用getters辅助函数映射到组件内使用state的值 13.el-menu如何集成路由切换功能? index属性的值对应要切换的路由地址, el-menu上添加router属性即可 ​14.axios请求拦截器作用是什么? axios请求拦截器, 在请求的时候先执行请求拦截器, 添加了请求头, 然后请求到后端接口, 可以统一携带Authorization 15.更新用户资料的思路是? 做好表单页面, 收集用户要修改的信息, 根据接口文档差什么往参数对象上添加后, 把数据发给后台更新到数据库里, 根据返回提示code决定如何给用户页面反馈 16.如何点击按钮, 让图片选择框出现的? 先准备隐藏的input标签type是file, 然后通过点击事件和JS代码获取input标签调用click事件, 就触发了input文件选择标签默认事件就会出图片选择窗口 17.前端如何选择文件后, 用img标签直接预览? 用FileReader读转成base64字符串, 或者用URL对象内置的createObjectURL方法转成内存里的url地址使用 18.解决异步问题:async+await 1.async用于申明一个function是异步的，而 await 用于等待一个异步方法执行完成。 2.async声明function是一个异步函数，返回一个promise对象，可以使用 then 方法添加回调函数。async函数内部return语句返回的值，会成为then方法回调函数的参数。 3.await 操作符只能在异步函数 async function 内部使用。如果一个 Promise 被传递给一个 await 操作符，await 将等待 Promise 正常处理完成并返回其处理结果，也就是说它会阻塞后面的代码，等待 Promise 对象结果。如果等待的不是 Promise 对象，则返回该值本身。 19.elementUI自带标签的基础校验如何使用? el-form身上添加rules属性和规则对象, el-form-item身上写prop属性字段是rules对应规则对象key属性, 也要和数据对象的key一致, 然后表单域内的表单标签也要对应v-model绑定和prop值同名的属性 20.分类数据的下拉菜单, 铺设的思路是什么? 调用接口把数据拿回来, 赋予到vue变量上, 然后在组件上循环, 再根据elementUI组件的文档, 设置到相应的属性上即可 21.封面标签选择图片的思路是? 先准备隐藏的input[type=file], 然后点击按钮, 用js的方式调用input标签的点击事件, 让文件选择窗口出现, 再给input标签绑定change事件通过事件对象拿到用户选择的图片文件 打包相关问题： yarn build 之后会生成dist文件夹 打开里面的index.html,出现了404 原因： 默认打包时，index.html引入其它打包文件使用的是 绝对地址 地址是以/开头（要找到当前index.html打开时所在服务器的根地址（文件夹）） 这就要确保vscode + live server插件打开时，vscode跟目录应该是dist文件夹 我们如果把dist文件夹交给后台运维部署到服务器上，dist下的内容就得在服务器根目录才行 但是服务器一般有多个项目，不会让我们用根目录直接放一个项目，这样会很乱 解决：webpack可以让我们写一个配置项publicPath（控制index.html引入其它资源前置地址） 在vue.config.js中进行配置（脚手架配置文件，webpack配置文件） publicPath：默认值为 “/” ,确保开发环境下是这个值，因为开发服务器会把所有的资源打包在内存里，而且会作为服务器根目录文件夹 生成环境准备上线了，这个时候就要使用相对地址 publicPath：'./' 打包完成后，如果我们想修改代码