JSD-2204-Vant-Microservices-SpringCloud-Day01
Vant什么是VantVant是一个轻量级可靠的移动端组件库。在2017开源课程中，我们使用Vue2版本的Vant来学习Vant的优点。ElementUI是开发电脑浏览器（非手机）页面的组件库，Vant是开发移动端页面的组件库平均体积小于1KB（min+gzip）65+优质组件，覆盖主流移动端场景用TypeScript编写，提供完整的类型定义单元测试覆盖率超过90%，提供稳定性保障提供完善的中英文文档和组件Example.......第一个Vant程序创建一个Vue项目。参考第四阶段创建Vue项目的步骤。要创建Vue项目，首先要确定一个文件夹来创建项目。比如在D盘下创建一个vue-home文件夹并进入文件夹，在地址栏输入cmd打开dos命令行界面D:\vue-home>vuecreatedemo-vant创建时的具体选项，参考前面四个阶段的笔记接下来，我们可以打开我们用idea创建的项目安装Vant支持我们创建的Vue项目默认是不支持Vant的。所以，我们需要在Vue项目中安装Vant支持。在打开的idea界面下方，找到Terminal，点击出现的命令行，输入安装Vant的命令即可运行。安装Vant的npm命令：F:\vue-home\demo-vant>npmivant@latest-v2-S安装结束后可能会有警告，忽略即可，最后可能会看到如下结果添加4s5packages至此，我们将在Vue项目中的AddVantreference中安装Vant运行所需的文件。如果要在项目中使用Vant提供的组件，需要将Vue项目代码中的Vant引用添加到Vue项目的src/main.js文件中。添加参考代码如下importVantfrom'vant'import'vant/lib/index.css'Vue.use(Vant)添加上面的参考，当前的Vue项目可以使用Vant组件为了真正运行项目一次，我们首先启动Vue项目，测试显示运行正常。你可以在idea提供的Terminal界面中编写如下代码D:\vue-home\demo-vant>npmrunserve打开浏览器输入localhost:8080进入手机页面调试模式。以谷歌浏览器为例，按F12进入调试模式，然后点击移动端调试按钮组件。修改HomeView.vue中的代码如下PrimarybuttonInformationbutton默认按钮警告按钮危险按钮
打开页面可以看到按钮的样式。看到这个内容说明当前Vant组件工作正常。如果看不到效果，请检查Vant组件的安装，并参考表单页面。登录在移动端很常见，界面的Vant形式直接提供了模板。我们可以在官网找到表格链接，直接使用。
提交 注意@submit和@failed的绑定关系。地区省市选择先在views文件夹下创建AreaView.vue文件定义路由设置constroutes=[{path:'/',name:'home',component:HomeView},{path:'/about',name:'about',//路由级代码拆分//这会为此路由生成一个单独的块（about.[hash].js）//在访问路由时延迟加载。component:()=>import(/*webpackChunkName:"about"*/'../views/AboutView.vue')},{path:'/area',name:'area',component:()=>import('../views/AreaView.vue')}]编写代码如下
/template>访问省市选择页面时只有少量数据。如果想要真实的数据，需要在上面的areaList数据中填写大量的数据，但是这个工作量非常大，个人实现难度很大。,所以可以使用业界通用的省市信息数组先安装全国省市数据包D:\vue-home\demo-vant>npmi@vant/area-data安装结果可能会添加1packagein2sif如果安装成功，可以将全国省市数据添加到项目中。将以下内容添加到AreaView.vue代码中>//从全国各省市数据包中提取数据，命名为areaListimport{areaList}from'@vant/area-data'exportdefault{data(){return{areaList}},methods:{showArea(area){console.log(面积);}}}Classwork新建AddressView.vue文件完成Vant地址列表效果参考vant2官网的资料创建页面，设置路由，加载正确代码并测试结果看效果。我们的电子商务网站肯定需要产品列表。移动端Vant直接支持商品列表格式。我们不需要大规模修改来创建ListView。vue代码如下综合销售<面包车-colspan="8">价格"title="兰花食用油古榨1918年花生油5.7L"thumb="https://img01.yzcdn.cn/vant/ipad.jpeg">京东物流自营加入购物车立即购买京东物流自营加入购物车立即购买
/template>服务器端项目演进阶段1：前期静态服务器的服务器状态，安装了一些固定的内容，用户访问功能单一。如果不修改代码，内容不会改变，只是信息的呈现或输出阶段2：正常动态服务器网页中的数据可能来自数据库，可以在后台修改数据库中的数据以实现不修改页面代码，但是改变页面内容的效果是由于数据库的支持。网站开始支持登录注册、增删改查功能。第三阶段：用户共享内容的互联网生态。随着互联网的普及，个人社交需求增加。、淘宝、大众点评或类似网站第四阶段：微服务时代，随着用户的增加，各种并发的增加，要求我们的服务器即使在繁忙的情况下也能快速响应。必须保证用户体验，所以我们的项目要求有以下三个目标“高并发、高可用、高性能”由于个别服务器异常导致整个项目瘫痪。高性能：用户访问时，响应速度要尽可能快，及时并发高，微服务的“三高”Java服务器项目分类也要快速响应。java开发的项目可以分为两类：1、企业级应用一般是指企业或组织使用的网站或服务器应用。单位、医疗、金融、军队、政府等。因此，这个项目没有替代品，对“三高”没有强烈要求。企业级项目一般在权限和业务流程设计上都比较复杂。2.互联网应用可以分布到全国乃至全球开放网站或服务器应用我们手机安装的应用大部分是互联网应用微信、支付宝、京东、淘宝、饿了么、美团、抖音、qq音乐、爱奇艺、高德地图等，由于业务竞争等原因，对服务器的性能要求非常高，也就是我们之前说的“三高”，但是互联网应用一般没有权限和业务很复杂需求综上所述，企业级应用和互联网应用的侧重点是不一样的。在当今的java开发行业中，基本规则如下。如果您开发企业级应用程序，您通常会使用单一架构。微服务架构有很多种微服务概述什么是微服务微服务的概念由MartinFowler于2014年提出。行程轻量级处理，服务按业务功能设计，全自动部署，使用HTTPAPI与其他服务通信.同时，服务将使用最小规模的集中管理能力，服务可以用不同的编程语言和数据库等组件来实现。简单来说，微服务就是把一个大项目的各种业务代码拆分成多个互不相关的小项目，这些小项目集中完成自己的功能，可以调用其他小项目的方法，从而完成整体的功能京东\淘宝等大型互联网应用，基本上每一个操作都由一个单独的微服务来支撑：登录服务器搜索服务器商品信息服务器购物车服务器订单服务器支付服务器物流服务器.....为什么需要？微服务左侧的小餐厅就像一个单一的项目。一旦服务器繁忙，所有业务都无法快速响应。即使增加了服务器，也不能很好的解决这个问题。无法很好地实现“高并发、高可用、高性能”。但是因为服务器数量少，成本低，适合并发访问少的项目。右边的大餐厅是一个微服务项目。每个业务负责一群人，业务互不影响。增加服务器提升性能如果某台服务器出现异常，不会影响整体功能，但部署的服务器数量多，成本高，需要更多的投入。如何构建一个能够满足“高并发、高可用、高性能”的项目在微服务概念提出之前（2014年），各个厂商都有自己的解决方案，但是在马丁·福勒（MartinFowler）提出微服务标准之后，很多公司开始支持这个标准，我们现在开发的大部分微服务项目都是在MartinFowler标准下进行的。我们自己写支持这个标准的代码是不现实的。我们必须通过现成的框架或组件来满足这个微服务标准。项目结构和格式现在的程序员想要快速开发一个符合以上微服务标准的项目结构，SpringCloud是首选SpringCloud是什么SpringCloudSpringCloud是Spring提供的一套可以快速搭建微服务架构程序的框架集。框架集是指SpringCloud不是一个框架，而是很多框架的统称。SpringCloud用于构建微服务架构项目。有人称SpringCloud为“Spring全家桶”，广义上指的是Spring的所有产品SpringCloud的内容提供者Spring自己的框架或自己写的软件Netflix（Netflix）：早期提供全套微服务架构解决方案阿里巴巴(Alibaba):新版SpringCloudAlibaba正在迅速占领市场（推荐使用），课程使用全套Alibaba组件，功能上分类微服务，注册中心，微服务，调用微服务，分布式事务，微服务，当前-limitingmicroservicegateways......注册中心Nacos什么是NacosNacos是SpringCloudAlibaba提供的一个软件，这个软件主要有注册中心和配置中心的功能（课程末尾讲解），我们来学习下首先注册中心的功能，微服务中的所有项目都必须注册到注册中心才能成为微服务的一部分微服务。登记中心类似于企业中的人力资源管理部门。当前微服务项目中的所有模块都必须在启动前添加到Nacos的配置中。所谓注册就是提交自己的信息。去Nacos保存Nacos的启动，因为Nacos是java开发的。启动Nacos需要保证当前系统配置了java环境变量。简单的说，环境变量中要有JAVA_HOME配置，指向安装jdk的路径，确认支持java后，就可以启动Nacos了。Mac系统的同学一定要去http://doc.canglaoshi.org/查看homebrew相关知识。Mac系统安装Nacos推荐mac系统如何安装nacos（window系统常见）？详细教程一篇解决_七度_的博客-CSDN博客_mac安装nacos解压压缩包（注意不要有中文路径或空格）打开解压后的文件夹，打开bin目录，会有如下内容。cmd结尾的文件是windowslinux和mac版本中sh结尾的文件是启动文件，关机是停止文件。Windows下无法启动Nacos。您不能直接双击cmd文件。您需要在dos窗口中运行它。在当前资源管理器bin地址栏输入cmdD:\tools\nacos\>startup.cmd-mstandalonestartup.cmd:windows上启动nacos的命令文件-m表示设置启动参数standalone:翻译成standardlonely，表示正常使用单机模式启动运行成功需要默认开启8848端口，代码中提示如果不输入standalone，会运行失败startup.cmd-mstandalone。对文章内容感兴趣的朋友可以微信搜索公众号：敲代码的老贾，收到了相应的信息
