服务器搭建说明以及接口调用文档

后台数据环境搭建说明

本项目服务端环境要求为 Windows + Apache + PHP + MySQL。

下面介绍如何搭建环境,部署服务器端应用。

  1. 获取开发工具 wampserver3.1.9_x64.exe,根据提示进行安装;

(默认安装目录为“C:\wamp64”,如果您更改了安装目录,请替换后面步骤中出现的路径。)

  1. 在安装过程中如果弹出以下提示,直接选择是按钮 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1ixkHYHQ-1623196383675)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps2.jpg)]
    在这里插入图片描述

    3、 安装成功后,双击桌面图标“Wampserver64”:

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TBX4EGDU-1623196383676)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps3.jpg)]

    4、在系统右下角图标中找到WAMP Server的图标。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tuh5RGEe-1623196383678)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps4.jpg)]

    图标颜色:绿色表示服务全部启动,橙色表示服务部分启动,红色表示服务没有启动。

    初次启动时,图标会从 红色->橙色->绿色 逐渐变化,显示为绿色表示启动成功。

    如果启动失败,则可能当前系统存在其他问题,请根据程序提示排除问题。

    5、使用浏览器访问 http://localhost/ 如果看到如下画面,表示安装成功。

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ap9BvDo5-1623196383679)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps5.jpg)]

6、把发给你们的tpadmin文件夹,右键复制,粘贴到C:\wamp64\www目录下。

7、左键单击电脑右下角的WAMP Server图标,选择【Apache】 → 【httpd-vhost.conf】:

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1tGP8m80-1623196383680)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps6.jpg)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wnNYLJDR-1623196383681)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps7.jpg)]

8、在配置文件中,替换为以下代码,并保存关闭文件

<VirtualHost *:80>
  DocumentRoot "${INSTALL_DIR}/www/tpadmin/public"
  <Directory "${INSTALL_DIR}/www/tpadmin/public">
    Options -Indexes
    AllowOverride All
    Require local
  </Directory>
</VirtualHost>
LoadFile "C:/wamp64/bin/php/php7.2.18/libssh2.dll"

9、修改完成后,保存文件,然后单击右下角WAMP Server图标,选择Restart All Services,

等待图标重新变成绿色。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8j8DmSmE-1623196383682)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps8.jpg)]

10、双击“C:\wamp64\www\tpadmin\初始化数据库.bat”文件,等待执行完成。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JJJ0sTvu-1623196383683)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps9.jpg)]

出现以下内容即执行完毕

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-W6Qc7vwU-1623196383684)(file:///C:\Users\86155\AppData\Local\Temp\ksohtml7252\wps10.jpg)]

在vue-cli脚手架项目中使用axios进行数据的请求

1、安装axios

npm i axios -S

2、在main.js写入以下代码

// 引入axios
import axios from 'axios'

axios.defaults.baseURL = 'http://localhost/api';
Vue.prototype.$axios = axios;

3、开始使用axios进行数据的请求

例如:

this.$axios.get("请求路径",{需要传递的参数}).then((res)=>{
     // 成功回调
     console.log(res)
}).catch((res)=>{
	// 失败回调
});

API接口使用说明

1、API接口说明

  • 接口基准地址:http://localhost/api/

  • 服务端已开启 CORS 跨域支持

  • 使用 HTTP Status Code 标识状态

  • 数据返回格式统一使用 JSON

    1.1 返回状态码code说明

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

登录接口

  • 请求路径:login

  • 请求方法:post

  • 请求参数

    参数名参数说明备注
    username用户名
    password密码
  • 响应参数

    参数名参数说明备注
    code状态码1登录成功 0成功失败
    msg提示信息
    url请求源地址
    data登录人员信息
  • 响应数据

 {
 "code": 1,
 "msg": "登录成功",
 "data": {
   "session_id": "akemvcqn21dscu5bupg5sn5p7t", //注意,登录时将会额外得到一个session_id的数据
   "id": 1,
   "username": "test"
 },
 "url": "http://localhost:10086/",
 "wait": 3
}

退出接口

  • 请求路径:logout

  • 请求方法:get

  • 请求参数

    参数名参数说明备注
    无参数
  • 响应参数

    参数名参数说明备注
    code状态码2没有登录 1登录成功 0登录失败
    msg提示信息
    time时间戳
    data登录人员信息
  • 响应数据

{
 "code": 2,
 "msg": "您还没有登录。",
 "time": 1589960319,
 "data": ""
}

2、分类功能

2.1 获取分类列表

  • 请求路径:category

  • 请求方法:get

  • 请求参数

    参数名参数说明备注
    无参数
  • 响应参数

    参数名参数说明备注
    code状态码0失败 1成功
    msg提示信息
    url请求源地址
    data商品列表数组
  • 响应数据

    {
      "code": 1,
      "msg": "",
      "data": [
        {
          "id": 1,
          "image": "http://tpadmin.test/static/api/goods/img/noimg.png",
          "name":"手机数码",
          "pid":0,
          "sub":[.....]
        },
        {
          "id": 10,
          "img": "http://tpadmin.test/static/api/goods/img/noimg.png",
          "name":"家用电器",
          "pid":0,
          "sub":[.....]
        },
        ......
      ],
      "url": "http://localhost:10086/",
      "wait": 3
    }
    

2.2 点击分类的编辑按钮进入编辑页面调用的接口(PS:新增分类用的也是这一个接口)

  • 请求路径:edit_category

  • 请求方法:get

  • 请求参数

    参数名参数说明备注
    id分类id
  • 响应参数

    参数名参数说明备注
    code状态码0失败 1成功
    msg提示信息
    url请求源地址
    data分类数据

2.3 上传分类图

  • 请求路径:image/upload
  • 请求方法:post
  • 请求参数
  • 参数名参数说明备注
    admin_user_id登录账号的id登录的账号id,默认传admin账号的id=1
    album_id相册id分类图相册id为2
    image上传图片的相关信息
<input id="upload" style="display:none" type="file" accept="image/*" @change="imageUpload" />

 // 图片上传
    imageUpload(event) {
      let file = event.target.files[0];
      let formData = new FormData();
      formData.append("image", file);
      formData.append("album_id", 2);
      formData.append("admin_user_id", 1);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };

      this.$axios.post("image/upload", formData, config).then((res) => {
        this.good.image = res.data.data.previewPath;
        this.savePath = res.data.data.savePath;
        console.log(res);
      });
    },

2.4 分类编辑完成之后点击提交按钮调用的接口

  • 请求路径:save_category

  • 请求方法:post

  • 请求参数

    参数名参数说明备注
    id分类id
    pid所属分类父id
    name分类名称
    image分类图片路径
  • 响应参数

    参数名参数说明备注
    code状态码0失败 1成功
    msg提示信息
    url请求源地址
    data分类数据

2.5 分类删除

  • 请求路径:delete_category

  • 请求方法:post

  • 请求参数

    参数名参数说明备注
    id分类id
  • 响应参数

    参数名参数说明备注
    code状态码0失败 1成功
    msg提示信息
    url请求源地址
    data分类数据

3、商品管理功能

3.1 获取商品列表

  • 请求路径:goodslist
  • 请求方法:get
  • 请求参数
参数名参数说明备注
category_id分类编号根据分类来获取商品数据,可省略
last_id最后一个商品的编号,默认为0
search搜索内容根据搜索内容来查询数据,可省略
pagesize数据长度根据设置每页的数据长度来查询数据,可省略
page页数根据分页数来查询数据,可省略
  • 响应参数
参数名参数说明备注
code状态码0失败 1成功
msg提示信息
url请求源地址
data商品数据

响应数据格式

{
    "code": 1, 
    "msg": "", 
    "data": {
        // 数据总数量
        "total": 94, 
        // 每页数据长度
        "per_page": 15, 
        // 当前页数
        "current_page": 1, 
        //最后一页
        "last_page": 7, 
        "data": [
            {
                "id": 95, //商品id
                "goods_category_id": 4,  //商品所属的分类的id
                "name": "苹果手机", //商品名称
                "sell_point": "", //卖点
                "price": "5000.00", //价格
                "num": 5, //库存数量
                "image": "", //列表图片地址
                "status": 1, //状态(上架--1,下架--0)
                "content": "", //商品描述
                "album": "", //商品详情页面的图片路径,数组类型
                "delete_time": null, //删除时间
                "create_time": "2021-06-08 12:13:27", //创建时间
                "update_time": null  //更新时间
            }, 
            {
                "id": 92, 
                "goods_category_id": 2, 
                "name": "商品92", 
                "sell_point": "", 
                "price": "0.00", 
                "num": 0, 
                "image": "", 
                "status": 1, 
                "content": "", 
                "album": "", 
                "delete_time": null, 
                "create_time": "2021-06-08 12:13:27", 
                "update_time": null
            },
            
        ]
    }, 
    "url": "/api/goods._goods/index.html", 
    "wait": 3
}

3.2 商品数据编辑

  • 请求路径:goods/edit

  • 请求方法:get

  • 请求参数

    参数名参数说明备注
    id商品id根据商品id来查询所要修改的当条数据信息

3.3 商品列表图上传

  • 请求路径:image/upload
  • 请求方法:post
  • 请求参数
  • 参数名参数说明备注
    admin_user_id登录账号的id登录的账号id,默认传admin账号的id=1
    album_id相册id商品图相册id为4
    image上传图片的相关信息
<input id="upload" style="display:none" type="file" accept="image/*" @change="imageUpload" />

 // 图片上传
    imageUpload(event) {
      let file = event.target.files[0];
      let formData = new FormData();
      formData.append("image", file);
      formData.append("album_id", 4);
      formData.append("admin_user_id", 1);
      let config = {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      };

      this.$axios.post("image/upload", formData, config).then((res) => {
        this.good.image = res.data.data.previewPath;
        this.savePath = res.data.data.savePath;
        console.log(res);
      });
    },

3.4 商品数据编辑之后的保存

  • 请求路径:goods/save

  • 请求方法:post

  • 请求参数

    参数名参数说明备注
    id商品id根据商品id来查询所要修改的当条数据信息
    goods_category_id商品分类id可省略
    num库存数量可省略
    price价格可省略
    name商品名称必填
    image图片的路径例如:goods/goods_album/2021/06/15/85141012d92cc406e4ca0ec27c03aa6d.png。可省略

3.5 商品数据删除

  • 请求路径:goods/delete
  • 请求方法:post
  • 请求参数
参数名参数说明备注
id商品id根据商品id来查询所要删除的数据
  • 7
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值