⿊马VUE 电商管理后台笔记记录
电商后台项⽬遇到的问题
1、.eslintrc.js 中 ‘@vue/standard’ 需要删掉或者注释掉
2、不能直接在 ui ⾥⾯安装 less-loader 和less 依赖，因为版本问题，最好是安装低版本
3、-ui 是按需导⼊的，因此需要在 plugins ⽂件夹下的 element.js 导⼊
4、引⼊ iconfont 出现问题
⽐如我这⾥就在 iconfont.css ⽂件加了⼀个 /src/assets/fonts/ 就⽣效了并且也没有报错
5、之前⼀直不清楚表单的ref 属性，百度后发现 :ref 绑定控件，$refs 获取控件
6、很神奇的是！！后台的vue_api_server 之前postman 测试不成功，但是重新删除依赖包并且npm i 之后就好了
7、⼀个需要注意的逻辑
8、处理项⽬中语法报错问题 ESlint 语法规范实际上就是将双引号改为单引号，将分号去掉
创建.prettierrc⽂件，将以下代码贴上去
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
18、如果⽤了封装组件的话，⽐如element，这个时候使⽤按键修饰符需要加上.native
例如@="w)"就不会⽣效，需要使⽤@native=“w)”npm install less-loader@4.1.0 -D`
npm install less@3.9.0 -D // 1.
将登录成功之后的 token ，保存到客户端的 sessionStorage 中 因为
sessionStorage 是在会话期间进⾏存储，不能是localStorage
// 1.1 项⽬中出了登录之外的其他API 接⼝，必须在登录之后才能访问
// 1.2 token 只应在当前⽹站打开期间⽣效，所以将 token 保存在 sessionStorage 中
window.sessionStorage.setItem('token', ken)
// 2. 通过编程式导航跳转到后台主页，路由地址是 /home
this.$router.push('/home')
{
"semi":false,
"singleQuote":true
}
19、后⾯{}内是请求体
vue项⽬中$的get请求需要加params请求参数
20、在main.js全局定义⼀个格式化时间的过滤器
调⽤
21、使⽤upload组件上传图⽚时有个问题，⼀是action是后台请求路径的全称，⼆是根据main.js的要求要配置header属性，否则图⽚不会上传成功
22、富⽂本编辑器
按照视频⾥的来做，富⽂本编辑器没有⽣效；之后很奇怪⼀下⼦⽣效了，有可能是main.js没保存好？？不过我新加了⼀个依赖项quill 之后把quill卸载也没有什么改变 可能这就是代码的神奇之处吧安装vue-quill-editor依赖项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 }
) this.$('orders', { params: this.queryInfo })
// 全局定义⼀个格式化时间的过滤器*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">{{w.add_time | dateFormat}}</template>
</el-table-column>
// 图⽚上传的headers 请求头对象*
headerObj: {
Authorization:Item('token'),
},
// 导⼊富⽂本编辑器
import VueQuillEditor from 'vue-quill-editor'
//
导⼊富⽂本编辑器对应的样式*
import 'quill/ss' *// import styles*
import 'quill/dist/quill.snow.css' *// for snow theme*
import 'quill/dist/quill.bubble.css' *// for bubble theme
// 将富⽂本编辑器，注册为全局可⽤的组件*
Vue.use(VueQuillEditor)
23、在添加商品表单， 需要对goods_cat做数组转字符串的处理，因为这个和级联选择器做了动态绑定，所以不能直接使⽤ds_cat=ds_cat.join(’,’)
这⾥需要⽤到***深拷贝*** 安装依赖lodash
在Add.vue⽂件下
24 、表格加索引列 直接
25、做快递物流那⾥接⼝失效了，需要⾃⼰写⼀个固定数据
timeline那⾥src⽂件改⼀下 是item.vue 直接复制过来的是item(1).vue
时间线怎么做呢
a、将timeline和timeline-item两个⽂件夹直接复制到plugins
b、在element.js挂载组件
sessionstorage和localstoragec、在相应的vue⽂件的中导⼊样式，例如：
26、echarts的使⽤安装echarts依赖包
<quill-editor v-model="ds_introduce"></quill-editor>
import _ from 'lodash'
// lodash cloneDeep(obj)const form = _.cloneDeep(this.addForm)
<el-table-column type="index"></el-table-column>import {Timeline,TimelineItem} from 'element-ui'
Vue.use(Timeline)Vue.use(TimelineItem)// 1.
导⼊ echarts import * as echarts from 'echarts'
<!-- 2.为ECharts 准备⼀个具备⼤⼩（宽⾼）的Dom -->*
<div id="main" ></div>
// 在vue ⽂件中，要把这些放在mounted 函数中，原因如下：
// 执⾏到mounted 此时页⾯上的元素已经被渲染完毕了！
async mounted() {
// 3.基于准备好的dom ，初始化echarts 实例
var myChart = echarts.ElementById('main'))
}
这⾥⽤到了***lodash深拷贝***，同23中的引⽤⽅式，⽬的是合并两个对象// 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)
import _ from 'lodash'
// merge 是lodash 本⾝提供的
const result = _.merge(res.data, this.options)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论