谷粒商城项目基础篇总结文档
目录
项目基础篇
1: 下载virtualBox虚拟机，安装直接下一步
2: 下载vagrant 虚拟机镜像管理工具，安装直接下一步
3: 下载centos/7.box 镜像文件
4:将下载好的centos7加入到vagrant中
5:虚拟机安装docker,docker官网有详细步骤，按照步骤即可
配置docker镜像：
docker安装Mysql5.7
docker安装redis
注意重启虚拟机和docker后里面的容器就关了
配置maven的setting.xml
IDEA安装插件
安装VSCode工具，开发前端
安装git,以及使用git
参照我之前的文章：git如何使用
执行数据库脚本
VSCode准备
人人开源
人人vue
IDEA项目准备
逆向工程搭建
SpringCloud Alibaba简介
nacos注册中心
服务调用 openFeign
nacos配置中心
网关gateway
前端vue和element-ui 学习
实现商品分类tree树展示
1:添加前端代码片段
1:后台接口编写,product模块
2:前端分类展示功能实现
注意一下几点：
3:跨域问题及解决步骤
4品牌列表展示
阿里云OSS云存储文件实现
jse303: valid参数格式校验规则
全局异常处理和统一日志处理
二:商品分类和品牌管理的关联
1:后台实现
2:前端实现：父子组件的调用
IDEA操作批量重启模块，给模块设置栈内存
基础篇总结：
项目基础篇
1: 下载virtualBox虚拟机，安装直接下一步
2: 下载vagrant 虚拟机镜像管理工具，安装直接下一步
验证vagrant是否安装成功，cmd命令：vagrant -v
3: 下载centos/7.box 镜像文件
4:将下载好的centos7加入到vagrant中
如果之前已经创建了vagrantfile文件，要在上述步骤之前删除
--命令：
vagrant box add (name) (文件位置)例：vagrant box add centos7 C:\Users\Administrator\Desktop\vagrant-centos-7.box--初始化vagrant
vagrant init centos7--启动vagrant
vagrant up5:虚拟机安装docker,docker官网有详细步骤，按照步骤即可
官网：https://docs.docker.com/
找到文档步骤： Develops----Docs----Guides----Get Docker----Docker for Linux----Docker Engine----Installation per distro----install on Centos(这块镜像文件ubuntu等可选)
--下载docker,sudo管理员权限
sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine--sudo yum install -y yum-utils--sudo yum-config-manager \--add-repo \https://download.docker.com/linux/centos/docker-ce.repo--启动docker
sudo systemctl start docker--设置开机自启动
sudo systemctl enable docker--检查docker安装成功
docker -v
配置docker镜像：
阿里云网址：www.aliyun.com ，登录-----容器镜像服务-----镜像加速器----加速器地址
--创建docker目录
sudo mkdir -p /etc/docker--配置daemon.json
sudo tee /etc/docker/daemon.json <<-'EOF'
{"registry-mirrors": ["https://chqac97z.mirror.aliyuncs.com"]
}
EOF
--加载配置文件
sudo systemctl daemon-reload
--重启docker
sudo systemctl restart dockerdocker安装Mysql5.7
--切换root用户,密码为vagrant
su root --下载mysql5.7
docker pull mysql:5.7--查看mysql 镜像
--docker images--启动myql
--name指定容器名字 -v目录挂载 -p指定端口映射 -e设置mysql参数 -d后台运行
sudo docker run -p 3306:3306 --name mysql \
-v /mydata/mysql/log:/var/log/mysql \
-v /mydata/mysql/data:/var/lib/mysql \
-v /mydata/mysql/conf:/etc/mysql \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7--查看mysql实例
docker ps--创建my.conf文件
vi /mydata/mysql/conf/my.conf --配置文件my.conf
[client]
default-character-set=utf8
[mysql]
default-character-set=utf8
[mysqld]
init_connect='SET collation_connection = utf8_unicode_ci'
init_connect='SET NAMES utf8'
character-set-server=utf8
collation-server=utf8_unicode_ci
skip-character-set-client-handshake
skip-name-resolve--重启mysql
docker restart mysql--进入mysql实例
docker exec -it mysql bash--测试mysql是否启动成功,密码root
mysql -uroot -p--退出
exit--用本地sqlyog连接测试docker安装redis
--下载redis
docker pull redis--查看redis镜像
docker images--配置redis持久化，因为默认存在内存中，虚拟机重启，redis的值就没有了
--在虚拟机中，创建文件redis.conf
mkdir -p /mydata/redis/conf
touch /mydata/redis/conf/redis.conf
--修改文件redis.conf，开启持久化
appendonly yes--启动redis, -v 挂载目录， 挂载的目的是当有多个redis实例时候，只需要用挂载在虚拟机的一套配置即可
docker run -p 6379:6379 --name redis \
-v /mydata/redis/data:/data \
-v /mydata/redis/conf/redis.conf:/etc/redis/redis.conf \
-d redis redis-server /etc/redis/redis.conf--查看redis实例
docker ps--进入redis实例,进入redis控制台
docker exec -it redis redis-cli--测试redisl启动成功，和是否开启持久化
set aa bb
get aa
重启redis,然后在看aa还存在吗--用redis manager工具连接redis注意重启虚拟机和docker后里面的容器就关了
需要配置mysql和redis跟随虚拟机启动而启动
# 我们接下来设置我们要用的容器每次都是自动启动
sudo docker update redis --restart=always
sudo docker update mysql --restart=always配置maven的setting.xml
配置阿里云镜像
<mirror> <id>nexus-aliyun</id> <mirrorOf>central</mirrorOf> <name>Nexus aliyun</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> </mirror>配置jdk版本 1.8
<profile><id>jdk-1.8</id> <activation> <activeByDefault>true</activeByDefault> <jdk>1.8</jdk> </activation> <properties> <maven.compiler.source>1.8</maven.compiler.source> <maven.compiler.target>1.8</maven.compiler.target> <maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion> </properties> </profile>IDEA安装插件
Lombok插件，MybatisX插件
安装VSCode工具，开发前端
安装插件
Auto Close Tag
Auto Rename Tag
Chinese
ESlint
HTML CSS Support
HTML Snippets
JavaScript ES6
Live Server
open in brower
Vetur
Vue 2 Snippet安装git,以及使用git
参照我之前的文章：git如何使用
执行数据库脚本
在sqlyog建立数据库：字符集选utf8mb4，他能兼容utf8且能解决一些乱码的问题。分别建立了下面数据库
gulimall-oms
gulimall-pms
gulimall-sms
gulimall-ums
gulimall-wmsVSCode准备
点击执行sql脚本，依次选择评论区给的压缩包里的sql语句
人人开源
在码云上搜索人人开源，我们使用renren-fast，renren-fast-vue项目。
https://gitee.com/renrenio
--后台系统
git clone https://gitee.com/renrenio/renren-fast.git
--前台系统
git clone https://gitee.com/renrenio/renren-fast-vue.git人人vue
用VSCode打开renren-fast-vue
安装node：http://nodejs.cn/download/ 选择windows下载。下载完安装。
NPM是随同NodeJS一起安装的包管理工具，如JavaScript-NPM，java-Maven。
命令行输入node -v 检查配置好了，配置npm的镜像仓库地址，再执
node -v
npm config set registry http://registry.npm.taobao.org/然后取VScode的终端中输入 npm install，会报错，然后进行如下操作：
其次大部分错误是报node-sass4.9.0安装失败。
执行以下步骤可以完美解决
首先把项目文件夹下的package.json里面的node-sass4.9.0改成4.9.2（不改可能也没关系，不过我改了，防止踩坑）
然后项目文件夹下打开cmd命令窗口（和Visual Studio Code的终端命令是一样的）（我在VScode中不成功，还是用cmd吧，在cmd中注意切换到renren-fast-vue项目目录）
执行：
npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/等待挺长时间，执行成功看看有没有报错，如果没报错执行下面命令
npm install ，
没报错就是安装成功，然后在下面目录下使用npm run dev （运行项目）就ok了
注：这么做得原理就是先单独从淘宝镜像吧nod-sass下载下来，然后再进行编译，因为这句命令好像是不成功的，（npm config set registry http://registry.npm.taobao.org/），默认从github下载，导致报错的
如果之前安装失败的。先清理 缓存
清理缓存：npm rebuild node-sass
npm uninstall node-sass
IDEA项目准备
逆向工程搭建
人人开源逆向工程
git clone https://gitee.com/renrenio/renren-generator.git注意本地idea加载人人开源的 renren-fast，renren-generator的时候一直依赖下不来，具体解决如下
在pom.xml中的parent依赖中加上<relativePath />，这个样下载依赖就从本地下载就不从远程下载了
<parent><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-parent</artifactId><version>2.2.6.RELEASE</version><relativePath /> </parent>
搭建完是这样的，具体项目结构看实际项目
<modules><module>qiyun-coupon</module><module>qiyun-member</module><module>qiyun-order</module><module>qiyun-product</module><module>qiyun-ware</module><module>renren-fast</module><module>renren-generator</module><module>qiyun-common</module></modules>
SpringCloud Alibaba简介
分享一个不错博主的笔记：https://blog.csdn.net/hancoder/article/details/109063671
版本对照
nacos注册中心
1：下载nacos 服务端，找到bin目录启动即可，访问localhost:8848/nacos
2： 项目集成nacos
依赖
<!-- nacos客户端 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId></dependency>在启动类上加上注解 @EnableDiscoveryClient 即可
服务调用 openFeign
远程服务调用，http调用
依赖
<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-openfeign</artifactId></dependency>在调用者的启动类加上，注解 ，里面的包名是feign接口的包名
@EnableFeignClients(basePackages = {"com.qiyun.service.member.feign"})在调用者的模块创建feign包，里面写feign接口，案例如下，需要注意的是里面的方法路径一定要是全路径的
nacos配置中心
服务注册，发现，配置中心
依赖
<!-- nacos配置中心 --><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId></dependency>注解：
@value("${}") 从application.properties获取值
@RefreshScope 开启自动刷新
1:创建bootstrap.properties 文件,加上如下配置（文件加载顺序是 bootstrap---application）
spring.cloud.nacos.config.server-addr=127.0.0.1:8848
spring.application.name=qiyun-member
# namespace 指定命名空间
spring.cloud.nacos.config.namespace=5a93ebf5-41e6-4390-b4c5-55d018ea1287
# 分组设置，默认是default
spring.cloud.nacos.config.group=dev# 加载多配置集
spring.cloud.nacos.config.extension-configs[0].data-id=mysql.yaml
spring.cloud.nacos.config.extension-configs[0].group=dev
spring.cloud.nacos.config.extension-configs[0].refresh=truespring.cloud.nacos.config.extension-configs[1].data-id=mybaties.yml
spring.cloud.nacos.config.extension-configs[1].group=dev
spring.cloud.nacos.config.extension-configs[1].refresh=truenacos服务端的配置
标红的对应的---bootstrap.properties中的namespace
标绿色的对应的---bootstrap.properties中的group
标蓝色的对应--- 多配置集
其中data ID 的规则是 ：服务名+文件后缀（目前只支持properties和yml）
实际应用中，我们g一般这样用： 命名空间按照微服务的模块规定， 分组group 我们按照环境划分为 dev test pro , 多数据集配置 ：我们配置文件中的配置细分为多个配置，例如mysql.yml,mybaties.yml ,易于管理
网关gateway
网关是请求流量的入口 ：路由转发，鉴权，限流控制，负载
三大核心概念： route ,Predicate断言 ,Filter过滤器
参考手册：网关gateway文档
创建一个gateway 的模块
1:依赖：
<dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId></dependency>2:在启动类加上@EnableDiscoveryClient ，在nacos注册中心主注册
3:在application.yml中配置，路由各种规则
1：例如：uri: lb://renren-fast 注释// lb 这里表示 load balance 做负载均衡,配置服务名，网关会去nacos注册中心查找
2：predicates:
- Path=/api/** 注释//过滤所有路径中带有 /api的请求
3:filters:
- RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment} 注释// 利用过滤器，重新修改路径 把前面的 改成后面的
spring:application:name: qiyun-gatewaycloud:gateway:routes:# 配置参考文档：https://cloud.spring.io/spring-cloud-gateway/2.2.x/reference/html/- id: qiyun-product_routeuri: lb://qiyun-productpredicates:- Path=/api/product/**filters:- RewritePath=/api/(?<segment>.*),/$\{segment}- id: renren-fast_route# lb 这里表示 load balance 做负载均衡,配置服务名，网关会去nacos注册中心查找uri: lb://renren-fast# 断言predicates:# 过滤所有路径中带有 /api的请求- Path=/api/**filters:# 利用过滤器，重新修改路径 把前面的 改成后面的- RewritePath=/api/(?<segment>.*),/renren-fast/$\{segment}
前端vue和element-ui 学习
参考我的别的文章：前端vue
也可参考其他文章：参考
MVVM思想
- M：model 包括数据和一些基本操作
- V：view 视图，页面渲染结果
- VM：View-model，模型与视图间的双向操作（无需开发人员干涉）
添加组件：
VSCode中安装 Vue 2 Snippets插件，vue语法提醒
火狐浏览器安装 Vue.js devtools vue 调试工具
实现商品分类tree树展示
1:添加前端代码片段
{// Place your 全局 snippets here. Each snippet is defined under a snippet name and has a scope, prefix, body and // description. Add comma separated ids of the languages where the snippet is applicable in the scope field. If scope // is left empty or omitted, the snippet gets applied to all languages. The prefix is what is // used to trigger the snippet and the body will be expanded and inserted. Possible variables are: // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. // Placeholders with the same ids are connected.// Example:// "Print to console": {// "scope": "javascript,typescript",// "prefix": "log",// "body": [// "console.log('$1');",// "$2"// ],// "description": "Log output to console"// }"生成vue模板": {"prefix": "vue","body": ["<!-- $1 -->","<template>","<div class='$2'>$5</div>","</template>","","<script>","//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）","//例如：import 《组件名称》 from '《组件路径》';","","export default {","//import引入的组件需要注入到对象中才能使用","components: {},","data() {","//这里存放数据","return {","","};","},","//监听属性 类似于data概念","computed: {},","//监控data中的数据变化","watch: {},","//方法集合","methods: {","","},","//生命周期 - 创建完成（可以访问当前this实例）","created() {","","},","//生命周期 - 挂载完成（可以访问DOM元素）","mounted() {","","},","beforeCreate() {}, //生命周期 - 创建之前","beforeMount() {}, //生命周期 - 挂载之前","beforeUpdate() {}, //生命周期 - 更新之前","updated() {}, //生命周期 - 更新之后","beforeDestroy() {}, //生命周期 - 销毁之前","destroyed() {}, //生命周期 - 销毁完成","activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发","}","</script>","<style lang='scss' scoped>","//@import url($3); 引入公共css类","$4","</style>"],"description": "生成VUE模板"},"http-get请求": {"prefix": "httpget","body": ["this.\\$http({","url: this.\\$http.adornUrl(''),","method: 'get',","params: this.\\$http.adornParams({})","}).then(({ data }) => {","})"],"description": "httpGET请求"},"http-post请求": {"prefix": "httppost","body": ["this.\\$http({","url: this.\\$http.adornUrl(''),","method: 'post',","data: this.\\$http.adornData(data, false)","}).then(({ data }) => { });"],"description": "httpPOST请求"}
}1:后台接口编写,product模块
controller层
@ApiOperation(value = "查询商品分类列表，返回tree型数据")@GetMapping("/getTeeList")public R getTreeList(){List<CategoryEntity> list = categoryService.getTeeList();return R.ok().put("data", list);}service实现层，用lamda 流式表达式写的
我写的lamda简单测试用例连接：lamda简单使用
我写的swagger2使用步骤连接： swagger使用
@Overridepublic List<CategoryEntity> getTeeList() {
// QueryWrapper<CategoryEntity> query = new QueryWrapper<>();List<CategoryEntity> list = this.list();// 获取第一层级商品,hList<CategoryEntity> collect = list.stream().filter(entity -> entity.getParentCid() == 0).map(entity -> {entity.setChildren(getChildrenList(entity, list));return entity;}).sorted(Comparator.comparing(CategoryEntity::getSort)).collect(Collectors.toList());return collect;}/*** 递归获取三级菜单* @param categoryEntity* @param list* @return*/public List<CategoryEntity> getChildrenList(CategoryEntity categoryEntity,List<CategoryEntity> list){List<CategoryEntity> collect = list.stream().filter(entity -> entity.getParentCid() == categoryEntity.getCatId()).map(entity -> {entity.setChildren(getChildrenList(entity, list));return entity;}).sorted(Comparator.comparing(CategoryEntity::getSort)).collect(Collectors.toList());return collect;}
2:前端分类展示功能实现
先在系统管理---菜单管理界面，添加 商品分类 的 目录和菜单，步骤为下，增加以后可以去查看对应gulimall-admin库的sys_menu会相应增加两条数据
注意一下几点：
1: 上面填写的路由 很重要，例如 product/category ，这种中间带有斜杆 在真正路由时候会变成 product-category，
并且页面也是根据路由查找的，默认路径是： src/views/modules/ 这个文件夹下去寻找对应的页面，例如我路由是product/category，那么就在 src/views/modules/product/下面创建 category.vue 文件
2：如果使用过vue开发过的去找文件就会知道： $http 就是axios请求，在utils/httpRequest.js里面封装了axios和拦截器，然后在main.js中挂载全局，这个样全局就可以使用，
以前我们的请求是写在api目录的单独文件夹里面，需要导入import,但是现在不用直接$http({})在里面直接写路径和参数，其实本意跟之前也是一样的，只是请求接口的地方换了
category.vue 文件代码如下
element-ui组件链接：https://element.eleme.cn/#/zh-CN
<template><el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
</template><script>
export default {data() {return {data: [],defaultProps: {children: 'children',label: 'name'}};},created() {this.getTreeList()},methods: {handleNodeClick(data) {console.log(data);},getTreeList(){// $http 就是axios请求，在utils/httpRequest.js里面封装了axios和拦截器，然后在main.js中挂在全局，这个样全局就可以使用// 以前我们的请求是写在api目录的单独文件夹里面，需要导入import,但是现在不用直接$http({})在里面直接写路径和参数，// 其实本意跟之前也是一样的，只是请求接口的地方换了this.$http({url: this.$http.adornUrl('/product/category/getTeeList'),method: 'get'}).then(response=>{ // console.log(response)this.data=response.data.data;})}},
};
</script><style ></style>3:跨域问题及解决步骤
首先要知道当 协议，ip ,端口 三个只要有一个不一致就会导致跨域
解决跨域有几种我知道的方案：
1: 在每个微服务模块的controller类都加上@CrossOrigin 注解，此注解当访问此接口时候，就不会发生跨域问题，但是缺点是每个controller类都要加，比较麻烦
2: 就是在gateway中，我们这个项目中用到的，编写Filter类,统一处理跨域问题
3:用nginx把前端和微服务后台都放到同一域中管理，意思就是用nginx的请求转发功能把前端和后台的代码都映射上，那么访问前台和后台接口的域就是nginx本身的域，就是在同一个域了
在网关gateway模块下 处理跨域问题 ，实现如下：
在编写CorsConfig类即可，，，（注意：因为renren-fast模块的代码之前以前单独处理过跨域，我们要先把它下面的CorsConfig类注释掉，不然解决两次跨域renren-fast 模块会访问不了）
@Configuration
public class CrosConfig {/*** 配置跨域信息，这样就可以不用在后续所有微服务的模块配置跨域了* @return*/@Bean // 添加过滤器public CorsWebFilter corsWebFilter(){// 需要注意的是：因为renren-fast模块，已经做了跨域文件，所以要把人人-fast先注释掉// 基于url跨域，选择reactive包下的UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();// 跨域配置信息CorsConfiguration corsConfiguration = new CorsConfiguration();// 允许跨域的头corsConfiguration.addAllowedHeader("*");// 允许跨域的请求方式corsConfiguration.addAllowedMethod("*");// 允许跨域的请求来源corsConfiguration.addAllowedOrigin("*");// 是否允许携带cookie跨域corsConfiguration.setAllowCredentials(true);// 任意url都要进行跨域配置source.registerCorsConfiguration("/**",corsConfiguration);return new CorsWebFilter(source);}
}4品牌列表展示
用renren-generator 生成前端vue代码，直接放到文件夹下，启动即可
阿里云OSS云存储文件实现
首先： 1:创建一个单独第三方的模块，里面都是集成第三方接口实现
2: 后台接口参考我之前文章：后台实现阿里云上传文件
3: 前端实现文件图片文件组件和图片展示： 前端上传组件实现步骤
标注几点：
1: 阿里云oss上传文件 有两种方式：
第一种：是视频中老的方式，导入aliyun-sdk-oss 依赖，实现原理是，通过阿里云给的密钥参数，直接在后台JAVA 直接编写上传的代码，实现上传
第二种：是视频中教的方式，导入aliyun-oss-spring-boot-starter 依赖，实现原理是，通过阿里云给的密钥参数，直接调用后台java编写请求返回签名，然后把签名和地址一些参数返回给前端，在前端直接实现上传文件了，这样后台不用写上传代码了，因为前端拿到了签名，可以直接上传，这里记住要解决一个oss跨域问题。
个人看法：我比较习惯用第一种，前端代码少，也不涉及跨域问题
jse303: valid参数格式校验规则
1: 首先在实体类的属性上加上如下这些注解，注解在javax.validation包下，如下这些注解都可以用在实体类的属性上
2: 在controller层的方法的参数上加上@Valid ，即可开启对于类属性的各种验证
@ApiOperation(value = "测试添加功能")@PostMapping("/save")public R save(@Valid @RequestBody BrandEntity brand){brandService.save(brand);return R.ok();}标注下:视频中还讲了，分组校验，groups ，@Validated，自定义分组，个人觉得在项目中这种用法很少，而且多个注解都注释在一个属性上，然后还要在controller的方法分开写方法去调用，分组才可用，这种其实用的很少，像这种的我们也可以用代码实现，这个以后维护起来也比较方便，个人觉的比一堆注解在属性上更直观
全局异常处理和统一日志处理
全局异常处理我的文章连接： 全局异常处理连接
统一日志处理我的文章连接： 统一日志处理
二:商品分类和品牌管理的关联
1:后台实现
controller层
@ApiOperation(value = "测试根据分类catid获取品牌列表")@GetMapping("/list/{catId}")public R list(@RequestParam(required = false) Map<String, Object> params,@PathVariable(value = "catId") String catId){PageUtils page = brandService.queryPageByCatId(params,catId);return R.ok().put("page", page);}service层
@Overridepublic PageUtils queryPageByCatId(Map<String, Object> params,String catId) {QueryWrapper<BrandEntity> brandEntityQueryWrapper = new QueryWrapper<>();// 首先根据中间表，查询出catId对应的品牌的idif(!StringUtils.isEmpty(catId)){QueryWrapper<CategoryBrandRelationEntity> queryWrapper = new QueryWrapper<>();queryWrapper.select("brand_id").eq("catelog_id",catId);List<CategoryBrandRelationEntity> list = categoryBrandRelationService.list(queryWrapper);// 品牌ids 集合List<Long> catIds = new ArrayList<Long>();list.stream().forEach(item->{catIds.add(item.getBrandId());});if(!CollectionUtils.isEmpty(catIds)){// 再根据品牌ids，查询数据brandEntityQueryWrapper.in("brand_id",catIds);}else{return new PageUtils( new Page<BrandEntity>());}}// 判断key是否存在if (!StringUtils.isEmpty(params.get("key"))) {// 根据前端传过来的条件查询，带有key,是检索条件brandEntityQueryWrapper.and(query -> {query.eq("brand_id", params.get("key")).or().like("name", params.get("key"));});}// 分页查询，根据条件IPage<BrandEntity> page = this.page(new Query<BrandEntity>().getPage(params),brandEntityQueryWrapper);return new PageUtils(page);}2:前端实现：父子组件的调用
1:先封装一个组件，在Compentens/目录下创建自己的组件 ，里面内容是category.vue的内容
<template><div><!-- <el-tree:data="data":props="defaultProps"@node-click="handleNodeClick"></el-tree> --><el-tree :data="data" :props="defaultProps" :render-after-expand="true" @node-click="getTreeClick"><span class="custom-tree-node" slot-scope="{ node, data }"><span>{{ node.label }}</span></span></el-tree></div>
</template><script>
export default {data() {return {data: [],defaultProps: {children: "children",label: "name",},};},created() {this.getTreeList();},methods: {// handleNodeClick(data) {// console.log(data);// },getTreeList() {// $http 就是axios请求，在utils/httpRequest.js里面封装了axios和拦截器，然后在main.js中挂在全局，这个样全局就可以使用// 以前我们的请求是写在api目录的单独文件夹里面，需要导入import,但是现在不用直接$http({})在里面直接写路径和参数，// 其实本意跟之前也是一样的，只是请求接口的地方换了this.$http({url: this.$http.adornUrl("/product/category/getTeeList"),method: "get",}).then((response) => {// console.log(response)this.data = response.data.data;});},getTreeClick(data,node,category){if(node.level==3){ // console.log("我是三级，我被点击了",data,node,category);// 当三级被点击，给此组件附上点击事件，然后回传到父页面，也就是调用此组件的页面，然后只需要在引用组件时候根据事件调用即可// $emit : 就是把cate-tree-list 这个事件名称，data,node,category这个三个参数传回调用页面this.$emit("cate-tree-list",data,node,category)}}},
};
</script><style >
</style>2:在父组件调用此compentens组件
第一步，先导入组件：
import CategoryTree from "@/components/CategoryTree";
第二步：加载组件：components: {AddOrUpdate,CategoryTree, //加载组件},
第三步：引用组件：<category-tree @cate-tree-list="getCatTreeList"></category-tree>
注意：
如何实现子组件的事件传递大到父组件：
第一步：
// 当三级被点击，给此组件附上点击事件，然后回传到父页面，也就是调用此组件的页面，然后只需要在引用组件时候根据事件调用即可
// $emit : 就是把cate-tree-list 这个事件名称，data,node,category这个三个参数传回调用页面
this.$emit("cate-tree-list",data,node,category)
第二步：通过@绑定子组件传递的事件
<category-tree @cate-tree-list="getCatTreeList"></category-tree>
IDEA操作批量重启模块，给模块设置栈内存
1:打开edit Configurations
2:点击+号，选择Compound,把要启动的都加在这里面，启动时候点一次启动就可以了
3:添加所有启动项
4：给每个启动模块设置运行需要的堆内存 -Xmx100m
基础篇总结：
注意点：
1:
大数据量的表 ，尽量不要用leftjoin 这种关联查询，因为这样 迪卡尔积特别高，所以我们推荐尽量把数据单表查询出来，
然后用java代码在去梳写逻辑去解决这种关联问题， 因为处理数据是在内存中处理，所以速度也很快2:
Spring Boot 使用事务非常简单，首先使用注解 @EnableTransactionManagement 开启事务支持后，
然后在访问数据库的Service方法上添加注解 @Transactional 便可。事务的详细说明连接: https://blog.csdn.net/abysscarry/article/details/80189232 ， https://blog.csdn.net/Z__Sheng/article/details/89489053
3:
mybatiesPlus 3.0.5 和3.3.2 的区别： 3.3.2的假删除 直接加@TableLogic ,不需要配置组件了；sql性能分析组件
Oauth2.0
谷粒商城项目基础篇总结文档相关推荐
- 谷粒商城分布式高级篇总结文档
目录 Elasticsearch Docker安装Elaticsearch(简称:ES) Docker安装Kibana (ES可视化界面) 启动Kibana遇到的坑 安装htop 如何删除卸载dock ...
- 谷粒商城三阶段课件_谷粒商城分布式基础篇一
微服务架构图 微服务划分图 搭建虚拟开发环境 1.下载安装VirtualBox 下载安装Vagrant 2.安装好后,创建一个存放vagrant box的目录,方便日后统一管理,比如叫做../cent ...
- 谷粒商城--分布式基础篇2
谷粒商城–分布式基础篇2(前端基础) 目录 谷粒商城--分布式基础篇2(前端基础) 5 前端 5.1 ES6 5.1.1 简介 5.1.2 什么是ECMAStript 5.1.3 ES6 新特性 5. ...
- Uniapp商城项目【详细笔记文档】
文章目录 前言 一.创建项目和引入文件 二.[底部]导航开发 三.[首页]顶部开发 四.[首页]swiper部分 五.[首页]推荐部分开发 六.[首页]文字封装开发 七.[首页]商品列表和单个商品组件 ...
- 谷粒商城-分布式基础篇-环境搭建
1.写在前面 既个人博客系统和Java虚拟机学习后,深感技术点过于零散,于是照着尚硅谷教程写了谷粒商城这个项目.谷粒商城是一个完整的大型分布式架构电商平台,这个项目将我目前学到的知识点,以及还未学到的 ...
- 谷粒商城分布式基础篇1-个人版
基础篇 1 项目简介 1.1 项目背景 1.2 电商模式 市面上有5种常见的电商模式 B2B.B2C.C2B.C2C.O2O 1.2.1 B2B 模式 B2B(Business to Business ...
- 谷粒商城-分布式基础篇2
目录 1 三级分类 1.1 sql脚本 1.2 查出所有分类以及子分类 1.3 配置网关路由与路径重写 1.4 树形展示三级分类数据 1.5 删除数据 1.6 新增分类 1.7 修改分类 1.8 拖拽 ...
- 谷粒商城项目篇6_分布式基础完结篇_商品服务模块（品牌管理、平台属性、新增商品）、仓储服务模块（仓库管理）
目录 商品服务模块 品牌管理 品牌对应三级目录的增删改查 平台属性 数据库表关系 规格参数 增删改查 销售属性 属性分组 新增商品 获取三级分类及品牌 商品json存储格式 数据库表设计 商品服务调用 ...
- 谷粒商城分布式高级篇（中）
谷粒商城分布式基础篇 谷粒商城分布式高级篇(上) 谷粒商城分布式高级篇(中) 谷粒商城分布式高级篇(下) 文章目录 商城业务 异步 异步复习 线程池详解 CompletableFuture Compl ...
- 谷粒商城-分布式高级篇[商城业务-检索服务]
谷粒商城-分布式基础篇[环境准备] 谷粒商城-分布式基础[业务编写] 谷粒商城-分布式高级篇[业务编写]持续更新 谷粒商城-分布式高级篇-ElasticSearch 谷粒商城-分布式高级篇-分布式锁与 ...
最新文章
- 宏基因组报名倒计时！报名线上课还可免费参加线下课
- server sql 分组 去重 字符串拼接_SQL | 数据分析面试必备SQL语句+语法
- hdu4971 流-最大权闭包
- 【转载】现代浏览器的工作原理
- Linux平台Oracle多个实例启动说明
- 判断 CGRect是否“为空”
- 心情再差，也还是要拿起我的 JavaScript 实战重点代码
- 二叉树——美国血统(洛谷 P1827)
- java条件运算查询学生成绩_java条件运算符的应用实例之成绩分级
- verilog状态机以及编码详解
- Redis 3.2.4配置文件翻译
- vue展示日历 考勤展示_vue实现简单的日历效果
- linux 打包排除文件类型,Linuxtar或zip命令打包排除后缀文件
- 计算机英语词汇解释,常见计算机英语词汇解释
- 几款手机网站前端框架
- 学习笔记(15):程序员的数学：微积分-常用导数（二）：最常用到的技巧
- matlab 双曲线拟合,利用MATLAB进行logistic曲线拟合
- 【笔试or面试】美团2014校园招聘
- Linux系统时间同步方法小结
- 计算机网络---数据链路层PPP协议