Vant什么是VantVant是一个轻量，可靠的移动端组件库，2017开源课程中我们使用Vue2版本对应的Vant学习Vant的优势ElementUI是开发计算机浏览器(非移动端)页面的组件库而Vant是开发移动端页面的组件库我们设计的酷鲨商城前台项目使用手机\移动设备访问的,所以使用Vant更合适Vant特性性能极佳，组件平均体积小于 1KB（min+gzip）65+ 个高质量组件，覆盖移动端主流场景使用 TypeScript 编写，提供完整的类型定义单元测试覆盖率超过 90%，提供稳定性保障提供完善的中英文文档和组件示例.......第一个Vant程序创建Vue项目参考第四阶段创建Vue项目的步骤,创建Vue项目首先确定一个要创建项目的文件夹例如在D盘下创建vue-home文件夹进入文件夹,在地址栏输入cmd?打开dos命令行界面D:\vue-home>vue create demo-vant创建时具体选项,参照之前四阶段的笔记即可下面我们就可以用idea打开我们创建的项目了安装Vant支持我们创建的Vue项目并不会默认就支持Vant所以,我们需要安装Vant的支持到Vue项目中在打开的idea界面最下方,找到Terminal点击在出现的命令行中输入安装Vant的指令运行安装Vant的npm命令:F:\vue-home\demo-vant>npm i vant@latest-v2 -S安装结束后可能有警告,可以忽略最终可能看到下面的结果added 5 packages in 4s到此为止,我们就将Vant运行需要的文件安装在vue项目中的添加Vant引用如果想要在项目中使用Vant提供的组件需要在Vue项目代码中添加Vant的引用Vue项目的src/main.js文件中,添加引用代码如下mport Vant from 'vant'import 'vant/lib/index.css'Vue.use(Vant)添加了上面的引用,当前Vue项目就可以使用Vant组件了为了实时运行项目,我们先启动Vue项目,测试表示它正常运行可以在idea提供的Terminal界面中编写如下代码D:\vue-home\demo-vant>npm run serve打开浏览器输入localhost:8080进入移动端页面调试模式以Google浏览器为例按F12进入调试模式后点击移动端调试即可按钮组件在HomeView.vue中修改代码如下<template> <div class="home"> <van-button type="primary">主要按钮</van-button> <van-button type="info">信息按钮</van-button> <van-button type="default">默认按钮</van-button> <van-button type="warning">警告按钮</van-button> <van-button type="danger">危险按钮</van-button> </div></template>打开页面就能看到按钮的样式了看到这个内容,表示当前Vant组件工作正常如果没有看到效果检查Vant组件的安装和引用表单页面登录作为移动端非常常见的界面Vant表单是直接提供模板的,我们可以在官网找到表单链接直接使用<template> <div class="about"> <!-- @submit是vant组件提供的Event(事件),在表单提交成功时触发,所以这个名字不能修改 @failed是vant组件提供的Event(事件),在表单提交失败时触发,这个名字也不能修改 在事件名称后编写方法名实现调用 --> <van-form @submit="onSubmit" @failed="myFail"> <van-field v-model="username" name="用户名" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" /> <van-field v-model="password" type="password" name="密码" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" /> <div style="margin: 16px;"> <van-button round block type="info" native-type="submit">提交</van-button> </div> </van-form> </div></template><script> export default { data() { return { username: '', password: '', }; }, methods: { onSubmit(values) { console.log('submit', values); }, myFail(errorInfo){ // 在表单提交验证失败时运行的方法,errorInfo是错误信息 console.log(errorInfo); } },}; </script>注意@submit和@failed这两个事件的绑定关系area省市区选择先在views文件夹下创建AreaView.vue文件定义路由设置const routes = [ { path: '/', name: 'home', component: HomeView }, { path: '/about', name: 'about', // route level code-splitting // this generates a separate chunk (about.[hash].js) for this route // which is lazy-loaded when the route is visited. component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue') }, { path: '/area', name: 'area', component: () => import('../views/AreaView.vue') }]编写代码如下<template> <div> <van-area title="标题" :area-list="areaList" /> </div></template><script> const areaList = { province_list: { 110000: '北京市', 120000: '天津市', }, city_list: { 110100: '北京市', 120100: '天津市', }, county_list: { 110101: '东城区', 110102: '西城区', // .... },};export default { data(){ return {areaList}; }} </script>访问省市区选择页面只有少量数据如果想要真实的数据,那么就需要在上面areaList数据中填入大量数据但是这个工作量很大,个人实现非常困难,所以可以使用业界通用的一个省市区信息数组先安装全国省市区数据包D:\vue-home\demo-vant>npm i @vant/area-data安装结果可能为added 1 package in 2s如果该安装成功,就可以添加全国省市区数据到项目中了AreaView.vue代码中添加如下<template> <div> <van-area title="标题" :area-list="areaList" @confirm="showArea" /> </div></template><script> // 从全国省市区数据包中提取数据,命名为areaListimport {areaList} from '@vant/area-data'export default { data(){ return{areaList} }, methods:{ showArea(area){ console.log(area); } }} </script>课堂作业新建一个AddressView.vue文件完成Vant地址列表的效果参考vant2官网的资料,创建页面,设置路由,加载正确代码测试运行出现效果即可商品列表我们的电商网站一定会需要商品列表移动端Vant直接支持了商品列表的格式我们也不需要大范围的修改创建ListView.vue代码如下<template> <div> <van-row> <van-col span="8">综合</van-col> <van-col span="8">销量</van-col> <van-col span="8">价格</van-col> </van-row> <van-card num="2" price="2.00" desc="【8月18日食品生鲜】潮能破壁，真香正当时！下单抽奖即有机会得荣耀手机！速戳链接查看>" title="胡姬花 食用油 古法压榨一九一八花生油5.7L" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" > <template #tags> <van-tag plain type="danger">京东物流</van-tag> <van-tag type="danger">自营</van-tag> </template> <template #footer> <van-button size="mini">加入到购物车</van-button> <van-button size="mini">立即购买</van-button> </template> </van-card> <van-card num="2" price="2.00" desc="描述信息" title="商品标题" thumb="https://img01.yzcdn.cn/vant/ipad.jpeg" > <template #tags> <van-tag plain type="danger">京东物流</van-tag> <van-tag type="danger">自营</van-tag> </template> <template #footer> <van-button size="mini">加入到购物车</van-button> <van-button size="mini">立即购买</van-button> </template> </van-card> </div></template><script> </script>服务器端项目演进阶段一:静态服务器早期的服务器状态,安装好一些固定内容,让用户访问功能单一,如果不修改代码,内容是不会变的,只能做信息的呈现或输出阶段二:普通动态服务器网页中的数据可能来自数据库,数据库中的数据可以在后台中进行修改实现不修改页面代码,但是变化页面内容的效果因为有了数据库的支持,动态网站开始支持登录注册,增删改查功能阶段三:用户共享内容的互联网生态随着互联网的普及,个人的社交需求提升出现了很多由用户贡献内容的网站微博,抖音,淘宝,大众点评或类似的网站阶段四:微服务时代随着用户的增加,各种并发的增高,要求我们的服务器在繁忙的情况下,也需要快速的做出响应用户体验必须保证,这样就要求我们的项目有下面三个目标"高并发,高可用,高性能"高并发:很多人同时访问这个网站,这个网站不能失能高可用:全年365天每天24小时随时可以访问,不能因为个别服务器的异常,导致整个项目瘫痪高性能:当有用户访问时响应的速度要尽量的快,及时并发高,也要快速响应微服务的"三高"Java服务器项目分类现在市面上常见的java开发的项目可以分为两大类1.企业级应有一般指一个企业或机构内部使用的网站或服务器应用程序使用的人群比较固定,并不向全国乃至全世界开放例如,商业,企事业单位,医疗,金融,军事,政府等所以这个项目没有代替品,对"三高"没有强烈要求企业级项目一般会在权限和业务流程方面设计的比较复杂2.互联网应用能够向全国乃至全世界开放的网站或服务器应用程序我们手机中安装的app大部分都是互联网应用微信,支付宝,京东,淘宝,饿了么,美团,抖音,qq音乐,爱奇艺,高德地图等它们因为商业竞争等原因,对服务器的性能有非常高的要求,就是我们之前提到的"三高"但是互联网应用一般没有权限和业务非常复杂的需求综上所述,企业级应用和互联网应用的偏重点不同在当今java开发业界中,基本规律如下如果开发的是企业级应用,使用单体架构的情况比较多如果开发的是互联网应用,使用微服务架构的情况比较多微服务概述什么是微服务微服务的概念是由Martin Fowler（ 马丁·福勒 ）在2014年提出的微服务是由以单一应用程序构成的小服务，自己拥有自己的行程与轻量化处理，服务依业务功能设计，以全自动的方式部署，与其他服务使用?HTTP API?通信。同时服务会使用最小的规模的集中管理能力，服务可以用不同的编程语言与数据库等组件实现。简单来说,微服务就是将一个大型项目的各个业务代码,拆分成多个互不相干的小项目,而这些小项目专心的完成自己的功能,而且可以调用别的小项目的方法,从而完成整体功能京东\淘宝这样的大型互联网应用程序,基本每个操作都是一个单独的微服务在支持:登录服务器搜索服务器商品信息服务器购物车服务器订单服务器支付服务器物流服务器.....为什么需要微服务左侧小餐馆就像单体项目一旦服务器忙,所有业务都无法快速响应即使添加了服务器,也不能很好的解决这个问题不能很好的实现"高并发,高可用,高性能"但是因为服务器数量少,所以成本低,适合并发访问少的项目右侧大餐厅就是微服务项目每个业务专门一批人来负责,业务之间互不影响在某个模块性能不足时,针对这个模块添加服务器改善性能万一一个服务器发生异常,并不会影响整体功能但是完成部署的服务器数量多,成本高,需要较多投资,能够满足"高并发,高可用,高性能"的项目怎么搭建微服务项目在微服务概念提出之前(2014年),每个厂商都有自己的解决方案但是Martin Fowler（ 马丁·福勒 ）提出了微服务的标准之后,为了技术统一和兼容性,很多企业开始支持这个标准现在我们开发的微服务项目,大多数都是在马丁·福勒标准下的如果我们自己编写支持这个标准的代码是不现实的,必须通过现成的框架或组件完成满足这个微服务标准的项目结构和格式当今程序员要想快速开发满足上面微服务标准的项目结构,首选SpringCloudSpring Cloud什么是SpringCloudSpringCloud是由Spring提供的一套能够快速搭建微服务架构程序的 框架集框架集表示SpringCloud不是一个框架,而是很多框架的统称SpringCloud就是为了搭建微服务架构项目出现的有人将SpringCloud称之为"Spring全家桶",广义上指代Spring的所有产品Spring Cloud的内容内容的提供者Spring自己编写的框架或软件Netflix(奈非):早期提供了全套的微服务架构解决方案alibaba(阿里巴巴):新版本的SpringCloudAlibaba正在迅速占领市场(推荐使用)课程中使用全套的阿里巴巴组件功能上分类微服务的注册中心微服务间的调用微服务的分布式事务微服务的限流微服务的网关......注册中心Nacos什么是NacosNacos是Spring Cloud Alibaba提供的一个软件这个软件主要具有注册中心和配置中心(课程最后讲解)的功能我们先学习它注册中心的功能微服务中所有项目都必须注册到注册中心才能成为微服务的一部分注册中心和企业中的人力资源管理部门有相似当前微服务项目中所有的模块,在启动前,必须添加注册到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结尾的文件是windows版本的sh结尾的文件是linux和mac版本的startup是启动文件,shutdown是停止文件Windows下启动Nacos不能直接双击cmd文件需要在dos窗口运行在当前资源管理器地址栏输入cmdD:\tools\nacos\bin>startup.cmd -m standalonestartup.cmd:windows启动nacos的命令文件-m?表示要设置启动参数standalone:翻译为标准的孤独的,意思是正常的使用单机模式启动运行成功默认占用8848端口,并且在代码中提示如果不输入standalone运行会失败startup.cmd -m standalone对文章中内容感兴趣的小伙伴可以搜索微信公众号：敲代码的老贾，领取相应资料
