Vant

什么是Vant

Vant是一个轻量，牢靠的挪动端组件库，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（ 马丁·福勒 ）提出了微服务的规范之后,为了技术对立和兼容性,很多企业开始反对这个规范

当初咱们开发的微服务项目,大多数都是在马丁·福勒规范下的

如果咱们本人编写反对这个规范的代码是不事实的,必须通过现成的框架或组件实现满足这个微服务规范的我的项目构造和格局

当今程序员要想疾速开发满足下面微服务规范的我的项目构造,首选SpringCloud

Spring Cloud

什么是SpringCloud

SpringCloud是由Spring提供的一套可能疾速搭建微服务架构程序的 框架集

框架集示意SpringCloud不是一个框架,而是很多框架的统称

SpringCloud就是为了搭建微服务架构我的项目呈现的

有人将SpringCloud称之为"Spring全家桶",狭义上指代Spring的所有产品

Spring Cloud的内容

内容的提供者

  • Spring本人编写的框架或软件
  • Netflix(奈非):晚期提供了全套的微服务架构解决方案
  • alibaba(阿里巴巴):新版本的SpringCloudAlibaba正在迅速占领市场(举荐应用)

课程中应用全套的阿里巴巴组件

性能上分类

  • 微服务的注册核心
  • 微服务间的调用
  • 微服务的分布式事务
  • 微服务的限流
  • 微服务的网关
  • ......

注册核心Nacos

什么是Nacos

Nacos是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窗口运行

在以后资源管理器地址栏输出cmd

D:\tools\nacos\bin>startup.cmd -m standalone

startup.cmd:windows启动nacos的命令文件

-m 示意要设置启动参数

standalone:翻译为规范的孤单的,意思是失常的应用单机模式启动

运行胜利默认占用8848端口,并且在代码中提醒

如果不输出standalone运行会失败

startup.cmd -m standalone

对文章中内容感兴趣的小伙伴能够搜寻微信公众号：敲代码的老贾，支付相应材料