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

写后台商品页面的思路

1、分析功能需求

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

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

2、分析数据结构

先看一下数据结构

首先商品分类

选区_014.png

类下面的商品详情

选区_016.png

3、 实现功能步骤

思路：

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

选区_017.png

2、添加路由

选区_018.png

选区_019.png

3、 先写出添加商品页面

挂在路由打开mangerprods.vue

4、写添加商品类别页面

5、写添加商品页面

6、引入markdown编辑器

cnpm i mavon-editor --save

引用
main.js

选区_020.png

使用

再addprod.vue中直接使用

引用mavoneditor

选区_025.png

mavonedior上传图片操作

选区_026.png

与服务端进行交互的API

选区_027.png

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

• 7 写服务端代码

选区_028.png

选区_029.png

4、测试效果

up.gif

效果是合适的

选区_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