# mare-api

**Repository Path**: mare-home/mare-api

## Basic Information

- **Project Name**: mare-api
- **Description**: 后端接口
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-05
- **Last Updated**: 2023-03-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# mare项目后端说明

> 项目后端的运行命令  
>
> npm  i
>
> npm  run dev

## 请求地址

默认线下的端口号是3030

在接口封装的时候用baseURL = '<http://localhost:3030>/api' 

在打包上线的时候会修改成云服务器上配置好的具体地址（等待ipc备案完后我上传后端代码就可以使用了）

你只需要在默认baseURL后面拼接你的请求接口就好了

## 接口的增删改查使用说明

比如你有一个 "/userlist"的一个接口

你需要对它进行一个增删改查

![1677830377563.png](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677926761001-1f012f8c-db48-4b23-98a3-5ee0705e35df.png) 

如果你在之前字段配置中声明过**不能为空**或者**唯一**的时候需要对得上，还有type的类型！！！ 不然接口会报错！！！

### 1 新增接口   

请求方式: post

路径:   /userlist

body:  用户的对应的所有字段

### 2 查询全部的接口

请求方式: get

路径:  /userlist

### 3 查询一个的接口

请求方式: get

路径： /usrelist/指定的id

### 4 删除的接口

请求方式: delete

路径:  /userlist/指定的id

### 5 修改的接口

请求方式: patch / put

路径： /userlist/指定的id

body:  

patch的方式 可以指定某个字段的修改 （推荐）

put的方式 需要完成的配置完所有的字段

## 关于查询的操作

实际开发的时候我们的查询经常是需要指定条件来查询的比如指定name 指定日期范围等等

1 指定条件

请求的url   get    **/user****list****?字段名称=字段的值**     

这样会查询 数据库当中  指定的字段等于指定的值的数据

2 指定查询的数量

请求url  get     **/user****list****?$limit=查询的数量限制**      

3 跳过的(偏移量)的设置

请求的url  get    **/user****list****?$skip=偏移的数量**    

4 排序

 请求的url get  **/user****list****?$sort[id]=-1**   

 $sort[字段名]=1    正序/升序 (小 -> 大)

 $sort[字段名]=-1   倒序/降序 (大 -> 小)

5 范围 

**$gt大于 / $gte 大于等于**

请求的url get  **/user****list****?id[$gt]=2        查询id大于2的**  

请求的url get  **/user****list****?id[$gte]=2        查询id大于等于2的**  

**$lt 小于 / $lte 小于等于**

请求的url get  **/user****list****?id[$lt]=2        查询id小于2的**  

请求的url get  **/user****list****?id[$lte]=2        查询id小于等于2的**  

如果 

请求的url get  **/user****list****?id[$gt]=2&id[$lt]=5       查询id大于2的 但是小于5**  

6 只有查询的字段

请求的url get  **/user****list****?$select[]=字段1&$select[]=字段2**  

7 模糊查询(todo 暂时不支持中文的模糊查询)

请求的url  get   **/user****list****?uame$[like]=2%   查询uname是以2开始的**

请求的url  get   **/user****list****?uame$[like]=%2   查询uname是以2结束的**

## 实际操作

### 查询列表

还是以/userlist为例

##### 不带参数默认请求整个列表

![1677830746354.png](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677926873918-77ed70f5-9097-4627-9d0e-c22432a66534.png) 

##### 带参数只会请求回来对应的单条数据![1677830839687.png](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677926942971-0fd9712e-7486-49b8-b285-a584971bc518.png)

![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677926942971-0fd9712e-7486-49b8-b285-a584971bc518.png)

###### 在代码中具体实现（比如我要查询/userlist 中指定usernum和password的数据）

![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677927003158-baf2cfd5-50c3-4dcd-8e86-dadc5370a471.png)

请求参数不存在的时候会返回一个空对象

![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677927035243-44bc5a1a-80f7-4dc5-8a19-c40a3d7d8a0d.png)

### 添加

###### 成功案例

比如我在/userlist中有4个字段其中usernum是**必填项**，其他**不能为空**的时候，我需要对应上字段，最后两个允许为空的时候可以不用管！**如果和接口对不上会报错！！！**

![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677927233460-d37008de-17e1-4acd-b144-312c09d2f17b.png)

**当我再次发送post请求的时候上一次请求的usernum参数已经存在了，这样会触发他的唯一性，就会报错！！！**![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677927377078-a59cc14d-6f61-4693-963d-8fd05ecec695.png)

### 修改

#### 关于put和patch

put和patch都是可以修改的方式

我个人更推荐patch，patch是等量更新，填入什么字段就会更新什么

（前面误操作删除掉id：34这个了改成了id：37，不过操作是一样的）![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677927728616-4c395bea-a35c-4dfa-8e70-d92f68185e64.png)

###### 在代码中具体实现（这里我定义了一个/repairlist的接口里面的字段为progress，我想要修改的内容为“已取消”，通过参数拼接指定id的形式来等量修改）

![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677927847931-ec859b5c-66ef-405e-a13e-d83c351a3c1b.png)

### 删除

之前已经添加过提条id为34的参数

需要删除的时候可以指定接口+id来进行删除![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1677927960156-b5ab0d17-af7d-4386-8254-d39ab90244d1.png)

声明：此文档仅做参考出现一些不可预知的问题我也解决不了！！！

# 接口文档具体可有请求的api

##### 商品接口

这里的金额类型声明是float浮点数（可以有小数），在js中存储number就可以了

###### 布料列表      请求接口   /cloth

| 字段名            | 参数类型type | 是否允许为空 | 是否唯一 |
| ----------------- | ------------ | ------------ | -------- |
| 标题：title       | string       | false        | false    |
| 图片：picture     | string       | false        | false    |
| 库存：inventory   | string       | false        | false    |
| 工厂：factory     | string       | true         | false    |
| 销量：salesvolume | number       | true         | false    |
| 金额：price       | float        | false        | false    |
| 颜色：colors      | string       | true         | false    |

###### 涤纶线列表   请求接口   /polyesteryarn

| 字段名            | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ----------------- | ------------ | ------------ | -------- | ------ |
| 标题：title       | string       | false        |          |        |
| 图片：picture     | string       | false        |          |        |
| 库存：inventory   | string       | false        |          |        |
| 销量：salesvolume | number       |              |          |        |
| 金额：price       | float        | false        |          |        |
| 颜色：colors      | string       |              |          |        |
| 年份：icons       | string       |              |          |        |

###### 拉链列表   请求接口   /zipper

| 字段名               | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| -------------------- | ------------ | ------------ | -------- | ------ |
| 标题：title          | string       | false        |          |        |
| 图片：picture        | string       | false        |          |        |
| 库存：inventory      | number       | false        |          |        |
| 销量：salesvolume    | number       |              |          |        |
| 金额：price          | float        | false        |          |        |
| 颜色：colors         | string       |              |          |        |
| 店铺名称：sellername | string       | false        |          |        |

###### 帽子列表   请求接口   /hat

| 字段名               | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| -------------------- | ------------ | ------------ | -------- | ------ |
| 标题：title          | string       | false        |          |        |
| 图片：picture        | string       | false        |          |        |
| 库存：inventory      | number       | false        |          |        |
| 销量：salesvolume    | number       |              |          |        |
| 金额：price          | float        | false        |          |        |
| 颜色：colors         | string       |              |          |        |
| 店铺名称：sellername | string       | false        |          |        |

###### 纽扣列表   请求接口   /buttons

| 字段名                   | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ------------------------ | ------------ | ------------ | -------- | ------ |
| 标题：title              | string       | false        |          |        |
| 图片：picture            | string       | false        |          |        |
| 库存：inventory          | number       | false        |          |        |
| 销量：salesvolume        | number       |              |          |        |
| 金额：price              | float        | false        |          |        |
| 颜色：colors             | string       |              |          |        |
| 公司名称：previewCompany | string       | false        |          |        |
| 年份：icons              | string       |              |          |        |

###### 皮带列表   请求接口   /belt

| 字段名            | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ----------------- | ------------ | ------------ | -------- | ------ |
| 标题：title       | string       | false        |          |        |
| 图片：picture     | string       | false        |          |        |
| 库存：inventory   | number       | false        |          |        |
| 销量：salesvolume | number       |              |          |        |
| 金额：price       | float        | false        |          |        |
| 颜色：colors      | string       |              |          |        |

###### 礼品列表   请求接口   /gift

| 字段名            | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ----------------- | ------------ | ------------ | -------- | ------ |
| 标题：title       | string       | false        |          |        |
| 图片：picture     | string       | false        |          |        |
| 库存：inventory   | number       | false        |          |        |
| 销量：salesvolume | number       |              |          |        |
| 金额：price       | float        | false        |          |        |
| 颜色：colors      | string       |              |          |        |

###### 商品购物车接口 /buy

| 字段名                       | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 | json格式必须添加的参数                                       |
| ---------------------------- | ------------ | ------------ | -------- | ------ | ------------------------------------------------------------ |
| 购物车列表：shoppingCartList | json         | false        |          |        | {商品名称 commodity：string单价 price：float购买数量 howMany：number商品颜色 colors：string商品图片：picture：string合计 total：float} |
| 购物人：shopName             | string       | false        | true     |        |                                                              |
| 电话号码：telephone          | string       |              |          |        |                                                              |
| 邮寄地址：address            | string       |              |          |        |                                                              |
| 收货人：consignee            | string       |              |          |        |                                                              |

##### 

##### 仓储接口

###### 仓储列表   仓储请求接口   /keepgrain

| 字段名              | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ------------------- | ------------ | ------------ | -------- | ------ |
| 编号：num           | number       | false        | true     |        |
| 产品名称：proName   | string       | false        |          |        |
| 公司名：companyName | string       | false        |          |        |
| 产品类别：proClass  | string       | false        |          |        |
| 采购人：purchaser   | string       | false        |          |        |
| 责任人：liable      | string       | false        |          |        |
| 当前数量：nowNum    | number       | false        |          |        |

##### 用户接口

###### 顾客列表    顾客请求接口  /customer

| 字段名                      | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 | json格式必须添加的参数 |
| --------------------------- | ------------ | ------------ | -------- | ------ | ---------------------- |
| 用户id ：userid             | string       |              |          |        |                        |
| 图片信息：img               | string       |              |          |        |                        |
| 顾客姓名：uname             | string       |              |          |        |                        |
| 顾客电话：tel               | string       | false        | true     |        |                        |
| 账号创建时间： creationTime | string       |              |          |        |                        |
| 收货人：consignee           | string       |              |          |        |                        |
| 收货手机号码：phoneNum      | string       |              |          |        |                        |
| 所在地区：area              | string       |              |          |        |                        |
| 详细地址：fullDddress       | string       |              |          |        |                        |
| 进程：progress              | string       |              |          | 未完善 |                        |
| 性别：sex                   | string       |              |          |        |                        |
| 邮箱：email                 | string       |              |          |        |                        |

###### 登录列表    后台登录请求接口 /login

我内置了一个账号为admin  密码是md5加密后的123456

| 字段名            | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ----------------- | ------------ | ------------ | -------- | ------ |
| 用户名 ：username | string       |              | true     |        |
| 密码：password    | string       |              |          |        |
| 邮箱：email       | string       |              |          |        |
| 电话：tel         | string       |              |          |        |
| 权限：power       | string       |              |          |        |

##### 订单接口

###### 订单列表   订单接口请求  /orders

| 字段名                | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| --------------------- | ------------ | ------------ | -------- | ------ |
| 产品名称：proName     | string       | false        |          |        |
| 单价：price           | float        | false        |          |        |
| 购买数量：howMany     | number       | false        |          |        |
| 邮寄地址：address     | string       | false        |          |        |
| 收货人：consignee     | string       | false        |          |        |
| 电话号码：telephone   | string       | false        |          |        |
| 商品颜色：colors      | string       | false        |          |        |
| 合计：total           | float        | false        |          |        |
| 下单时间：Time        | string       | false        |          |        |
| 快递单号：orderNumber | string       | false        |          |        |
| 订单备注：remarks     | string       |              |          |        |
| 运费：freight         | float        |              |          |        |
| 优惠：remission       | float        |              |          |        |

##### 轮播图接口

###### 轮播图列表  轮播图接口请求  /banners

| 字段名            | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ----------------- | ------------ | ------------ | -------- | ------ |
| 图片名称：imgname | string       | false        |          |        |
| 图片：picture     | string       | false        |          |        |
| 说明：text        | string       |              |          |        |

##### 进出记录接口

###### 进出记录列表  进出记录接口请求  /recording

| 字段名            | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| ----------------- | ------------ | ------------ | -------- | ------ |
| 编号：num         | number       | false        | true     |        |
| 产品名称：proName | string       | false        |          |        |
| 数量：numbers     | number       |              |          |        |
| 时间：times       | string       | false        |          |        |
| 责任人：liable    | string       | false        |          |        |
| 类型：types       | string       | false        |          |        |

##### 任务管理接口

###### 任务管理列表  任务管理接口请求  /work

| 字段名         | 参数类型type | 是否允许为空 | 是否唯一 | 默认值 |
| -------------- | ------------ | ------------ | -------- | ------ |
| 姓名：username | string       |              |          |        |
| 日期：date     | string       | false        |          |        |
| 任务：task     | string       | false        |          |        |
| 地址：address  | string       | false        |          |        |
| 标签：tag      | string       | false        |          |        |
| 进程：process  | string       |              |          |        |
| 说明：text     | string       |              |          |        |

##### 

# 图片上传的逻辑

不管你是使用组件库还是原生js上传，你只需要关注你能不能拿到这个图片的**file对象**！！！！

对于前端来说你只需要关注**3件事**！！！

1.能不能拿到file对象

2.将这个对象发送post请求传输到接口中（一般接口都是后端提供，或者是具体地址形式。

3.将上传返回的结果中的url信息存储到数据库！！！！   （这个步骤需要自己写请求，不管你是写的put、patch、post请求，你需要将这个地址信息存储在数据库中，使用的时候再次发送请求读取数据库内对应字段的字符串信息就可以了。） 

示例：这里我并没有将地址上传到具体的数据库，我只是做一个展示



示例：这里我并没有将地址上传到具体的数据库，我只是做一个展示

```
<template>
  <el-upload
    v-model:file-list="fileList"
    class="upload-demo"
    action="上传地址"
    :on-preview="handlePreview"
    :on-remove="handleRemove"
    :on-success="handleSuccess"
    list-type="picture"
  >
    <el-button type="primary">Click to upload</el-button>
    <template #tip>
      <div class="el-upload__tip">jpg/png files with a size less than 500kb</div>
    </template>
  </el-upload>
</template>

<script lang="ts" setup>
import { ref } from 'vue';

import type { UploadProps, UploadUserFile } from 'element-plus';

const fileList = ref<UploadUserFile[]>([]);

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log(uploadFile, uploadFiles);
};

const handlePreview: UploadProps['onPreview'] = (file) => {
  console.log(file);
};
// 上传图片成功时触发
const handleSuccess = (response: any) => {
  //上传成功时获得的回调参数
  console.log(response);
  // 你需要将得到的地址以数组或字符串的形式存储到我的数据库中
};
</script>
```

具体实现单个图片上传

```
</template>
<el-button type="primary" @click="uploadData = true">修改头像</el-button>

<el-dialog v-model="uploadData" title="上传图片" width="30%">
    <el-upload
      v-model:file-list="fileList"
      class="upload-demo"
      action="上传地址"
      :on-success="handleSuccess"
      list-type="picture"
      drag
      :limit="1"
    >
      <el-button type="primary">上传图片</el-button>
    </el-upload>
    <template #footer>
      <span class="dialog-footer">
        <el-button
          type="primary"
          @click="
            setpicture();
            uploadData = false;
          "
        >
          确定</el-button
        >
        <el-button
          @click="
            uploadData = false;
          "
          >取消</el-button
        >
      </span>
    </template>
  </el-dialog>

</template>
<script lang="ts" setup>
let data = ref('');
// 上传图片成功时触发
const handleSuccess = (response: any) => {
  // console.log(response);
  // 你需要将得到的地址以数组或字符串的形式存储到我的数据库中
  data = response.msg;
};
  const setpicture = async () => {
  const imgdata: any = {
    //在这次的演示中，我的/userlist接口中有一个headpicture的字段，字段的type是字符串
    headpicture: data,
  };
  if (data.value !== '') {
    //这里的id对应的是你想要修改的对应数据的图片。如果你是post请求，那么你不要加id，将imgdata改成你要传递的所有数据就好（这里需要对应接口的字段）
    await axios.patch(`/userlist/${id}`, imgdata);
    ElMessage({
      type: 'success',
      message: '修改成功！',
    });
    getUser();
  } else {
    ElMessage({
      type: 'info',
      message: '请上传图片或等待上传完成！',
    });
  }
};
</script>
```

# JSON格式上传说明

对于数据类型约束type：json的来进行一个示例！

我的测试接口为/wink    其中字段为：text    类型为：json

那么我需要：

```
<template>
  <el-button @click="jsonok"></el-button>
</template>

<script setup lang="ts">
import axios from '@/config/api';

// 数组形式
const data = [
  {
    commodity: 'xiaoming',
    price: 1,
    howMany: 2,
    colors: '',
    total: '',
  },
  {
    commodity: 'xiaoming',
    price: 1,
    howMany: 2,
    colors: '',
    total: '',
  },
];
const datas = {
  // 传入的字段需要对得上
  text: JSON.stringify(data),
};
// 对象形式自己百度搜索，我就不举例了
const jsonok = async () => {
  await axios.post('/wink', datas);
};
</script>

<style scoped></style>
```

点击发送请求的结果：

![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678084898198-f46c064a-927b-4715-8ba9-54d122d055ab.png)

在数据库中的结果：

![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678084945761-8d00a651-38d4-469d-8718-4e946dfda064.png)

# 根据要求寻找的icon图标

##### 管理员列表![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678277762721-34088695-9d12-4f21-8ac6-e70e848ac5e7.png)

```
<el-icon><Setting /></el-icon>
```

##### 人员列表![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678276664632-6740cba2-b264-4e57-9ba1-21d0e2684a96.png)

```
<el-icon><Avatar /></el-icon>
```

##### 首页![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678276703879-71326842-7b44-4115-87f9-432e9f4d9a2d.png)

```
<el-icon><House /></el-icon>
```

##### 仓储管理![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678276763555-4e17c423-be4e-435b-bbc4-45f423d555da.png)

```
<el-icon><Edit /></el-icon>
```

###### 仓库列表![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678278026680-323e46cb-27af-4141-8fea-a392dcbb0529.png)

```
<el-icon><Coin /></el-icon>
```

进出记录![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678278068627-4e009085-910d-477d-b2bd-4d2ed0118945.png)

```
<el-icon><Van /></el-icon>
```

##### 客户管理![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678276806259-9d78d5ed-889f-4815-a929-b6f0d6886056.png)

```
<el-icon><UserFilled /></el-icon>
```

###### 客户列表![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678278440338-1e14b85b-564e-497a-b151-10b34fb54e4d.png)

```
<el-icon><User /></el-icon>
```

###### 客户状态![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678278536970-e1a00118-8bd9-4959-80fc-4df8af8ed673.png)

```
<el-icon><Flag /></el-icon>
```

###### 客户详情![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678278634742-6ac1cdad-c6a2-421f-88f7-5ae4ba027c6b.png)

```
<el-icon><Comment /></el-icon>
```

##### 订单管理![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678276869726-3965b013-b96a-4ddf-97f9-46849cfeea48.png)

```
<el-icon><DocumentCopy /></el-icon>
```

##### 任务管理![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678277526984-08babd01-2cd2-41b1-91c3-42e49c1fd08a.png)

```
<el-icon><Operation /></el-icon>
```

##### 个人信息![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678277638733-facde877-321e-4a37-9df5-c350e0cb1e9d.png)

```
<el-icon><Star /></el-icon>
```

##### 小程序管理![img](https://cdn.nlark.com/yuque/0/2023/png/34533415/1678277728531-05414636-7983-45a3-9f7b-2691291c0653.png)

```
<el-icon><Iphone /></el-icon>
```