前端学习（1857）vue之电商管理系统电商系统之配置api接口服务器并用postman调试接口

最新推荐文章于 2022-04-20 13:40:14 发布
最新推荐文章于 2022-04-20 13:40:14 发布
阅读量913 收藏 3
点赞数
分类专栏： # 歌谣--前端学习--总进程
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43392489/article/details/107598958
版权
本文介绍了如何在Vue电商管理系统中配置API接口服务器，并使用Postman进行接口调试。通过这个过程，开发者可以更好地理解和实践前后端交互以及接口测试的方法。
摘要由CSDN通过智能技术生成 
# 1. 电商管理后台 API 接口文档

## 1.1. API V1 接口说明

- 接口基准地址：`http://127.0.0.1:8888/api/private/v1/`
- 服务端已开启 CORS 跨域支持
- API V1 认证统一使用 Token 认证
- 需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
- 使用 HTTP Status Code 标识状态
- 数据返回格式统一使用 JSON

### 1.1.1. 支持的请求方法

- GET（SELECT）：从服务器取出资源（一项或多项）。
- POST（CREATE）：在服务器新建一个资源。
- PUT（UPDATE）：在服务器更新资源（客户端提供改变后的完整资源）。
- PATCH（UPDATE）：在服务器更新资源（客户端提供改变的属性）。
- DELETE（DELETE）：从服务器删除资源。
- HEAD：获取资源的元数据。
- OPTIONS：获取信息，关于资源的哪些属性是客户端可以改变的。

### 1.1.2. 通用返回状态说明

| *状态码* | *含义*                | *说明*                                              |
| -------- | --------------------- | --------------------------------------------------- |
| 200      | OK                    | 请求成功                                            |
| 201      | CREATED               | 创建成功                                            |
| 204      | DELETED               | 删除成功                                            |
| 400      | BAD REQUEST           | 请求的地址不存在或者包含不支持的参数                |
| 401      | UNAUTHORIZED          | 未授权                                              |
| 403      | FORBIDDEN             | 被禁止访问                                          |
| 404      | NOT FOUND             | 请求的资源不存在                                    |
| 422      | Unprocesable entity   | [POST/PUT/PATCH] 当创建一个对象时，发生一个验证错误 |
| 500      | INTERNAL SERVER ERROR | 内部错误                                            |
|          |                       |                                                     |

------

## 1.2. 登录

### 1.2.1. 登录验证接口

- 请求路径：login
- 请求方法：post
- 请求参数

| 参数名   | 参数说明 | 备注     |
| -------- | -------- | -------- |
| username | 用户名   | 不能为空 |
| password | 密码     | 不能为空 |

- 响应参数

| 参数名   | 参数说明    | 备注            |
| -------- | ----------- | --------------- |
| id       | 用户 ID     |                 |
| rid      | 用户角色 ID |                 |
| username | 用户名      |                 |
| mobile   | 手机号      |                 |
| email    | 邮箱        |                 |
| token    | 令牌        | 基于 jwt 的令牌 |

- 响应数据

```json
{
    "data": {
        "id": 500,
        "rid": 0,
        "username": "admin",
        "mobile": "123",
        "email": "123@qq.com",
        "token": "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1aWQiOjUwMCwicmlkIjowLCJpYXQiOjE1MTI1NDQyOTksImV4cCI6MTUxMjYzMDY5OX0.eGrsrvwHm-tPsO9r_pxHIQ5i5L1kX9RX444uwnRGaIM"
    },
    "meta": {
        "msg": "登录成功",
        "status": 200
    }
}
```

## 1.3. 用户管理

### 1.3.1. 用户数据列表

- 请求路径：users
- 请求方法：get
- 请求参数

| 参数名   | 参数说明     | 备注     |
| -------- | ------------ | -------- |
| query    | 查询参数     | 可以为空 |
| pagenum  | 当前页码     | 不能为空 |
| pagesize | 每页显示条数 | 不能为空 |

- 响应参数

| 参数名    | 参数说明     | 备注 |
| --------- | ------------ | ---- |
| totalpage | 总记录数     |      |
| pagenum   | 当前页码     |      |
| users     | 用户数据集合 |      |

- 响应数据

```json
{
    "data": {
        "totalpage": 5,
        "pagenum": 4,
        "users": [
            {
                "id": 25,
                "username": "tige117",
                "mobile": "18616358651",
                "type": 1,
                "email": "tige112@163.com",
                "create_time": "2017-11-09T20:36:26.000Z",
                "mg_state": true, // 当前用户的状态
                "role_name": "炒鸡管理员"
            }
        ]
    },
    "meta": {
        "msg": "获取成功",
        "status": 200
    }
}
```

### 1.3.2. 添加用户

- 请求路径：users
- 请求方法：post
- 请求参数

| 参数名   | 参数说明 | 备注     |
| -------- | -------- | -------- |
| username | 用户名称 | 不能为空 |
| password | 用户密码 | 不能为空 |
| email    | 邮箱     | 可以为空 |
| mobile   | 手机号   | 可以为空 |

- 响应参数

| 参数名   | 参数说明    | 备注 |
| -------- | ----------- | ---- |
| id       | 用户 ID     |      |
| rid      | 用户角色 ID |      |
| username | 用户名      |      |
| mobile   | 手机号      |      |
| email    | 邮箱        |      |

- 响应数据

```json
{
    "data": {
        "id": 28,
        "username": "tige1200",
        "mobile": "test",
        "type": 1,
        "openid": "",
        "email": "test@test.com",
        "create_time": "2017-11-10T03:47:13.533Z",
        "modify_time": null,
        "is_delete": false,
        "is_active": false
    },
    "meta": {
        "msg": "用户创建成功",
        "status": 201
    }
}
```

### 1.3.3. 修改用户状态

- 请求路径：users/:uId/state/:type
- 请求方法：put
- 请求参数

| 参数名 | 参数说明 | 备注                                        |
| ------ | -------- | ------------------------------------------- |
| uId    | 用户 ID  | 不能为空`携带在url中`                       |
| type   | 用户状态 | 不能为空`携带在url中`，值为 true 或者 false |

- 响应数据

```json
{
  "data": {
    "id": 566,
    "rid": 30,
    "username": "admin",
    "mobile": "123456",
    "email": "bb@itcast.com",
    "mg_state": 0
  },
  "meta": {
    "msg": "设置状态成功",
    "status": 200
  }
}
```

### 1.3.4. 根据 ID 查询用户信息

- 请求路径：users/:id
- 请求方法：get
- 请求参数

| 参数名 | 参数说明 | 备注                  |
| ------ | -------- | --------------------- |
| id     | 用户 ID  | 不能为空`携带在url中` |

- 响应参数

| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |

- 响应数据

```json
{
    "data": {
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "00000",
        "email": "new@new.com"
    },
    "meta": {
        "msg": "查询成功",
        "status": 200
    }
}
```

### 1.3.5. 编辑用户提交

- 请求路径：users/:id
- 请求方法：put
- 请求参数

| 参数名 | 参数说明 | 备注                        |
| ------ | -------- | --------------------------- |
| id     | 用户 id  | 不能为空 `参数是url参数:id` |
| email  | 邮箱     | 可以为空                    |
| mobile | 手机号   | 可以为空                    |

- 响应参数

| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |

- 响应数据

```json
/* 200表示成功，500表示失败 */
{
    "data": {
        "id": 503,
        "username": "admin3",
        "role_id": 0,
        "mobile": "111",
        "email": "123@123.com"
    },
    "meta": {
        "msg": "更新成功",
        "status": 200
    }
}
```

### 1.3.6. 删除单个用户

- 请求路径：users/:id
- 请求方法：delete
- 请求参数

| 参数名 | 参数说明 | 备注                       |
| ------ | -------- | -------------------------- |
| id     | 用户 id  | 不能为空`参数是url参数:id` |

- 响应参数
- 响应数据

```json
{
    "data": null,
    "meta": {
        "msg": "删除成功",
        "status": 200
    }
}
```

### 1.3.7. 分配用户角色

- 请求路径：users/:id/role
- 请求方法：put
- 请求参数

| 参数名 | 参数说明 | 备注                       |
| ------ | -------- | -------------------------- |
| id     | 用户 ID  | 不能为空`参数是url参数:id` |
| rid    | 角色 id  | 不能为空`参数body参数`     |

- 响应参数

| 参数名  | 参数说明 | 备注 |
| ------- | -------- | ---- |
| id      | 用户 ID  |      |
| role_id | 角色 ID  |      |
| mobile  | 手机号   |      |
| email   | 邮箱     |      |

- 响应数据

```json
{
    "data": {
        "id": 508,
        "rid": "30",
        "username": "asdf1",
        "mobile": "123123",
        "email": "adfsa@qq.com"
    },
    "meta": {
        "msg": "设置角色成功",
        "status": 200
    }
}
```

## 1.4. 权限管理

### 1.4.1. 所有权限列表

- 请求路径：rights/:type
- 请求方法：get
- 请求参数

| 参数名 | 参数说明 | 备注                                                         |
| ------ | -------- | ------------------------------------------------------------ |
| type   | 类型     | 值 list 或 tree , list 列表显示权限, tree 树状显示权限,`参数是url参数:type` |

- 响应参数

| 参数名   | 参数说明     | 备注 |
| -------- | ------------ | ---- |
| id       | 权限 ID      |      |
| authName | 权限说明     |      |
| level    | 权限层级     |      |
| pid      | 权限父 ID    |      |
| path     | 对应访问路径 |      |

- 响应数据 type=list

```json
  {
    "data": [
        {
            "id": 101,
            "authName": "商品管理",
            "level": "0",
            "pid": 0,
            "path": null
        },
        {
            "id": 102,
            "authName": "订单管理",
            "level": "0",
            "pid": 0,
            "path": null
        }
    ],
    "meta": {
        "msg": "获取权限列表成功",
        "status": 200
    }
}
```

type=tree

```json
  {
    data: [
      {
        id: 101,
        authName: '商品管理',
        path: null,
        pid: 0,
        children: [
          {
            id: 104,
            authName: '商品列表',
            path: null,
            pid: 101,
            children: [
              {
                id: 105,
                authName: '添加商品',
                path: null,
                pid: '104,101'
              }
            ]
          }
        ]
      }
    ],
    meta: {
      msg: '获取权限列表成功',
      status: 200
    }
  }
```

### 1.4.2. 左侧菜单权限

- 请求路径：menus
- 请求方法：get
- 响应数据

```json
{
    "data":
        {
            "id": 101,
            "authName": "商品管理",
            "path": null,
            "children": [
                {
                    "id": 104,
                    "authName": "商品列表",
                    "path": null,
                    "children": []
                }
            ]
        }
    "meta": {
        "msg": "获取菜单列表成功",
        "status": 200
    }
}
```

## 1.5. 角色管理

### 1.5.1. 角色列表

- 请求路径：roles

- 请求方法：get

- 响应数据说明

  + 第一层为角色信息

  - 第二层开始为权限说明，权限一共有 3 层权限
  - 最后一层权限，不包含 `children` 属性

- 响应数据

```json
{
    "data": [
        {
            "id": 30,
            "roleName": "主管",
            "roleDesc": "技术负责人",
            "children": [
                {
                    "id": 101,
                    "authName": "商品管理",
                    "path": null,
                    "children": [
                        {
最低0.47元/天 解锁文章
前端小歌谣
关注
专栏目录
Vue电商后台管理系统后台API接口服务器
08-10
Vue 电商后台管理系统后台 API 接口服务器
Vue 电商后台管理系统后台 API 接口服务器.rar
11-14
Vue 电商后台管理系统后台 API 接口服务器，里面有数据库脚本，大家可以下载自己运行，此资料仅供学习，谢谢
在Vue中使用Postman与json-server进行接口测试
Fyn_Andersen的博客
09-07 1444
在我们平时开发中，特别是需要与接口打交道时，无论是写接口还是用接口，拿到接口后肯定都得提前测试一下，这样的话就非常需要有一个比较给力的Http请求模拟工具，现在流行的这种工具也挺多的，像火狐浏览器插件-RESTClient，Chrome浏览器插件-Postman等等。我使用的是Postman。 JSON-Server 是一个 Node 模块，运行 Express 服务器，你可以指定一个 json ...
测试平台系列(12) 编写类postman页面(1)
米洛的博客
03-11 927
编写类postman页面(上) 回顾 上一节我们已经编写好了requests请求相关的方法，那么现在我们就把它赋能到前端。 还记得之前说过对请求参数做校验的事情吗，恰好今天面试某潮鞋app的时候面试官问到了我，哈哈我也给不出答案，面试官推荐了一款叫pydantic的工具，后面有空我去试试看。 开始编写我们的第一个页面 ps: 有条件的建议弄2个屏幕，这样开发效率更高，因为你在写样式，那边也跟着在更新。 这里我还没有规划好具体的页面内容，所以弄一个调试页面，专门用来发送http请求，后续可能会隐藏掉。 新建
2021 Vue全家桶开发电商管理系统（Element-UI）02-配置API接口服务器并调试接口
一只蒻蒻的博客
01-06 1301
前期准备 下载MySql、Navicat。 在Navicat中创建一个mydb数据库，执行vueShop-api-server/db/mydb.sql，成功创建数据库。 电商管理后台Node服务器接口下载地址： 链接：https://pan.baidu.com/s/1oYsjFQzIxclvezljllbpkw 提取码：qzp0 复制这段内容后打开百度网盘手机App，操作更方便哦 内含服务器所有东西及API文档。 配置API接口并测试 下载Postman调试工具，用于测试后台项目接口是否正常。自行注册
Vue拦截器
weixin_42766327的博客
08-08 802
拦截器分类 在请求或响应被 then 或 catch 处理前拦截他们，分为请求拦截器和响应拦截器； 示意图 请求拦截器和响应拦截器 　一般在请求拦截器中增加标识token或其他请求配置，在响应拦截器中对统一错误或状态码进行处理(跳转统一页面如登录) // 添加请求拦截器 axios.interceptors.request.use(function (config) { //...
vuejs 前端和服务端交互api接口定义范例
Web魔法师
06-16 1590
记录一下学习过程中，vuejs 前后端api接口定义的范例，供后面学习参考： import request from "@/utils/request"; import axios from "axios"; const BASE_URL="http://192.168.1.1:39090/api/v1";//定义公共url,调用时，会把BASE_URL和方法中的url 进行拼接 export function fetchclientList(query) { return axios.requ
电商管理后台 API 接口文档.md
07-18
电商管理后台 API 接口文档
Spring Boot + vue-element 开发个人博客项目实战教程（九、Postman测试接口）
码上言
11-09 6312
前言 前面的功能模块写完了，项目也能跑起来了，但是功能到底有没有用，有没有bug，数据能不能保存到数据库中等都需要我们去验证，总不能写了就不管了，能跑就行，然后扔给前端，这样会挨骂的哈哈，我们要确保自己写的代码能调试通，才能交付给前端开发。我们大多数开发都是使用的Postman进行测试接口的，非常的方便，接下来我们就一起学习Postman，加油猿人！ 一、Postman介绍 1、什么是Postman？ Postman是一个接口测试工具，在做接口测试的时候，Postman相当于一个客户端，它可以模拟用户发起的
vue-shop实战api接口文档-----主要是为了能在线查看------目录在左下角广告下面
huanlingwei的博客
07-30 743
1. 电商管理后台 API 接口文档 1.1. API V1 接口说明 接口基准地址：http://127.0.0.1:8888/api/private/v1/ 服务端已开启 CORS 跨域支持 API V1 认证统一使用 Token 认证 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌 使用 HTTP Status Code 标识状态 数据返回格式统一使用 JSON 1.1.1. 支持的请求方法 GET（SELECT）：从服务器取出资源（一项或多项）
Vue2.x——基础教程
qqxhb 资源共享
05-20 842
简介 Vue.js是一套构建用户界面的渐进式框架。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。另一方面，Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件 。Vue.js 自身不是一个全能...
提示错误POST http://127.0.0.1:8888/api/private/v1/login/login
gyz15731998001的博客
04-20 3577
再次运行项目时console报错POST http://127.0.0.1:8888/api/private/v1/login/login 服务器没有打开，后台的数据库phpstudy也总是启动失败，运行app.js的时候显示如下： 按照网上的说法：（试了后仍然不行） 解决办法: 不需要上面的删除再npm i 的方法 , 我的phpstudy安装在了d盘，用管理员身份打开phpstudy就行了 ...
基于Vue的电商后台管理系统（2）
wish_way的博客
07-14 1084
基于Vue的电商管理系统(2) 上一节已经实现该系统的登陆界面、路由、登录、退出及导航守卫功能，本期将继续完善该系统的以下功能：从后端获取后台列表数据并渲染到前端页面、用户列表的展示、修改、删除和添加。 后台页面布局 1.实现后台首页的基本布局 2.实现左侧菜单栏 3.实现用户列表展示 4.实现添加用户 本系统后台将采用Element UI 中的Container布局容器。 基本结构如下： ...
项目接口
weixin_44908855的博客
09-20 2504
1. 电商管理后台 API 接口文档 1.1. API V1 接口说明 接口基准地址：http://127.0.0.1:8888/api/private/v1/ 服务端已开启 CORS 跨域支持 API V1 认证统一使用 Token 认证 需要授权的 API ，必须在请求头中使用 Authorization 字段提供 token 令牌 使用 HTTP Status Code 标识状态 数据返回格式统一使用 JSON 1.1.1. 支持的请求方法 GET（SELECT）：从服务器取出资源（一项或多项）
记录，再次运行vue项目报错POST http://127.0.0.1:8888/api/private/v1/login/login
热门推荐
qq_45654741的博客
08-04 1万+
可以打开登录界面，却无法打开登录后界面 代码没有问题，查阅资料后是后台服务器没打开 删除package-lock.json文件 运行npm install 再次运行node .\app.js 打开phpStudy的数据库 使用postman测试 显示登录成功，后台数据库连接成功， 再次运行Vue项目，登录界面成功 ...
api怎么使用_使用电商管理后台API进行自动化测试（一）
weixin_39693437的博客
11-27 359
一、引言​ 之前跟一些想做测试的学弟学妹们交流，发现大家的苦恼都是说毕业以后想做测试，但是实在不知道如何开始，跟着网上的教程学了一部分以后想练手也比较难找到一套合适的接口，其实网上有很多公开的公用API可以用于调用，但是一来是需要在线认证二是有一些会有调用次数限制，所以最近在网上找了一套开源的电商API，环境搭建好后本地启动就可以直接开始调用。二、环境搭建安装Node.js添加国内镜像源安装g...
api服务已经开启，端口正常启动，无法访问
山海一哥的博客
02-15 2851
1，检测启动服务的协议是http还是https 2，检测ip是否正确 注：以前正常访问的东西突然不能访问了，发现以上两个问题都发生了
黑马电商管理系统ElementUI
xidianzxm
07-29 2390
token 项目创建步骤
Vue电商后台管理系统开发总结与技术栈解析
Vue 电商后台管理项目是一个以Vue.js为核心的前端项目，旨在提供一个完整的电商后台管理系统。在这个项目中，开发者主要利用VueCLI 4作为基础架构，结合ElementUI进行界面设计，同时借助已有的后端Express API服务...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端小歌谣

放弃很容易 但是坚持一定很酷

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值