gulimall新篇

三、环境搭建

1、安装linux系统

1、安装VirtualBox
2、安装vagrant
vagrant联合VirtualBox可以快速创建一个linux虚拟机
Vagrant官方镜像仓库:https://app.vagrantup.com/boxes/search
使用Vagrant初始化一个虚拟机
Windows + r , cmd
可以指定文件目录:E:\lx\rj\linux\gulimall
命令 : vagrant init centos/7
在这里插入图片描述
通过官方下载镜像,启动虚拟机 ,cmd在安装虚拟机的目录下操作
vagrant up
在这里插入图片描述
目前账号为:vagrant
连接命令:vagrant ssh

linux命令:

1、查看当前用户:whoami
2、查看根目录所有文件:ls /
3、退出和虚拟机的连接:exit;
4、查看ip:ip addr
5、切换用户:su root
6、vagrant密码为:vagrant
7、进入目录:cd lsmydata/
8、编辑:vi my.cnf	 #解释 my.cnf 是cnf文件
9、i :编辑,赋值或者编写内容
10、保存退出操作:先按一下esc ,在按一下 : ,在输入wq + 回车就退出来了
linux的docker命令
查看docker正在运行中的容器:docker ps
让docker重启mysql :docker restart mysql

关闭虚拟机:右键VirtualBox -> 退出 -> 正常关机
启动虚拟机:1、右键VirtualBox -> 启动 或者 vagrant up
2、vagrant ssh

更改Vagrantfile,更改虚拟机ip
修改其中的config.vm.network “private_network”, ip: “192.168.56.10”
这个ip要和windows中命令ipconfig的vitualbox的网卡ip一致
更改完要重新启动vitualbox
重启命令:vagrant reload

查看windows和linux的ip是否能ping通

2、linux安装docker

镜像:linux想下载某个软件的时候,比如mysql,直接用docker下载mysql的镜像,就可以操作mysql数据库了
虚拟机安装docker

Install Docker Engine on CentOS | Docker Documentation

1、卸载之前安装的docker

sudo是用管理员的方式执行

sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine

2、安装docker需要的依赖包

sudo yum install -y yum-utils

3、docker去哪里装

sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo

4、安装docker

sudo yum install docker-ce docker-ce-cli containerd.io

5、启动docker

sudo systemctl start docker

6、查看docker版本

docker -v

7、查看docker是否下载了镜像

sudo docker images

8、给docker设置开机自动启动

sudo systemctl enable docker

9、给docker配置阿里云镜像加速器

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

// 先创建文件夹
sudo mkdir -p /etc/docker
// 镜像加速地址
sudo tee /etc/docker/daemon.json <<-'EOF'
{"registry-mirrors": ["https://c4hepnvv.mirror.aliyuncs.com"]
}
EOF
// 重启docker的后台线程
sudo systemctl daemon-reload
// 重启docker服务
sudo systemctl restart docker

3、docker安装mysql

用docker安装上mysql,去docker仓库里搜索mysql

sudo docker pull mysql:5.7
# --name指定容器名字 -v目录挂载 -p指定端口映射  -e设置mysql参数 -d后台运行
sudo docker run -p 3306:3306 --name mysql \
-v /mydata/mysql/log:/var/log/mysql \
-v /mydata/mysql/data:/var/lib/mysql \
-v /mydata/mysql/conf:/etc/mysql \
-e MYSQL_ROOT_PASSWORD=root \
-d mysql:5.7

mysql容器就是一个小小的linux

# 进入mysql配置文件,修改mysql字符编码
vi /mydata/mysql/conf/my.conf [client]
default-character-set=utf8
[mysql]
default-character-set=utf8
[mysqld]
init_connect='SET collation_connection = utf8_unicode_ci'
init_connect='SET NAMES utf8'
character-set-server=utf8
collation-server=utf8_unicode_ci
skip-character-set-client-handshake
skip-name-resolve# 重新启动mysql
docker restart mysql

4、docker安装redis

docker安装redis命令

docker pull redis

如果直接挂载的话docker会以为挂载的是一个目录,所以我们先创建一个文件然后再挂载,在虚拟机中。

# 在虚拟机中
mkdir -p /mydata/redis/conf
# 创建一个redis.conf文件
touch /mydata/redis/conf/redis.confdocker pull redisdocker 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

重新启动redis

docker restart redis

默认是不持久化的。在配置文件中输入appendonly yes,就可以aof持久化了。修改完docker restart redis,docker -it redis redis-cli

vi /mydata/redis/conf/redis.conf
# 插入下面内容
appendonly yes
# 保存docker restart redis

redis客户端的使用
在这里插入图片描述
在这里插入图片描述
查看jdk版本:java -version
查看maven版本:mvn -version

5、maven环境

5.1、在maven的config.xml中配置阿里云镜像

    <mirror><id>alimaven</id><name>aliyun maven</name><url>http://maven.aliyun.com/nexus/content/groups/public/</url> <mirrorOf>central</mirrorOf> </mirror>

配置jdk1.8。

  <profiles><profile><id>jdk-1.8</id><activation><activeByDefault>true</activeByDefault><jdk>1.8</jdk></activation><properties><maven.compiler.source>1.8</maven.compiler.source><maven.compiler.target>1.8</maven.compiler.target><maven.compiler.compilerVersion>1.8</maven.compiler.compilerVersion></properties></profile>

给IDEA安装插件lombok,mybatisX
5.2、前端开发工具vscode
下载vsCode用于前端管理系统。在vsCode里安装插件。

Auto Close Tag
Auto Rename Tag
Chinese
ESlint
HTML CSS Support
HTML Snippets
JavaScript ES6
Live Server
open in brower
Vetur

5.3、代码管理gitee(码云)

安装git(本人用的是gitHub作为代码托管,)

下载git客户端,右键桌面Git GUI/bash Here。去bash,

创建仓库步骤

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
依次创建出以下服务

商品服务product
仓储服务ware
订单服务order
优惠券服务coupon
会员服务member
共同点:

导入web和openFeign
group:com.atguigu.gulimall
Artifact:gulimall-XXX
每一个服务,包名com.atguigu.gulimall.XXX{product/order/ware/coupon/member}
模块名:gulimall-XXX
在这里插入图片描述
在小项目里复制一个pom文件,粘贴到总项目下

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd"><modelVersion>4.0.0</modelVersion><groupId>com.atguigu.gulimall</groupId><artifactId>gulimall</artifactId><version>0.0.1-SNAPSHOT</version><name>gulimall</name><description>聚合服务</description><packaging>pom</packaging><modules><module>gulimall-coupon</module><module>gulimall-member</module><module>gulimall-order</module><module>gulimall-product</module><module>gulimall-ware</module></modules></project>

在maven窗口刷新,并点击+号,找到刚才的pom.xml添加进来,发现多了个root。这样比如运行root的clean命令,其他项目也一起clean了。
在D额fault changelist右键点击commit,去掉右面的勾选Perform code analysis、CHECK TODO,然后点击COMMIT,有个下拉列表,点击commit and push才会提交到云端。此时就可以在浏览器中看到了。

启动虚拟机,启动docker中的容器不会自动启动

docker ps :查询docker中所有启动的容器
docker ps -a : 查询docker中所有未启动的容器
sudo docker ps
sudo docker ps -a
# 这两个命令的差别就是后者会显示  【已创建但没有启动的容器】# 我们接下来设置我们要用的容器每次都是自动启动
sudo docker update redis --restart=always
sudo docker update mysql --restart=always
# 如果不配置上面的内容的话,我们也可以选择手动启动
sudo docker start mysql
sudo docker start redis
# 如果要进入已启动的容器
sudo docker exec -it mysql /bin/bash

5.4、数据库创建,utf-8mb4,兼容utf-8并且能解决乱码问题
在这里插入图片描述

gulimall_pms : 商品服务
gulimall_oms:订单
gulimall_sms:营销
gulimall_ums:用户
gulimall_wms:库存

然后打开对应的sql在对应的数据库中执行。依次执行。(注意sql文件里没有建库语句)

5.5、人人开源
在这里插入图片描述

git clone https://gitee.com/renrenio/renren-fast-vue.gitgit clone https://gitee.com/renrenio/renren-fast.git

将拷贝下来的“renren-fast”删除“.git”后,拷贝到“gulimall”工程根目录下,然后将它作为gulimall的一个module

将人人开源后端项目下载下来粘贴到谷粒商城项目中

创建“gulimall_admin”的数据库,然后执行“renren-fast/db/mysql.sql”中的SQl脚本

修改“application-dev.yml”文件,默认为dev环境,修改连接mysql的url和用户名密码

启动“gulimall_admin”,然后访问“http://localhost:8080/renren-fast/”

在这里插入图片描述
5.6、人人开源后端管理系统页面
将vue项目拖进vscode
安装node.js,安装完检查版本

检查node版本
node -v
安装淘宝镜像
npm config set registry http://registry.npm.taobao.org/

在终端vue目录下执行npm install ,加载包结构

npm install

加载完成执行npm run dev启动项目

npm run dev

在这里插入图片描述
用户名:admin
密码:admin

5.7、代码生成工具

git clone https://gitee.com/renrenio/renren-generator.git

也可以下载到本地然后进行拖拽到项目里

下载到桌面后,同样把里面的.git文件删除,然后移动到我们IDEA项目目录中,同样配置好pom.xml

<modules><module>gulimall-coupon</module><module>gulimall-member</module><module>gulimall-order</module><module>gulimall-product</module><module>gulimall-ware</module><module>renren-fast</module><module>renren-generator</module></modules>

更改配置文件

修改application.yml
driverClassName: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://192.168.56.10:3306/gulimall_pms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghaiusername: rootpassword: root

然后修改generator.properties

# 主目录
mainPath=com.atguigu
#包名
package=com.atguigu.gulimall
#模块名
moduleName=product
#作者
author=lx
#email
email=自己邮箱
#表前缀(类名不会包含表前缀) # 我们的pms数据库中的表的前缀都pms
# 如果写了表前缀,每一张表对于的javaBean就不会添加前缀了
tablePrefix=pms_

启动代码生成器项目
浏览器访问:localhost

选中所有的表点击生成代码(选中所有表分页选择最大)

将生成的压缩包进行解压,把main文件夹赋值到对应的项目中,把resources中src删掉
在这里插入图片描述
创建公共服务模块,创建maven项目
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
每个项目都依赖gulimall-common

		<dependency><groupId>com.atguigu.gulimall</groupId><artifactId>gulimall-common</artifactId><version>0.0.1-SNAPSHOT</version></dependency>

公共依赖都在gulimall-common中写

<!-- mybatisPLUS-->
<dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus-boot-starter</artifactId><version>3.3.2</version>
</dependency>
<!--简化实体类,用@Data代替getset方法-->
<dependency><groupId>org.projectlombok</groupId><artifactId>lombok</artifactId><version>1.18.8</version>
</dependency>
<!-- httpcomponent包https://mvnrepository.com/artifact/org.apache.httpcomponents/httpcore -->
<dependency><groupId>org.apache.httpcomponents</groupId><artifactId>httpcore</artifactId><version>4.4.13</version>
</dependency>
<dependency><groupId>commons-lang</groupId><artifactId>commons-lang</artifactId><version>2.6</version>
</dependency>

复制

renren-fast----utils包下的Query和PageUtils、R、Constant复制到common项目的java/com.atguigu.common.utils下

复制renren-fast中的xss包粘贴到common的com.atguigu.common目录下。

还复制了exception文件夹,对应的位置关系自己观察一下就行

注释掉product项目下类中的//import org.apache.shiro.authz.annotation.RequiresPermissions;,他是shiro的东西

注释renren-generator\src\main\resources\template/Controller中所有的@RequiresPermissions。## import org.apache.shiro.authz.annotation.RequiresPermissions;

总之什么报错就去fast里面找。重启逆向工程。重新在页面上得到压缩包。重新解压出来,不过只把里面的controller复制粘贴到product项目对应的目录就行。

测试

测试与整合商品服务里的mybatisplus

https://mp.baomidou.com/guide/quick-start.html#配置

在common的pom.xml中导入

<!-- 数据库驱动 https://mvnrepository.com/artifact/mysql/mysql-connector-java -->
<dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.17</version>
</dependency>
<!--tomcat里一般都带-->
<dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version><scope>provided</scope>
</dependency>

删掉common里xss/xssfiler和XssHttpServletRequestWrapper

在product项目的resources目录下新建application.yml

spring:datasource:username: rootpassword: rooturl: jdbc:mysql://192.168.119.127:3306/gulimall-pmsdriver-class-name: com.mysql.jdbc.Driver

选中类右键——> Copy Reference,复制整个类名结构
在商品启动类上加mapperScan(“com.atguigu.gulimall.product.dao”)
告诉Mybatis-Plus,sql映射文件位置

# MapperScan
# sql映射文件位置
mybatis-plus:mapper-locations: classpath:/mapper/**/*.xmlglobal-config:   # 配置每个表的主键自增长db-config:id-type: auto

单元测试

@RunWith(SpringRunner.class)
@SpringBootTest
public class GulimallProductApplicationTests {@AutowiredBrandService brandService;@Testpublic void contextLoads() {BrandEntity brandEntity = new BrandEntity();brandEntity.setName("小米12x");brandEntity.setDescript("正常手机");brandService.save(brandEntity);System.out.println("执行成功");}}

优惠券服务,coupon代码生成
代码生成器服务yml

url: jdbc:mysql://192.168.56.10:3306/gulimall_sms?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai

properties改变

moduleName=coupon
tablePrefix=sms_

右键打开优惠券服务
将main直接替换

将common依赖导入到优惠券服务pom
将resource中src删除掉

创建yml配置文件

服务对应数据库
商品服务 product — pms 端口 10000

优惠券服务 coupon – sms 端口 7000

会员服务 member – ums 端口 8000

订单服务order – oms 端口 9000

仓储服务ware – wms 端口 11000

依次生成所有模块增删改查代码
1、修改代码生成器
application.yml下

url: jdbc:mysql://192.168.56.10:3306/**gulimall_wms**?useUnicode=true&characterEncoding=UTF-8&useSSL=false&serverTimezone=Asia/Shanghai
gulimall_wms对应数据库名

generator.properties下

moduleName=ware 服务名
tablePrefix=wms_ 表前缀

导入common的依赖

6、分布式组件-SpringCloud Aliabba简介

6.1、SpringCloud Alibaba简介

1、SpringCloud Cloud Alibaba致力于提供微服务开发的一站式解决方案。此项目包含开发分布式应用微服务的必须组件,方便开发者通过Spring Cloud编程模型轻松使用这些组件开开发分布式应用服务。
依托spring Cloud Alibab,只需要添加一些注解和少量配置,就可以将Spring Cloud 应用接入阿里微服务解决方案,通过阿里中间件来迅速搭建分布式应用系统
https://github.com/alibaba/spring-cloud-alibaba/blob/master/README-zh.md

2、SpringCloud的几大痛点:

SpringCloud部分组件停止维护和更新,给开发带来不便;

SpringCloud部门环境搭建复杂,没有完善的可视化界面,我们需要大量的二次开发和定制

SpringCloud配置复杂,难以上手,部分配置差别难以区分和合理应用

3、SpringCloud Alibab的优势:

阿里使用过的组件经历了考验,性能强悍,设计合理,现在开源出来大家用成套的产品搭配完善的可视化界面给开发运维带来极大的便利搭建简单,学习曲线低。

4、结合SpringCloud Alibaba 我们最终的技术搭配方案:
Spring Cloud Alibaba -Nacos:注册中心(服务发现/注册)

Spring Cloud Alibaba -Nacos:配置中心(动态配置管理)

Spring Cloud-Ribbon:负载均衡

Spring Cloud-Feign:声明式HTTP客户端(调用远程服务)

Spring Cloud Alibaba-Sentinel:服务容错(限流、降级、熔断)

SpringCloud-Gateway:API网关(webflux编程模式)

SpringCloud-Sleuth:调用链监控

Spring Cloud Alibaba-Seata:原Fescar,即分布式事务解决方案

netflix把feign闭源了,spring cloud开了个open feign

注意:版本号要与SpringBoot版本号对应,具体看官方文档

5、在common的pom.xml中加入

    <!--依赖管理,在dependencies引入SpringCloud Alibaba相关依赖不需要引入版本号了--><dependencyManagement><dependencies><dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-alibaba-dependencies</artifactId><version>2.1.0.RELEASE</version><type>pom</type><scope>import</scope></dependency></dependencies></dependencyManagement>

6.2、nacos注册中心

6.2.1、在common公共服务下引入

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

6.2.2、在nacos官网选组naocs1.1.3版本,我使用的是nacos1.1.4版本
启动:直接解压,nacos - bin - startup.cmd启动nacos服务器
配置:在需要使用nacos注册中心的服务下以application.yml为例子
6.2.3、在下放输入nacos.选择需要的直接回车就会自动格式化
127.0.0.1:8848是本地nacos的服务加端口
给服务起个名字:
application.name:gulimall-coupon
在这里插入图片描述6.2.4、在需要使用nacos注册中心的服务启动类上加注解:
@EnableDiscoveryClient:代表着开启服务注册发现功能
6.2.5、浏览器访问nacos
ip + 端口 + /nacos
用户名:nacos
密码:nacos
在服务管理 - 服务列表能看到注册得服务

6.3、openfeign

1、SpringCloud feign 声明式远程调用
openfeign简介

feign是一个声明式的HTTP客户端,他的目的就是让远程调用更加简单。Feign提供了HTTP请求的模板,通过编写简单的接口和插入注释,就可以定义好HTTP请求的参数、格式、地址等信息。

Feign整合了Rbibbon(负载均衡)和Hystrix(服务熔断),可以让我们不再需要显式地使用这两个组件。

SpringCloudFeign在NetflixFeign的基础上扩展了对SpringMVC注解的支持,在其实现下,我们只需要创建一个接口并用注解的方式来配置它,即可完成对服务提供方的接口绑定。简化了SpringCloudRibbon自行封装服务调用客户端的开发量。

2、使用
例子:会员调用优惠券服务
在会员和优惠券的pom里引入openfeign的依赖,创建项目时已经引用了

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

在优惠券中写等待调用的代码

    @RequestMapping("/member/list")public R membercoupons(){CouponEntity couponEntity = new CouponEntity();couponEntity.setCouponName("满100减10");return R.ok().put("coupons", Arrays.asList(couponEntity));}

会员服务需要的配置
1、在启动类上加@EnableFeignClients(“com.atguigu.gulimall.member.feign”)注解,参数为调用服务的全类名
2、创建一个包名为feign的包存放需要调用的接口
创建一个接口CouponFeignService

// 这是一个声明式的远程调用
// 在nacos中注册的服务名称
@FeignClient("gulimall-coupon")
public interface CouponFeignService {// 优惠券定义的接口@RequestMapping("/coupon/coupon/member/list")public R membercoupons();
}

3、调用和被调用服务都需要启动

6.4、nacos配置中心

6.4.1、在common中加入配置中心依赖,供每个服务使用

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

6.4.2/在需要加入配置中心的服务resource文件夹下新建一个文件夹:bootstrap.properties

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

6.4.3、在nacos可视化页面的配置管理 - 配置列表创建一个gulimall-coupon.properties名
在这里插入图片描述
6.4.4、在controller中加入@RefreshScope注解,作用是修改nacos配置文件不需要重启项目
优先级: nacos配置中心中配置 大于 项目中配置

细节:
根据不同服务创建命名空间
在这里插入图片描述

根据服务下不同环境创建分组
在这里插入图片描述
值为prpo下的id,代表着使用prpo下的配置文件
spring.cloud.nacos.config.namespace=9826bdf3-c9a7-473f-8165-f17523e00483
指定分组 双十一分组
spring.cloud.nacos.config.group=1111

指定环境,指定分组,指定分组下环境 在这里插入图片描述

6.5、Gateway网关

网关作为流量的入口,常用功能包括路由转发、权限校验、限流控制等。而springCloud gateway作为SpringCloud官方推出的第二代网关框架,取代了Zuul网关

实例;
创建Gateway网关服务
在这里插入图片描述
将服务交给注册中心,在启动类上加@EnableDiscoveryClient
排除数据库,在启动类注解上加参数
@SpringBootApplication(exclude = {DataSourceAutoConfiguration.class})
在application.yml上加配置

spring:cloud:nacos:discovery:server-addr: 127.0.0.1:8848application:name: gulimall-gatewayserver:port: 88  #访问端口

网关在项目中,具体使用时配置

四、前端知识

es6语法

1、let、var、const区别
let:局部变量,出作用于失效
var:全局变量
const:定义好的变量不可以改变

2、以xxx开头、结尾、包含

let str = "hello.vue";
str.startWith("hello"); 开头
str.endsWith(".vue");结尾
str.inclides("e");包含

3、字符串模板 ``
let ss = hello word
好处:不用+好拼串,可以直接使用

4、字符串插入变量和表达式,变量名写在 $ {} 中, $ {}中可以放javaScript表达式
let info = 我是${abc} , 今年$ {age+ 10]了,我想说:$ {fun()}`;
可以直接使用,并且还可以直接调用函数

function fun(){
return “这是一个函数”;
}

5、不定参数传递
function fun(…values){
console.log(values.length);
}

fun(1,2);
fun(1,2,3,4);

6、对象的key和value打印
const person = {
name:“jack”,
age:21,
language:[‘java’,‘js’,‘css’]
}

Object.keys(person); // [“name”,“age”,“language”]
Object.values(person);// [“jack”,“21”,“Array(3)”]

7、合并对象
let age = {age : 15}
let name = {name : “Amy”}
let p = {…age,…name}
console.log§;

8、map():接收一个函数,将原来数组中的所有元素用这个函数处理后放入新数据返回
let arr = [‘1’,‘20’.‘-5’,‘3’];
arr = arr.map((iter)=>{
return iter*2;
})
测试的数组操作完返回,数据 * 2

vue

vscode插件:输入英文提示vue语法
执行:npm init -y,让npm管理
执行npm install vue@2.6.10 ,执行版本
npm install vue,是直接执行最新版vue

vue声明是渲染

let vm = new Vue({el:"#app",data:{name : "张三",num:1,msg:"<h1>helloh1>"},methods:{cancle(){}}
})

vue语法:

1、{{}} :插值表达式
例子 : <h1>{{name}},非常帅h1>
{{}} 中可以兼容方法的使用,只要是有返回值就可以使用
{{hello()}}
缺点:网速慢时会出现插值闪烁2、v-model : 双向绑定
例子:<input type="text" v-model=“name”> 3、v-on:click="cancle()"; 单击事件4、v-html 和 v-text
<span v-html="msg">span> //  hello
<span v-text="msg">span> // <h1>helloh1>5、v-bind :给html标签的属性绑定
<a v-bind:href="link">百度连接a>
属性里是对象格式,如果中间加 - 的需要用'' 包起来
<span v-bind:class="{active:isActive,'text-danger':hasError}">span>
vue支持驼峰命名
<span v-bind:style="{color:color1,fontSize:size}">span>
温馨提示:v-bind可以简写: 直接 <a :href="link">百度连接a>
data:{link:“http://www.baidu.com”,isActive:true,hasError:true, // 都满足时,显示类属性color1:"red",size:"10px";},

v-model双向绑定
在这里插入图片描述
6、v-on

点击事件
v-on:click=“方法名()”
简写:@click=“方法名()”
温馨提示:事件修饰符更多玩法

postman

新建
在这里插入图片描述
注意事项
在这里插入图片描述
将数组转成集合

返回值为集合 = Arrays.asList(数组)

TODO的使用
在这里插入图片描述

vscode添加代码片段

文件 - 首选项 - 配置用户代码片段 -

在这里插入图片描述


本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场,不承担相关法律责任。如若转载,请注明出处。 如若内容造成侵权/违法违规/事实不符,请点击【内容举报】进行投诉反馈!

相关文章

立即
投稿

微信公众账号

微信扫一扫加关注

返回
顶部