電商項目前端

axios POST提交數據的三種請求方式(Content-Type)寫法

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

項目架構

api接口樣式

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

 "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

{
  "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

{
  "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": 3,
      "hasComment": true
    },

http://localhost:3000/api/user/data?token=eyJhbGciOiJIUzI1NiJ9.Mg.UiHiEfg29Q41u7ALFQglrHY3piylzng9lh0vaR1pjGE

{
  "code": 0,
  "data": {
    "id": 2,
    "headimg": "http://tvax4.sinaimg.cn/crop.0.0.480.480.180/768c39d5ly8fjje1d0teej20dc0dcq35.jpg",
    "email": "[email protected]",
    "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

{
  "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

{
  "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

{
  "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
    },