1-2 云商城架构设计

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的站点域名要和发送请求的域名一样。不然浏览器会报跨域错误。

安装

1. 下载并且安装node.js(自行下载安装https://nodejs.org/zh-cn/)
2. npm install -g http-server
3. 下载项目https://github.com/swagger-api/swagger-ui 并且解压。
4. 进入swagger-ui文件夹。运行hs -p 500
5. 进入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接口文档、方便前后端程序员的开发。特殊的接口我们只需要在此基础上修改即可。

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