首页  思维导图  详情

谷粒商城

2023-11-28 15:45:05   0  举报





AI智能生成

谷粒商城笔记

前端开发

后端

java

学习笔记

作者其他创作

大纲/内容

安装docker

1、最好是centos7下安装docker，不然内核版本过低会导致安装不成功

2、通过docker官方文档进行安装

https://docs.docker.com/engine/install/centos/

3、配置docker阿里云镜像加速

https://cr.console.aliyun.com/cn-hangzhou/instances/mirrors

sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-'EOF' { "registry-mirrors": ["https://2j04ls1x.mirror.aliyuncs.com"] } EOF sudo systemctl daemon-reload sudo systemctl restart docker

docker安装mysql

下载镜像文件：

docker pull mysql:5.7

启动mysql

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

进入docker服务容器中

docker exec -it mysql /bin/bash

设置mysql的字符编码

vi /mydata/mysql/conf/my.cnf

[client]13;default-character-set=utf813;13;[mysql]13;default-character-set=utf813;13;[mysqld]13;init_connect='SET collation_connection = utf8_unicode_ci'13;init_connect='SET NAMES utf8'13;character-set-server=utf813;collation-server=utf8_unicode_ci13;skip-character-set-client-handshake13;skip-name-resolve

重启

docker restart mysql

docker安装redis

安装redis镜像

docker pull redis

创建文件夹

mkdir -p /mydata/redis/conf

touch redis.conf

启动容器

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 exec -it redis redis-cli

设置aof持久化

vim /mydata/redis/conf/redis.conf

appendonly yes

环境准备

jdk1.8.0_251

maven 3.6

maven setting 配置

idea配置

maven配置

插件下载

lombok

MybatisX

vscood安装（官网下载安装）

插件安装

Auto Close Tag

Auto Rename Tag

Chinese (Simplified) Language Pack for Visual Studio Code

ESLint

HTML CSS Support

HTML Snippets

JavaScript (ES6) code snippets

Live Server

open-in-browser

Vetur

git配置

注册码云

登陆git官网下载客户端并安装

对所有本地仓库的用户信息进行配置

对你的commit操作设置关联的用户名

git config --global user.name "supperqiang"

对你的commit操作设置关联的邮箱地址

git config --global user.email "[email address]"

配置ssh免密登陆

进入git bash

ssh-keygen -t rsa -C "xxxxx@xxxxx.com" 13; 13;# Generating public/private rsa key pair...13;# 三次回车即可生成 ssh key

查看秘钥

cat ~/.ssh/id_rsa.pub13;# ssh-rsa AAAAB3NzaC1yc2EAAAADAQABAAABAQC6eNtGpNGwstc....

将秘钥配置到码云的公钥中

测试是否配置成功

ssh -T git@gitee.com

码云新建仓库

idea克隆地址

项目建构创建

spring初始化创建各个服务

导入web

导入routing中的OpenFeign

聚合服务创建

复制pom文件至总服务

<modelVersion>4.0.0</modelVersion>13; <groupId>com.atguigu.gulimall</groupId>13; <artifactId>gulimall</artifactId>13; <version>0.0.1-SNAPSHOT</version>13; <name>gulimall</name>13; <description>聚合服务</description>13; <packaging>pom</packaging>13;13; <modules>13; <module>gulimall-product</module>13; <module>gulimall-order</module>13; <module>gulimall-member</module>13; <module>gulimall-coupon</module>13; <module>gulimall-ware</module>13; </modules>

配置忽略文件

修改.gitignore文件

人人开源搭建后台管理系统

renren-fast

导入至微服务项目中

renren-fast-vue

使用vscood打开

安装node.js

官网下载安装

配置npm使用淘宝镜像

npm config set registry https://registry.npm.taobao.org

下载镜像

npm install

运行项目

npm run dev

快速开发

逆向工程搭建&使用

renren-generator

配置数据库

配置包名

删除\jdk1.8.0_121\jre\lib\ext路径下的servlet-api.jar

代码导入相应模块

新建gulimall-common模块

pom文件添加description描述

pom文件添加依赖

mybatis plus

<dependency>13; <groupId>com.baomidou</groupId>13; <artifactId>mybatis-plus-boot-starter</artifactId>13; <version>3.3.2</version>13;</dependency>

lombok

<dependency>13; <groupId>org.projectlombok</groupId>13; <artifactId>lombok</artifactId>13; <version>1.18.4</version>13; </dependency>

解决service报错

添加com.atguigu.common.utils包

复制PageUtils、Query工具类

解决controller报错

复制R工具类

删除RequiresPermissions注解

添加httpComponents

13;<dependency>13; <groupId>org.apache.httpcomponents</groupId>13; <artifactId>httpcore</artifactId>13; <version>4.4.13</version>13;</dependency>13;

添加commons-lang依赖

<dependency>13; <groupId>commons-lang</groupId>13; <artifactId>commons-lang</artifactId>13; <version>2.6</version>13; </dependency>

将renren-fast的xss包复制至common包下

复制Constant工具类

重新生成代码并将controller重新替换

将模板中RequiresPermissions注解注释掉

删除模板中的import org.apache.shiro.authz.annotation.RequiresPermissions;

将common模块添加至微服务pom依赖中

配置&测试微服务基本CRUD功能

整合MyBatis-Plus

1）、导入依赖

2）、配置

1、配置数据源

1、导入数据库驱动

13;<dependency>13; <groupId>mysql</groupId>13; <artifactId>mysql-connector-java</artifactId>13; <version>8.0.20</version>13;</dependency>13;

导入servlet-api

<dependency>13; <groupId>javax.servlet</groupId>13; <artifactId>servlet-api</artifactId>13; <version>2.5</version>13; <scope>provided</scope>13; </dependency>

删除XssHttpServletRequestWrapper、XssFilter

导入RRException

2、配置

创建application.yml文件

spring:13; datasource:13; username: root13; password: root13; url: jdbc:mysql://192.168.10.150:3306/gulimall_pms13; driver-class-name: com.mysql.jdbc.Driver

2、配置MyBatis-Plus

1）、使用@MapperScan

@MapperScan("com.atguigu.gulimall.product.dao")

2）、告诉MyBatis-Plus映射文件

mybatis-plus:13; mapper-locations: classpath:/mapper/**/*.xml

配置主键自增

global-config:13; db-config:13; id-type: auto

逆向生成所有微服务基本CRUD代码

gulimall-coupon（优惠券）

gulimall-member（用户）

gulimall-order（订单）

gulimall-ware（库存）

分布式组件

spring-cloud-alibaba

<dependencyManagement>13; <dependencies>13; <dependency>13; <groupId>com.alibaba.cloud</groupId>13; <artifactId>spring-cloud-alibaba-dependencies</artifactId>13; <version>2.2.0.RELEASE</version>13; <type>pom</type>13; <scope>import</scope>13; </dependency>13; </dependencies>13; </dependencyManagement>

spring-cloud-alibaba-Nacos注册中心

1、common的pom配置文件中引入Nacos Discovery starter

<dependency>13; <groupId>com.alibaba.cloud</groupId>13; <artifactId>spring-cloud-starter-alibaba-nacos-discovery</artifactId>13; </dependency>

2、Nacos服务下载&启动

版本

1.3.0

访问

http://127.0.0.1:8848/nacos

3、在应用的 yml配置文件中配置文件中配置 Nacos Server 地址

spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

4、使用 @EnableDiscoveryClient 注解开启服务注册与发现功能

5、配置服务名

spring.application.name=service-provider

spring-cloud-OpenDeign测试远程调用

1、服务中引入依赖

<dependency>13; <groupId>org.springframework.cloud</groupId>13; <artifactId>spring-cloud-starter-openfeign</artifactId>13; </dependency>

2、创建feign接口

接口上使用@FeignClient注解

@FeignClient("gulimall-coupon")

拷贝远程调用接口

@RequestMapping("/coupon/coupon/member/coupons")13; public R memberCoupons();

开启远程调用功能

在服务主类上添加@EnableFeignClients注解

@EnableFeignClients("com.atguigu.gulimall.member.feign")

spring-cloud-alibaba-Nacos配置中心

1、引入依赖

<dependency>13; <groupId>com.alibaba.cloud</groupId>13; <artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>13; </dependency>

2、在应用的 /src/main/resources/bootstrap.properties 配置文件中配置 Nacos Config 元数据

spring.application.name=gulimall-coupon13;spring.cloud.nacos.config.server-addr=127.0.0.1:8848

3、使配置生效

使用 @Value 注解来将对应的配置注入到 SampleController 的 userName 和 age 字段，使用 @RefreshScope 打开动态刷新功能

@RefreshScope13; class SampleController {13;13; @Value("${user.name}")13; String userName;13;13; @Value("${user.age}")13; int age;13; }

在nacos配置界面添加配置

Data Id规则为：服务名.properties

spring-cloud-alibaba-Nacos配置中心-命名空间与配置分组

命名空间：配置隔离

默认：public(保留空间)；默认新增的所有配置都在

使用场景

1、开发、测试、生产配置均不同

新建命名空间dev、test、prop

克隆配置

添加使用配置

spring.cloud.nacos.config.namespace=propConfig

2、每一个微服务使用各自的配置

新建命名空间"服务名"

配置集：所有配置的集合

配置集ID：类似文件名

Data Id：类似文件名

配置分组

默认所有的配置集都属于：DEFAULT_GROUP

场景

1111、618

添加配置

spring.cloud.nacos.config.group=618

总结

每个微服务创建自己的命名空间，使用配置分组区分环境，dev、test、prod

spring-cloud-alibaba-Nacos配置中心-加载多配置集

根据功能在nacos配置界面分别新建不同配置文件进行参数配置

在bootstrap中配置

spring.cloud.nacos.config.extension-configs[0].data-id=datasource.yml13;spring.cloud.nacos.config.extension-configs[0].group=dev13;spring.cloud.nacos.config.extension-configs[0].refresh=true13;13;spring.cloud.nacos.config.extension-configs[1].data-id=mybatis.yml13;spring.cloud.nacos.config.extension-configs[1].group=dev13;spring.cloud.nacos.config.extension-configs[1].refresh=true13;13;spring.cloud.nacos.config.extension-configs[2].data-id=other.yml13;spring.cloud.nacos.config.extension-configs[2].group=dev13;spring.cloud.nacos.config.extension-configs[2].refresh=true

其他环境配置nacos

https://nacos.io/zh-cn/docs/quick-start.html

springCloud-Gateway网关核心&原理

官网

https://spring.io/projects/spring-cloud-gateway#learn

springCloud-Gateway创建&测试API网关

创建网关模块gulimall-gateway

添加Gateway依赖

开启服务的注册发现

1、主类上添加@EnableDiscoveryClient注解

2、application.yml文件中添加nacos地址&服务名称

spring.cloud.nacos.discovery.server-addr=127.0.0.1:884813;spring.application.name=gulimall-gateway

开启服务的配置

1、新建bootstrap配置文件，添加配置

spring.cloud.nacos.config.server-addr=127.0.0.1:8848

2、在nancos配置界面新增gateway命名空间

spring.cloud.nacos.config.namespace=gatewayConfig

3、在nacos客户端新增gulimall-gateway.yml配置文件并新增spring.applicaction.name配置

测试网关

1、新建application.yml配置文件&添加配置

spring:13; cloud:13; gateway:13; routes:13; - id: baidu_route13; uri: https://www.baidu.com13; predicates:13; - Query=url,baidu13;13; - id: qq_route13; uri: https://www.qq.com13; predicates:13; - Query=url,qq

前端基础

技术栈简介

分支主题

ES6-let&const

let与var比较

1、let无法越域

{13; var a = 1;13; let b = 2;13;13; }13; console.log(a);13; console.log(b);

2、let无法重复申明

var a = 1;13; var a = 2;13;13; let b = 3;13; // let b = 4;13;13; console.log(a);13; console.log(b);

3、var存在变量提升

console.log(a);（undefined）13; var a = 1;13;13; console.log(b);（ Cannot access 'b' before initialization）13; let b = 4;

const

用来申明常量，一旦申明，不允许修改

const a = 3;13; a = 4;（Assignment to constant variable.）

解构&字符串

解构

1、数组解构

let arr = [1,2,3];13; let [a,b,c] = arr;13; console.log(a,b,c);

2、对象解构

const person = {13; name: "jacker",13; age: 15,13; language: ['java', 'js']13; }13; const { name:abc, age, language } = person;13; console.log(abc, age, language);

字符串扩展

1、几个新的API

let str = "hello.vue";13; console.log(str.startsWith("hello"));13; console.log(str.endsWith("vue"));13; console.log(str.includes("e"));13; console.log(str.includes("java"));

2、字符串模板（``）

let str = `<head>13; <meta charset="UTF-8">13; <meta name="viewport" content="width=device-width, initial-scale=1.0">13; <title>Document</title>`;13; console.log(str);

3、字符串插入变量和表达式，变量名及表达式写在${}中

function fun(){13; return "这是一个美人";13; }13; console.log(`她是${abc}，今年${age}，我想说：${fun()}`);

函数优化

1、函数参数默认值

2、不定参数

function fun(...values) {13; console.log(values.length);13; }13; fun('1','2','3');13; fun('4','5','6','7');

3、箭头函数

var add2 = (a, b) => a + b;13; console.log(add2(10, 20));

对象优化

1、新增API

const person = {13; name: "jacker",13; age: 15,13; language: ['java', 'js']13; }13;13; console.log(Object.keys(person));13; console.log(Object.values(person));13; console.log(Object.entries(person));

const target = { a: 1 };13; const source1 = { b: 2 };13; const source2 = { c: 3 }13;13; console.log(Object.assign(target,source1,source2));（{a: 1, b: 2, c: 3}）

2、申明对象简写

const name = "zhangsan";13; const age = 18;13; const person2 = {name,age};13; console.log(person2);

3、对象的函数属性简写

4、对象扩展运算符

1、拷贝对象

let p1 = { name: "qiang", age: 18 };13; let someone = { ...p1 };13; console.log(someone);

2、合并对象

ES6-map、reduce

map()

let arr = [1, 20, -10, 4];13; arr = arr.map(item => item * 2);13; console.log(arr);（0: 213;1: 4013;2: -2013;3: 8）

reduce()

let result = arr.reduce((a, b) => { return a + b })13; console.log(result);

ES6-promise异步编排

// $.ajax({13; // url: "mock/user.json",13; // success(data) {13; // console.log("查询到用户:", data)13; // }13; // })13;13; let p = new Promise((resolve, reject) => {13; $.ajax({13; url: "mock/user.json",13; success(data) {13; resolve(data);13; }13; })13; });13; p.then((data) => {13; console.log("查询到的用户~~~：", data)13; })

ES6-模块化

export

import

Vue介绍&HelloWorld

<!DOCTYPE html>13;<html lang="en">13;13;<head>13; <meta charset="UTF-8">13; <meta name="viewport" content="width=device-width, initial-scale=1.0">13; <title>Document</title>13;</head>13;13;<body>13; <div id="app">13; <h1>{{name}},非常帅</h1>13;13; </div>13;13; <script src="./node_modules/vue/dist/vue.js"></script>13;13; <script>13; let vm = new Vue({13; el: app,13; data: {13; name: "张三"13; }13; })13; </script>13;</body>13;13;</html>

Vue基本语法&插件安装

双向绑定

<!DOCTYPE html>13;<html lang="en">13;13;<head>13; <meta charset="UTF-8">13; <meta name="viewport" content="width=device-width, initial-scale=1.0">13; <title>Document</title>13;</head>13;13;<body>13;13; <div id="app">13; <input type="text" v-model="num">13; <h1>{{name}},非常帅,共获得了{{num}}个赞</h1>13;13; </div>13;13; <script src="./node_modules/vue/dist/vue.js"></script>13;13; <script>13; //1、vue声明式渲染13; let vm = new Vue({13; el: app,13; data: {13; name: "张三",13; num: 113; }13; })13;13; </script>13;</body>13;13;</html>

v-**指令

v-model

绑定模型

v-on

绑定事件

插件

Vue 2 Snippets

Vue Devtools（浏览器插件）

Vue指令-单向绑定&双向绑定

指令

v-text、v-html

v-bind

v-module

v-on

v-for

v-if、v-show

v-else、v-else-if

Vue计算属性和侦听器

Vue组件化基础

Vue生命周期和钩子函数

Vue使用Vue脚手架进行模块开发

1、全局安装webpack

npm install webpack -g

2、全局安装vue脚手架

npm install -g @vue/cli-init

3、初始化vue项目

vue init webpack appname

cd vue-demo13; npm run dev

Vue整合ElementUI快速开发

安装ElementUI及上手

npm i element-ui

商品服务-API

三级分类-查询-递归树形结构数据获取

在gulimall-product模块编写获取分类代码

三级分类-配置网关路由与路径重写

启动renren-fast前台与后台系统（gulimall-admin数据库）

新建商品系统-分类维护菜单

参照前端其他模块新建分类模块product/category.vue

修改前端基础路径为网关路径http://localhost:88

启动nacos

renren-fast服务注册

使用Path Route Predicate Factory断言设置路由规则

- id: renren-fast13; uri: lb://renren-fast13; predicates:13; - Path=/api/**

使用RewritePath GatewayFilter Factory过滤工厂重写路径

- id: renren-fast13; uri: lb://renren-fast13; predicates:13; - Path=/api/**13; filters:13; - RewritePath=/api(?<segment>/?.*), /renren-fast/$\{segment}

三级分类-网关统一配置跨域

官方文档

https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS

在网关中统一添加Cors过滤

@Configuration13;public class GulimallCorsConfiguration {13;13; @Bean13; public CorsWebFilter corsWebFilter() {13;13; UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();13;13; CorsConfiguration corsConfiguration = new CorsConfiguration();13; //1、配置跨域13; corsConfiguration.addAllowedHeader("*");13; corsConfiguration.addAllowedMethod("*");13; corsConfiguration.addAllowedOrigin("*");13; corsConfiguration.setAllowCredentials(true);13;13; source.registerCorsConfiguration("/**", corsConfiguration);13; return new CorsWebFilter(source);13; }13;}

将renren-fast中的corsConfig注释掉

三级分类-查询-树形展示三级分类数据

将gulimall-product服务注册到Nacos

在网关配置product路由（详细路由要放在高优先级处）

- id: gulimall-product13; uri: lb://gulimall-product13; predicates:13; - Path=/api/product/**13; filters:13; - RewritePath=/api(?<segment>/?.*), /$\{segment}

通过{data}将数据结构并将data.page展示到树形结构中

getMenus() {13; this.$http({13; url: this.$http.adornUrl("/product/category/list/tree"),13; method: "get"13; }).then(({data}) => {13; console.log("成功获取到菜单数据", data.page);13; this.menus = data.page;13; });13; }

三级分类-删除-页面效果

使用 scoped slot 添加删除，新增按钮

添加show-checkbox 节点是否可被选择

show-checkbox

添加node-key 每个树节点用来作为唯一标识的属性，整棵树应该是唯一的

node-key="catId"

添加expand-on-click-node 是否在点击节点的时候展开或者收缩节点，默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。

:expand-on-click-node="false"

通过v-if判断哪个节点应该出现合适的按钮

三级分类-删除-逻辑删除

下载postman

测试分类删除接口

mybatis plus添加逻辑删除配置

https://mp.baomidou.com/guide/logic-delete.html#%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95%EF%BC%9A

1、配置DbConfig

mybatis-plus:13; global-config:13; db-config:13; logic-delete-field: flag # 全局逻辑删除的实体字段名(since 3.3.0,配置后可以忽略不配置步骤2)13; logic-delete-value: 1 # 逻辑已删除值(默认为 1)13; logic-not-delete-value: 0 # 逻辑未删除值(默认为 0)

2、实体类字段上加上@TableLogic注解

@TableLogic13;private Integer deleted;

调整日志级别

logging:13; level:13; com.atguigu.gulimall: debug

三级分类-删除-删除效果细化

新增get,post断言

"http-get请求": {13; "prefix": "httpget",13; "body": [13; "this.\\$http({",13; "url: this.\\$http.adornUrl(''),",13; "method: 'get',",13; "params: this.\\$http.adornParams({})",13; "}).then(({ data }) => {",13; "})"13; ],13; "description": "httpGET请求"13; },13; "http-post请求": {13; "prefix": "httppost",13; "body": [13; "this.\\$http({",13; "url: this.\\$http.adornUrl(''),",13; "method: 'post',",13; "data: this.\\$http.adornData(data, false)",13; "}).then(({ data }) => { });" 13; ],13; "description": "httpPOST请求"13; }

调用删除请求

MessageBox 弹框

Message 消息提示

default-expanded-keys 默认展开的节点的 key 的数组

三级分类-新增-新增效果完成

Dialog 对话框

三级分类-修改-基本修改效果完成

Dialog 对话框

close-on-click-modal 是否可以通过点击 modal 关闭 Dialog

三级分类-修改-拖拽效果

draggable 是否开启拖拽节点功能 boolean

allow-drop 拖拽时判定目标节点能否被放置。type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后