代码拉取完成，页面将自动刷新
####1.1.1搭建后台环境
####1.1.2搭建后台管理前端
####1.1.3通过域名访问
####1.2.1后台管理前端功能实现
####1.2.2文件上传
public String uploadImage(MultipartFile file) {
//获取文件名
String originalFilename = file.getOriginalFilename();
//1.校验文件类型
String contentType = file.getContentType();
if (!CONTENT_TYPES.contains(contentType)) {
//打印日志,记录错误信息
LOGGER.info("文件类型不合法:{}", originalFilename);
return null;
}
//2.校验文件内容
try {
BufferedImage bufferedImage = ImageIO.read(file.getInputStream());//返回一个二进制图片
if (bufferedImage == null) {
LOGGER.info("文件内容不合法:{}", originalFilename);
return null;
}
//3.保存到服务器
file.transferTo(new File("E:\\IDEA_workspace\\MyProject\\YiYouStore\\image\\" + originalFilename));
return "http://image.yiyou.com/" + originalFilename; //返回图片路径
} catch (IOException e) {
LOGGER.info("服务器内部错误:{}", originalFilename);
e.printStackTrace();
}
//4.返回url,进行回显
//方法一:使用nginx代理图片路径
//1.修改config:添加server配置,修改映射:image.yiyou.com,设置root 为文件存储路径
//2.添加host:127.0.0.1 image.yiyou.com
//3.reload nginx,通过http://image.yiyou.com/图片.jpg 访问图片
//方法二:使用fastDFS回显图片路径
return null;
}
Nginx配置访问方式
如何绕过网关?
location /api/upload {
proxy_pass http://127.0.0.1:8082;
proxy_connect_timeout 600;
proxy_read_timeout 600;
#rewrite "用来匹配路径的正则" 重写后的路径 [指令];
rewrite "^/api/(.*)$" /$1 break;
}
####1.2.3通过FastDFS改造文件上传流程
引入依赖,添加配置,踪迹服务器地址
java配置:FastClientImport 配置类
了解Linux,基于Linux配置FastDFS -基于Linux的Nginx服务器,实现图片访问的路径转发 -测试FastDFS官网的java测试,实现分布式文件系统 -整合FastDFS,整合FastDFS图片上传
FastFileStorageClient:文件存储客户端
####1.2.4 商品信息管理(spu,sku)
商品规格及参数
商品列表数据模型及展示
商品查询(GoodsService)
商品编辑
商品删除/商品上下架
Live-Server :带有热加载功能的小型开发服务器
安装Elasticsearch: 数据分析引擎
安装Kibana:提供了操作Elasticsearch索引数据的控制台
安装ik分词器:是将一串字符串改为“词”的列表,最小单位的词
创建搜索微服务
spring:
application:
name: search-service
data:
elasticsearch:
cluster-name: elasticsearch
cluster-nodes: 192.168.235.129:9300
完成数据导入
注意事项
搭建流程
搭建技巧?
总结:
<script th:inline="javascript">
const a = /*[[${groups}]]*/ [];//可在js中使用
</script>
- th:text /th:utext th:each ${}
使用TemplateEngine 模板引擎生成静态化页面
engine.process("item",context,printWriter);
修改nginx配置,代理静态页面
新增 root html 路由本地静态页面
先找本地
root html; if (!-f $request_filename) { #请求的文件不存在，就反向代理 proxy_pass http://127.0.0.1:8084; break; }
避免线程阻塞,使用线程池技术,多线程写入静态页面
public class ThreadUtils {
private static final ExecutorService es = Executors.newFixedThreadPool(10);
public static void execute(Runnable runnable) {
es.submit(runnable);
}
}
/**
* 新建线程处理页面静态化
* @param spuId
*/
public void asyncExcute(Long spuId) {
ThreadUtils.execute(()->createHtml(spuId));
/*ThreadUtils.execute(new Runnable() {
@Override
public void run() {
createHtml(spuId);
}
});*/
}
let person = {
name: "jack",
// 以前：
eat: function (food) {
console.log(this.name + "在吃" + food);
},
// 箭头函数版：
eat2: food => console.log(person.name + "在吃" + food),// 这里拿不到this
// 简写版：
eat3(food){
console.log(this.name + "在吃" + food);
}
}
安装Node.js
安装Vue.js
使用Vue
<div id="app">
容器
</div>
<script>
// 创建vue实例
let app = new Vue({
el:"#app", // el即element，该vue实例要渲染的页面元素
data:{ // 渲染页面需要的数据
name: "刈",
},
methods:{
incr(){//可以获取this,简单的箭头函数
}
}, //函数
watch:{
name(newVal, oldVal){ } //监听属性的变化
}, //属性监听(方法名和监听的属性相同)
created:{}, //钩子函数:vue实例创建时自动调用的方法
components:{},//组件
computed:{},//定义计算属性,计算本质就是方法,但是方法必须you返回值,使用方法类似数据模型,依赖项未改变,则从缓存中获取并计算
});
</script>
Vue组件化
Vue.component("counter",{
//模板组件必须有且只能有一个根节点,可是使用 ``来创建模型
template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data(){ //data必须是一个函数，不再是一个对象。
return {
count:0
}
} //不同于普通组件,需要使用方法且使用方法的方绘制作为数据模型
})
<div id="app">
<counter></counter>
<!-- 由于html是大小写不敏感的，如果采用上面的写法，则被认为是<loginform></loginform>
所以，如果是驼峰形式的组件，需要把驼峰转化为“-”的形式-->
</div>
<script>
const counter = {
template:'<button v-on:click="count++">你点了我 {{ count }} 次，我记住了.</button>',
data(){
return {
count:0
}
}
};
var app = new Vue({
el:"#app",
components:{
counter:counter // 将定义的对象注册为组件,同名可以省略只写一个
}
})
</script>
路由vue-router
webpack
作用
安装
核心概念
编写webpack配置
module.exports={
entry:'./src/main.js', //指定打包的入口文件
output:{
// path: 输出的目录，__dirname是相对于webpack.config.js配置文件的绝对路径
path : __dirname+'/dist',
filename:'build.js' //输出的js文件名
}
}
= 执行打包:npx webpack --config webpack.config.js
了解:
vue-cli脚手架
安装:
快速上手
项目结构:
运行
什么是Nginx?
nginx可以作为web服务器，但更多的时候，我们把它作为网关，因为它具备网关必备的功能：
nginx作为web服务器
nginx作为反向代理
使用
server {
listen 80; #箭筒端口
server_name manage.yiyou.com; #映射网址
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
location / {
proxy_pass http://127.0.0.1:9001; #对应路径
proxy_connect_timeout 600; #连接超时时间
proxy_read_timeout 600; #读取超时时间
#当配置图片(本地指定文件路径时)
}
}
安装FastDFS
先处理防火墙
启动服务
安装FastDFS-nginx-module
安装nginx
yum install git gcc gcc-c++ make automake autoconf libtool pcre pcre-devel zlib zlib-devel openssl-devel wget vim -y
./configure --add-module=/usr/local/yiyou/fastdfs-nginx-module/src/
server {
listen 80; ## 该端口为storage.conf中的http.server_port相同
server_name 192.168.11.133; #服务器端口(image.yiyou.com)
location ~/group[0-9]/ {
ngx_fastdfs_module;
}
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
}
FastDFS Client 客户端
<dependency>
<groupId>com.github.tobato</groupId>
<artifactId>fastdfs-client</artifactId>
</dependency>
fdfs:
so-timeout: 1501 #超时时间
connect-timeout: 601 #连接超时时间
thumb-image: # 缩略图
width: 60
height: 60
tracker-list: # tracker地址
- 192.168.11.132:22122
分布式全文检索技术:restful接口
Elasticsearch: 数据分析引擎
安装Kibana
安装ik分词器
解决一系列启动异常后,启动elasticsearch,通过http://192.168.235.129:9200访问成功即可
通过kibana提供( http://localhost:5601/)的控制台工具,实现对数据的增删改查
Elasticsearch的基本概念
索引（indices）---------------------Databases 数据库
类型（type）-------------------------Table 数据表
文档（Document）----------------Row 行
字段（Field）-------------------Columns 列
映射配置
_source：源文档信息，所有的数据都在里面。_id：这条文档的唯一标示，与文档自己的id字段没有关联Elasticsearch的基础操作
桶，一个叫度量：###2.7 Spring Data Elasticsearch
####2.8.2 RabbitMQ的基础使用
生产者发送消息
消费者获取消息
消息确认机制(ACK)
自动:自动确认消息,存在出现异常消息丢失的现象
手动:手动确认消息,避免异常导致的消息丢失问题
能者多劳:类似Feign的负载均衡
告诉RabbitMQ一次不要向工作人员发送多于一条消息
channel.basicQos(1);
订阅模型分类
解读：
1、1个生产者，多个消费者
2、每一个消费者都有自己的一个队列
3、生产者没有将消息直接发送到队列，而是发送到了交换机
4、每个队列都要绑定到交换机
5、生产者发送的消息，经过交换机到达队列，实现一个消息被多个消费者获取的目的
X（Exchanges）：交换机一方面：接收生产者发送的消息。另一方面：知道如何处理消息，例如递交给某个特别队列、递交给所有队列、或是将消息丢弃。到底如何操作，取决于Exchange的类型。
Exchange类型有以下几种：
Fanout：广播，将消息交给所有绑定到交换机的队列
Direct：定向，把消息交给符合指定routing key 的队列
Topic：通配符，把消息交给符合routing pattern（路由模式） 的队列
Exchange（交换机）只负责转发消息，不具备存储消息的能力，因此如果没有任何队列与Exchange绑定，或者没有符合路由规则的队列，那么消息会丢失！
订阅模型-Fanout(广播)
订阅类型-Direct(路由模式)
发送指定类型的消息:RoutingKey,通过RoutingKey进行匹配需要接受的消息
channel.basicPublish(EXCHANGE_NAME, "insert", null, message.getBytes());
处理指定类型的消息:设置可接受的类型
channel.queueBind(QUEUE_NAME, EXCHANGE_NAME, "update");
订阅模型-Topic(通配符)
持久化
总结
####2.8.3SpringAMQP
Spring-amqp是对AMQP协议的抽象实现，而spring-rabbit 是对协议的具体实现，也是目前的唯一实现。底层使用的就是RabbitMQ。
依赖和配置
spring.rabbitmq. host (地址) virtual-host(虚拟机) username password 交换机
注解
@RabbitListener(bindings = @QueueBinding(
value = @Queue(value = "leyou.create.web.queue",durable = "true"), //队列持久化
exchange = @Exchange(
value = "leyou.item.exchange",
ignoreDeclarationExceptions = "true",
type = ExchangeTypes.TOPIC
),
key = {"item.insert","item.update"}
))
public void listenCreate(Long id) throws Exception{
if (id == null){
return;
}
//接收到消息后执行相关更新操作
}
安装:详见csdn
RedisManager管理工具
SpringDataRedis
RedisTemplate
StringRedisTemplate : 避免字符串序列化的问题,浪费内存
注意事项
StringUtils (lang3/spring)
CollectionUtils
ObjectUtils
BeanUtils: 实体类工具
集合转换
jdk8新特性
ObjectMapper公路类
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
//1.添加CORS配置信息
CorsConfiguration config = new CorsConfiguration();
//1) 允许的域,不要写*，否则cookie就无法使用了
config.addAllowedOrigin("http://manage.yiyou.com");
//2) 是否发送Cookie信息
config.setAllowCredentials(true);
//3) 允许的请求方式
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
// 4）允许的头信息
config.addAllowedHeader("*");
//2.添加映射路径，我们拦截一切请求
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
//3.返回新的CorsFilter.
return new CorsFilter(configSource);
}
}
@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
public class CosApplication {
public static void main(String[] args) {
SpringApplication.run(CosApplication.class);
}
}
idea连接远程服务器
idea打开服务器命令栏
本机模拟域名/二级域名访问网站
使用Feign发送请求的时候发送的请求变为post请求
Spu的参数信息需要填写完善,否则会导致向Elasticsearch导入数据时出现空指针异常的问题
谷歌浏览器无法保存本地cookie的解决方法: 右键快捷方式->属性->快捷方式->目标->添加 --enable-file-cookies (注意空格区分)
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。