shenzhen_zsw的专栏

Vue中watch的简单应用Vue中watch的简单应用demo1demo2demo3Vue中watch的简单应用Vue.js 有一个方法 watch，它可以用来监测Vue实例上的数据变动。如果对应一个对象，键是观察表达式，值是对应回调，值也可以是方法名，或者是对象，包含选项。下面写两个demo，参考demo来了解一下demo1<template> <div>...

chrome 67版本后无法拖拽离线安装CRX格式插件的解决方法第一种：开启开发者模式即可 （推荐）第二种方法：修改参数第三种：修改文件格式，加载扩展程序有一部分网友反映子chrome 67版本以后以前离线安装chrome插件的方法无法使用，虽然小编的电脑仍然可以使用，但是既然有那么多用户反映，自然是存在这种问题的，小编收集整理了三种解决chrome 67版本后无法拖拽离线安装CRX格式插件的解...

Webpack DefinePlugin使用DefinePluginDefinePluginnew webpack.DefinePlugin(definitions)DefinePlugin可以在编译时期创建全局变量。该特性适用于开发版本同线上版本在某些常量上有区别的场景。比如，可能会通过全局变量定义是否需要打印日志，在开发版中打印日志，而在先上版本不打印日志。new webpac...

IDEA配置GitIDEA配置Git步骤：（1）在本地安装git(Windows版本)（2）在IDEA中选择菜单 : File – settings , 在窗口中选择Version Control – Git将项目代码提交到Git（1）选择菜单VCS --> Enable Version Control Integration…，选择Git（2）设置远程地址: 右键点击工程...

git --bare init和git init的区别如果使用了git init初始化，则远程仓库的目录下，也包含work tree，当本地仓库向远程仓库push时, 如果远程仓库正在push的分支上（如果当时不在push的分支，就没有问题）, 那么push后的结果不会反应在work tree上, 也即在远程仓库的目录下对应的文件还是之前的内容，必须得使用git reset --hard才...

Path variable [contentHash:8] not implemented in this context: styles.[contentHash:8].csswebPack 升级到 4.x导致extract-text-webpack-plugin 无法使用处理方法 plugins: [ new ExtractTextPlugin({ // 从 ...

webpack4.x 报错：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoin在配置webpack4报错：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoi...

商城-一个简单的线程工具线程工具定义线程工具线程工具调用定义线程工具package com.leyou.utils;import java.util.concurrent.*;/** * @Feature: 线程工具 */public class ThreadUtils { private static final ExecutorService es = Execut...

异常：Caused by: com.rabbitmq.client.ShutdownSignalException: channel error; protocol method: #method<channel.close>(reply-code=406, reply-text=PRECONDITION_FAILED - inequivalent arg ‘durable’ for...

docker run -di --name=leyou_rabbitmq -p 5671:5617 -p 5672:5672 -p 4369:4369 -p 15671:15671 -p 15672:15672 -p 25672:25672 rabbitmq:management

用docker部署FastDFS[分布式文件系统]关闭防火墙步骤1步骤2步骤3下载FastDFS文件系统的docker镜像查询镜像安装镜像使用docker镜像构建tracker容器创建tracker容器查看Tracker端口构建storage容器进行服务的配置配置fdfs_conf目录下的storage.conf重新启动storage容器查看tracker容器和storage容器的关联在docke...

docker的四种网络模式host模式Container模式none 模式bridge模式host模式docker run 使用 --net=host指定docker使用的网络实际上和宿主机一样Container模式使用 --net=container:container_id/container_name多个容器使用共同的网络，看到的ip是一样的。none 模式使用 --net=...

1. Centos下安装FastDFS1.1 上传将课前资料中的文件上传到linux下的/home/leyou/fdfs目录:1.2 安装依赖FastDFS运行需要一些依赖，在课前资料提供的虚拟中已经安装好了这些依赖，如果大家想要从头学习，可以按下面方式安装：1.2.1 安装GCC依赖GCC用来对C语言代码进行编译运行，使用yum命令安装：sudo yum -y install g...

1、异步查询工具axios

商城-下单-微信支付3.微信支付3.1.介绍3.2.开发流程3.3.生成二维码3.3.1.生成预交易链接3.3.2.生成二维码3.4.付款状态查询3.4.1.页面循环查询支付状态3.4.2.付款成功页面3.微信支付3.1.介绍微信支付官方文档：https://pay.weixin.qq.com/index.php/core/home/login?return_url=%2F我们选择开发文...

商城-购物车-订单结算页2.订单结算页2.1.页面跳转2.2.收货人信息（作业）2.3.支付方式2.4.商品列表2.4.1.购物车信息获取2.4.2.页面渲染2.5.总金额2.6.提交订单2.6.1.页面提交2.6.2.精度损失问题2.订单结算页2.1.页面跳转在购物车页面的最下方，有一个去结算按钮：当点击结算，我们应该跳转到订单结算页，即：getOrderInfo.html查看购物...

商城-购物车-订单系统接口1.订单系统接口1.1.导入订单服务1.2.Swagger-UI1.2.1.什么是OpenAPI1.2.2.什么是swagger？1.2.3.快速入门1）引入依赖2）编写配置3）接口声明4）启动测试1.3.测试接口1.3.1.创建订单接口1.3.2.生成ID的方式1.3.2.查询订单接口1.3.3.更新订单状态1.3.4.分页查询订单1.3.5.生成微信付款链接微信支付工...

商城-购物车-登录后购物车合并5.登录后购物车合并5.登录后购物车合并当跳转到购物车页面，查询购物车列表前，需要判断用户登录状态，如果登录：首先检查用户的LocalStorage中是否有购物车信息，如果有，则提交到后台保存，清空LocalStorage如果未登录，直接查询即可...

商城-购物车-已登录购物车4.已登录购物车4.1.添加登录校验4.1.1.引入JWT相关依赖4.1.2.配置公钥4.1.3.加载公钥4.1.4.编写拦截器4.1.5.配置过滤器4.2.后台购物车设计4.3.添加商品到购物车4.3.1.页面发起请求4.3.2.编写controller4.3.3.CartService4.3.4.GoodClient4.3.5.结果4.4.查询购物车4.4.1.页面发...

商城-购物车-未登录购物车3.未登录购物车3.1.准备3.1.1购物车的数据结构3.1.2.web本地存储什么是web本地存储？LocalStorage的用法3.1.3.获取num3.2.添加购物车3.2.1.点击事件3.2.2.获取数量，添加购物车3.3.查询购物车3.3.1.校验用户登录3.3.2.查询购物车3.5.2.渲染到页面3.6.修改数量3.7.删除商品3.8.选中商品3.8.1.选中...

商城-购物车-搭建购物车服务2.购物车功能分析2.1.需求2.2.流程图2.购物车功能分析2.1.需求需求描述：用户可以在登录状态下将商品添加到购物车放入数据库放入redis（采用）用户可以在未登录状态下将商品添加到购物车放入localstorage用户可以使用购物车一起结算下单用户可以查询自己的购物车用户可以在购物车中修改购买商品的数量。用户可以在购物车中删...

商城-购物车-搭建购物车服务1.搭建购物车服务1.1.创建module1.2.pom依赖1.3.配置文件1.4.启动类1.搭建购物车服务1.1.创建module1.2.pom依赖<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" ...

商城-授权中心-网关的登录拦截器4.网关的登录拦截器4.1.引入jwt相关配置4.2.编写过滤器逻辑4.3.白名单4.网关的登录拦截器接下来，我们在Zuul编写拦截器，对用户的token进行校验，如果发现未登录，则进行拦截。4.1.引入jwt相关配置既然是登录拦截，一定是前置拦截器，我们在leyou-gateway中定义。首先在pom.xml中，引入所需要的依赖：<depende...

商城-授权中心-首页判断登录状态3.首页判断登录状态3.1.页面JS代码3.2.后台实现校验用户接口3.3.测试3.4.刷新token3.首页判断登录状态虽然cookie已经成功写入，但是我们首页的顶部，登录状态依然没能判断出用户信息：这里需要向后台发起请求，根据cookie获取当前用户的信息。我们先看页面实现3.1.页面JS代码页面的顶部已经被我们封装为一个独立的Vue组件，在/j...

商城-授权中心-授权中心2.授权中心2.1.创建授权中心2.1.1.创建父module2.1.2.通用module2.1.3.授权服务2.2.JWT工具类2.3.测试工具类2.3.编写登录授权接口2.3.1.生成公钥和私钥2.3.2.Controller2.3.3.CookieUtils2.3.3.UserClient2.3.4.Service2.3.5.项目结构2.3.6.测试2.4.登录页面2...

商城-授权中心-无状态登录原理1.无状态登录原理1.1.什么是有状态？1.2.什么是无状态1.3.如何实现无状态1.4.JWT1.4.1.简介1.4.2.数据格式1.4.3.JWT交互流程1.4.4.非对称加密1.5.结合Zuul的鉴权流程1.5.1.没有RSA加密时1.5.2.结合RSA的鉴权1.无状态登录原理1.1.什么是有状态？有状态服务，即服务端需要记录每次会话的客户端信息，从而识别...

商城-用户注册-根据用户名和密码查询用户7.根据用户名和密码查询用户7.1.接口说明功能说明接口路径参数说明：返回结果：7.2.controller7.3.service7.4.测试8.在注册页进行测试7.根据用户名和密码查询用户7.1.接口说明功能说明查询功能，根据参数中的用户名和密码查询指定用户接口路径GET /query参数说明：form表单格式参数说明是否...

商城-用户注册-注册功能6.注册功能6.1.接口说明6.2.controller6.3.service6.4.测试6.5.服务端数据校验6.5.1.什么是Hibernate Validator6.5.2.Bean校验的注解6.5.3.给User添加校验6.5.4.在controller上进行控制6.5.5.测试6.注册功能6.1.接口说明6.2.controller/** * 注册 ...

商城-用户注册-数据验证功能5.发送短信功能5.1.接口说明5.2.Redis5.2.1.安装5.2.2.Spring Data Redis5.2.3.RedisTemplate基本操作5.2.4.StringRedisTemplate5.2.5.测试5.3.controller5.4.service5.5.测试5.发送短信功能短信微服务已经准备好，我们就可以继续编写用户中心接口了。5.1....

商城-用户注册-阿里大于短信服务4.阿里大于短信服务4.1.demo4.2.创建短信微服务4.2.1.创建module4.2.2.pom4.2.3.编写启动类4.2.4.编写application.yml4.3.编写短信工具类4.3.1.属性抽取4.3.2.工具类4.4.编写消息监听器4.5.启动4.阿里大于短信服务4.1.demo注册页面上有短信发送的按钮，当用户点击发送短信，我们需要生成...

商城-用户注册-数据验证功能3.数据验证功能3.1.接口说明3.2.controller3.3.Service3.4.测试3.数据验证功能3.1.接口说明实现用户数据的校验，主要包括对：手机号、用户名的唯一性校验。接口路径：GET /check/{data}/{type}参数说明：参数说明是否必须数据类型默认值data要校验的数据是String无...

商城-用户注册-后台功能准备2.后台功能准备2.1.接口文档2.2.数据结构2.3.基本代码2.3.1.实体类2.3.2.mapper2.3.3.Service2.3.4.controller2.后台功能准备2.1.接口文档整个用户中心的开发，我们将模拟公司内面向接口的开发。现在假设项目经理已经设计好了接口文档，详见：《用户中心接口说明.md》我们将根据文档直接编写后台功能，不关心页面...

商城-用户注册-创建用户中心1.创建用户中心1.1.创建父module1.2.创建leyou-user-interface1.3.创建leyou-user-service1.4.添加网关路由1.创建用户中心用户搜索到自己心仪的商品，接下来就要去购买，但是购买必须先登录。所以接下来我们编写用户中心，实现用户的登录和注册功能。用户中心的提供的服务：用户的注册用户登录用户个人信息管理用户...

商城-RabbitMQ及消息同步-项目改造4.项目改造4.1.思路分析4.2.商品服务发送消息4.2.1.引入依赖4.2.2.配置文件4.2.3.改造GoodsService4.3.搜索服务接收消息4.3.1.引入依赖4.3.2.添加配置4.3.3.编写监听器4.3.4.编写创建和删除索引方法4.4.静态页服务接收消息4.4.1.引入依赖4.4.2.添加配置4.4.3.编写监听器4.4.4.添加删...

商城-RabbitMQ及消息同步-Spring AMQP3.Spring AMQP3.1.简介3.2.依赖和配置3.3.监听者3.4.AmqpTemplate3.5.测试代码3.Spring AMQP3.1.简介Sprin有很多不同的项目，其中就有对AMQP的支持：Spring AMQP的页面：http://spring.io/projects/spring-amqp注意这里一段描述...

商城-RabbitMQ及消息同步-五种消息模型2.五种消息模型2.1.基本消息模型2.1.1.生产者发送消息2.1.2.管理工具中查看消息2.1.3.消费者获取消息2.1.4.消息确认机制（ACK）2.1.4.1.自动ACK存在的问题2.1.4.2.演示手动ACK2.2.work消息模型2.2.1.生产者2.2.2.消费者12.2.3.消费者22.2.4.能者多劳2.3.订阅模型分类2.4.订阅模...

商城-RabbitMQ及消息同步-RabbitMQ1.RabbitMQ1.1.搜索与商品服务的问题1.2.消息队列（MQ）1.2.1.什么是消息队列1.2.2.AMQP和JMS1.2.3.常见MQ产品1.2.4.RabbitMQ1.3.下载和安装1.3.1.下载1.3.2.安装1.RabbitMQ1.1.搜索与商品服务的问题目前我们已经完成了商品详情和搜索系统的开发。我们思考一下，是否存在问...

商城-商品详情及静态化-页面静态化2.页面静态化2.1.简介2.1.1.问题分析2.1.2.什么是静态化2.1.3.如何实现静态化2.2.Thymeleaf实现静态化2.2.1.概念2.2.2.具体实现2.2.3.什么时候创建静态文件2.2.4.重启测试：2.3.nginx代理静态页面2.页面静态化2.1.简介2.1.1.问题分析现在，我们的页面是通过Thymeleaf模板引擎渲染后返回到...

商城-商品详情及静态化-商品详情1.商品详情1.1.Thymeleaf1.2.商品详情页服务1.2.1.创建module1.2.2.pom依赖1.2.3.编写启动类1.2.4.application.yml文件1.2.5.页面模板1.3.页面跳转1.3.1.修改页面跳转路径1.3.2.nginx反向代理1.3.3.编写跳转controller1.3.4.测试1.4.封装模型数据1.4.1.商品微服...

商城-搜索过滤-优化7.优化7.优化搜索系统需要优化的点：查询规格参数部分可以添加缓存聚合计算interval变化频率极低，所以可以设计为定时任务计算（周期为天），然后缓存起来。elasticsearch本身有查询缓存，可以不进行优化商品图片应该采用缩略图，减少流量，提高页面加载速度图片采用延迟加载图片还可以采用CDN服务器sku信息应该在页面异步加载，而不是放到索引库...

商城-搜索过滤-取消过滤项6.取消过滤项6.取消过滤项我们能够看到，每个过滤项后面都有一个小叉，当点击后，应该取消对应条件的过滤。思路非常简单：给小叉绑定点击事件点击后把过滤项从search.filter中移除，页面会自动刷新，OK绑定点击事件：绑定点击事件时，把k传递过去，方便删除删除过滤项removeFilter(k){ this.search.filt...

商城-搜索过滤-页面展示选择的过滤项5.页面展示选择的过滤项5.1.商品分类面包屑5.1.1.提供查询分类接口5.1.2.页面展示面包屑5.2.其它过滤项5.3.隐藏已经选择的过滤项5.页面展示选择的过滤项5.1.商品分类面包屑当用户选择一个商品分类以后，我们应该在过滤模块的上方展示一个面包屑，把三级商品分类都显示出来。用户选择的商品分类就存放在search.filter中，但是里面只有...

商城-搜索过滤-过滤条件的筛选4.过滤条件的筛选4.1.保存过滤项4.1.1.定义属性4.1.2.绑定点击事件4.2.后台添加过滤条件4.2.1.拓展请求对象4.2.2.添加过滤条件4.3.页面测试4.过滤条件的筛选当我们点击页面的过滤项，要做哪些事情？把过滤条件保存在search对象中（watch监控到search变化后就会发送到后台）在页面顶部展示已选择的过滤项把商品分类展示到顶部...

商城-搜索过滤-生成规格参数过滤3.生成规格参数过滤3.1.谋而后动3.3.实战3.3.1.扩展返回结果3.3.2.判断是否需要聚合3.3.3.获取需要聚合的规格参数3.3.4.聚合规格参数3.3.5.解析聚合结果3.3.6.最终的完整代码3.3.7.测试结果3.4.页面渲染3.4.1.渲染规格过滤条件3.4.2.展示或收起过滤条件3.生成规格参数过滤3.1.谋而后动有四个问题需要先思考清楚...

商城-搜索过滤-生成分类和品牌过滤2.生成分类和品牌过滤2.1.扩展返回的结果2.2.聚合商品分类和品牌2.2.1.提供查询品牌接口2.2.2.搜索功能改造2.3.页面渲染数据2.3.1.过滤参数数据结构2.3.2.页面渲染数据2.生成分类和品牌过滤先来看分类和品牌。在我们的数据库中已经有所有的分类和品牌信息。在这个位置，是不是把所有的分类和品牌信息都展示出来呢？显然不是，用户搜索的条件会对...

商城-搜索过滤-过滤功能分析1.过滤功能分析1.过滤功能分析首先看下页面要实现的效果：整个过滤部分有3块：顶部的导航，已经选择的过滤条件展示：商品分类面包屑，根据用户选择的商品分类变化其它已选择过滤参数过滤条件展示，又包含3部分商品分类展示品牌展示其它规格参数展开或收起的过滤条件的按钮顶部导航要展示的内容跟用户选择的过滤条件有关。比如用户选择了某个商品...

商城-Elasticsearch-排序4.排序(作业)4.1.页面搜索排序条件4.2.后台添加排序逻辑4.排序(作业)4.1.页面搜索排序条件在搜索商品列表的顶部，有这么一部分内容：这是用来做排序的，默认按照综合排序。点击新品，应该按照商品创建时间排序，点击价格应该按照价格排序。因为我们没有统计销量和评价，这里咱们以新品和价格为例，进行讲解，做法是想通的。排序需要知道两个内容：排序...

商城-Elasticsearch-页面分页效果3.页面分页效果3.1.如何生成分页条3.1.1.需要的数据3.1.2.后台提供数据3.1.3.页面计算分页条3.2.点击分页做什么3.3.页面顶部分页条)3.页面分页效果刚才的查询中，我们默认了查询的页码和每页大小，因此所有的分页功能都无法使用，接下来我们一起看看分页功能条该如何制作。这里要分两步，第一步：如何生成分页条第二步：点击分...

商城-Elasticsearch-实现基本搜索2.实现基本搜索2.1.页面分析2.1.1.页面跳转2.1.2.发起异步请求2.2.后台提供搜索接口2.2.1.controller2.2.2.service2.2.3.测试2.3.页面渲染2.3.1.保存搜索结果2.3.2.循环展示商品2.3.3.多sku展示2.3.3.1.分析2.3.3.2.初始化sku2.3.3.3.多sku图片列表2.3.4...

商城-Elasticsearch-索引库数据导入1.索引库数据导入1.1.创建搜索服务1.2.索引库数据格式分析1.2.1.以结果为导向1.2.2.需要什么数据1.2.3.最终的数据结构1.3.商品微服务提供接口1.3.1.商品分类名称查询1.3.2.编写FeignClient1.3.2.1.问题展现1.3.2.2.解决方案1.3.2.3.测试1.4.导入数据1.4.1.创建GoodsReposi...

商城-Elasticsearch-Spring Data Elasticsearch5.Spring Data Elasticsearch5.1.简介5.2.创建Demo工程5.3.实体类及注解5.4.Template索引操作5.4.1.创建索引和映射5.3.2.删除索引5.4.Repository文档操作5.4.1.新增文档5.4.2.批量新增5.4.3.修改文档5.4.4.基本查询5.4.5....

商城-Elasticsearch-查询4. 聚合aggregations4.1 基本概念4.2 聚合为桶4.3 桶内度量4.4 桶内嵌套桶4.5.划分桶的其它方式4.5.1.阶梯分桶Histogram4.5.2.范围分桶range4. 聚合aggregations聚合可以让我们极其方便的实现对数据的统计、分析。例如：什么品牌的手机最受欢迎？这些手机的平均价格、最高价格、最低价格？这些手...

商城-Elasticsearch-查询3.查询3.1.基本查询：3.1.1 查询所有（match_all)3.1.2 匹配查询（match）3.1.3 多字段查询（multi_match）3.1.4 词条匹配(term)3.1.5 多词条精确匹配(terms)3.2.结果过滤3.2.1.直接指定字段3.2.2.指定includes和excludes3.3 高级查询3.3.1 布尔组合（bool)3...

商城-Elasticsearch-操作索引2.操作索引2.1.基本概念2.2.创建索引2.2.1.语法2.2.2.测试2.2.3.使用kibana创建2.3.查看索引设置2.4.删除索引2.5.映射配置2.5.1.创建映射字段2.5.2.查看映射关系2.5.3.字段属性详解2.5.3.1.type2.5.3.2.index2.5.3.3.store2.5.3.4.boost2.6.新增数据2.6....

商城-商品管理-独立安装Elasticsearch1.Elasticsearch介绍和安装1.1.简介1.1.1.Elastic1.1.2.Elasticsearch1.1.3.版本1.2.安装和配置1.2.1.新建一个用户leyou1.2.2.上传安装包,并解压1.2.3.修改配置1.3.运行1.3.1.错误1：内核过低1.3.2.错误2：文件权限不足1.3.3.错误3：线程数不够1.3.4.错...

商城-商品管理-搭建前台系统3.搭建前台系统3.1.静态资源3.1.1.创建工程3.1.2.导入静态资源3.2.live-server3.2.1.简介3.2.2.安装和运行参数3.2.3.测试3.3.域名访问3.4.common.js3.搭建前台系统后台系统的内容暂时告一段落，有了商品，接下来我们就要在页面展示商品，给用户提供浏览和购买的入口，那就是我们的门户系统。门户系统面向的是用户，安全...

商城-商品管理-商品修改2.商品修改2.1.编辑按钮点击事件2.2.查询SpuDetail接口2.3.查询sku2.4.页面回显2.5.页面提交2.6.后台实现2.6.1.Controller2.6.2.Service2.6.3.mapper2.7.其它2.商品修改2.1.编辑按钮点击事件在商品详情页，每一个商品后面，都会有一个编辑按钮：点击这个按钮，就会打开一个商品编辑窗口，我们看下它...

商城-商品管理-商品新增1.商品新增1.1.弹窗事件1.2.基本数据1.2.1.商品分类1.2.2.品牌选择1.2.2.1页面1.2.2.2后台接口1.2.3.其它文本框1.3.商品描述1.3.1.什么是富文本编辑器1.3.2.Vue-Quill-Editor1.3.3.使用指南1.3.4.自定义的富文本编辑器1.3.5.效果1.4.商品规格参数改造查询规格参数接口1.5.SKU信息1.6.页面表...

商城-商品管理-商品新增5.商品新增5.1.效果预览5.2.从0开始5.3.新增商品页的基本框架5.3.1.Steppers，步骤线5.3.2.编写页面5.3.3.步骤切换按钮分析页面添加按钮添加点击事件5.4.商品基本信息5.4.1.在data中定义Goods属性5.4.2.商品分类选框5.4.3.品牌选择select组件页面实现后台提供接口测试效果5.4.4.标题等其它字段5.5.商品描述信息...

商城-商品管理-商品查询4.商品查询4.1.效果预览4.2.从0开始4.3.页面实现4.3.1.页面基本表格4.3.2.上下架状态按钮4.4.后台提供接口4.4.1.实体类4.4.2.controller4.4.3.service4.4.4.mapper4.4.5.Category中拓展查询名称的功能4.5.测试4.商品查询4.1.效果预览接下来，我们实现商品管理的页面，先看下我们要实现的效...

商城-商品规格管理-SPU和SKU数据结构3.SPU和SKU数据结构3.1.SPU表3.1.1.表结构3.1.2.spu中的规格参数3.1.2.1.specifications字段3.1.2.2.spec_template字段3.2.SKU表3.2.1.表结构3.2.2.sku中的特有规格参数3.2.2.1.indexes字段3.2.2.2.own_spec字段3.3.导入图片信息3.SPU和S...

商城-商品规格管理-商品规格参数管理2.商品规格参数管理2.1.页面实现2.1.1.整体布局2.1.2.data中定义的属性2.2.规格参数的查询2.2.1.树节点的点击事件2.2.2.后端代码2.3.增、删、改（作业）2.商品规格参数管理2.1.页面实现页面比较复杂，这里就不带着大家去实现完整页面效果了，我们一起分析一下即可。2.1.1.整体布局打开规格参数页面，看到如下内容：因为...

商城-商品规格管理-商品规格数据结构1.商品规格数据结构1.1.SPU和SKU1.2.数据库设计分析1.2.1.思考并发现问题1.2.2.分析规格参数1.2.3.SKU的特有属性1.2.4.搜索属性1.3.规格参数表1.3.1.表结构1.3.2.json结构分析1.商品规格数据结构乐优商城是一个全品类的电商网站，因此商品的种类繁多，每一件商品，其属性又有差别。为了更准确描述商品及细分差别，抽象...

商城-修改品牌4.修改品牌4.1.点击编辑出现弹窗4.2.回显数据4.3.商品分类回显4.3.1.后台提供接口controller4.3.2.前台查询分类并渲染4.3.3.新增窗口数据干扰4.3.4.提交表单时判断是新增还是修改4.修改品牌修改的难点在于回显。当我们点击编辑按钮，希望弹出窗口的同时，看到原来的数据：4.1.点击编辑出现弹窗这个比较简单，修改show属性为true即可实现...

商城-FastDFS3.FastDFS3.1.什么是分布式文件系统3.2.什么是FastDFS3.3.FastDFS的架构3.3.1.架构图3.3.2.上传和下载流程3.4.安装和使用3.5.java客户端3.5.1.引入依赖3.5.2.引入配置类3.5.3.编写FastDFS属性3.5.4.测试3.5.5.改造上传逻辑3.5.6.测试3.6.页面测试上传3.FastDFS3.1.什么是分布式...

商城-实现图片上传2.实现图片上传2.1.搭建项目2.1.1.创建module2.1.2.依赖2.1.3.编写配置2.1.4.启动类2.2.编写上传功能2.2.1.controller2.2.2.service2.2.3.测试上传2.2.4.绕过网关2.2.4.1.Zuul的路由过滤2.2.4.2.Nginx的rewrite指令2.2.5.跨域问题2.2.6.之前上传的缺陷2.实现图片上传刚才...

商城-品牌的新增1.品牌的新增1.1.页面实现1.1.1.初步编写弹窗1.1.2.实现弹窗的可见和关闭1.1.3.新增品牌的表单页1.1.4.编写表单1.1.4.1.表单1.1.4.2.文本框1.1.4.3.级联下拉选框1.1.4.4.文件上传项1.1.4.5.按钮1.1.5.表单校验1.1.5.1.校验规则1.1.5.2.项目中代码1.1.6.表单提交1.2.后台实现新增1.2.1.contro...

商城-从0开始品牌的查询7.从0开始品牌的查询7.1.设计前端页面7.1.1.查询表格7.1.2.表格分析7.1.3.动手实现7.1.3.1.修改模板7.1.3.2.编写数据模型7.1.3.3.数据初始化7.2.3.4.完整代码7.1.4.优化页面7.1.4.1.编辑和删除按钮7.1.4.2.新增按钮7.1.4.3.卡片（card）7.1.4.4.添加搜索框7.1.4.5.添加搜索图标7.1.4....

商城-跨域问题6.跨域问题6.1.为什么有跨域问题？6.2.解决跨域问题的方案6.3.cors解决跨域6.3.1.什么是cors6.3.2.原理有点复杂6.3.2.1.简单请求6.3.2.2.特殊请求6.3.3.实现非常简单6.跨域问题跨域：浏览器对于javascript的同源策略的限制 。以下情况都属于跨域：跨域原因说明示例域名不同www.jd.com 与 www....

商城-实现商品分类查询5.实现商品分类查询5.1.导入数据5.2.页面实现5.2.1.页面分析5.2.2.树组件的用法5.3.实现功能5.3.1.url异步请求5.3.2.实体类5.3.3.controller5.3.4.service5.3.5.mapper5.3.6.启动并测试5.实现商品分类查询商城的核心自然是商品，而商品多了以后，肯定要进行分类，并且不同的商品会有不同的品牌信息，其关系...

商城-使用域名访问本地项目4.使用域名访问本地项目4.1.统一环境4.2.域名解析4.3.解决域名解析问题4.4.nginx解决端口问题4.4.1.什么是Nginx4.4.2.nginx作为web服务器4.4.3.nginx作为反向代理4.4.4.安装和使用安装反向代理配置使用4.5.测试4.使用域名访问本地项目4.1.统一环境我们现在访问页面使用的是：http://localhost:90...

商城-项目结构6.项目结构6.1.目录结构6.2.调用关系6.3.页面布局6.项目结构开始编码前，我们先了解下项目的结构：6.1.目录结构首先是目录结构图：6.2.调用关系我们最主要理清index.html、main.js、App.vue之间的关系：理一下：index.html中定义了空的div，其id为app。main.js中定义了Vue对象，并且绑定通过id选择器，绑定...

UI-Vuetify框架5.Vuetify框架5.1.为什么要学习UI框架5.2.为什么是Vuetify5.3.怎么用？5.Vuetify框架5.1.为什么要学习UI框架Vue负责的是虽然会帮我们进行视图的渲染，但是样式是有我们自己来完成。这显然不是我们的强项，因此后端开发人员一般都喜欢使用一些现成的UI组件，拿来即用，常见的例如：BootStrapLayUIEasyUIZUI...

商城-搭建后台管理前端4.搭建后台管理前端4.1.导入已有资源4.2.安装依赖4.3.运行一下看看4.搭建后台管理前端4.1.导入已有资源后台项目相对复杂，为了有利于教学，我们不再从0搭建项目，而是直接使用课前资料中给大家准备好的源码：我们解压缩，放到工作目录中：然后在IDEA中导入新的工程：选中我们的工程：这正是一个用vue-cli构建的webpack工程，是不是与昨天的一...

Vue入门 - vue-cli9.vue-cli9.1.介绍和安装9.2.快速上手9.3.项目结构9.4.单文件组件9.5.运行9.vue-cli9.1.介绍和安装在开发中，需要打包的东西不止是js、css、html。还有更多的东西要处理，这些插件和加载器如果我们一一去添加就会比较麻烦。幸好，vue官方提供了一个快速搭建vue项目的脚手架：vue-cli使用它能快速的构建一个web工程模...

Vue入门 - webpack8.webpack8.1.安装8.2.核心概念8.3.编写webpack配置8.3.1.入口entry8.3.2.出口output8.4.执行打包8.5.测试运行8.6.打包CSS8.6.1.安装加载器8.6.3.index.js引入css文件8.6.4.配置加载器8.6.5.重新打包8.7.script脚本8.8.打包HTML8.9.热更新的web服务8.webp...

Vue入门 - 路由vue-router7.路由vue-router7.1.场景模拟7.1.1.编写父组件7.1.2.编写登录及注册组件7.1.3.在父组件中引用7.1.5.问题7.2.vue-router简介和安装7.3.快速入门7.路由vue-router7.1.场景模拟现在我们来实现这样一个功能：一个页面，包含登录和注册，点击不同按钮，实现登录和注册页切换；7.1.1.编写父组件...

Vue入门-组件化6.组件化6.1.全局组件6.2.组件的复用6.3.局部注册6.4.组件通信6.4.1.props（父向子传递）6.4.2.props验证6.4.3.动态静态传递6.4.4.子向父的通信6.组件化在大型应用开发的时候，页面可以划分成很多部分。往往不同的页面，也会有相同的部分。例如可能会有相同的头部导航。但是如果每个页面都独自开发，这无疑增加了我们开发的成本。所以我们会把页面...

Vue入门-指令5.指令5.1.插值表达式5.1.1.花括号5.1.2.插值闪烁5.1.3.v-text和v-html5.2.v-model5.3.v-on5.3.1.基本用法5.3.2.事件修饰符5.3.3.按键修饰符5.3.4.组合按钮5.4.v-for5.4.1.遍历数组5.4.2.数组角标5.4.3.遍历对象5.4.4.key5.5.v-if和v-show5.5.1.基本使用5.5.2.与...

Vue入门-Vue实例4.Vue实例4.1.创建Vue实例4.2.模板或元素4.3.数据4.4.方法4.5.生命周期钩子4.5.1.生命周期4.5.2.钩子函数4.5.3.this4.Vue实例4.1.创建Vue实例每个 Vue 应用都是通过用 Vue 函数创建一个新的 Vue 实例开始的：var vm = new Vue({ // 选项})在构造函数中传入一个对象，并且在对象中...

Vue入门-Node和NPM3.3.vue入门案例3.3.1.HTML模板3.3.2.vue声明式渲染3.3.3.双向绑定3.3.4.事件处理3.3.vue入门案例3.3.1.HTML模板在hello-vue目录新建一个HTML在hello.html中，我们编写一段简单的代码：h2中要输出一句话：xx 非常帅。前面的xx是要渲染的数据。3.3.2.vue声明式渲染然后我们通过Vu...

Vue入门-Node和NPM2.Node和NPM2.1.下载Node.js2.2.NPM2.Node和NPM前面说过，NPM是Node提供的模块管理工具，可以非常方便的下载安装很多前端框架，包括Jquery、AngularJS、VueJs都有。为了后面学习方便，我们先安装node及NPM工具。2.1.下载Node.js下载地址：https://nodejs.org/en/推荐下载LTS...

Vue入门-认识Vue1.认识Vue1.认识VueVue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。​ 前端框架三巨头：...

Vue入门-前言0.前言0.前言前几天我们已经对后端的技术栈有了初步的了解、并且已经搭建了整个后端微服务的平台。接下来要做的事情就是功能开发了。但是没有前端页面，我们肯定无从下手，因此今天我们就要来了解一下前端的一些技术，完成前端页面搭建。先聊一下前端开发模式的发展。静态页面最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务端到客户端单向流通。开发人员也只关心页...

商城项目-ES6 语法指南商城项目-ES6 语法指南4、ES6 语法指南4.1.什么是ECMAScript？4.2.ECMAScript的快速发展4.3.ES5和6的一些新特性4.3.1.let 和 const 命令4.3.2.字符串扩展4.3.3.解构表达式4.3.4.函数优化4.3.5.map和reduce4.3.6.promise4.3.7.set和map（了解）4.3.8.模块化4.3....

商城项目-项目搭建3.项目搭建3.1.技术选型3.2.开发环境3.3.域名3.4.创建父工程3.5.创建EurekaServer3.5.1.创建工程3.5.2.添加依赖3.5.3.编写启动类3.5.4.配置文件3.5.5.项目的结构：3.6.创建Zuul网关3.6.1.创建工程3.6.2.添加依赖3.6.3.编写启动类3.6.4.配置文件3.6.5.项目结构3.7.创建商品微服务3.7.1.微服务...

商城项目-商城介绍2.商城介绍2.1.项目介绍2.2.系统架构2.2.1.架构图2.2.2.系统架构解读2.商城介绍2.1.项目介绍商城是一个全品类的电商购物网站（B2C）。用户可以在线购买商品、加入购物车、下单、秒杀商品可以品论已购买商品管理员可以在后台管理商品的上下架、促销活动管理员可以监控商品销售状况客服可以在后台处理退款操作希望未来3到5年可以支持千万用户的使用2....

商城项目-了解电商行业1.了解电商行业1.1.项目分类1.1.1.传统项目1.1.2.互联网项目1.2.电商行业的发展1.2.1.钱景1.2.2.数据1.2.3.技术特点1.3.常见电商模式1.4.一些专业术语1.5.项目开发流程1.了解电商行业学习电商项目，自然要先了解这个行业，所以我们首先来聊聊电商行业1.1.项目分类主要从需求方、盈利模式、技术侧重点这三个方面来看它们的不同1.1....

认识微服务-Zuul网关3.Zuul网关3.1.简介3.2.Zuul加入后的架构3.3.快速入门3.3.1.新建工程3.3.2.编写启动类3.3.3.编写配置3.3.4.编写路由规则3.3.5.启动测试：3.4.面向服务的路由3.4.1.添加Eureka客户端依赖3.4.2.开启Eureka客户端发现功能3.4.3.添加Eureka配置，获取服务信息3.4.4.修改映射配置，通过服务名称获取3.4...

认识微服务-Feign2.Feign2.1.简介2.2.快速入门2.2.1.导入依赖2.2.2.Feign的客户端2.2.3.开启Feign功能2.2.4.启动测试：2.3.负载均衡2.4.Hystix支持2.5.请求压缩(了解)2.6.日志级别(了解)2.Feign在前面的学习中，我们使用了Ribbon的负载均衡功能，大大简化了远程调用时的代码：String baseUrl = "http...

认识微服务-Hystix1.Hystix1.1.简介1.2.熔断器的工作机制：1.3.动手实践1.3.1.引入依赖1.3.2.开启熔断1.3.2.改造消费者1.3.3.改造服务提供者1.3.4.启动测试1.3.5.优化1.Hystix1.1.简介Hystix，即熔断器。主页：https://github.com/Netflix/Hystrix/Hystix是Netflix开源的一个延迟...

SpringCloud-负载均衡Ribbin7.负载均衡Ribbin7.1.启动两个服务实例7.2.开启负载均衡7.3.源码跟踪7.4.负载均衡策略7.5.重试机制7.负载均衡Ribbin在刚才的案例中，我们启动了一个user-service，然后通过DiscoveryClient来获取服务实例信息，然后获取ip和端口来访问。但是实际环境中，我们往往会开启很多个user-service的集群...

认识微服务-Eureka注册中心6.Eureka注册中心6.1.认识Eureka6.2.原理图6.3.入门案例6.3.1.编写EurekaServer6.3.2.将user-service注册到Eureka6.3.3.消费者从Eureka获取服务6.4.Eureka详解6.4.1.基础架构6.4.2.高可用的Eureka Server6.4.3.服务提供者6.4.4.服务消费者6.4.5.失效剔除...

认识微服务-微服务场景模拟5.微服务场景模拟5.1.服务提供者5.1.1.Spring脚手架创建工程5.1.2.编写代码5.1.3.启动并测试：5.2.服务调用者5.2.1.创建工程5.2.2.编写代码5.2.3.启动测试：5.3.有没有问题？5.微服务场景模拟首先，我们需要模拟一个服务调用的场景。方便后面学习微服务架构5.1.服务提供者我们新建一个项目，对外提供查询用户的服务。5.1....

认识微服务-初始SpringCloud4.初始SpringCloud4.1.简介4.2.版本4.初始SpringCloud微服务是一种架构方式，最终肯定需要技术架构去实施。微服务的实现方式很多，但是最火的莫过于Spring Cloud了。为什么？后台硬：作为Spring家族的一员，有整个Spring全家桶靠山，背景十分强大。技术强：Spring作为Java领域的前辈，可以说是功力深厚。...

认识微服务-Http客户端工具3.Http客户端工具3.1.HttpClient3.1.1.介绍3.1.2.使用3.1.3.Json转换工具对象转jsonjson转普通对象json转集合json转任意复杂类型3.3.Spring的RestTemplate3.Http客户端工具既然微服务选择了Http，那么我们就需要考虑自己来实现对请求和响应的处理。不过开源世界已经有很多的http客户端工具，能...

认识微服务-系统架构演变2.远程调用方式2.1.认识RPC2.2.认识Http2.3.如何选择？2.远程调用方式无论是微服务还是SOA，都面临着服务间的远程调用。那么服务间的远程调用方式有哪些呢？常见的远程调用方式有以下几种：RPC：Remote Produce Call远程过程调用，类似的还有RMI。自定义数据格式，基于原生TCP通信，速度快，效率高。早期的webservice，现在...

认识微服务-系统架构演变1.系统架构演变1.1. 集中式架构1.2.垂直拆分1.3.分布式服务1.4.服务治理（SOA）1.5.微服务1.系统架构演变随着互联网的发展，网站应用的规模不断扩大。需求的激增，带来的是技术上的压力。系统架构也因此也不断的演进、升级、迭代。从单一应用，到垂直拆分，到分布式服务，到SOA，以及现在火热的微服务架构，还有在Google带领下来势汹涌的Service Mes...

SpringBoot-Thymeleaf快速入门6.Thymeleaf快速入门6.1.为什么是Thymeleaf？6.2.编写接口6.3.引入启动器6.4.静态页面6.5.测试6.6.模板缓存6.Thymeleaf快速入门SpringBoot并不推荐使用jsp，但是支持一些模板引擎技术：以前大家用的比较多的是Freemarker，但是我们今天的主角是Thymeleaf！6.1.为什么是T...

SpringBoot-SpringBoot实践5.SpringBoot实践5.1.整合SpringMVC5.1.1.修改端口5.1.2.访问静态资源5.1.3.添加拦截器5.2.整合jdbc和事务5.3.整合连接池5.4.整合mybatis5.4.1.mybatis5.4.2.通用mapper5.5.启动测试5.SpringBoot实践接下来，我们来看看如何用SpringBoot来玩转以前的S...