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

后台数据环境搭建说明

本项目服务端环境要求为 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
    评论
### 回答1: Spring Boot 是一个基于 Spring 框架的快速开发工具,可以让开发者简化 Spring 应用的开发和部署。要在 Spring Boot 中搭建一个 RPC 调用接口,可以使用 Dubbo 或者 Spring Cloud 来实现。 Dubbo 是一款高性能、轻量级的分布式服务框架,提供了服务治理、负载均衡、限流降级等功能,可以很方便地在 Spring Boot 中集成。 Spring Cloud 是一个基于 Spring 框架的微服务工具集,提供了服务发现、配置管理、路由网关、服务熔断等功能,也可以很方便地在 Spring Boot 中集成。 具体实现方式可以参考一些在线教程或文档,如果你需要具体方法,请告知具体需要实现的细节,我可以给更详细的回答。 ### 回答2: Spring Boot提供了一个简单且易用的方式来构建基于RPC(远程过程调用)的应用程序。通过使用Spring Boot,我们可以使用几个简单的步骤来搭建RPC调用接口。 首先,我们需要在Spring Boot应用程序中添加所需的依赖项。可以使用Maven或Gradle构建工具来管理项目依赖项。通常,我们需要添加用于实现RPC的库,例如Apache Thrift、gRPC等。可以在Maven或Gradle的配置文件中添加这些依赖项。 接下来,我们需要创建一个接口定义,该接口将被用作RPC调用的契约。这个接口将定义要在客户端和服务器之间传输的数据类型以及对应的方法。可以在Java中创建一个接口,并在接口中定义需要的方法。 然后,我们需要实现这个接口,并将其标记为一个Spring Bean。可以在实现类中编业务逻辑,并实现接口中定义的方法。同时,Spring Boot中提供了一些注解,如@RestController和@RequestMapping,它们可以帮助我们将这个实现类暴露为一个RESTful接口。 接下来,我们需要在应用程序的配置文件中提供有关RPC服务的配置信息。这些配置信息可能包括RPC服务器的地址、端口以及其他相关参数。可以在配置文件中指定这些信息,并使用Spring Boot的@ConfigurationProperties注解将其注入到应用程序中。 最后,我们可以使用Spring Boot提供的自动配置功能,来启动和运行RPC服务。可以在应用程序的主类中添加@SpringBootApplication注解,并在main方法中调用SpringApplication.run方法来启动应用程序。 通过以上步骤,我们就可以使用Spring Boot搭建一个RPC调用接口了。可以通过客户端来调用接口,并通过网络传输数据进行远程调用。Spring Boot提供了一套简单而强大的工具和框架,可以帮助我们快速开发和部署RPC应用程序。 ### 回答3: Spring Boot是一个用于快速构建独立的、基于Java的生产级别的应用程序的框架。它提供了一个开箱即用的环境,使得我们能够轻松地开发和部署应用程序。 要搭建一个基于Spring Boot的RPC(远程过程调用调用接口,我们可以按照以下步骤进行操作: 1. 引入所需的依赖:在项目的Maven或Gradle构建文件中,添加相关的依赖,包括Spring Boot和RPC调用相关的库,如Apache Thrift或gRPC。 2. 创建RPC服务接口:定义需要远程调用接口,并使用相关的注解来标识。 3. 实现RPC服务接口:编具体的服务实现类,实现RPC服务接口中定义的方法,并添加相关的注解。 4. 配置RPC服务:在Spring Boot的配置文件中,添加相关的配置信息,包括RPC服务的地址、端口等。 5. 启动Spring Boot应用程序:运行应用程序,Spring Boot将自动初始化并启动RPC服务。 6. 调用RPC服务:在其他模块中,可以使用相应的客户端库来调用RPC服务。通过客户端库提供的API,我们可以方便地发起远程调用,并获取返回值。 通过以上步骤,我们就可以搭建一个基于Spring Boot的RPC调用接口。通过RPC服务,不同的应用程序可以在网络上相互通信,以实现功能的共享和调用

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值