我们在这一阶段正式迈入实战项目---谷粒商城。接下来我们迈入分布式基础之项目环境搭建吧。

谷粒商城是一个B2C模式的电商平台，销售自营商品给客户。

在微服务架构中，微服务之间通过网络进行通信，存在相互依赖，当其中一个服务不可用时，有可能会造成雪崩效应。要防止这样的情况，必须要有容错机制来保护服务。

默认虚拟机的ip地址不是固定ip，开发不方便.

重新使用vagrantup启动机器即可。然后再vagrantssh连接机器。

成功。

注意要在root用户下。

sudosystemctlenabledocker

**注意：docker要在root用户下进行测试。

dockerpullmysql:5.7

vi/mydata/mysql/conf/my.cnf[client]default-character-set=utf8[mysql]default-character-set=utf8[mysqld]init_connect='SETcollation_connection=utf8_unicode_ci'init_connect='SETNAMESutf8'character-set-server=utf8collation-server=utf8_unicode_ciskip-character-set-client-handshakeskip-name-resolve注意：解决MySQL连接慢的问题在配置文件中加入如下，并重启mysql[mysqld]skip-name-resolve解释：skip-name-resolve：跳过域名解析

dockerexec-itmysqlmysql-uroot-proot

如果还需要设置其他的可以去上面这个文件中看。

dockerexec-itredisredis-cli

在maven的配置文件中修改镜像源和jdk版本。

整合mybatis-plus

com.alibaba.cloud spring-cloud-starter-alibaba-nacos-discovery在应用的/src/main/resources/application.properties配置文件中配置NacosServer地址spring.cloud.nacos.discovery.server-addr=127.0.0.1:8848

启动应用，观察nacos服务列表是否已经注册上服务.

Nacos使用三步1、导包nacos-discovery2、写配置，指定nacos地址，指定应用的名字3、开启服务注册发现功能@EnableDiscoveryClient

记住：

添加匹配当前OpenFeign的负载均衡依赖

由于SpringCloudFeign在Hoxton.M2RELEASED版本之后不再使用Ribbon而是使用spring-cloud-loadbalancer，所以不引入spring-cloud-loadbalancer会报错解决方法:加入spring-cloud-loadbalancer依赖,并且在nacos中排除ribbon依赖，不然loadbalancer无效

com.alibaba.cloudspring-cloud-starter-alibaba-nacos-discoverycom.netflix.ribbonribbonorg.springframework.cloudspring-cloud-loadbalancer3.1.1gulimall-comon中添加以上注解解决问题。再次进行测试，如下图，测试成功。

Feign使用三步1、导包openfeign2、开启@EnableFeignClients功能3、编写接口，进行远程调用

NacosConfig数据结构NacosConfig主要通过dataId和group来唯一确定一条配置。NacosClient从NacosServer端获取数据时，调用的是此接口ConfigService.getConfig(StringdataId,Stringgroup,longtimeoutMs)。

id:路由的id，没有固定规则但要求唯一uri:匹配后提供服务的路由地址path:断言，路径相匹配的进行路由Query:查询相匹配的进行路由

如果我们在地址栏中访问的地址有qq,或者baidu就会进行转发。4.启动测试

测试报错：

网关启动报错坑：Errorcreatingbeanwithname'routeDefinitionRouteLocator'definedinclasspathresource[org/springframework/cloud/gateway/config/GatewayAutoConfiguration.class]:Unsatisfieddependencyexpressedthroughmethod'routeDefinitionRouteLocator'parameter4;nestedexceptionisorg.springframework.beans.factory.NoSuchBeanDefinitionException:Noqualifyingbeanoftype'org.springframework.core.convert.ConversionService'available:expe

网上搜索到的解决办法，我采用的是排除web内置容器的解决办法。

org.springframework.bootspring-boot-starter-weborg.springframework.bootspring-boot-starter-tomcat2）解决办法2：使用spring-webflux模块，webflux有一个全新的非堵塞的函数式ReactiveWeb框架，可以用来构建异步的、非堵塞的、事件驱动的服务

org.springframework.bootspring-boot-starter-webflux最后主启动类还要排除数据源：@SpringBootApplication(exclude={DruidDataSourceAutoConfigure.class,DataSourceAutoConfiguration.class})

排除的原因是我们将gateway也引入了gulimall-common，而这里面又有数据源配置（mybatis-plus）,启动找不到对应的配置就会报错。解决办法就是排除数据源。

最后成功启动项目

快捷键：shift+!---快速生成html模板代码格式化：shift+alt+f

letstr="hello.vue";console.log(str.startsWith("hello"));//trueconsole.log(str.endsWith(".vue"));//trueconsole.log(str.includes("e"));//trueconsole.log(str.includes("hello"));//true2）、字符串模板模板字符串相当于加强版的字符串，用反引号`,除了作为普通字符串，还可以用来定义多行字符串，还可以在字符串中加入变量和表达式。

//1、多行字符串letss=`

`console.log(ss)//2、字符串插入变量和表达式。变量名写在${}中，${}中可以放入JavaScript表达式。letname="张三";letage=18;letinfo=`我是${name}，今年${age}了`;console.log(info)//3、字符串中调用函数functionfun(){return"这是一个函数"}letsss=`O(∩_∩)O哈哈~，${fun()}`;console.log(sss);//O(∩_∩)O哈哈~，这是一个函数5、函数优化1）、函数参数默认值//在ES6以前，我们无法给一个函数参数设置默认值，只能采用变通写法：functionadd(a,b){//判断b是否为空，为空就给默认值1b=b||1;returna+b;}//传一个参数console.log(add(10));//现在可以这么写：直接给参数写上默认值，没传就会自动使用默认值functionadd2(a,b=1){returna+b;}//传一个参数console.log(add2(10));2）、不定参数不定参数用来表示不确定参数个数，形如，...变量名，由...加上一个具名参数标识符组成。具名参数只能放在参数列表的最后，并且有且只有一个不定参数。

functionfun(...values){console.log(values.length)}fun(1,2)//2fun(1,2,3,4)//43）、箭头函数ES6中定义函数的简写方式：

//1、拷贝对象（深拷贝）letperson1={name:"Amy",age:15}letsomeone={...person1}console.log(someone)//{name:"Amy",age:15}//2、合并对象letage={age:15}letname={name:"Amy"}letperson2={...age,...name}//如果两个对象的字段名重复，后面对象字段值会覆盖前面对象的字段值console.log(person2)//{age:15,name:"Amy"}7、map和reduce数组中新增了map和reduce方法。

map()：接收一个函数，将原数组中的所有元素用这个函数处理后放入新数组返回。

letarr=['1','20','-5','3'];console.log(arr)arr=arr.map(s=>parseInt(s));console.log(arr) 2）、reduce语法：arr.reduce(callback,[initialValue])reduce为数组中的每一个元素依次执行回调函数，不包括数组中被删除或从未被赋值的元素，接受四个参数：初始值（或者上一次回调函数的返回值），当前元素值，当前索引，调用reduce的数组。callback（执行数组中每个值的函数，包含四个参数）1、previousValue（上一次调用回调返回的值，或者是提供的初始值（initialValue））2、currentValue（数组中当前被处理的元素）3、index（当前元素在数组中的索引）4、array（调用reduce的数组）initialValue（作为第一次调用callback的第一个参数。）示例：

user.json：{"id":1,"name":"zhangsan","password":"123456"}user_corse_1.json:{"id":10,"name":"chinese"}corse_score_10.json:{"id":100,"score":90}//回调函数嵌套的噩梦：层层嵌套。$.ajax({url:"mock/user.json",success(data){console.log("查询用户：",data);$.ajax({url:`mock/user_corse_${data.id}.json`,success(data){console.log("查询到课程：",data);$.ajax({url:`mock/corse_score_${data.id}.json`,success(data){console.log("查询到分数：",data);},error(error){console.log("出现异常了："+error);}});},error(error){console.log("出现异常了："+error);}});},error(error){console.log("出现异常了："+error);}});我们可以通过Promise解决以上问题。

constpromise=newPromise(function(resolve,reject){//执行异步操作if(/*异步操作成功*/){resolve(value);//调用resolve，代表Promise将返回成功的结果}else{reject(error);//调用reject，代表Promise会返回失败结果}});使用箭头函数可以简写为：

constpromise=newPromise((resolve,reject)=>{//执行异步操作if(/*异步操作成功*/){resolve(value);//调用resolve，代表Promise将返回成功的结果}else{reject(error);//调用reject，代表Promise会返回失败结果}});这样，在promise中就封装了一段异步执行的结果。

如果我们想要等待异步执行完成，做一些事情，我们可以通过promise的then方法来实现。如果想要处理promise异步执行失败的事件，还可以跟上catch：

promise.then(function(value){//异步执行成功后的回调}).catch(function(error){//异步执行失败后的回调})3）、Promise改造以前嵌套方式newPromise((resolve,reject)=>{$.ajax({url:"mock/user.json",success(data){console.log("查询用户：",data);resolve(data.id);},error(error){console.log("出现异常了："+error);}});}).then((userId)=>{returnnewPromise((resolve,reject)=>{$.ajax({url:`mock/user_corse_${userId}.json`,success(data){console.log("查询到课程：",data);resolve(data.id);},error(error){console.log("出现异常了："+error);}});});}).then((corseId)=>{console.log(corseId);$.ajax({url:`mock/corse_score_${corseId}.json`,success(data){console.log("查询到分数：",data);},error(error){console.log("出现异常了："+error);}});});4）、优化处理优化：通常在企业开发中，会把promise封装成通用方法，如下：封装了一个通用的get请求方法

letget=function(url,data){//实际开发中会单独放到common.js中returnnewPromise((resolve,reject)=>{$.ajax({url:url,type:"GET",data:data,success(result){resolve(result);},error(error){reject(error);}});})}//使用封装的get方法，实现查询分数get("mock/user.json").then((result)=>{console.log("查询用户：",result);returnget(`mock/user_corse_${result.id}.json`);}).then((result)=>{console.log("查询到课程：",result);returnget(`mock/corse_score_${result.id}.json`)}).then((result)=>{console.log("查询到分数：",result);}).catch(()=>{console.log("出现异常了："+error);});通过比较，我们知道了Promise的扁平化设计理念，也领略了这种上层设计带来的好处。我们的项目中会使用到这种异步处理的方式；

模块化就是把代码进行拆分，方便重复利用。类似java中的导包：要使用一个包，必须先导包。而JS中没有包的概念，换来的是模块。模块功能主要由两个命令构成：export和import。

比如我定义一个js文件:hello.js，里面有一个对象：

constutil={sum(a,b){returna+b;}}我可以使用export将这个对象导出：

constutil={sum(a,b){returna+b;}}export{util};当然，也可以简写为：

exportconstutil={sum(a,b){returna+b;}}export不仅可以导出对象，一切JS变量都可以导出。比如：基本类型变量、函数、数组、对象。当要导出多个值时，还可以简写。比如我有一个文件：user.js：

varname="jack"varage=21export{name,age}省略名称上面的导出代码中，都明确指定了导出的变量名，这样其它人在导入使用时就必须准确写出变量名，否则就会出错。因此js提供了default关键字，可以对导出的变量名进行省略例如：

使用export命令定义了模块的对外接口以后，其他JS文件就可以通过import命令加载这个模块。例如我要使用上面导出的util：

//导入utilimportutilfrom'hello.js'//调用util中的属性util.sum(1,2)要批量导入前面导出的name和age：

import{name,age}from'user.js'console.log(name+",今年"+age+"岁了")但是上面的代码暂时无法测试，因为浏览器目前还不支持ES6的导入和导出功能。除非借助于工具，把ES6的语法进行编译降级到ES5，比如Babel-cli工具我们暂时不做测试，大家了解即可。

而MVVM中的VM要做的事情就是把DOM操作完全封装起来，开发人员不用再关心Model和View之间是如何互相影响的：

官网文档提供了3种安装方式：

页面代码

我们对刚才的案例进行简单修改：

给页面添加一个按钮：

每个Vue应用都是通过用Vue函数创建一个新的Vue实例开始的：

每个Vue实例都需要关联一段Html模板，Vue会基于此模板进行视图渲染。我们可以通过el属性来指定。例如一段html模板：