黑马VUE电商管理后台笔记记录

电商后台项目遇到的问题

1、.eslintrc.js 中 ‘@vue/standard’ 需要删掉或者注释掉

2、不能直接在 vue ui 里面安装 less-loader和less依赖，因为版本问题，最好是安装低版本

npm install less-loader@4.1.0 -D`
npm install less@3.9.0 -D

3、element-ui 是按需导入的，因此需要在 plugins 文件夹下的 element.js 导入

4、引入 iconfont 出现问题

https://www.cnblogs.com/eddina/p/9552713.html

比如我这里就在 iconfont.css 文件加了一个 /src/assets/fonts/ 就生效了并且也没有报错

5、之前一直不清楚表单的ref属性，百度后发现 :ref 绑定控件，$refs 获取控件

6、很神奇的是！！后台的vue_api_server之前postman测试不成功，但是重新删除依赖包并且npm i 之后就好了

7、一个需要注意的逻辑

// 1. 将登录成功之后的 token，保存到客户端的 sessionStorage 中  因为sessionStorage是在会话期间进行存储，不能是localStorage
//   1.1 项目中出了登录之外的其他API接口，必须在登录之后才能访问
//   1.2 token 只应在当前网站打开期间生效，所以将 token 保存在 sessionStorage 中
        window.sessionStorage.setItem('token', res.data.token)
// 2. 通过编程式导航跳转到后台主页，路由地址是 /home
        this.$router.push('/home')

8、处理项目中ESlint语法报错问题 ESlint语法规范实际上就是将双引号改为单引号，将分号去掉

创建.prettierrc文件，将以下代码贴上去

{
  "semi":false,
  "singleQuote":true
}

9、这里有一个问题：引入Submenu组件后，最新的elementui组件库是，但是我引入就不生效，改为就正常显示了

10、引入图标的语法是 统一前缀el-icon

11、弹框dialog不显示，原本使用的是v-model 但是没绑定 改为 :visible.sync=“dialogVisible” 就对了 有可能是版本问题

12、ref指的是表单的引用

13、在Roles.vue文件中，使用了递归的方法去获取所有的三级列表，这说明在前端中算法的确很重要

14、接口文档怎么看呢 例如 roles/:roleId/rights 中的**:roleId**代表这是一个参数变量

15、在新建组件的时候，总是运行会出现错误，如下所示

Failed to mount component: template or render function not defined.

但是自己会好，注意vue那些保存了

16、树形的表格显示，需要自己安装插件，去vue面板，安装依赖vue-table-with-tree-grid，具体用法点击详情可以查看代码示例以及官方文档API

17、使用 组件的时候出现了级联选择器过长的情况处理看该网址https://blog.csdn.net/qq_40788998/article/details/105250084

另外的2个问题可以看自己的博客！https://blog.csdn.net/weixin_44478371?spm=1019.2139.3001.5343

18、如果用了封装组件的话，比如element，这个时候使用按键修饰符需要加上.native

例如@keyup.enter="handleInputConfirm(scope.row)"就不会生效，需要使用@keyup.enter.native=“handleInputConfirm(scope.row)”

19、后面{}内是请求体

const { data: res } = await this.$http.put(`
     categories/${this.cateId}/attributes/${this.editForm.attr_id},
     { attr_name: this.editForm.attr_name, attr_sel: this.activeName }
)

vue项目中$http的get请求需要加params请求参数

 this.$http.get('orders', { params: this.queryInfo })

20、在main.js全局定义一个格式化时间的过滤器

// 全局定义一个格式化时间的过滤器*
Vue.filter('dateFormat', function(*originVal*) {
 const dt = new Date(*originVal*)
 const y = dt.getFullYear()
 const m = (dt.getMonth() + 1 + '').padStart(2, '0')
 const d = (dt.getDate() + '').padStart(2, '0')
 const hh = (dt.getHours() + '').padStart(2, '0')
 const mm = (dt.getMinutes() + '').padStart(2, '0')
 const ss = (dt.getSeconds() + '').padStart(2, '0')
 return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

调用

<el-table-column label="创建时间"
             prop="add_time"
             width="140px">
     <template slot-scope="scope">{{scope.row.add_time | dateFormat}}</template>
     </el-table-column>

21、使用upload组件上传图片时有个问题，一是action是后台请求路径的全称，二是根据main.js拦截器的要求要配置header属性，否则图片不会上传成功

// 图片上传的headers请求头对象*
   headerObj: {
    Authorization:window.sessionStorage.getItem('token'),
   },

22、富文本编辑器

按照视频里的来做，富文本编辑器没有生效；之后很奇怪一下子生效了，有可能是main.js没保存好？？不过我新加了一个依赖项quill 之后把quill卸载也没有什么改变 可能这就是代码的神奇之处吧

安装vue-quill-editor依赖项

// 导入富文本编辑器
import VueQuillEditor from 'vue-quill-editor'

// 导入富文本编辑器对应的样式*
import 'quill/dist/quill.core.css' *// import styles*
import 'quill/dist/quill.snow.css' *// for snow theme*
import 'quill/dist/quill.bubble.css' *// for bubble theme

// 将富文本编辑器，注册为全局可用的组件*
Vue.use(VueQuillEditor)

<quill-editor v-model="addForm.goods_introduce"></quill-editor>

23、在添加商品表单， 需要对goods_cat做数组转字符串的处理，因为这个和级联选择器做了动态绑定，所以不能直接使用this.addForm.goods_cat=this.addForm.goods_cat.join(’,’)

这里需要用到***深拷贝*** 安装依赖lodash

在Add.vue文件下

import _ from 'lodash'

// lodash cloneDeep(obj)
const form = _.cloneDeep(this.addForm)
form.goods_cat = this.addForm.goods_cat.join(',')

24 、表格加索引列 直接

<el-table-column type="index"></el-table-column>

25、做快递物流那里接口失效了，需要自己写一个固定数据

timeline那里src文件改一下 是item.vue 直接复制过来的是item(1).vue

时间线怎么做呢？？？

a、将timeline和timeline-item两个文件夹直接复制到plugins

b、在element.js挂载组件

import {Timeline,TimelineItem} from 'element-ui'

Vue.use(Timeline)
Vue.use(TimelineItem)

c、在相应的vue文件的中导入样式，例如：

26、echarts的使用

安装echarts依赖包

// 1.导入 echarts
import * as echarts from 'echarts'

<!-- 2.为ECharts准备一个具备大小（宽高）的Dom -->*
<div id="main" style="width: 750px;height:400px;"></div>

// 在vue文件中，要把这些放在mounted函数中，原因如下：
// 执行到mounted  此时页面上的元素已经被渲染完毕了！
async mounted() {
  // 3.基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main'))
}

// 4.准备数据和配置项
var option = {
        title: {
          text: 'ECharts 入门示例'
        },
        tooltip: {},
        legend: {
          data: ['销量']
        },
        xAxis: {
          data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
        },
        yAxis: {},
        series: [
          {
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20]
          }
        ]
      };

 // 5.展示数据
 myChart.setOption(option)

这里用到了***lodash深拷贝***，同23中的引用方式，目的是合并两个对象

import _ from 'lodash'
// merge是lodash本身提供的
const result = _.merge(res.data, this.options)

https://echarts.apache.org/handbook/zh/get-started/#%E7%BB%98%E5%88%B6%E4%B8%80%E4%B8%AA%E7%AE%80%E5%8D%95%E7%9A%84%E5%9B%BE%E8%A1%A8