电商后台管理系统: 在线预览：http://xiximy.3vkj.club 技术栈：vue2+vue-router+vuex+mock+axios+element-ui+echarts 描述：电商后台管理系统，不同用户展示不同菜单栏组件，用户、商品、订单信息的增删查改，使用echarts统计用户来源地区及性别比例

### 项目中出现的一些 问题 及解决方法

### 一、vue 从 assets 中动态引入图片资源报错

#### 原因：

静态资源可以通过两种方式进行处理
1、在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理（一般放在 assets 中相对引入）
2、放置在 pulic 目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理（绝对引入）
我们使用：动态属性，此时的 webpack 里面带的插件就不会去处理、解析当前这个图片.

#### 解决方法：

使用 require 方法
eg:`<img :src="require(`@/assets/images/${xxx}`)">`

### 二、vue 跳转同一路由会报错

#### 原因：

路由的 push 会向历史记录栈中添加一个记录，同时跳转同一个路由页面，会造成一个重复的添加，导致页面的报错
调用的 push 和 replace 方法会返回一个 promise 实例，所以可以用 catch 捕获来处理错误

#### 解决方法：

在 router 的 index.js 中重写 vue 的路由跳转 push 和 replace
call 和 apply 区别
相同：都可以调用函数一次，篡改函数上下文一次（this 指向）
不同点：call 传递参数用逗号隔开，apply 方法执行，传递数组
不管你点多少次，每次就覆盖之前的，相当于传了一次一模一样的路径
`VueRouter.prototype.push = function (location, resolve, reject) {
if (resolve && reject) {
    originPush.call(this, location, resolve, reject)
} else {
originPush.call(
this,
location,
() => {},
() => {}
)
}
}
VueRouter.prototype.replace = function (location, resolve, reject) {
if (resolve && reject) {
originReplace.call(this, location, resolve, reject)
} else {
originReplace.call(
this,
location,
() => {},
() => {}
)
}
}`

### 三、刷新后菜单栏会消失

#### 原因：state 中的数据是存储在内存中的

#### 解决：对 state 中的数据缓存，持久化处理

### 四、输入错误的路径，只会显示白屏

#### 解决方法：给路由添加重定向到 404 页面（一定要放在最后）

router.addRoute({
path: '\*',
redirect: '/404',
})

### 四、刷新后 tag 标签会消失(已完成)

每次刷新后读取 url 中的 path，递归遍历菜单数组找到该菜单信息并添加到 tag 数组中

#### 3、地址级联选择器选中校验提示

注意：
级联选择框验证规则的触发事件是 change 事件，当级联选择器的内容发生变化时会触发验证。
如果验证无法生效，首先需要检查 prop 是否绑定了表单的验证规则，以及 el-cascader 里面的 v-model 是否绑定了表单验证属性；然后由于级联选择器选中的内容是以数组的形式存在，要注意 设置验证规则里面的 type 值为 array。

### 五、elementUI 时间选择器 TimePicker， 时间选不上的问题

注意：时间选不上是因为 timeValue 初始值的问题，一定要给默认值。
定义变量：
`错误 ： timeValue:[],
正确 ①： timeValue:[new Date(new Date()),new Date(new Date())] （默认当前时间）
正确 ②： timeValue:[new Date(2021, 8, 24, 9, 40), new Date(2016, 8, 24, 10, 24)]

### 六、使用{{}}双花括号在 html 页面进行数据绑定时，从一个对象中获取如下代码报错提示为

“TypeError: Cannot read property ‘Name’ of undefined”。
因为获取服务器是异步的，所以 vue 先绑定数据。绑定数据时，你的赋值为空的话，而里面的属性便为 undefined，所以报"cannot read property ‘name’ of undefined"。
解决：① 给数据赋值为空对象
② 使用可选链操作符 ?.
就以上问题进行修复
obj?.name
this.myData=res?.data

### 七、项目在本地时运行正常，但部署到服务器中，刷新页面，出现了 404 错误

只有 history 模式下会出现这个问题
1、为什么 history 模式下有问题
Vue 是属于单页应用（SPA）
而 SPA 是一种网络应用程序，所有与用户交互都是通过动态重写当前页面来实现页面变化的，前面我们也看到了，不管我们应用有多少页面，构建物都只会产出一个 index.html
当我们在地址栏输入 www.xxx.com 时，
这时会打开我们 dist 目录下的 index.html 文件，然后我们在跳转路由进入到 www.xxx.com/login，
关键在这里，当我们在 www.xxx.com/login 页执行刷新操作，nginx location 是没有相关/login 配置的，所以就会出现 404 的情况
2、为什么 hash 模式下没有问题
router hash 模式我们都知道是用符号#表示的，如 website.com/#/login, hash 的值为 #/login
它的特点在于：hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新向服务端发送请求。而改变 hash，在 hash 模式中会被 hashChange 方法所捕获，在 vue 中会触发页面的修改。
hash 模式下，仅 hash 符号之前的内容会被包含在请求中，如 website.com/#/login 只有 website.com 会被包含在请求中 ，因此对于服务端来说，即使没有配置 location，也不会返回 404 错误

### 八、Echarts 异步获取数据不显示问题

问题：前端异步获取后端接口数据时 echarts 图表不显示问题
同步请求，客户端向服务端发送请求，服务端响应以后客户端才渲染页面
异步请求，客户端向服务端发送请求，客户端不等服务端响应就行行页面渲染，一般做页面的局部刷新。

那么造成上面原因就是我的页面向服务端发送请求，页面不等服务端响应就已经渲染图表，尽管后面数据请求成功但此时页面已经渲染成功，页面此时只知道他所渲染图表时数据为空，所以不会显示数据
发送一个请求是一个异步，需要时间，vue 生命周期执行到 mounted 时，这个异步还没有完成
异步获取的数据在页面渲染后才获得，
解决方案：一，在异步请求里面获得数据后渲染页面
解决方案:二,深度监听数据，当数据变化时（数据获取成功）再渲染

西西/电商后台管理系统

简介

发行版

贡献者

近期动态

西西/电商后台管理系统 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

西西/电商后台管理系统