1-2 云商城架构设计

1、架构设计

云商城采用了当前主流的微服务技术架构，微服务技术栈采用了当前主流的SpringCloud Alibaba技术栈，从接入层、网关层、服务层、数据同步、服务治理、数据处理、第三方接口多个方面进行了精心设计，技术经过了多次挑选、优中选优，最终打造了一套全网最优质的的微服务商城架构体系，解决了大型微服务电商应用中绝大多数难点、痛点问题。

2、前后端分离

我们过去开发一套系统，前端、后端都需要协同工作，很多时候分工不明确、责任不清晰，沟通成本大幅增加。为了提升开发效率、降低沟通成本，前后端分离的模式应运而生，前后端分离的开发模式会让各组开发人员工作更专注，沟通只需要通过前期沟通好的开发文档进行开发即可。开发流程如下图：

前后端分离项目中可以大大减轻前后端开发人员的工作量、大大提升开发效率、为了减少沟通成本我们通过SwaggerAPI文档来沟通的、那么怎么使用SwaggerAPI文档呢?我接下来继续介绍。

3、Swagger使用

3.1 在线工具

编写Swagger接口，可以用Swagger Editor，地址：https://editor.swagger.io/

3.2 本地查看

接口编写好了，可以导出到本地.

为了能够更加直观来查看相关的接口，我们通过用swagger-ui展示，下载地址：https://swagger.io/tools/swagger-ui/

Swagger UI是通过读取Swagger Edit的导出的YAML／JSON文件，来进行接口测试。Swgger UI的站点域名要和发送请求的域名一样。不然浏览器会报跨域错误。

安装

下载并且安装node.js(自行下载安装https://nodejs.org/zh-cn/)
npm install -g http-server
下载项目https://github.com/swagger-api/swagger-ui 并且解压。
进入swagger-ui文件夹。运行hs -p 500
进入http://127.0.0.1:500/dist/index.html就可以看到swagger页面了

使用
导入swagger.json文件把之前Swagger Edit导出的swagger.json文件复制到dist文件夹里面，修改index.html的url路径，改成指向swagger.json。就可以读取json文件的内容了。

访问 http://127.0.0.1:500/dist/index.html 即可

注意不要访问 http://localhost:500/dist/index.html 会出现跨域提示的问题

3.3 批量生成

很多时候，我们没法快速开发完所有功能，但是有很多功能基本都是增删改查，我们可以利用工具先将增删改查的通用Swagger Api生成好，后面直接在对应基础上更改就可以了。批量生成代码

链接：https://pan.baidu.com/s/15mBl5zFPRNGk5r1o2ZnLrw
提取码：nc4q

核心配置文件

#swagger 的路径、相对于当前项目
swaggerpath=com.bobo.swaggerui
#响应对象封装的名字RespResult
#respbean=RespResult
# 多条件收搜、默认是 /search
#search=/find
#多条件搜索+分页 默认是 /search/{page}/{size}   {size}表示路径参数
#pagesearch=/find/{page}/{size}
#生成文件的名称 默认：swagger.json
filename=goods.json
# 数据源配置
url=jdbc:mysql://192.168.100.130:3306/shop_goods
uname=root
pwd=123456
driver=com.mysql.jdbc.Driver

代码目录结构

生成商品表的json文件

生成订单表的json文件

将生成的相关json文件拷贝到swagger-ui的json目录下：

将添加的json文件在dist目录下的index.html文件中添加信息

 <div id="cgpj">所有项目:<select onchange="change(this.value)" id="pj"><option value="http://127.0.0.1:500/json/swagger.json">测试文件</option><option value="http://127.0.0.1:500/json/goods.json">商品信息</option><option value="http://127.0.0.1:500/json/order.json">订单信息</option></select></div>

查看效果

这样话我们就可以很快的生成系统的相关API接口文档、方便前后端程序员的开发。特殊的接口我们只需要在此基础上修改即可。

------->> 你学会了吗？