-
个人笔记(新手级细节教程)：
-
官方笔记-基础篇：https://blog.csdn.net/hancoder/article/details/107612619
-
官方笔记-高级篇：https://blog.csdn.net/hancoder/article/details/107612746
-
官方笔记-集群篇：https://blog.csdn.net/hancoder/article/details/107612802
-
官方笔记下载地址：https://download.csdn.net/download/hancoder/12665396
文章目录
-
- 1. 整体介绍
- 2. docker中安装mysql
- 3. docker中安装redis
- 4. 创建maven工程
- 5. 执行sql脚本
- 6. clone 人人开源
- 7. clone renren-generator
- 8. 微服务注册中心
- 9. 使用openfen
- 10. 配置中心
- 11. 网关
-
- 1、注册“gulimall-gateway”到Nacos
-
- 1）创建“gulimall-gateway”
- 2）添加“gulimall-common”依赖和“spring-cloud-starter-gateway”依赖
- 3）“com.bigdata.gulimall.gulimallgateway.GulimallGatewayApplication”类上加上“@EnableDiscoveryClient”注解
- 4）在Nacos中创建“gateway”命名空间，同时在该命名空间中创建“gulimall-gateway.yml”
- 5）创建“bootstrap.properties”文件，添加如下配置，指明配置中心地址和所属命名空间
- 6）创建“application.properties”文件，指定服务名和注册中心地址
- 7）启动“gulimall-gateway”
- 2、案例
- 12. Vue
- 13. element ui
- 14. 递归树形结构获取数据
- 15. 删除数据
- 16. 菜单拖动
- 17. 品牌管理菜单
- 18. JSR303校验
- 19. 分组校验功能（完成多场景的复杂校验）
- 20. 自定义校验功能
- 21. 商品SPU和SKU管理
- 22. 点击子组件，父组件触发事件
- 23. 规格参数新增与VO
- 24. 查询分组关联属性和删除关联
- 25. 查询分组未关联的属性
- 26. 添加属性和分组的关联关系
- 27. 发布商品
- 28. 商品管理
- 29. 仓库管理
- 30. 获取spu规格
- 31. 修改商品规格
- 小结：
- 其他
- FAQ
1. 整体介绍
1）安装vagrant
2）安装Centos7
$ vagrant init centos/7
A `Vagrantfile` has been placed in this directory. You are now
ready to `vagrant up` your first virtual environment! Please read
the comments in the Vagrantfile as well as documentation on
`vagrantup.com` for more information on using Vagrant.
- 1
- 2
- 3
- 4
- 5
执行完上面的命令后，会在用户的家目录下生成Vagrantfile文件。
$ vagrant up
Bringing machine 'default' up with 'virtualbox' provider...
==> default: Box 'centos/7' could not be found. Attempting to find and install...
default: Box Provider: virtualbox
default: Box Version: >= 0
==> default: Loading metadata for box 'centos/7'
default: URL: https://vagrantcloud.com/centos/7
==> default: Adding box 'centos/7' (v1905.1) for provider: virtualbox
default: Downloading: https://vagrantcloud.com/centos/boxes/7/versions/1905.1/providers/virtualbox.box
default: Download redirected to host: cloud.centos.org
default: Progress: 0% (Rate: 6717/s, Estimated time remaining: 7:33:42)
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
下载镜像过程比较漫长，也可以采用先用下载工具下载到本地后，然后使用“ vagrant box add ”添加，再“vagrant up”即可
#将下载的镜像添加到virtualBox中
$ vagrant box add centos/7 E:\迅雷下载\CentOS-7-x86_64-Vagrant-1905_01.VirtualBox.box
==> box: Box file was not detected as metadata. Adding it directly...
==> box: Adding box 'centos/7' (v0) for provider:
box: Unpacking necessary files from: file:///E:/%D1%B8%C0%D7%CF%C2%D4%D8/CentOS-7-x86_64-Vagrant-1905_01.VirtualBox.box
box:
==> box: Successfully added box 'centos/7' (v0) for 'virtualbox'!
#启动
$ vagrant up
Bringing machine ‘default’ up with ‘virtualbox’ provider….
> default: Importing base box ‘centos/7’….
> default: Matching MAC address for NAT networking….
> default: Setting the name of the VM: Administrator_default_1588497928070_24634
> default: Clearing any previously set network interfaces….
> default: Preparing network interfaces based on configuration….
default: Adapter 1: nat
default: Adapter 2: hostonly
> default: Forwarding ports….
default: 22 (guest) => 2222 (host) (adapter 1)
> default: Booting VM….
> default: Waiting for machine to boot. This may take a few minutes….
default: SSH address: 127.0.0.1:2222
default: SSH username: vagrant
default: SSH auth method: private key
default:
default: Vagrant insecure key detected. Vagrant will automatically replace
default: this with a newly generated keypair for better security.
default:
default: Inserting generated public key within guest….
default: Removing insecure key from the guest if it’s present….
default: Key inserted! Disconnecting and reconnecting using new SSH key….
> default: Machine booted and ready!
> default: Checking for guest additions in VM….
default: No guest additions were detected on the base box for this VM! Guest
default: additions are required for forwarded ports, shared folders, host only
default: networking, and more. If SSH fails on this machine, please install
default: the guest additions and repackage the box to continue.
default:
default: This is not an error message; everything may continue to work properly,
default: in which case you may ignore this message.
> default: Configuring and enabling network interfaces….
> default: Rsyncing folder: /cygdrive/c/Users/Administrator/ => /vagrant
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
vagrant ssh 开启SSH，并登陆到centos7
$ vagrant ssh
[vagrant@localhost ~]$ ip addr
1: lo: <LOOPBACK,UP,LOWER_UP> mtu 65536 qdisc noqueue state UNKNOWN group default qlen 1000
link/loopback 00:00:00:00:00:00 brd 00:00:00:00:00:00
inet 127.0.0.1/8 scope host lo
valid_lft forever preferred_lft forever
inet6 ::1/128 scope host
valid_lft forever preferred_lft forever
2: eth0: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
link/ether 52:54:00:8a:fe:e6 brd ff:ff:ff:ff:ff:ff
inet 10.0.2.15/24 brd 10.0.2.255 scope global noprefixroute dynamic eth0
valid_lft 86091sec preferred_lft 86091sec
inet6 fe80::5054:ff:fe8a:fee6/64 scope link
valid_lft forever preferred_lft forever
3: eth1: <BROADCAST,MULTICAST,UP,LOWER_UP> mtu 1500 qdisc pfifo_fast state UP group default qlen 1000
link/ether 08:00:27:d1:76:f6 brd ff:ff:ff:ff:ff:ff
inet 192.168.56.102/24 brd 192.168.56.255 scope global noprefixroute dynamic eth1
valid_lft 892sec preferred_lft 892sec
inet6 fe80::8c94:1942:ba09:2458/64 scope link noprefixroute
valid_lft forever preferred_lft forever
[vagrant@localhost ~]$
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
C:\Users\Administrator>ipconfig
Windows IP 配置
以太网适配器 VirtualBox Host-Only Network:
连接特定的 DNS 后缀 . . . . . . . :
本地链接 IPv6 地址. . . . . . . . : fe80::a00c:1ffa:a39a:c8c2%16
IPv4 地址 . . . . . . . . . . . . : 192.168.56.1
子网掩码 . . . . . . . . . . . . : 255.255.255.0
默认网关. . . . . . . . . . . . . :
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
配置网络信息，打开"Vagrantfile"文件：
config.vm.network "private_network", ip: "192.168.56.10"
- 1
修改完成后，重启启动vagrant
vagrant reload
- 1
检查宿主机和virtualBox之间的通信是否正常
[vagrant@localhost ~]$ ping 192.168.43.43 PING 192.168.43.43 (192.168.43.43) 56(84) bytes of data.
64 bytes from 192.168.43.43: icmp_seq=1 ttl=127 time=0.533 ms
64 bytes from 192.168.43.43: icmp_seq=2 ttl=127 time=0.659 ms
— 192.168.43.43 ping statistics —
2 packets transmitted, 2 received, 0% packet loss, time 999ms
rtt min/avg/max/mdev = 0.533/0.596/0.659/0.063 ms
[vagrant@localhost ~]$
[vagrant@localhost ~]$
[vagrant@localhost ~]$ ping www.baidu.com
PING www.a.shifen.com (112.80.248.76) 56(84) bytes of data.
64 bytes from 112.80.248.76 (112.80.248.76): icmp_seq=1 ttl=53 time=56.1 ms
64 bytes from 112.80.248.76 (112.80.248.76): icmp_seq=2 ttl=53 time=58.5 ms
64 bytes from 112.80.248.76 (112.80.248.76): icmp_seq=3 ttl=53 time=53.4 ms
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
开启远程登陆，修改“/etc/ssh/sshd_config”
PermitRootLogin yes
PasswordAuthentication yes
- 1
- 2
然后重启SSHD
systemctl restart sshd
- 1
使用Xshell或SecureCRT进行远程连接。
2. docker中安装mysql
[root@hadoop-104 module]# docker pull mysql:5.7
5.7: Pulling from library/mysql
123275d6e508: Already exists
27cddf5c7140: Pull complete
c17d442e14c9: Pull complete
2eb72ffed068: Pull complete
d4aa125eb616: Pull complete
52560afb169c: Pull complete
68190f37a1d2: Pull complete
3fd1dc6e2990: Pull complete
85a79b83df29: Pull complete
35e0b437fe88: Pull complete
992f6a10268c: Pull complete
Digest: sha256:82b72085b2fcff073a6616b84c7c3bcbb36e2d13af838cec11a9ed1d0b183f5e
Status: Downloaded newer image for mysql:5.7
docker.io/library/mysql:5.7
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
查看镜像
[root@hadoop-104 module]# docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
mysql 5.7 f5829c0eee9e 2 hours ago 455MB
[root@hadoop-104 module]#
- 1
- 2
- 3
- 4
启动mysql
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
- 1
- 2
- 3
- 4
- 5
- 6
修改配置
[root@hadoop-104 conf]# pwd
/mydata/mysql/conf
[root@hadoop-104 conf]# cat my.cnf
[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
[root@hadoop-104 conf]#
[root@hadoop-104 conf]# docker restart mysql
mysql
[root@hadoop-104 conf]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
进入容器查看配置：
[root@hadoop-104 conf]# docker exec -it mysql /bin/bash
root@b3a74e031bd7:/# whereis mysql
mysql: /usr/bin/mysql /usr/lib/mysql /etc/mysql /usr/share/mysql
root@b3a74e031bd7:/# ls /etc/mysql
my.cnf
root@b3a74e031bd7:/# cat /etc/mysql/my.cnf
[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
root@b3a74e031bd7:/#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
设置启动docker时，即运行mysql
[root@hadoop-104 ~]# docker update mysql --restart=always
mysql
[root@hadoop-104 ~]#
- 1
- 2
- 3
3. docker中安装redis
下载docker
[root@hadoop-104 ~]# docker pull redis
Using default tag: latest
latest: Pulling from library/redis
123275d6e508: Already exists
f2edbd6a658e: Pull complete
66960bede47c: Pull complete
79dc0b596c90: Pull complete
de36df38e0b6: Pull complete
602cd484ff92: Pull complete
Digest: sha256:1d0b903e3770c2c3c79961b73a53e963f4fd4b2674c2c4911472e8a054cb5728
Status: Downloaded newer image for redis:latest
docker.io/library/redis:latest
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
启动docker
[root@hadoop-104 ~]# mkdir -p /mydata/redis/conf
[root@hadoop-104 ~]# touch /mydata/redis/conf/redis.conf
[root@hadoop-104 ~]# echo "appendonly yes" >> /mydata/redis/conf/redis.conf
[root@hadoop-104 ~]# 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
ce7ae709711986e3f90c9278b284fe6f51f1c1102ba05f3692f0e934ceca1565
[root@hadoop-104 ~]#
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
连接到docker的redis
[root@hadoop-104 ~]# docker exec -it redis redis-cli
127.0.0.1:6379> set key1 v1
OK
127.0.0.1:6379> get key1
"v1"
127.0.0.1:6379>
- 1
- 2
- 3
- 4
- 5
- 6
设置redis容器在docker启动的时候启动
[root@hadoop-104 ~]# docker update redis --restart=always
redis
[root@hadoop-104 ~]#
- 1
- 2
- 3
4. 创建maven工程
5. 执行sql脚本
gulimall_oms.sql
gulimall_pms.sql
gulimall_sms.sql
gulimall_ums.sql
gulimall_wms.sql
pms_catelog.sql
sys_menus.sql
6. clone 人人开源
克隆到本地：
git clone https://gitee.com/renrenio/renren-fast-vue.git
git clone https://gitee.com/renrenio/renren-fast.git
- 1
- 2
- 3
将拷贝下来的“renren-fast”删除“.git”后，拷贝到“gulimall”工程根目录下，然后将它作为gulimall的一个module
创建“gulimall_admin”的数据库，然后执行“renren-fast/db/mysql.sql”中的SQl脚本
修改“application-dev.yml”文件，默认为dev环境，修改连接mysql的url和用户名密码
spring:
datasource:
type: com.alibaba.druid.pool.DruidDataSource
druid:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.137.14:3306/gulimall_admin?useUnicode=true&characterEncoding=UTF-8&serverTimezone=Asia/Shanghai
username: root
password: root
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
启动“gulimall_admin”，然后访问“http://localhost:8080/renren-fast/”
安装node.js，并且安装仓库
npm config set registry http://registry.npm.taobao.org/
- 1
PS D:\tmp\renren-fast-vue> npm config set registry http://registry.npm.taobao.org/
PS D:\tmp\renren-fast-vue> npm install
npm WARN ajv-keywords@1.5.1 requires a peer of ajv@>=4.10.0 but none is installed. You must install peer dependencies yourself.
npm WARN sass-loader@6.0.6 requires a peer of node-sass@^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.9 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.9: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})
up to date in 17.227s
PS D:\tmp\renren-fast-vue>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
PS D:\tmp\renren-fast-vue> npm run dev
> renren-fast-vue@1.2.2 dev D:\tmp\renren-fast-vue
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js
10% building modules 5/10 modules 5 active ….-0!D:\tmp\renren-fast-vue\src\main.js(node:19864) Warning: Accessing non-existent property ‘cat’ of module exports inside circular dependency
(Use </span>node --trace-warnings <span class="token punctuation">..</span>.<span class="token variable"> to show where the warning was created)
(node:19864) Warning: Accessing non-existent property ‘cd’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘chmod’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘cp’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘dirs’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘pushd’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘popd’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘echo’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘tempdir’ of module exports inside circular dependency
(node:19864) Warning: Accessing non-existent property ‘pwd’ of module exports inside circular dependency
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
常见问题1：“Module build failed: Error: Cannot find module 'node-sass”
运行过程中，出现“Module build failed: Error: Cannot find module 'node-sass’报错问题”，解决方法
用npm install -g cnpm --registry=https://registry.npm.taobao.org ，从淘宝镜像那下载，然后cnpm下载成功。
最后输入cnpm install node-sass --save。npm run dev终于能跑起来了！！！
————————————————
版权声明：本文为CSDN博主「夕阳下美了剪影」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/qq_38401285/article/details/86483278
常见问题2：cnpm - 解决 " cnpm : 无法加载文件 C:\Users\93457\AppData\Roaming\npm\cnpm.ps1，因为在此系统上禁止运行脚本。有关详细信息 。。。 "
https://www.cnblogs.com/500m/p/11634969.html
所有问题的根源都在“node_modules”，npm install之前，应该将这个文件夹删除，然后再进行安装和运行。
再次运行npm run dev恢复正常：
7. clone renren-generator
clone
https://gitee.com/renrenio/renren-generator.git
然后将该项目放置到“gulimall”的跟路径下，然后添加该Module，并且提交到github上
修改配置
renren-generator/src/main/resources/generator.properties
#代码生成器，配置信息
mainPath=com.bigdata
#包名
package=com.bigdata.gulimall
moduleName=product
#作者
author=cosmoswong
#Email
email=cosmoswong@sina.com
#表前缀(类名不会包含表前缀)
tablePrefix=pms_
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
运行“renren-generator”
访问：<http://localhost:80/
点击“renren-fast”，能够看到它将“renren-fast”的所有表都列举了出来：
选择所有的表，然后点击“生成代码”，将下载的“renren.zip”，解压后取出main文件夹，放置到“gulimall-product”项目的main目录中。
下面的几个module，也采用同样的方式来操作。
但是针对于“undo_log”，存在一个问题
它的数据类型是“longblob”类型，逆向工程后，对应的数据类型未知：
这个问题该要怎么解决？
8. 微服务注册中心
要注意nacos集群所在的server，一定要关闭防火墙，否则容易出现各种问题。
搭建nacos集群，然后分别启动各个微服务，将它们注册到Nacos中。
application:
name: gulimall-coupon
cloud:
nacos:
discovery:
server-addr: 192.168.137.14
- 1
- 2
- 3
- 4
- 5
- 6
查看注册情况：
http://192.168.137.14:8848/nacos/#/serviceManagement?dataId=&group=&appName=&namespace=
9. 使用openfen
1)、引入open-feign
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-openfeign</artifactId>
</dependency>
- 1
- 2
- 3
- 4
2)、编写一个接口，告诉SpringCLoud这个接口需要调用远程服务
修改“com.bigdata.gulimall.coupon.controller.CouponController”，添加以下controller方法：
@RequestMapping("/member/list")
public R memberCoupons(){
CouponEntity couponEntity = new CouponEntity();
couponEntity.setCouponName("discount 20%");
return R.ok().put("coupons",Arrays.asList(couponEntity));
}
- 1
- 2
- 3
- 4
- 5
- 6
新建“com.bigdata.gulimall.member.feign.CouponFeignService”接口
@FeignClient("gulimall_coupon")
public interface CouponFeignService {
@RequestMapping("/coupon/coupon/member/list")
public R memberCoupons();
}
- 1
- 2
- 3
- 4
- 5
修改“com.bigdata.gulimall.member.GulimallMemberApplication”类，添加上"@EnableFeignClients"：
@SpringBootApplication @EnableDiscoveryClient @EnableFeignClients(basePackages = "com.bigdata.gulimall.member.feign") public class GulimallMemberApplication {<span class="token keyword">public</span> <span class="token keyword">static</span> <span class="token keyword">void</span> <span class="token function">main</span><span class="token punctuation">(</span>String<span class="token punctuation">[</span><span class="token punctuation">]</span> args<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span> SpringApplication<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span>GulimallMemberApplication<span class="token punctuation">.</span><span class="token keyword">class</span><span class="token punctuation">,</span> args<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
声明接口的每一个方法都是调用哪个远程服务的那个请求
3)、开启远程调用功能
com.bigdata.gulimall.member.controller.MemberController
@RequestMapping("/coupons") public R test(){ MemberEntity memberEntity=new MemberEntity(); memberEntity.setNickname("zhangsan"); R memberCoupons = couponFeignService.memberCoupons();<span class="token keyword">return</span> memberCoupons<span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"member"</span><span class="token punctuation">,</span>memberEntity<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"coupons"</span><span class="token punctuation">,</span>memberCoupons<span class="token punctuation">.</span><span class="token function">get</span><span class="token punctuation">(</span><span class="token string">"coupons"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
(4)、访问http://localhost:8000/member/member/coupons
停止“gulimall-coupon”服务，能够看到注册中心显示该服务的健康值为0：
再次访问：http://localhost:8000/member/member/coupons
启动“gulimall-coupon”服务，再次访问，又恢复了正常。
10. 配置中心
1）修改“gulimall-coupon”模块
添加pom依赖：
<dependency>
<groupId>com.alibaba.cloud</groupId>
<artifactId>spring-cloud-starter-alibaba-nacos-config</artifactId>
</dependency>
- 1
- 2
- 3
- 4
创建bootstrap.properties文件，该配置文件会优先于“application.yml”加载。
spring.application.name=gulimall-coupon
spring.cloud.nacos.config.server-addr=192.168.137.14:8848
- 1
- 2
2）传统方式
为了详细说明config的使用方法，先来看原始的方式
创建“application.properties”配置文件，添加如下配置内容：
coupon.user.name="zhangsan"
coupon.user.age=30
- 1
- 2
修改“com.bigdata.gulimall.coupon.controller.CouponController”文件，添加如下内容：
@Value("${coupon.user.name}") private String name; @Value("${coupon.user.age}") private Integer age;<span class="token annotation punctuation">@RequestMapping</span><span class="token punctuation">(</span><span class="token string">"/test"</span><span class="token punctuation">)</span> <span class="token keyword">public</span> R <span class="token function">getConfigInfo</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> R<span class="token punctuation">.</span><span class="token function">ok</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"name"</span><span class="token punctuation">,</span>name<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">put</span><span class="token punctuation">(</span><span class="token string">"age"</span><span class="token punctuation">,</span>age<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
启动“gulimall-coupon”服务：
访问：http://localhost:7000/coupon/coupon/test>
这样做存在的一个问题，如果频繁的修改application.properties，在需要频繁重新打包部署。下面我们将采用Nacos的配置中心来解决这个问题。
3）nacos config
1、在Nacos注册中心中，点击“配置列表”，添加配置规则：
DataID：gulimall-coupon
配置格式：properties
文件的命名规则为：
s
p
r
i
n
g
.
a
p
p
l
i
c
a
t
i
o
n
.
n
a
m
e
−
{spring.application.name}-
</span><span class="katex-html"><span class="base"><span class="strut" style="height: 0.88888em; vertical-align: -0.19444em;"></span><span class="mord"><span class="mord mathdefault">s</span><span class="mord mathdefault">p</span><span class="mord mathdefault" style="margin-right: 0.02778em;">r</span><span class="mord mathdefault">i</span><span class="mord mathdefault">n</span><span class="mord mathdefault" style="margin-right: 0.03588em;">g</span><span class="mord">.</span><span class="mord mathdefault">a</span><span class="mord mathdefault">p</span><span class="mord mathdefault">p</span><span class="mord mathdefault" style="margin-right: 0.01968em;">l</span><span class="mord mathdefault">i</span><span class="mord mathdefault">c</span><span class="mord mathdefault">a</span><span class="mord mathdefault">t</span><span class="mord mathdefault">i</span><span class="mord mathdefault">o</span><span class="mord mathdefault">n</span><span class="mord">.</span><span class="mord mathdefault">n</span><span class="mord mathdefault">a</span><span class="mord mathdefault">m</span><span class="mord mathdefault">e</span></span><span class="mord">−</span></span></span></span></span>{spring.profiles.active}.${spring.cloud.nacos.config.file-extension}</p>
${spring.application.name}：为微服务名
${spring.profiles.active}：指明是哪种环境下的配置，如dev、test或info
${spring.cloud.nacos.config.file-extension}：配置文件的扩展名，可以为properties、yml等
2、查看配置：
3、修改“com.bigdata.gulimall.coupon.controller.CouponController”类，添加“@RefreshScope”注解
@RestController
@RequestMapping("coupon/coupon")
@RefreshScope
public class CouponController {
- 1
- 2
- 3
- 4
这样都会动态的从配置中心读取配置.
4、访问：http://localhost:7000/coupon/coupon/test
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-sVYEnJMB-1595834441066)(https://fermhan.oss-cn-qingdao.aliyuncs.com/guli/1587717485283.png)]
能够看到读取到了nacos 中的最新的配置信息，并且在指明了相同的配置信息时，配置中心中设置的值优先于本地配置。
4）Nacos支持三种配置加载方方案
Nacos支持“Namespace+group+data ID”的配置解决方案。
Namespace方案
通过命名空间实现环境区分
下面是配置实例：
1、创建命名空间：
“命名空间”—>“创建命名空间”：
创建三个命名空间，分别为dev，test和prop
2、回到配置列表中，能够看到所创建的三个命名空间
下面我们需要在dev命名空间下，创建“gulimall-coupon.properties”配置规则：
3、访问：http://localhost:7000/coupon/coupon/test
并没有使用我们在dev命名空间下所配置的规则，而是使用的是public命名空间下所配置的规则，这是怎么回事呢？
查看“gulimall-coupon”服务的启动日志：
2020-04-24 16:37:24.158 WARN 32792 --- [ main] c.a.c.n.c.NacosPropertySourceBuilder : Ignore the empty nacos configuration and get it based on dataId[gulimall-coupon] & group[DEFAULT_GROUP]
2020-04-24 16:37:24.163 INFO 32792 --- [ main] c.a.nacos.client.config.utils.JVMUtil : isMultiInstance:false
2020-04-24 16:37:24.169 INFO 32792 --- [ main] b.c.PropertySourceBootstrapConfiguration : Located property source: [BootstrapPropertySource {name='bootstrapProperties-gulimall-coupon.properties,DEFAULT_GROUP'}, BootstrapPropertySource {name='bootstrapProperties-gulimall-coupon,DEFAULT_GROUP'}]
- 1
- 2
- 3
- 4
"gulimall-coupon.properties"，默认就是public命名空间中的内容中所配置的规则。
4、指定命名空间
如果想要使得我们自定义的命名空间生效，需要在“bootstrap.properties”文件中，指定使用哪个命名空间：
spring.cloud.nacos.config.namespace=a2c83f0b-e0a8-40fb-9b26-1e9d61be7d6d
- 1
这个命名空间ID来源于我们在第一步所创建的命名空间
5、重启“gulimall-coupon”，再次访问：http://localhost:7000/coupon/coupon/test
但是这种命名空间的粒度还是不够细化，对此我们可以为项目的每个微服务module创建一个命名空间。
6、为所有微服务创建命名空间
7、回到配置列表选项卡，克隆pulic的配置规则到coupon命名空间下
切换到coupon命名空间下，查看所克隆的规则：
8、修改“gulimall-coupon”下的bootstrap.properties文件，添加如下配置信息
spring.cloud.nacos.config.namespace=7905c915-64ad-4066-8ea9-ef63918e5f79
- 1
这里指明的是，读取时使用coupon命名空间下的配置。
9、重启“gulimall-coupon”，访问：http://localhost:7000/coupon/coupon/test
DataID方案
通过指定spring.profile.active和配置文件的DataID，来使不同环境下读取不同的配置，读取配置时，使用的是默认命名空间public，默认分组（default_group）下的DataID。
默认情况，Namespace=public，Group=DEFAULT GROUP，默认Cluster是DEFAULT
Group方案
通过Group实现环境区分
实例：通过使用不同的组，来读取不同的配置，还是以上面的gulimall-coupon微服务为例
1、新建“gulimall-coupon.properties”，将它置于“tmp”组下
2、修改“bootstrap.properties”配置，添加如下的配置
spring.cloud.nacos.config.group=tmp
- 1
3、重启“gulimall-coupon”，访问：http://localhost:7000/coupon/coupon/test
5）同时加载多个配置集
当微服务数量很庞大时，将所有配置都书写到一个配置文件中，显然不是太合适。对此我们可以将配置按照功能的不同，拆分为不同的配置文件。
如下面的配置文件：
server:
port: 7000
spring:
datasource:
#MySQL配置
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.137.14:3306/gulimall_sms?useUnicode=true&characterEncoding=UTF-8&useSSL=false
username: root
password: root
application:
name: gulimall-coupon
cloud:
nacos:
discovery:
server-addr: 192.168.137.14:8848
mybatis-plus:
global-config:
db-config:
id-type: auto
mapper-locations: classpath:/mapper/**/*.xml
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
我们可以将，
数据源有关的配置写到一个配置文件中：
spring:
datasource:
#MySQL配置
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.137.14:3306/gulimall_sms?useUnicode=true&characterEncoding=UTF-8&useSSL=false
username: root
password: root
- 1
- 2
- 3
- 4
- 5
- 6
- 7
和框架有关的写到另外一个配置文件中：
mybatis-plus:
global-config:
db-config:
id-type: auto
mapper-locations: classpath:/mapper/**/*.xml
- 1
- 2
- 3
- 4
- 5
也可以将上面的这些配置交给nacos来进行管理。
实例：将“gulimall-coupon”的“application.yml”文件拆分为多个配置，并放置到nacos配置中心
1、创建“datasource.yml”，用于存储和数据源有关的配置
spring:
datasource:
#MySQL配置
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.137.14:3306/gulimall_sms?useUnicode=true&characterEncoding=UTF-8&useSSL=false
username: root
password: root
- 1
- 2
- 3
- 4
- 5
- 6
- 7
在coupon命名空间中，创建“datasource.yml”配置
2、将和mybatis相关的配置，放置到“mybatis.yml”中
mybatis-plus:
global-config:
db-config:
id-type: auto
mapper-locations: classpath:/mapper/**/*.xml
- 1
- 2
- 3
- 4
- 5
3、创建“other.yml”配置，保存其他的配置信息
server:
port: 7000
spring:
application:
name: gulimall-coupon
cloud:
nacos:
discovery:
server-addr: 192.168.137.14:8848
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
现在“mybatis.yml”、“datasource.yml”和“other.yml”共同构成了微服务的配置。
4、修改“gulimall-coupon”的“bootstrap.properties”文件，加载“mybatis.yml”、“datasource.yml”和“other.yml”配置
spring.cloud.nacos.config.extension-configs[0].data-id=mybatis.yml
spring.cloud.nacos.config.extension-configs[0].group=dev
spring.cloud.nacos.config.extension-configs[0].refresh=true
spring.cloud.nacos.config.extension-configs[1].data-id=datasource.yml
spring.cloud.nacos.config.extension-configs[1].group=dev
spring.cloud.nacos.config.extension-configs[1].refresh=true
spring.cloud.nacos.config.extension-configs[2].data-id=other.yml
spring.cloud.nacos.config.extension-configs[2].group=dev
spring.cloud.nacos.config.extension-configs[2].refresh=true
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
"spring.cloud.nacos.config.ext-config"已经被废弃，建议使用“spring.cloud.nacos.config.extension-configs”
5、注释“application.yml”文件中的所有配置
6、重启“gulimall-coupon”服务，然后访问：http://localhost:7000/coupon/coupon/test
7、访问：http://localhost:7000/coupon/coupon/list，查看是否能够正常的访问数据库
小结：
1)、微服务任何配置信息，任何配置文件都可以放在配置中心；
2)、只需要在bootstrap.properties中，说明加载配置中心的哪些配置文件即可；
3)、@Value, @ConfigurationProperties。都可以用来获取配置中心中所配置的信息；
4)、配置中心有的优先使用配置中心中的，没有则使用本地的配置。
11. 网关
1、注册“gulimall-gateway”到Nacos
1）创建“gulimall-gateway”
SpringCloud gateway
2）添加“gulimall-common”依赖和“spring-cloud-starter-gateway”依赖
<dependency>
<groupId>com.bigdata.gulimall</groupId>
<artifactId>gulimall-common</artifactId>
<version>1.0-SNAPSHOT</version>
</dependency>
<dependency>
<groupId>org.springframework.cloud</groupId>
<artifactId>spring-cloud-starter-gateway</artifactId>
</dependency>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
3）“com.bigdata.gulimall.gulimallgateway.GulimallGatewayApplication”类上加上“@EnableDiscoveryClient”注解
4）在Nacos中创建“gateway”命名空间，同时在该命名空间中创建“gulimall-gateway.yml”
5）创建“bootstrap.properties”文件，添加如下配置，指明配置中心地址和所属命名空间
spring.application.name=gulimall-gateway
spring.cloud.nacos.config.server-addr=192.168.137.14:8848
spring.cloud.nacos.config.namespace=1c82552e-1af0-4ced-9a48-26f19c2d315f
- 1
- 2
- 3
6）创建“application.properties”文件，指定服务名和注册中心地址
spring.application.name=gulimall-gateway
spring.cloud.nacos.discovery.server-addr=192.168.137.14:8848
server.port=88
- 1
- 2
- 3
7）启动“gulimall-gateway”
启动报错：
Description:
Failed to configure a DataSource: ‘url’ attribute is not specified and no embedded datasource could be configured.
Reason: Failed to determine a suitable driver class
- 1
- 2
- 3
- 4
- 5
解决方法：在“com.bigdata.gulimall.gulimallgateway.GulimallGatewayApplication”中排除和数据源相关的配置
@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
- 1
重新启动
访问：http://192.168.137.14:8848/nacos/#，查看到该服务已经注册到了Nacos中
2、案例
现在想要实现针对于“http://localhost:88/hello?url=baidu”，转发到“https://www.baidu.com”，针对于“http://localhost:88/hello?url=qq”的请求，转发到“https://www.qq.com/”
1）创建“application.yml”
spring:
cloud:
gateway:
routes:
- id: baidu_route
uri: https://www.baidu.com
predicates:
- Query=url, baidu
- id: qq_route
uri: https://www.qq.com/
predicates:
- Query=url, qq
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
2）启动“gulimall-gateway”
3）测试
访问：http://localhost:88/hello?url=baidu
访问：http://localhost:88/hello?url=qq
12. Vue
安装vue
# 最新稳定版
$ npm install vue
- 1
- 2
1、vue声明式渲染
let vm = new Vue({
el: "#app",//绑定元素
data: { //封装数据
name: "张三",
num: 1
},
methods:{ //封装方法
cancle(){
this.num -- ;
},
hello(){
return "1"
}
}
});
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
2、双向绑定,模型变化，视图变化。反之亦然
双向绑定使用v-model
<input type="text" v-model="num">
- 1
<h1> {{name}} ,非常帅，有{{num}}个人为他点赞{{hello()}}</h1>
- 1
3、事件处理
v-xx：指令
1、创建vue实例，关联页面的模板，将自己的数据（data）渲染到关联的模板，响应式的
2、指令来简化对dom的一些操作。
3、声明方法来做更复杂的操作。methods里面可以封装方法。
v-on是按钮的单击事件：
<button v-on:click="num++">点赞</button>
- 1
在VUE中el,data和vue的作用:
- el：用来绑定数据；
- data:用来封装数据；
- methods：用来封装方法，并且能够封装多个方法，如何上面封装了cancell和hello方法。
安装“Vue 2 Snippets”，用来做代码提示
为了方便的在浏览器上调试VUE程序，需要安装“vue-devtools”，编译后安装到chrome中即可。
详细的使用方法见：Vue调试神器vue-devtools安装
“v-html”不会对于HTML标签进行转义，而是直接在浏览器上显示data所设置的内容;而“ v-text”会对html标签进行转义
<div id="app"> {{msg}} {{1+1}} {{hello()}}<br/> <span v-html="msg"></span> <br/> <span v-text="msg"></span> </div><span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../node_modules/vue/dist/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token punctuation">:</span><span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span> msg<span class="token punctuation">:</span><span class="token string">"<h1>Hello</h1>"</span><span class="token punctuation">,</span> link<span class="token punctuation">:</span><span class="token string">"http://www.baidu.com"</span> <span class="token punctuation">}</span><span class="token punctuation">,</span> methods<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span> <span class="token function">hello</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token string">"World"</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
运行结果：
{ {msg}} :称为差值表达式，它必须要写在Html表达式，可以完成数学运算和方法调用
4、v-bind :单向绑定
给html标签的属性绑定
<!-- 给html标签的属性绑定 --> <div id="app"><span class="token operator"><</span>a v<span class="token operator">-</span>bind<span class="token punctuation">:</span>href<span class="token operator">=</span><span class="token string">"link"</span><span class="token operator">></span>gogogo<span class="token operator"><</span><span class="token operator">/</span>a<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">!</span><span class="token operator">--</span> <span class="token keyword">class</span><span class="token punctuation">,</span>style <span class="token punctuation">{<!-- --></span><span class="token keyword">class</span>名：加上？<span class="token punctuation">}</span><span class="token operator">--</span><span class="token operator">></span> <span class="token operator"><</span>span v<span class="token operator">-</span>bind<span class="token punctuation">:</span><span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"{active:isActive,'text-danger':hasError}"</span> <span class="token punctuation">:</span>style<span class="token operator">=</span><span class="token string">"{color: color1,fontSize: size}"</span><span class="token operator">></span>你好<span class="token operator"><</span><span class="token operator">/</span>span<span class="token operator">></span> <span class="token operator"><</span><span class="token operator">/</span>div<span class="token operator">></span> <span class="token operator"><</span>script src<span class="token operator">=</span><span class="token string">"../node_modules/vue/dist/vue.js"</span><span class="token operator">></span><span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span> <span class="token operator"><</span>script<span class="token operator">></span> <span class="token keyword">let</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token punctuation">:</span><span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span> link<span class="token punctuation">:</span> <span class="token string">"http://www.baidu.com"</span><span class="token punctuation">,</span> isActive<span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> hasError<span class="token punctuation">:</span><span class="token boolean">true</span><span class="token punctuation">,</span> color1<span class="token punctuation">:</span><span class="token string">'red'</span><span class="token punctuation">,</span> size<span class="token punctuation">:</span><span class="token string">'36px'</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token operator"><</span><span class="token operator">/</span>script<span class="token operator">></span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
上面所完成的任务就是给a标签绑定一个超链接。并且当“isActive”和“hasError”都是true的时候，将属性动态的绑定到，则绑定该“active”和 "text-danger"class。这样可以动态的调整属性的存在。
而且如果想要实现修改vm的"color1"和“size”， span元素的style也能够随之变化，则可以写作v-bind:style，也可以省略v-bind。
5、v-model双向绑定
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body><span class="token comment"><!-- 表单项，自定义组件 --></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> 精通的语言： <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Java<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> java<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>PHP<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> PHP<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>checkbox<span class="token punctuation">"</span></span> <span class="token attr-name">v-model</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>language<span class="token punctuation">"</span></span> <span class="token attr-name">value</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>Python<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Python<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">/></span></span> 选中了 {<!-- -->{language.join(",")}} <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../node_modules/vue/dist/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript"> <span class="token keyword">let</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span> el<span class="token punctuation">:</span><span class="token string">"#app"</span><span class="token punctuation">,</span> data<span class="token punctuation">:</span><span class="token punctuation">{<!-- --></span> language<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span> <span class="token punctuation">}</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> </span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
上面完成的功能就是通过“v-model”为输入框绑定多个值，能够实现选中的值，在data的language也在不断的发生着变化，
如果在控制台上指定vm.language=[“Java”,“PHP”]，则data值也会跟着变化。
通过“v-model”实现了页面发生了变化，则数据也发生变化，数据发生变化，则页面也发生变化，这样就实现了双向绑定。
数组的连接操作： 选中了 { {language.join(",")}}
6、v-on为按钮绑定事件
<!--事件中直接写js片段-->
<button v-on:click="num++">点赞</button>
<!--事件指定一个回调函数，必须是Vue实例中定义的函数-->
<button @click="cancle">取消</button>
- 1
- 2
- 3
- 4
上面是为两个按钮绑定了单击事件，其中一个对于num进行自增，另外一个自减。
v-on:click也可以写作@click
事件的冒泡：
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click="hello">
小div <br />
<a href="http://www.baidu.com" @click.prevent="hello">去百度</a>
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
上面的这两个嵌套div中，如果点击了内层的div，则外层的div也会被触发；这种问题可以事件修饰符来完成：
<!-- 事件修饰符 -->
<div style="border: 1px solid red;padding: 20px;" v-on:click.once="hello">
大div
<div style="border: 1px solid blue;padding: 20px;" @click.stop="hello">
小div <br />
<a href="http://www.baidu.com" @click.prevent.stop="hello">去百度</a>
<!--这里禁止了超链接的点击跳转操作，并且只会触发当前对象的操作-->
</div>
</div>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
关于事件修饰符：
按键修饰符：
7、v-for遍历循环
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(user,index) in users<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user.name<span class="token punctuation">"</span></span> <span class="token attr-name">v-if</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>user.gender == <span class="token punctuation">'</span>女<span class="token punctuation">'</span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 1、显示user信息：v-for="item in items" --></span>
当前索引：{<!-- -->{index}} ==> {<!-- -->{user.name}} ==> {<!-- -->{user.gender}} ==>{<!-- -->{user.age}} <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>br</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 2、获取数组下标：v-for="(item,index) in items" --></span>
<span class="token comment"><!-- 3、遍历对象：
v-for="value in object"
v-for="(value,key) in object"
v-for="(value,key,index) in object"
--></span>
对象信息：
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(v,k,i) in user<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>{<!-- -->{k}}=={<!-- -->{v}}=={<!-- -->{i}}；<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率 --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>li</span> <span class="token attr-name">v-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>(num,index) in nums<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>index<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>li</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>ul</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../node_modules/vue/dist/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token punctuation">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
users<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'柳岩'</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token string">'女'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">21</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'张三'</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token string">'男'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'范冰冰'</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token string">'女'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">24</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'刘亦菲'</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token string">'女'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">18</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span> name<span class="token punctuation">:</span> <span class="token string">'古力娜扎'</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token string">'女'</span><span class="token punctuation">,</span> age<span class="token punctuation">:</span> <span class="token number">25</span> <span class="token punctuation">}</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
nums<span class="token punctuation">:</span> <span class="token punctuation">[</span><span class="token number">1</span><span class="token punctuation">,</span><span class="token number">2</span><span class="token punctuation">,</span><span class="token number">3</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">,</span><span class="token number">4</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
4、遍历的时候都加上:key来区分不同数据，提高vue渲染效率
过滤器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
</head>
<body>
<!-- 过滤器常用来处理文本格式化的操作。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 -->
<div id=“app”>
<ul>
<li v-for=“user in userList”>
{
{user.id}} ==> {
{user.name}} ==> {
{user.gender == 1?“男”:“女”}} ==>
{
{user.gender | genderFilter}} ==> {
{user.gender | gFilter}}
<!-- 这里的"|“表示的管道，将user.gender的值交给genderFilter -->
</li>
</ul>
</div>
<script src=”…/node_modules/vue/dist/vue.js"></script>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token comment">// 全局过滤器 </span>
Vue<span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token string">"gFilter"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token string">"男~~~"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token string">"女~~~"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token keyword">let</span> vm <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token punctuation">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
userList<span class="token punctuation">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{<!-- --></span> id<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'jacky'</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token number">1</span> <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">{<!-- --></span> id<span class="token punctuation">:</span> <span class="token number">2</span><span class="token punctuation">,</span> name<span class="token punctuation">:</span> <span class="token string">'peter'</span><span class="token punctuation">,</span> gender<span class="token punctuation">:</span> <span class="token number">0</span> <span class="token punctuation">}</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
filters<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token comment"> filters 定义局部过滤器，只可以在当前vue实例中使用</span>
<span class="token function">genderFilter</span><span class="token punctuation">(</span>val<span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">if</span> <span class="token punctuation">(</span>val <span class="token operator">==</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token string">"男"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token string">"女"</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
组件化
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
</head>
<body>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>app<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button</span> <span class="token attr-name"><span class="token namespace">v-on:</span>click</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>count++<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>我被点击了 {<!-- -->{count}} 次<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>counter</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>counter</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>counter</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>counter</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>counter</span><span class="token punctuation">></span></span>
<span class="token comment"><!-- 使用所定义的组件button-counter --></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>button-counter</span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>button-counter</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../node_modules/vue/dist/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token comment">//1、全局声明注册一个组件</span>
Vue<span class="token punctuation">.</span><span class="token function">component</span><span class="token punctuation">(</span><span class="token string">"counter"</span><span class="token punctuation">,</span> <span class="token punctuation">{<!-- --></span>
template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<button v-on:click="count++">我被点击了 {<!-- -->{count}} 次</button>`</span></span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
count<span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">//2、局部声明一个组件</span>
<span class="token keyword">const</span> buttonCounter <span class="token operator">=</span> <span class="token punctuation">{<!-- --></span>
template<span class="token punctuation">:</span> <span class="token template-string"><span class="token string">`<button v-on:click="count++">我被点击了 {<!-- -->{count}} 次~~~</button>`</span></span><span class="token punctuation">,</span>
<span class="token function">data</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token punctuation">{<!-- --></span>
count<span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token punctuation">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
count<span class="token punctuation">:</span> <span class="token number">1</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
components<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token comment">//声明所定义的局部组件</span>
<span class="token string">'button-counter'</span><span class="token punctuation">:</span> buttonCounter
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
生命周期钩子函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset=“UTF-8”>
<meta name=“viewport” content=“width=device-width, initial-scale=1.0”>
<meta http-equiv=“X-UA-Compatible” content=“ie=edge”>
<title>Document</title>
</head>
<body>
<div id=“app”>
<span id=“num”>{
{num}}</span>
<button @click=“num++”>赞！</button>
<h2>{
{name}}，有{
{num}}个人点赞</h2>
</div>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../node_modules/vue/dist/vue.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>script</span><span class="token punctuation">></span></span><span class="token script language-javascript">
<span class="token keyword">let</span> app <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Vue</span><span class="token punctuation">(</span><span class="token punctuation">{<!-- --></span>
el<span class="token punctuation">:</span> <span class="token string">"#app"</span><span class="token punctuation">,</span>
data<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
name<span class="token punctuation">:</span> <span class="token string">"张三"</span><span class="token punctuation">,</span>
num<span class="token punctuation">:</span> <span class="token number">100</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
methods<span class="token punctuation">:</span> <span class="token punctuation">{<!-- --></span>
<span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">return</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">add</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
<span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token operator">++</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">beforeCreate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=========beforeCreate============="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"数据模型未加载："</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"方法未加载："</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"html模板未加载："</span> <span class="token operator">+</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"num"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
created<span class="token punctuation">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=========created============="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"数据模型已加载："</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>name<span class="token punctuation">,</span> <span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"方法已加载："</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">show</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"html模板已加载："</span> <span class="token operator">+</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"num"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"html模板未渲染："</span> <span class="token operator">+</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"num"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">beforeMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=========beforeMount============="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"html模板未渲染："</span> <span class="token operator">+</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"num"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">mounted</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=========mounted============="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"html模板已渲染："</span> <span class="token operator">+</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"num"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">beforeUpdate</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=========beforeUpdate============="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"数据模型已更新："</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"html模板未更新："</span> <span class="token operator">+</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"num"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token function">updated</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{<!-- --></span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"=========updated============="</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"数据模型已更新："</span> <span class="token operator">+</span> <span class="token keyword">this</span><span class="token punctuation">.</span>num<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">"html模板已更新："</span> <span class="token operator">+</span> document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"num"</span><span class="token punctuation">)</span><span class="token punctuation">.</span>innerText<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>script</span><span class="token punctuation">></span></span>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
13. element ui
官网： https://element.eleme.cn/#/zh-CN/component/installation
安装
npm i element-ui -S
- 1
在 main.js 中写入以下内容：
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
- 1
- 2
- 3
- 4
14. 递归树形结构获取数据
在注册中心中“product”命名空间中，创建“gulimall-product.yml”配置文件：
将“application.yml”内容拷贝到该配置文件中
server:
port: 10000
spring:
datasource:
#MySQL配置
driverClassName: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://192.168.137.14:3306/gulimall_pms?useUnicode=true&characterEncoding=UTF-8&useSSL=false
username: root
password: root
application:
name: gulimall-product
cloud:
nacos:
discovery:
server-addr: 192.168.137.14:8848
mybatis-plus:
global-config:
db-config:
id-type: auto
mapper-locations: classpath:/mapper/**/*.xml
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
在本地创建“bootstrap.properties”文件，指明配置中心的位置和使用到的配置文件：
spring.application.name=gulimall-product
spring.cloud.nacos.config.server-addr=192.168.137.14:8848
spring.cloud.nacos.config.namespace=3c50ffaa-010b-4b59-9372-902e35059232
spring.cloud.nacos.config.extension-configs[0].data-id=gulimall-product.yml
spring.cloud.nacos.config.extension-configs[0].group=DEFAULT_GROUP
spring.cloud.nacos.config.extension-configs[0].refresh=true
- 1
- 2
- 3
- 4
- 5
- 6
然后启动gulimall-product，查看到该服务已经出现在了nacos的注册中心中了
修改“com.bigdata.gulimall.product.service.CategoryService”类，添加如下代码：
/** * 列表 */ @RequestMapping("/list/tree") public List<CategoryEntity> list(){ List<CategoryEntity> categoryEntities = categoryService.listWithTree();<span class="token keyword">return</span> categoryEntities<span class="token punctuation">;</span> <span class="token punctuation">}</span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
测试：http://localhost:10000/product/category/list/tree
如何区别是哪种分类级别？
答：可以通过分类的parent_cid来进行判断，如果是一级分类，其值为0.
/** * 列表 */ @RequestMapping("/list/tree") public List<CategoryEntity> list(){ List<CategoryEntity> categoryEntities = categoryService.listWithTree(); //找到所有的一级分类 List<CategoryEntity> level1Menus = categoryEntities.stream() .filter(item -> item.getParentCid() == 0) .map(menu->{ menu.setChildCategoryEntity(getChildrens(menu,categoryEntities)); return menu; }) .sorted((menu1, menu2) -> {<span class="token keyword">return</span> <span class="token punctuation">(</span>menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span>null <span class="token operator">?</span> <span class="token number">0</span><span class="token operator">:</span>menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-</span> <span class="token punctuation">(</span>menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">==</span>null<span class="token operator">?</span><span class="token number">0</span><span class="token operator">:</span>menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span> <span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span>Collectors<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> level1Menus<span class="token punctuation">;</span> <span class="token punctuation">}</span> <span class="token keyword">public</span> List<span class="token generics function"><span class="token punctuation"><</span>CategoryEntity<span class="token punctuation">></span></span> <span class="token function">getChildrens</span><span class="token punctuation">(</span>CategoryEntity root<span class="token punctuation">,</span>List<span class="token generics function"><span class="token punctuation"><</span>CategoryEntity<span class="token punctuation">></span></span> all<span class="token punctuation">)</span><span class="token punctuation">{<!-- --></span> List<span class="token generics function"><span class="token punctuation"><</span>CategoryEntity<span class="token punctuation">></span></span> childrens <span class="token operator">=</span> all<span class="token punctuation">.</span><span class="token function">stream</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span>item <span class="token operator">-</span><span class="token operator">></span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> item<span class="token punctuation">.</span><span class="token function">getParentCid</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span> root<span class="token punctuation">.</span><span class="token function">getCatId</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>item <span class="token operator">-</span><span class="token operator">></span> <span class="token punctuation">{<!-- --></span> item<span class="token punctuation">.</span><span class="token function">setChildCategoryEntity</span><span class="token punctuation">(</span><span class="token function">getChildrens</span><span class="token punctuation">(</span>item<span class="token punctuation">,</span> all<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> item<span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">sorted</span><span class="token punctuation">(</span><span class="token punctuation">(</span>menu1<span class="token punctuation">,</span> menu2<span class="token punctuation">)</span> <span class="token operator">-</span><span class="token operator">></span> <span class="token punctuation">{<!-- --></span> <span class="token keyword">return</span> <span class="token punctuation">(</span>menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">==</span>null <span class="token operator">?</span> <span class="token number">0</span><span class="token operator">:</span>menu1<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token operator">-</span> <span class="token punctuation">(</span>menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">==</span>null<span class="token operator">?</span><span class="token number">0</span><span class="token operator">:</span>menu2<span class="token punctuation">.</span><span class="token function">getSort</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">collect</span><span class="token punctuation">(</span>Collectors<span class="token punctuation">.</span><span class="token function">toList</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token keyword">return</span> childrens<span class="token punctuation">;</span> <span class="token punctuation">}</span>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
下面是得到的部分JSON数据
[
{
"catId": 1,
"name": "图书、音像、电子书刊",
"parentCid": 0,
"catLevel": 1,
"showStatus": 1,
"sort": 0,
"icon": null,
"productUnit": null,
"productCount": 0,
"childCategoryEntity": [
{
"catId": 22,
"name": "电子书刊",
"parentCid": 1,
"catLevel": 2,
"showStatus": 1,
"sort": 0,
"icon": null,
"productUnit": null,
"productCount": 0,
"childCategoryEntity": [
{
"catId": 165,
"name": "电子书",
"parentCid": 22,
"catLevel": 3,
"showStatus": 1,
"sort": 0,
"icon": null,
"productUnit": null,
"productCount": 0,
"childCategoryEntity": []
},
{
"catId": 166,
"name": "网络原创",
"parentCid": 22,
"catLevel": 3,
"showStatus": 1,
"sort": 0,
"icon": null,
"productUnit": null,
"productCount": 0,
"childCategoryEntity": []
},
{
"catId": 167,
"name": "数字杂志",
"parentCid": 22,
"catLevel": 3,
"showStatus": 1,
"sort": 0,
"icon": null,
"productUnit": null,
"productCount": 0,
"childCategoryEntity": []
},
{
"catId": 168,
"name": "多媒体图书",
"parentCid": 22,
"catLevel": 3,
"showStatus": 1,
"sort": 0,
"icon": null,
"productUnit": null,
"productCount": 0,
4504
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
