电商项目前端

缺乏、安全感 2023-06-28 11:11 170阅读 0赞

### 电商项目前端 ###

*  axios POST提交数据的三种请求方式(Content-Type)写法
 *  Vue+axios实现登陆拦截，axios封装(报错,鉴权,跳转,拦截,提示)
 *  项目架构
 *  api接口样式

# axios POST提交数据的三种请求方式(Content-Type)写法 #

[axios POST提交数据的三种请求方式(Content-Type)写法][axios POST_Content-Type]

# [Vue+axios实现登陆拦截，axios封装(报错,鉴权,跳转,拦截,提示)][Vue_axios_axios] #

//登录拦截
    router.beforeEach((to,from,next) => { 
      /** * let router = new Router({ routes: [ { path: 'myOrder', name: 'MyOrder', component: MyOrder, meta: { requireLogin:true, } ] */
      if(to.meta.requireLogin){    //必须登录过后才能访问该页面，否则就跳转到登录页面
        if(store.state.clientToken){   //必须携带token才能放行
          next()
        }else{ 
          next({ 
            path: '/login',
            query:{ redirect: to.fullPath}
          })
        }
      }else{ 
        next();
      }
    });
    # axios的使用教程
    ```js
    //用户登录
    export function login(data){ 
    	const res = axios.post('/api/user/login',data);
    	return new Promise((resolve,reject)=>{ 
        /** * resolve 即返回的结果是我们想要的，就使用resolve将请求成功的数据放进函数，方便 * const res = login({ account:account, pwd:pwd }); res .then((data)=>{ this.setClientName(data.name); this.setClientToken(data.token); this.$router.push('/'); }) .catch((e)=>{ alert("===========================7272772727272=====mallLogin") alert(e) })处理 */
    		res
    		.then((result)=>{ 
    	        if(result.status===200){ 
    	        	return result.data;
    	        }else{ 
    	        	reject(result.status)
    	        }
    	    })
    	    .then((json)=>{ 
        		if(json.code===200){ 
                    resolve(json.data);
                }else{ 
                    reject(json.message);
                }
        	})
    	    .catch((e)=>{ 
    	    	reject(e.toString())
    	    })
    	})
    }

# 项目架构 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 2]  
![在这里插入图片描述][20200109150630825.gif]  
![在这里插入图片描述][20200109150739146.gif]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 3]

# api接口样式 #

![在这里插入图片描述][20200109092042866.png]  
http://localhost:3000/api/admin/getType

{ 
      "code": 0,
      "data": [
        { 
          "id": 1,
          "name": "时尚服饰"
        },
        { 
          "id": 2,
          "name": "数码产品"
        }
        ]
    }

http://localhost:3000/api/mall/getGoodsByType?typeId=-1

{ 
      "code": 0,
      "data": [
        { 
          "id": 19,
          "img": "https://img.alicdn.com/imgextra/i3/20201002/O1CN01dlKp411JGxRPE2Lrb_!!0-saturn_solar.jpg_220x220.jpg_.webp",
          "name": "科沃斯地宝T5MAX扫地机器人智能家用全自动吸尘器擦拖地扫一体机",
          "price": 2639,
          "typeId": 6
        },

http://localhost:3000/api/mall/getOrderByState?state=0&token=eyJhbGciOiJIUzI1NiJ9.Mg.UiHiEfg29Q41u7ALFQglrHY3piylzng9lh0vaR1pjGE

"data": [
        { 
          "id": 11,
          "createtime": "01-10 02:36",
          "goods": { 
            "img": "https://img.alicdn.com/imgextra/i1/15528849/O1CN01f3yTxD2FEtMr7rKjW_!!0-saturn_solar.jpg_220x220.jpg_.webp",
            "id": 9,
            "goodsDetailId": 17,
            "name": "Deep 60cm小型摄影棚淘宝拍照补光灯柔光箱套装大型led摄影灯箱背景布纸简易迷你便携静物拍摄台道具器材设备",
            "spec": "无",
            "unitPrice": 333
          },
          "goodsNum": 1,
          "amount": 333,
          "state": 0,
          "hasComment": false
        }
      ]

根据商品id获取商品信息 http://localhost:3000/api/mall/getGoodsInfo?id=1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 4]

"data": { 
        "img": "https://img.alicdn.com/imgextra/i2/56151572/O1CN01f4EZpd1NU1B8MsabE_!!0-saturn_solar.jpg_220x220.jpg_.webp",
        "name": "新款时尚胖子肥佬大码男装冬装羽绒服加肥加大休闲宽松外套中长款",
        "desc": "正品保证 极速退款 赠运费险 七天无理由退换",
        "typeId": 1,
        "specs": [
          { 
            "id": 1,
            "specName": "L",
            "stockNum": 5,
            "unitPrice": 168
          },
          { 
            "id": 2,
            "specName": "XL",
            "stockNum": 3,
            "unitPrice": 168
          }
        ]

http://localhost:3000/api/mall/getOrderByState?state=0&token=eyJhbGciOiJIUzI1NiJ9.Mg.UiHiEfg29Q41u7ALFQglrHY3piylzng9lh0vaR1pjGE  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 5]

{ 
      "code": 0,
      "data": [
        { 
          "id": 14,
          "createtime": "01-11 01:04",
          "goods": { 
            "img": "https://img.alicdn.com/bao/uploaded/i3/3965781268/TB2US.pF3aTBuNjSszfXXXgfpXa_!!3965781268-0-item_pic.jpg",
            "id": 2,
            "goodsDetailId": 3,
            "name": "2019新款时尚长袖雪纺衬衫",
            "spec": "M",
            "unitPrice": 147
          },
          "goodsNum": 1,
          "amount": 147,
          "state": 0,
          "hasComment": false
        },

http://localhost:3000/api/mall/getOrderByState?state=-1&token=eyJhbGciOiJIUzI1NiJ9.Mg.UiHiEfg29Q41u7ALFQglrHY3piylzng9lh0vaR1pjGE  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 6]

http://localhost:3000/api/user/data?token=eyJhbGciOiJIUzI1NiJ9.Mg.UiHiEfg29Q41u7ALFQglrHY3piylzng9lh0vaR1pjGE  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 7]

{ 
      "code": 0,
      "data": { 
        "id": 2,
        "headimg": "http://tvax4.sinaimg.cn/crop.0.0.480.480.180/768c39d5ly8fjje1d0teej20dc0dcq35.jpg",
        "email": "2915213026@qq.com",
        "nickname": "远行",
        "recipient": "张三",
        "address": "遵义",
        "phone": "13123623446"
      }
    }

从token中获取用户的id

//获取user基本资料
    exports.getData = async (ctx)=>{ 
      const id = jwt.verify(ctx.query.token,'chambers');
      try{ 
        const user = await UserModel.findOne({ 
            attributes:['id','email','nickname','recipient','address','phone','headimg'],
            where: { 
              id: id
            }
        })
        if(!user){ 
            ctx.body = { 
              code:10000,
              message:'该用户不存在'
            };
            return;
        }
        ctx.body = { 
          code:0,
          data:{ 
            id:user.id,
            headimg:user.headimg,
            email:user.email,
            nickname:user.nickname,
            recipient:user.recipient,
            address:user.address,
            phone:user.phone,
          }
        }
      }catch(e){ 
        ctx.body = { 
          code:10000,
          message:'网络错误'
        }
      }
    }

http://localhost:3000/api/mall/getGoodsMsg?id=1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 8]

{ 
      "code": 0,
      "data": [
        { 
          "id": 6,
          "content": "有加大号码",
          "state": 1,
          "asker": "远行",
          "time": "01-10 23:17",
          "reply": { 
            "id": 7,
            "content": "有的",
            "time": "01-10 23:17"
          }
        },

http://localhost:3000/api/mall/getGoodsComment?goodsId=1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 9]

{ 
      "code": 0,
      "data": { 
        "rate": 70.9090909090909,
        "commentList": [
          { 
            "id": 20,
            "user": { 
              "nickname": "goodshred",
              "headimg": "http://tvax4.sinaimg.cn/crop.0.0.480.480.180/768c39d5ly8fjje1d0teej20dc0dcq35.jpg"
            },
            "score": 80,
            "comment": "圣诞氛围",
            "time": "01-10 23:15",
            "specName": "L"
          },

http://localhost:3000/api/mall/getGoodsByType?typeId=1  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 10]

{ 
      "code": 0,
      "data": [
        { 
          "id": 6,
          "img": "https://img.alicdn.com/imgextra/i1/96491109/O1CN01yUT90k1K3xndv6zbS_!!0-saturn_solar.jpg_220x220.jpg_.webp",
          "name": "花花公子秋冬男士直筒牛仔裤百搭宽松韩版修身加绒加厚长裤子潮流",
          "price": 699,
          "typeId": 1
        },

界面可参考------淘宝/京东

[github上项目参考的 是网易严选][github_]

[ui-mall的地址][ui-mall]

[ui-admin-mall的地址][ui-mall]

[server-admin-mall的参考项目的地址][server-admin-mall]

[参考码云上的开源项目][ui-mall]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 11]  
全部model文件里的squ都放开注释  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 12]  
再npm run start 就ok了。

[axios POST_Content-Type]: https://segmentfault.com/a/1190000015261229?utm_source=tag-newest
[Vue_axios_axios]: https://blog.csdn.net/H1069495874/article/details/80057107
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200109145205290.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200109150124727.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200109150608336.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[20200109150630825.gif]: https://img-blog.csdnimg.cn/20200109150630825.gif
[20200109150739146.gif]: https://img-blog.csdnimg.cn/20200109150739146.gif
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200109145349303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[20200109092042866.png]: https://img-blog.csdnimg.cn/20200109092042866.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200110123149816.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20200110124840112.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200110125236833.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20200110125457946.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 8]: https://img-blog.csdnimg.cn/20200110152632932.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20200110152559334.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 10]: https://img-blog.csdnimg.cn/20200110152530341.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[github_]: http://you.163.com/
[ui-mall]: https://github.com/yingpengsha/vue-mall
[server-admin-mall]: https://github.com/macrozheng/mall
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20200108221721407.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/2020010822180872.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMDYzMTQx,size_16,color_FFFFFF,t_70