- 博客(809)
- 资源 (17)
- 收藏
- 关注
RSS订阅原创 48 项目部署
介绍：pm2是node.js进程管理工具，提供node.js应用管理，如自动重载、性能监控、负载均衡等。解决：遇见子路径且没有后缀名，服务器定位到 ‘index.html’ 页面返回给前端即可。服务器一般是 linux系统，使用 XFTP 进行文件的上传和下载（这个就不赘述了）原因：hostory 改变路由是前端切换，不会请求服务器，一旦刷新浏览器。Vue3: 语法：VITE_APP_环境变量名 = 值 （必须大写）3）服务器使用pm2进行部署（本地演示）目标：了解环境变量，在项目部署中的使用。
2025-03-24 23:13:19
606
原创 SVG转字体图标的使用方法
* 替换为你实际的字体名称 */，这里示例为iconfont。假设你已经生成了字体文件并引入了 CSS 文件，现在可以在 Vue.js 项目中使用字体图标。确保你的 SVG 文件是有效的 XML 文件。将字体文件复制到项目的 src/assets/icons 目录下。点击 “Generate” 按钮生成字体文件和 CSS 文件。在 “Upload SVGs” 区域上传你的 SVG 文件。解压下载的 ZIP 文件，得到字体文件和 CSS 文件。步骤 3: 在项目中使用生成的文件。下载生成的 ZIP 文件。
2025-03-24 23:12:48
437
原创 47 高德物流地图
实现：使用高德地图api绘制物流轨迹。实现：标记物流货车当前运送位置。实现：配置物流详情路由和渲染。说明❓：[通过插件引入]开放平台并初始化地图。
2025-03-14 19:06:30
918
原创 46 药品订单与支付
目标：定义药品订单预支付信息和收货地址类型和api函数定义类型// 药品预订单数据id: string// 地址信息id: string// 收货地址定义药品预支付查询api函数和查询收货地址api函数// 查询药品订单预支付信息anyrequest } from '@/utils/request' // 查询药品订单预支付信息 export const getMedicalOrderPre =(params : {
2025-03-14 19:06:09
467
原创 45 问诊详情与支付
isSupported ref响应变量 =》true 授权支持 | false 未授权不支持。copy 函数=》使用：copy(复制文本)=》copy方法会把传入的文本存储到系统粘贴板。copied ref响应变量 =》true 复制成功 | false 复制失败。父传子订单ID：子组件解构orderId失去响应式解决。目标：配置详情路由，分析组件结构，渲染详情数据。实现：使用useClipboard复制订单号。实现：封装可复用的支付抽屉组件。说明❓：api接口已定义。1）分析结构和路由配置。
2024-03-01 07:48:31
1264
原创 44 问诊记录-订单状态
已完成：更多菜单=> 查看处方(如果开了)+删除订单 + 问诊记录+去评价。实现：查看处方逻辑复用，提取一个hook函数。咨询中：查看处方(如果开了) + 继续沟通。目标：了解问诊订单状态和对应业务功能。已取消：删除订单+咨询其他医生。待接诊：取消问诊+继续沟通。待支付：取消问诊+去支付。2）取消订单逻辑函数。2）删除订单逻辑函数。4）父组件进行删除数据。实现：取消问诊订单功能。2）使用hook函数。
2024-03-01 07:48:11
1114
原创 43 问诊记录
目标：定义接口参数类型和api函数定义接口参数类型订单状态枚举单个问诊订单类型带分页问诊订单类型定义查询API函数代码：1）定义接口参数类型// 根据通用分页类型定义2）订单状态枚举(已定义)// 问诊订单状态// ----------------问诊订单------------------// 待支付// 待接诊// 咨询中// 已完成// 已取消// ----------------药品订单------------------// 待支付// 待发货。
2024-02-29 07:22:46
819
原创 41 问诊室聊天
1）医生接单后，会触发ws的statusChange事件，更新订单状态。底部操作组件，可以调用后台api函数上传图片，触发。实现：点击图片icon上传图片，成功后发送图片消息。7）医生未接诊，不是咨询中状态禁用消息输入框。实现：可以发送文字消息，可以接收文字消息。1）底部操作组件，可以输入文字，触发。1）底部操作组件，可以上传图片，触发。抢单前需要，监听超级医生订单状态变更。需求❓：ws连接建立后，通过监听。事件接收图片对象，通过。2）问诊室组件，监听。3）获取订单详情，需要。2）问诊室组件，监听。
2024-02-27 17:46:27
1145
原创 40 问诊室模块与websocket介绍
1 问诊室-路由与组件2 问诊室-消息卡片3 问诊室-websocket介绍4 问诊室-socket.io使用5 问诊室-通讯规则6 问诊室-建立连接目标：认识websocket什么是 websocket?是一种网络通信协议，和 HTTP 协议 一样。为什么需要websocket?因为 HTTP 协议有一个缺陷：通信只能由客户端发起。理解 websokect 通讯过程了解 websocket api含义// 创建ws实例，建立连接// 连接成功事件// 发送消息");
2024-02-27 17:46:06
1274
原创 39 选择患者订单支付
说明❓：订单创建成功后，清除store中数据，刷新页面接口请求异常，可以try/catch捕获跳回首页。实现：问诊页面路由配置，获取问诊预支付信息并渲染。使用支付宝APP支付（在手机上且安装沙箱支付宝）1）生成订单后不可回退（点击浏览器回退按钮测试）说明❓：选择继续浏览器支付，使用账号密码登录即可。实现：打开弹层选择支付方式，创建订单，进行支付。4）点击抽屉支付按钮，跳转到支付宝页面。实现：获取支付地址，进行订单支付。2）生成订单后不可关闭支付抽屉。，打开选择支付方式对话框。支付成功回跳到问诊室页面。
2024-02-25 14:21:00
1130
原创 38 病情描述表单
实现：路由配置，了解组件以及页面的基础布局（医生提示，描述，症状时间，是否已问诊）3）支持双向数据绑定，支持选择图片后触发函数，支持点击删除事件函数。实现：进入页面时候提示用户是否回显之前填写的病情描述信息。实现：按钮点亮，提交校验，保存数据，跳转选择患者。说明❓：回退页面时，确认框会自动关闭，需要设置。1）进入页面，如果有记录数据，弹出确认框。1）添加vant按钮，实现按钮点亮交互。2）提交校验 保存数据，跳转选择患者。2）准备病情描述类型和表单数据。实现：上传图片与删除图片功能。，进行样式和功能配置。
2024-02-25 14:20:25
1123
原创 37 极速问诊路由
根据api接口，定义问诊订单记录数据相关类型问诊类型枚举患病时间枚举图片数组类型问诊记录类型（创建问诊订单）// 问诊类型：1找医生 2== 极速问诊 == 3开药问诊Fast = 2,// 患病时间：1一周内2一月内3半年内4半年以上Week = 1,Month,HalfYear,More// 图片列表id: string// 问诊记录=> 极速问诊参数type: ConsultType // 问诊类型：1找医生 2极速问诊 3开药问诊。
2024-02-23 18:17:36
1167
原创 36 自定义hook 功能复用
1 首页模块-关注医生(课堂练习){#home-like}2 首页模块-逻辑复用{#home-like-logic}
2024-02-23 18:17:21
655
原创 35 首页模块-推荐关注医生
介绍 @vueuse/core 组合api库，使用 useXxx 函数获取设备宽度，动态设置滚动距离。4）去除 指示器，关闭 无缝滚动，设置一次滚动一个卡片。实现：在关注医生的文章列表上方加上医生列表。完成关注tab下，推荐关注的医生列表展示。1）在首页关注频道，引入关注医生组件。2）定义 获取推荐关注医生 接口函数。1）定义 医生卡片数据 类型。3）实现 推荐关注的医生展示。适配有问题，切换设备试试。
2024-02-22 08:09:08
1120
原创 34 首页模块知识列表
2）新建 knowledge-list组件展示知识文章列表。3）默认激活 推荐tab , 结合查询列表。实现：tab切换效果，准备知识列表组件。1）给组件传入 type 列表查询类型。实现：知识列表组件滚动加载。2）定义 api 函数。定义数据类型和传参类型。3）实现加载数据和渲染。
2024-02-22 08:08:40
1302
原创 33 家庭档案-路由与组件
校验通过后，调用新增患者api方法新增，成功关闭弹层并刷新患者列表。现在：一个 v-model 指令搞定，不需要记忆两种语法。支持默认选中和点击切换选中，借助v-model做数据同步。复用新增弹层，打开弹层回填数据，显示当前点击编辑患者信息。根据是否有患者ID区分新增或编辑，调用对应api函数。Tips: 这种写法麻烦，知道写法即可，一般使用。由于是比较老的库，没有提供类型，自己定义类型。实现：提交的时候校验表单，身份证需要校验格式。点击删除，弹出确认框，确认删除调用api函数。
2024-02-21 06:25:50
1110
原创 32 用户模块布局
目标：首页，健康百科，消息通知，我的，布局容器等静态结构搭建。掌握：Pick 与 Omit 从现有类型中得到可复用类型。说明：练习模板组件(02-其它资源)，重点学习在线医疗。，基本结构都使用vant组件库搭建。实现：需要登录的页面，需要判断是否有。实现：头部个人信息展示与订单卡片布局。-选择问诊科室=>选择问诊患者。实现：切换页面切换标题，扩展。定义api接口返回数据类型。获取用户信息数据渲染显示。说明❓：Dialog需要。实现：底部tab的切换。实现：快捷工具栏目渲染。2）获取数据进行渲染。
2024-02-21 06:25:37
1323
原创 31vue3 移动端短信登陆验证
定义发送验证码api需要的ts联合类型：‘login’ 登录 | ‘register’ 注册。定时器相关函数是 window 去调用，因为 node 也有定时器返回类型不一样。验证码发送成功后，设置time倒计时60s，使用定时器开启倒计时，结束关闭定时器。组件卸载时，清除定时器（倒计时没有结束，就登录跳转页面情况）实现：添加短信登录与密码登录界面切换，添加code的校验。实现：点击按钮发送验证码功能。封装发送验证码api接口方法。调用发送验证码api接口。实现：通过短信进行登录。1）API 接口函数。
2024-02-20 06:28:30
1498
原创 30 vue3移动端登陆页面
封装需求❓：支持 title rightText 属性，支持 click-right 事件，click-left函数内支持返回上一页或默认首页。实现：组件的返回功能，支持 title rightText 属性，支持 click-right 事件。**前提=》**vant组件库中所有组件用到的颜色、字体大小、间距等，都定义成全局的原生css变量。掌握：van-nav-bar组件的基础使用，封装成 cp-nav-bar 组件，作为项目通用组件。完成：路由规则的配置，基础组件结构，app组件路由出口。
2024-02-20 06:28:16
2707
原创 29 axios请求与响应拦截器
实现：token请求头携带，错误响应处理，401错误处理。测试：封装好的请求工具函数。知道：约定项目的映射规则。
2024-02-19 06:38:59
1396
原创 28 vant组件库
相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。插件，它可以自动引入组件，并按需引入组件的样式。说明❓：有一个控制台警告可忽略，或者使用。的项目中使用 Vant 时，可以使用。注意❓：关闭自动生成类型声明文件。实现：使用 vw 完成移动端适配。实现：完整使用vant组件库。
2024-02-19 06:38:45
1016
原创 27 pnpm介绍安装与项目创建模板
1 pnpm介绍安装2 项目创建{#create-vue}vscode插件安装{#ext}eslint 预制配置{#eslint}3 项目结构调整{#dir}路由代码解析{#router}4 用户状态仓库{#store}5 数据持久化{#persisted}6 stores统一导出{#stores-export}本质上他是一个包管理工具，和npm/yarn没有区别，主要优势在于包安装速度极快磁盘空间利用效率高npm命令pnpm等效pnpm dev。
2024-02-18 07:27:09
1507
原创 26 vue3 Pinia 状态管理介绍
2 Pinia 上手3 storeToRefs的使用 {#store-to-refs}4 使用 Pinia 改造头条{#case}
2024-02-18 07:26:47
1350
原创 25 axios 与 TypeScript 新闻案例
掌握：掌握axios配合泛型设置响应数据类型。优化axios数据获取和类型定义。完成：axios获取数据后。实现：频道切换后列表更新。完成：频道导航切换效果。
2024-02-16 10:01:28
1075
1
原创 24 TypeScript 与vue 应用
知道：TS类型声明文件是什么以及作用项目中安装的第三方库里面都是打包后的JS代码，但是我们使用的时候却有对应的TS类型提示，这是为什么呢？在第三方库中的JS代码都有对应的TS类型声明文件什么是类型什么文件？通俗地来讲，在 TypeScript 中以 .d.ts 为后缀的文件，我们称之为 TypeScript 类型声明文件。它的主要作用是描述 JavaScript 模块内所有导出成员的类型信息。.ts文件.d.ts文件作用是啥？.ts 文件:既包含类型信息又可执行代码。
2024-02-16 10:01:12
896
原创 23 TypeScript基础介绍
1 TypeScript 起步TypeScript 介绍{#intro}2 TypeScript 作用{#effect}3 TypeScript 编译{#compile}4类型注解{#annotate}5原始类型{#base}6数组类型{#array}7联合类型{#union}8类型别名{#alias}9函数类型{#fn}基本使用{#fn-base}void 类型{#fn-void}可选参数{#fn-params}10 对象类型{#object}基本使用{#obj-base}扩展用法{#obj-ext}
2024-02-14 08:54:34
1137
原创 21 vue3 语法糖与常用函数
掌握：在使用reactive创建的响应式数据被展开或解构的时候使用toRefs保持响应式。接下来我们通过一个小案例，运用一下provide和inject函数。元素上使用 ref属性关联响应式数据，获取DOM元素。provide和inject是解决跨级组件通讯的方案。组件上使用 ref属性关联响应式数据，获取组件实例。掌握：使用 computed 函数定义计算属性。目标：能够实现组件通讯中的父传子组件通讯。目标：能够实现组件通讯中的子传父组件通讯。掌握：使用watch函数监听数据的变化。
2024-02-10 12:09:16
1190
原创 20 组合式API介绍CompositionAPI
组合式API介绍{#composition-api}2 setup函数{#setup}3 reactive函数{#reactive}4 ref函数{#ref-fn}5 reactive 与 ref 的选择{#reactive-and-ref}介绍：什么是组合式API，组合式API的特点通过data、methods、watch 等配置选项组织代码逻辑是选项式API写法所有逻辑在setup函数中，使用 ref、watch 等函数组织代码是组合式API写法option api<template>
2024-02-10 12:08:28
1048
原创 19 vue3介绍
1 vue3 现状介绍{#now}2 vite 构建工具{#vite}3 vite 创建项目{#vite-create-project}4 安装插件和代码分析{#code-analysis}5 总结了解：vue3 的现状以及它特点Vue3 的现状2020 年 9 月 18 日发布，许多开发者还在观望。2022 年 2 月 7 日称为默认版本，意味着 vue3 是现在也是未来趋势。库名称简介PC 端组件库：Ant Design 的 Vue 实现，开发和服务于企业级后台产品。
2024-02-08 17:30:40
936
原创 211 java web开发常见面试题
用来简化spring应用的初始搭建以及开发过程使用XML方式来进行配置,创建独立的spring引用程序,使用main方法运行,嵌入的Tomcat 无需部署war文件,简化maven配置,自动配置spring添加对应功能，starter自动化装配Spring Boot的。
2024-02-08 17:30:29
1542
原创 210 springcloud常见面试题
以前的模式是 所有的代码在同一个工程中 部署在同一个服务器中 同一个项目的不同模块不同功能互相抢占资源 ，微服务 将工程根据不同的业务规则拆分成不同的服务 服务部署在不同的机器上 服务之间通过远程相互调用优点:1、每个服务直接足够内聚，代码容易理解2、开发效率高，一个服务只做一件事3、易于第三方集成4、解耦、易扩展缺点:1、开发人员要处理分布式系统的复杂性2、多服务运维难度，随着服务的增加，运维的压力也在增大3、服务间通讯成本4、数据一致性5、分布式链路跟踪问题。
2024-02-06 06:01:07
1261
原创 209 Gateway核心知识
GatewayFilter工厂同Predicate工厂类似，都是在配置文件application.yml中配置，遵循了约定大于配置的思想，只需要在配置文件配置GatewayFilter Factory的名称，而不需要写全部的类名，比如AddRequestHeaderGatewayFilterFactory只需要在配置文件中写AddRequestHeader，而不是全部类名。网关作为流量的，在微服务系统中有着非常作用，网关常见的功能有路由转发、权限校验、限流控制等作用。上，能够满足大多数的需求。
2024-02-06 06:00:53
1279
原创 208 Netflix Hystrix核心知识
Fallback相当于是降级操作. 对于查询操作, 我们可以实现一个fallback方法, 当请求后端服务出现异常的时候, 可以使用fallback方法返回的值. fallback方法的返回值一般是设置的默认值或者来自缓存,当然，降级方法需要配置和编码，服务降级的目标是为了更友好的提示，如果你有备选服务组的话，可以走备选服务组，以最大限度的保存程序的高可用。微服务I发生异常，请求阻塞，用户不会得到响应，则tomcat的这个线程不会释放，于是越来越多的用户请求到来，越来越多的线程会阻塞。
2024-02-05 18:13:53
945
原创 207 OpenFeign核心知识
hystrix超时时间计算ReadTimeout*(MaxAutoRetries+MaxAutoRetriesNextServer+(MaxAutoRetries *MaxAutoRetriesNextServer)+1)使用Feign调用接口分两层，ribbon的调用和hystrix的调用，所以ribbon的超时时间和Hystrix的超时时间的结合就是Feign的超时时间。默认情况下,GET方式请求无论是连接异常还是读取异常,都会进行重试。如果不配置ribbon的重试次数，默认会重试一次。
2024-02-05 18:13:38
968
原创 206 Netflix Ribbon 负载均衡
通过 Spring Cloud 的封装，可以让我们轻松地将面向服务的 REST 模版请求自动转换成客户端负载均衡的服务调用。Ribbon作为后端负载均衡器，比Nginx更注重的是承担并发而不是请求分发，可以直接感知后台动态变化来指定分发策略。Ribbon是一个客户端负载均衡软件，通过注册到Eureka上的服务名，获取服务列表，缓存到本地，选择负载均衡算法，发送http请求。在spring cloud可以通过简单配置，即可完成客户端负载均衡，用法如下：配置，注入，请求。定义负载均衡的规则接口。
2024-02-04 19:06:11
942
原创 205 eureka-servie-高可用与核心知识
清空二级缓存，即 readWriteCacheMap，用于保证数据的一致性，将此事件同步至其他的 Eureka Server 节点。服务正常停止才会发送 Cancel，如果是非正常停止，则不会发送，此服务由 Eureka Server 主动剔除。服务注册后，要定时（默认 30S，可自己配置）向注册中心发送续约请求，告诉注册中心“我还活着”。更新队列，将此事件添加到更新队列中，供 Eureka Client 增量同步服务信息使用。Eureka Server 提供了服务剔除的机制，用于剔除没有正常下线的服务。
2024-02-04 19:05:54
1087
原创 204 SpringCloud核心组件
服务发现——Netflix Eureka客服端负载均衡——Netflix Ribbon、OpenFeign断路器——Netflix Hystrix服务网关——Gateway分布式配置——Spring Cloud Config。
2024-02-03 09:35:36
1163
原创 203 SpringBoot面试常见问题
Spring Boot是 Spring 的子项目，他的核心思想是自动装配,通过 Spring Boot开发者可以快速配置 Spring 项目，引入各种 Spring MVC、Spring Transaction、Spring AOP、MyBatis 等等框架，而无需不断重复编写繁重的 Spring 配置，降低了 Spring 的使用成本。核心模块模块说明核心加载支持Springboot的单元测试监控健康管理应用允许你构建可用java –jar直接运行的jar包。
2024-02-03 09:35:28
1517
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人