vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面

写后台商品页面的思路

1、分析功能需求

管理商品必须要实现的几个功能

  • 1、展示所有商品
  • 2、添加商品
  • 3、修改商品

2、分析数据结构

先看一下数据结构

首先商品分类

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第1张图片
选区_014.png

类下面的商品详情

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第2张图片
选区_016.png

3、 实现功能步骤

思路:

1、将添加商品类,添加商品,修改商品分离成单独的组件

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第3张图片
选区_017.png

2、添加路由

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第4张图片
选区_018.png
vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第5张图片
选区_019.png

3、 先写出添加商品页面

挂在路由打开mangerprods.vue





4、写添加商品类别页面





5、写添加商品页面







6、引入markdown编辑器

cnpm i mavon-editor --save

引用
main.js

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第6张图片
选区_020.png

使用

再addprod.vue中直接使用

引用mavoneditor

选区_025.png

mavonedior上传图片操作

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第7张图片
选区_026.png

与服务端进行交互的API

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第8张图片
选区_027.png

因为markdown编辑器是具有实时预览功能,如果我们将本地图片插入,执行步骤是这样的
1、他会立即执行上传图片操作,并获取服务端返回的图片地址
2、获取到图片地址,mavon会立刻向服务端请求这个地址来获取这张图片,并渲染出来

  • 7 写服务端代码
vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第9张图片
选区_028.png
vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第10张图片
选区_029.png

4、测试效果

up.gif

效果是合适的

vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面_第11张图片
选区_030.png

同时后端也记录了3次上传和3次获取图片

5、遇见的坑

我当时写服务端代码的时候,再上传图片的地方,我将
const form = new formidable.IncomingForm()
写在了页面的开头,并没有将formidable的实例化卸载每一次上传的过程中,这导致了一个问题,上传第一张图片可以成功,但上传第二张开始就发生错误
Can't set headers after they are sent
这是因为我所有的req解析都在同一个实例化的form里面,第一次执行upload成功时,form会调用一次form.on('end'),第二次upload成功时,form也会调用一次form.on('end'),这样就产生了Can't set headers after they are sent这个错误

6、感谢segmentfault的 @程序猿小卡_casper

再此非常感谢segmentfault的 @程序猿小卡_casper,无私的帮助我解决了问题并细心的讲解错误原因,谢谢!!,同时也感谢其他真心帮助我解决问题的朋友!

又兴趣的朋友可以看看这个问题的原题

用nodejs的formidable上传图片,第一张上传成功,再上传发生错误Can't set headers after they are sent

https://segmentfault.com/q/1010000012722383

7 、github地址:

learn:https://github.com/lyttonlee/learn
server:https://github.com/lyttonlee/express-server-for-learn

你可能感兴趣的:(vue vue-router vuex element-ui axios的学习笔记(十九)写后台商品管理页面)