电商项目前端

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

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

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

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

ui-mall的地址

ui-admin-mall的地址

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

参考码云上的开源项目

全部model文件里的squ都放开注释

再npm run start 就ok了。