vue+element-ui商城后台管理系统(day05-06)

day05-06

---

一. 实现商品列表goods-list

二. 自己做遇到的问题

三. 基本布局实现

四. 内容渲染

五. 项目优化

六. 项目上线

---

一. 实现商品列表goods-list

1.1 创建新分支

1.2 根据queryInfo属性的数据获取当前页面的数据

1.3 渲染页面

• 时间过滤器(Vue全局注册, 把时间戳格式化)
• .padStart(2, '0')如果字符串不足两位, 前面补齐一个’0’

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}`
})

• 搜索, 删除, 编辑功能

1.4 新增功能

• 创立新路由
• 页面结构:
  • 面包屑 卡片 警告栏
  • 步骤条
    • 动态为其赋值上索引属性
    • 步骤条绑定的是数字
  • 加入侧边栏
• 添加表单
  • 嵌套关系: form 包裹 tabs
  • 设置label位置的属性: label-position
• 添加表单属性
  • 商品分类(级联选择器)
    • 获取/categories的商品分类数据
    • 判断选中是否为三级不是的话变为空数组
  • 没有选择商品分类不能跳转
    • 加入tabs的一个拦截函数before-leave
      • return false的话则不会触发菜单切换
  • 获取动态参数
    • 给tabs绑定tab-click, 再进行判断
  • 使用checkbox渲染标签
    • 复选框样式优化(重置margin属性)
  • 获取静态参数
    • 给tabs绑定tab-click
  • 图片上传模块
    • 上传出错: 无效token
    • 加上header属性
    • 通过on-success绑定一个事件并传回response把响应的临时路径保存到表单数组
    • 移除图片
      • 添加on-remove事件的回调函数
      • 参数可以获取到file=>这个图片信息, 然后再addForm中把图片splice掉
    • 图片预览
      • 通过一个dialog进行实现
    • 提交表单
      • 拷贝级联表双向绑定的数组,并拷贝一份给form

二. 自己做遇到的问题

2.1 商品分类table的lazy-load失效

• :tree-props要有haschildren属性

2.2 el-row, el-col问题

• 如果不给el-col都加上span属性, 不会显示在同一行?

2.3 全局style

• 在vue文件可以引入两个style可以一个有scoped一个没有

2.4 tabs-pane绑定的name

• 在before-leave中得以看出他的name是string类型

2.5 复选框发现点击一个会消失一个

• 浅拷贝:

  • this.addGoodForm.goods_vals = [...this.manyParamsList]
  • 这样的做法是让表单数据与传来的参数数据第一层分离,
  • 但是出现问题点击一个会选择全部
    • 原因: 只有第一层拷贝, 剩下的也是直接引用
    • 解决方法: 使用深拷贝

• 深拷贝

  • ① lodash 插件

  • ② JSON.parse(JSON.stringify( targetObj )) 转换为JSON格式再转换回来

  • import Vue from 'vue'
    const deepClone = obj => {
        // 判断类型都否需要深拷贝
        const isObject = args => (typeof args === 'object' || typeof args === 'function') && typeof args !== 'undefined'
        // 不是则报一个错
        if (!isObject) throw new Error('Not Reference Types')
        // 判断是否为数组并赋予Array原型
        let newObj = Array.isArray(obj) ? [...obj] : { ...obj }
        Reflect.ownKeys(newObj).map(key => {
            // 判断子结点是仍为对象, 如果是则递归
            newObj[key] = isObject(obj[key]) ? deepClone(obj[key]) : obj[key]
        })
        return newObj
    }
    // 全局导入vue
    Vue.prototype.$deepClone = deepClone
    

• 用这个方法可以把参数列表与复选框的值给分离

2.6 图片上传

• file-list的作用???
• 图片的src拼接要加上协议比如开头要加http://

三. 基本布局实现

四. 内容渲染

4.1 省份级联表

• 传入js文件

4.2 绘制echarts图标

• https://echarts.apache.org/zh/index.html
• 可以用深拷贝把请求回来的数据跟options合并

五. 项目优化

5.1 项目优化策略

• 生成打包报告
• 第三方启用CDN
• Element-UI组件按需加载
• 路由懒加载
• 首页内容指定

5.2 导入cdn发现的问题

• cdn网站

  • https://cdn.jsdelivr.net/
  • http://staticfile.org/

• Import in body of module; reorder to top

  • import要在所有vue.use()之前
  • element要把babel配置的东西去掉
    • 下面是官方要求配置的东西
      

• vue-quill-editor需要引入的的`cdn

<script src="https://cdn.staticfile.org/quill/1.3.7/quill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-quill-editor@3.0.6/dist/vue-quill-editor.js"></script>
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.core.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.snow.min.css">
<link rel="stylesheet" href="https://cdn.staticfile.org/quill/1.3.7/quill.bubble.min.css">

5.3 人性化

• 进度条展示
  • NProgress在axios拦截器中添加
    • NProgress.start()
    • NProgress.done()
    • 在axios上配置

// 进度条
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

axios.interceptors.request.use(config => {
  console.log(NProgress)
  NProgress.start()
  config.headers.Authorization = window.sessionStorage.getItem('token')
  return config
})

axios.interceptors.response.use(config => {
  NProgress.done()
  return config
})

5.4 serve与build

• serve发现很多eslint的警告

  • 一一按规范调整

• build很多console.log警告

  • 添加transform-remove-console插件并在胚子文件的plugins中配置

  • 但是在serve与build阶段都会移除

    • 按需添加插件

      • const prodPlugins = []
        if (process.env.NODE_ENV === 'production') {
            prodPlugins.push('transform-remove-console')
        }
        

5.5 configureWebpack与chainWebpak

• configureWebpack通过操作对象

• chainWebpak通过链式编程

  • 来达到修改webpack配置

• 通过chanin实现改变开发与发布模式的入口函数

  • module.exports = {
        chaninWebpack: config => {
            config.when(progress.enc.MODE_ENV === 'production', config => {
                config.entry('app').clear().add('./src/main-prod.js')
            })
        
        	config.when(progress.enc.MODE_ENV === 'development', config => {
                config.entry('app').clear().add('./src/main-dev.js')
            })
        }
    }
    

• 实现CDN打包资源

  • 通过externals加载外部CDN资源
  • {}中如果有axios: 'axios'的话就会查找index.html
  • element打包规则:
    • 不同上面方法要在externals中加入elementui属性
    • 直接在index.html中加入就可
  • css文件同理

5.6 开发与发布时候title不同名操作

• 通过在vue.config.js中加入自定义属性

  • config.plugin('html').tap(args => {
        args[0].isProd = true
        return args // 记得要return args
    })
    

• 在index.htm的title中使用判断语句<%= htmlWebpackPlugin.options.isProd ? '' : 'dev -' %>

5.7 路由懒加载

• ①安装@babel/plugin-syntax-dynamic-import
• ②babel.config.js配置声明插件
• ③讲路由改为按需加载的形式
  • const Foo = () => import(...) 这样已经是按需加载
  • const Foo = () => import(/* webpackChunkName: "group-one" */...)来实现按组划分

5.8 node部署压缩

const compression = require('compression')

app.use(compression())

六. 项目上线

6.1 项目打包

• 发现build完全部需要导入的文件都Failed to load resource: net::ERR_FILE_NOT_FOUND

• 问题: 我写的是相对路径倒是被解析成绝对路径

• 解决办法: 在vue.cnfig.js中加入

  • module.expots = {
        publicPath: './',
    }
    

6.2 申请https

• 配置HTTPS服务
• 申请SSL证书(https://freessl.org)
  
  .jpg)]

const https = require('https')
const fs = require('fs')
const options = {
    cert: fs.readFileSync('.pem')
    key: fs.readFileSync('.key')
}
// 443 https默认端口
https.createSetver(options, app).listen(443)

6.3 用PM2托管