前端

在vscode中创建工作区

创建空文件夹
使用vscode打开
把文件另存为工作区
在工作区进行编码

node.js

Node.js 是一个基于 Chrome V8 引擎的 Javascript 运行环境

安装16.16.0版本，版本太低安装不上脚手架12.13.0（谷粒学院）

vue脚手架

1.全局安装命令工具 npm install --location=global @vue/cli

2.创建一个项目 vue create vue-test 2

3.进入项目目录 cd vue-test

4.启动 npm run serve

vue-admin-template

基于vue和element-ui的后台管理系统集成方案。最少精简版。

npm install npm run dev启动

api接口

前端api-user.js ：login，getinfo，logout
查看modules中对应的user.js文件，查看编写接口返回信息

后端接口实现

路径要和前端统一
方法要统一
返回的data要统一
通过swagger查看接口实现(http://localhost:8201)
使用dev环境，并在yml中修改port--前端要修改port（env.development）一定要保存再重新启动

前后端联调

要注意跨域问题--在controller上加@CrossOrigin

创建数据库

使用数据库连接工具

多对多关系表

比如用户a即是管理又是运营，管理又可以是a，b。这种情况需要建立三张表。

用户表
角色表
用户角色关系表

开发角色管理接口

从controller出发，处理前端返回的分页数据

nginx

实现反向代理，客户端--->nginx--->不同的服务
安装nginx
修改配置文件
修改前端port
同时开启前后端

商品接口

sku

带形容词的spu--红色的手机，L码的T恤。

服务注册

使用nacos--在bin下命令：startup.cmd -m standalone
引入依赖
配置类上修改port
启动类上加入注解@EnableDiscoveryClient

整合nacos+mq+es实现商品上下架

es

安装es，点击bin中的bat打开
在es目录中pluging创建ik，复制分词器内容
启动es
localhost:9200显示启动成功
安装客户端工具kibana
修改配置文件，port，url，语言
启动点击bat

安装rabbitMQ

虚拟机上安装：docker pull rabbitmq:3.8-management
创建容器启动：docker run -d --restart=always -p 5672:5672 -p 15672:15672 --name rabbitmq rabbitmq:3.8-management

流程

在service-product中暴露api接口
在service-client 中设置FeignClient接口，对api进行mapping
在service-search中开启远程调用，注入FeignClient接口，SkuRepository，并且远程调用方法，根据skuid获得sku相关信息。最终添加到es中
skuid在product中加入mq队列中。

rabbitService.sendMessage(MqConst.EXCHANGE_GOODS_DIRECT,  
MqConst.ROUTING_GOODS_UPPER, id);

在search中接收mq中数据，注意是从message中的body里取数据，调用upperSku方法在es中加入数据。。

@RabbitListener(bindings = @QueueBinding(  
value = @Queue(value = MqConst.QUEUE_GOODS_UPPER,durable = "true"),  
exchange = @Exchange(value = MqConst.EXCHANGE_GOODS_DIRECT),  
key = {MqConst.ROUTING_GOODS_UPPER}  
))  
public void upperSku( Message message, Channel channel) throws IOException {  
if(!ObjectUtils.isEmpty(message) && !ObjectUtils.isEmpty(message.getBody())) {  
//调用方法商品上架  
// 使用位运算将byte转换为long类型,前提是一个元素  
skuService.upperSku(Long.parseLong(new String(message.getBody())));  
}  
channel.basicAck(message.getMessageProperties().getDeliveryTag(),false);  
}

整合Gateway网关

前提：Nginx反向代理服务器。

步骤

在yml里配置网关信息
添加启动类
在启动类类上加注解@enablediscoveryclient
controller上的跨域注解可以去掉
在geteway上加入config，加入配置

@Configuration
public class CorsConfig {
    @Bean
    public CorsWebFilter corsFilter() {

        CorsConfiguration config = new CorsConfiguration();

        config.addAllowedMethod("*");

        config.addAllowedOrigin("*");

        config.addAllowedHeader("*");

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(new PathPatternParser());

        source.registerCorsConfiguration("/**", config);

        return new CorsWebFilter(source);
    }
}

最终修改网关端口：8200，重启。
注意引入依赖，在nacos中注册

微信小程序端

环境搭建

申请小程序测试号
安装微信web开发者工具
安装HBulider
配置一个内网穿透：生成一个域名，通过域名访问本地接口，用于测试。

ssyx

前端