关于前端:JSD2204Vant微服务Spring-CloudDay01

26次阅读

共计 7133 个字符，预计需要花费 18 分钟才能阅读完成。

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> // 从全国省市区数据包中提取数据, 命名为 areaList
import {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

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

正文完
前端
发表至： 前端
2022-08-19
 0
关于前端:vue3-provide-和-inject-底层组件的值不是响应式的处理
关于前端:Vue-解决elementui消息提示message重叠问题
如何做出亮点
关于前端:JavaScript字符串常用方法