电商项目前端 - Go语言中文社区

电商项目前端

电商项目前端

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": "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
在这里插入图片描述

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

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/qq_41063141/article/details/103899144
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。
  • 发表于 2020-06-28 03:47:49
  • 阅读 ( 996 )
  • 分类：前端

你可能感兴趣的文章

精选的优质文章

0 条评论

请先 登录 后评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看

来源51CTO

如果觉得我的文章对您有用，请随意打赏。你的支持将鼓励我继续创作！