V3医疗项目必会知识点

1. 有没有做过移动端适配？ --- 项目题

• 之前开发过h5的项目，UI设计稿都是给的px单位，然后我选择的视频的方法用的是 vw vh这种。 但是我们在写代码的时候，还是px单位，只不过通过一个postcss插件 postcss-px-to-viewport ，将 px 单位自动转化为 vw/vh 单位。 需要早postcss.config.js配置文件里面，设置我们ui设计稿的基础尺寸，一般是375，或者750.都是用iphone 6 为模板就行开发
• 我还知道一种方式，但是最近没有用过了，因为vw vh的兼容性现已经很好了，就不怎么使用了。 如果需要使用rem单位来实现响应式， 那么就要下载两个包 postcss-pxtorem 把px转换为rem单位。 还有一个库lib-flexible专门来设置一个rem等于多少像素

2. 你看过哪些源码？ 我在工作里面看过这些库的源码？

• axios
• element-ui
• vue
• amfe-flexible --- 这个包就是 淘宝h5网站以前使用的包，得到rem单位的一个库
  • 里面的核心就是将html 的dom元素，获取 clienWidth屏幕宽度，在除以10， 1rem就相当于是屏幕的十分之一，通过这个技术来实现 h5 的响应式
  • 里面还监听了resize DOMContentLoaded 这些事件，对一些方法进行处理
  • 工作里面，我就是直接使用postcss-pxtorem 结合这个包，实现h5的适配

3. ts项目里面封装axios --- ts 相关

• 有个网址，可以把json类型转换为 interface或者type。方便我们将服务器的返回值定义一些类型
  • https://app.quicktype.io/

4. 二次封装UI组件库的组件-样式修改

为什么会修改不了样式？问什么需要深度选择器？

A组件里面引入了B组件，A组件想修改B组件内部的样式，就会有这个问，不管B组件是自定义的或者第三的

在我们自己封装的组件里面，如果要修改vant的组件的样式，如果有scoped，就会给下面的类名，加一个属性选择器 ， 例如.van-nav-bar__text[data-xxx-ssss] 和vant的样式就匹配不到了，就不能修改样式

这个时候，我们需要在自己组件的scope的style里面，通过:deep() 这个深度选择器语法，去告诉编译器，下面的类名不要给我加 [data-xxx-xx] 这种属性选择器，就可以直接找到vant组件对应的 class类名

如果深度选择器不会用，也可以在当前页面在写一个不带scope的style，里面直接写vant组件库的样式就可以了。但是这样写会覆盖其他地方这个组件的样式，不是很好

:deep() {
  .van-nav-bar {
    &__text {
      // 这个颜色要用主题色， 用css变量，通过var去引入
      color: var(--hm-92-main-clor);
    }
  }
}

<style lang="scss">
.van-nav-bar__text {
    color: red
}
</style>

百度自己去搜索： 基线、底线、顶线、中线、行距、行高

5. vue3里面使用svg图标

• unicode 性能不错，写法没有语义化，不好读
• font-class 很好辨认，但是如果图标库里面有新图标需要更改，那么就要整个图表重新打包一份，也必将麻烦
  • font-awesome
  • iconpark
  • 阿里的矢量图标库
  • icomoon
• svg+symbol 现在的主流， vite或者vue-cli需要在对应的配置文件里面添加一些配置。 将所有的svg矢量图表 都生成一个类似于 精灵图的东西，用的的时候，选svg图片的名称就可以了，但要注意文件夹
  • ui工程师利用一些工具，可以很方便的生成一些 svg矢量图。 矢量图放大缩小不失真
  • ui常见的工具 蓝湖 慕客， 大公司 Figma

6.表单校验

人资里面使用的element-ui的el-form表单

• 使用过一些常见的基础校验和自定义校验，就是自己写validator函数。
• 还做过一些业务校验，主要是一些表单项互相约束。或者表单项的值在数组里面的重复问题

之前还使用vue3写过一些h5的项目，使用的是vant-ui里面的 van-form

• 比较常规的就是基础校验，函数校验等等
• 之前还有一个业务，使用过 异步函数校验 asyncValidator

7.修改vant-ui组件的主题色，默认样式

• vant-ui里面 覆盖它们的默认css变量
• 修改主题色

8. vuex和pinia的数据持久化

可以手动的通过localStorage，sessionStorage，cookie进行储存，但是获取和设置都要单独的写代码，还要针对储存的数组和对象进行字符串的处理，比较麻烦。工作里面都是用插件来

• vuex---使用 vuex-persistedstate， 在new Vuex的时候 配置一个plugins就可以了
• pinia -- 使用pinia-plugin-persistedstate，在defineStore函数里面配置以下即可

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState({
      storage: window.sessionStorage
  })]
})

export const useUserStore = defineStore(
  'user',
  () => {
    const user = ref<User | undefined>()
    // // 设置用户的信息
    const setUser = (e: User) => {
      user.value = e
    }

    return { user, setUser }
  },
  {
  // 下面是持久化的配置
    persist: true
  }
)

防止重复点击的问题

1. 按钮上面使用 :disabled="time > 0"
2. 一进入send函数就判断time的值 if (time.value > 0) return, 如果大于0就直接退出函数，
3. 如果没有递减的time这个值，就自己写节流阀（节流函数的实现方式） flag,初始值是true，一进入函数就给它设置为false，请求成功或者定时器结束的时候，将这个flag再设置为true。保证单位时间内，函数只能执行一次

医疗项目 我的页面 布局总结

怎么样在工作里面去快速的搭建一些静态。 面试官说：我的css html非常的扎实，能够快速的搭建一些静态页面。

之前在上一个项目里面，我做过一个h5的vue3项目，当时采用的是vant-ui + ts +vue3

我自己搭建静态页面有自己的一些技巧：我会首先根据ui的同事给的设计稿，

大致的看一下页面的响应式布局，采用vw，vh还是rem，在采用不同的postcss插件。

具体的页面布局，我是从上到下，按模块写多个div，然后在给他们加上背景颜色，方便查看div元素的位置。

然后我在整个页面大致看一眼，结合main.scss，看那些需要写css变量，哪些需要覆盖vant的组件库，哪些需要自己定义组件

如果是具体的布局，那么首先想到的是flex布局，float浮动，通过clearfix清除浮动。一些微小的定位调整，就是通过postions子绝父相来完成

如果有需求需要去修改vant-ui的样式，可以通过深度选择器去修改， 也可以通过写两个style，一个不加scoped一个加上。然后就可以针对与当前组件定制化自己的页面样式

如果有些样式是vant-ui自带的，那么我们在写代码的时候，就会直接用vant-ui提供的一些类型辅助我们开发，减少重复的css

然后写静态页面涉及到重复的内容，就通过v-for 数字循环，渲染多个相同的静态结构

写h5项目的时候，一定要注意的及时 假数据和后端返回的数据长度可能不一样，可能会破坏我们自己的布局模式，所以需要 对超出长度的部分，通过css展示小数点，保证样式问题

在布局一个有多种状态的页面时，我会先把 激活和未激活的样式 都全部写出来，然后在自己定义一个active变量，将页面上的结构动态的显示和隐藏，给激活的div上面添加一个active类名，判断条件就是active的值和v-for循环的值进行对比。

封装过组件吗？

我之前经常封装组件，稍微复杂一些的是 涉及到父子孙组件传值

在上一个项目里面，我写了一个父子组件，但是子组件里面又引入了一个公共的头部组件，在子组件里面点击头部组件的返回按钮时，涉及到 孙组件向子组件抛出一个事件， 然后子组件再想父组件抛出一个事件，最后把父组件的一个数据进行修改。

计算属性的get set的使用场景

有些时候，组件的状态和服务器接口需要的值不一样，就需要使用计算属性的get set

之前我做过一个项目，有一个复选框选择的UI界面， 组件的值默认是true和false。但是服务器接口需要的值是 0 和 1，为了后面发请求方便，所以需要使用计算属性的get和set。 get函数里面返回的是true和false，控制复选框的勾选和取消。 set函数就是去设置服务器的接口需要的数据 0 和 1

vue3的v-model语法糖发生了变化

• 在vue3里面只有v-model没有sync

• v-model的默认的语法糖，以前是value属性+input事件。 现在vue3边长了默认的 modelValue属性 + update:modelValue 事件

• 一个组件上面可以使用多个v-model，vue2是不可以的，只能用sync来代替。 多个v-model的写法就是 v-model:count="xxx" v-model:msg="xxxxx"

any-rules

vue3的路由

通过两个函数 useRoute 和 useRouter来实现

在模板里面可以直接使用$route 和 $router

编辑家庭档案的一些注意事项 -- 监听子组件prop的变化

• 父向子传值， 值需要深拷贝，生成新地址
• 子组件接收到以后，需要在setup函数里面，将父组件传递过来的对象，一一赋值给 formData，因为是reactive定义的，不能直接写等号。 所以涉及到统一赋值的情况推荐将对象用 ref来定义
• 因为子组件没有销毁，当我们再次点击另一个编辑的时候，页面可能没数据，因为setup只会走一次
  • v-if 动态控制子组件的 展示和销毁
  • watch监听 props的变化， 如果是对象，新旧值地址一样，值也一样
  • watchEffect 更好一些，
  • 通过$refs去访问 子组件对应的方法 + $nextTick来写

支付宝支付

之前我做过小程序里面的微信支付。 还写过一个h5的医疗项目， 里面涉及到支付，我们的后端支持的是支付宝支付。主要的难点我觉得都在后端，前端的话只需要调用两个接口就好了。

具体的接口，一个核心就是 订单id。 生成这个id的时候，前置工作准备的参数比较多。是否使用优惠券，优惠券的id需要传递，患者的个人信息的id，选择的意思的科室，之前是否就诊过，就诊时间是多久之前，医生开的处方药品合集，补充的病例图片，还有很多，记住的比较核心就这几个。 发请求给我们的后端，得到一个订单id

在就是调用公司后端服务器写的 支付接口，对于前端而言，只需要准备几个参数就可以了，最核心的就是订单id。 然后还有回调地址（支付成功以后支付宝页面跳转的地址）

沙箱环境（后端测试的时候，有一个沙箱环境的账号）

轮询

http协议: 单向

只能是客户端发请求， 服务器在被动的给你响应，给你返回值

三次握手 四次挥手---- 面试题

websocket协议 ： 双向的

服务器和客户端可以双向的发数据，（淘票票买电影票，股票，一些抢购商品的数量动态变化）

轮询 （短轮询，长轮询，短连接，长链接）

setInterval(async () => {
    await getCount()
}, 500)

这样也可以实现动态的效果
缺点： 1. 接口返回的数据还是有时效性问题，
	  2. 浪服务器的资源，增加公司服务器的成本

问诊室模块 -- websocket

https://heapdump.cn/article/3828298

1. 什么是socket.io

就是一个基于websocket协议封装的一个库，后端基于这个库去创建一个 websocket的服务

前端通过socket.io-client去链接后端提供的这个服务

2.怎么样去写页面？

我之前写过一个非常复杂的项目，涉及到聊天室，会根据产品原型图和UI设计稿，先将整个聊天界面大致拆分为三四个组件，核心的聊天框里面再拆分几个子组件。

在消息的组件里面，会将UI图上画的所有对话的情况都写一遍，写成静态结构，然后在组件里面，通过传递的item选项，动态控制要显示那一条消息

相关核心

• 如何建立链接 io('地址')
• 连接成功的事件 connect
• 如何发消息 emit + 事件
• 如何收消息 on + 事件
• 如果关闭连接 close()

枚举

简历上面： 可以熟练的使用socket.io 进行一些聊天的业务开发

别人问你的具体的：

1. 这个包就是封装的websocket底层。这个库的核心对于前端来说，就是 io函数，传递一个ws的地址和token，通过connect事件监听到连接是否成功
2. 进入聊天室以后，监听服务器主动发送过来的 chatMsgList 事件，在他们的回调函数里面，有我们消息历史记录。
3. 历史记录： socketio不是很难，关键是里面返回的消息类型种类有点多，上一个项目里面消息种类大概有9种，然后我写静态页面的时候，就要写9个静态的div，通过v-if结合消息类型，动态的去展示哪些div结构。（例如有文字类型，图片类型，患者信息类型，药品信息，默认通知等等）
4. 发消息：比如当前我是患者，会emit触发一个sendChatMsg 事件，在同一套代码的上面有socket.on监听一个receiveChatMsg 事件。 这样的话 不管是医生端，还是患者端，都能够触发这个事件，在回调函数里面，将得到的值 方式 聊天记录的 list数组里面去
5. 发送的消息 我觉得也比较麻烦，因为socket发的消息 自己也可以收到，还可以接受到医生端发送过来的消息，那么自己发的消息展示在左边还是右边，取决于我消息里面的from 和to 等字段

（时刻注意： 我们这个代码，是两个端再用，患者用手机看这个项目，医生也用手机在看这个项目。 ）（直播的项目 一套代码针对多个角色： 主播，助理，嘉宾，游客）

组合式API 与 选项式API --- hooks

<template>
  <div>当前鼠标位置</div>
  <div>x: {{ mouse.x }}</div>
  <div>y: {{ mouse.y }}</div>
  <div>当前点击次数：{{ count }}</div>
  <button @click="add">点击</button>
</template>

<script>
export default {
  // vue2 中采用的是 options API
  // 常见的配置项: data created methods watch computed components
  data() {
    return {
      mouse: {
        x: 0,
        y: 0,
      },
      count: 0,
    }
  },
  mounted() {
    document.addEventListener('mousemove', this.move)
  },
  methods: {
    move(e) {
      this.mouse.x = e.pageX
      this.mouse.y = e.pageY
    },
    add() {
      this.count++
    },
  },
  destroyed() {
    document.removeEventListener('mousemove', this.move)
  },
}
</script>

组合式Api写法

<template>
  <div>当前鼠标位置</div>
  <div>x: {{ mouse.x }}</div>
  <div>y: {{ mouse.y }}</div>
  <div>当前点击次数：{{ count }}</div>
  <button @click="add">点击</button>
</template>

<script>
import { onMounted, onUnmounted, reactive, ref } from 'vue'

export default {
  setup() {
    const count = ref(0)
    const add = () => {
      count.value++
    }

    const mouse = reactive({
      x: 0,
      y: 0,
    })

    const move = (e) => {
      mouse.x = e.pageX
      mouse.y = e.pageY
    }
    onMounted(() => {
      document.addEventListener('mousemove', move)
    })
    onUnmounted(() => {
      document.removeEventListener('mousemove', move)
    })
    return {
      count,
      add,
      mouse,
    }
  },
}
</script>

抽离代码

App.js
import useMouse from './mouse'
import useCount from './count'

export default {
  setup() {
    const mouse = useMouse()
    const { add, count }  = useCount()
    return {
      count,
      add,
      mouse,
    }
  },
}

mouse.js
import { onMounted, onUnmounted, reactive,  } from 'vue'
function useMouse() {
  const mouse = reactive({
    x: 0,
    y: 0,
  })
  const move = (e) => {
    mouse.x = e.pageX
    mouse.y = e.pageY
  }
  onMounted(() => {
    document.addEventListener('mousemove', move)
  })
  onUnmounted(() => {
    document.removeEventListener('mousemove', move)
  })
  return mouse
}

count.js
import { ref } from 'vue'
function useCount() {
  const count = ref(0)
  const add = () => {
    count.value++
  }
  return {
    count,
    add,
  }
}

https://juejin.cn/post/6997172216211177502

总结: option api 编写的代码相对比较分散，不利于后期的维护和抽取(代码复用)

composition api 可以将option api的代码增合到一起，增加了代码的可读性和可复用性

同时 方便代码的抽离，可以将代码抽离成为一个个的hook函数，以提高代码的可复用性

@vueuse/core --- 简历上面的技术栈 写这个单词

useClipboard, useLocalStorage, useMouse,

https://juejin.cn/post/7133134643284410376

https://www.vueusejs.com/guide/ 中文官网

可以和面试官面试的话：提前准备

• 这个包我用过很多，比较常用的几个 方法 有 useClipboard 这个是 复制内容到剪贴板，useMouse这个函数是获取鼠标的x y 坐标。 useLocalStorage这个函数是本地储存相关的，都比较方便
• 我在开发一个新业务的时候，都会去这个网站上看一下有没有 对应的封装好的方法

第三方登录--QQ登录

熟练的对接第三方登录， 例如qq登录，微信登录 ----写简历上面

涉及到QQ互联 里面注册一个应用，核心就是 获取 access token，然后就是获取用户openID，调用openAPI去访问用户的信息，比如昵称头像等

具体落实到代码层面，就是在index.html里面， scirpt标签引入 qq的sdk的文件，里面传递应用appid，和登录成功以后的回调地址redirecturl

最后在vue的登录组件里面，使用全局变量QC 核心方法就是getMe方法，获取qq用户的信息

移动端调试--- 精通移动端开发的调试

精通移动端开发的调试 --- 写到简历上面去

v-console --- 在手机上浏览器的网页 --- 看不到请求，需要使用这个包，就可以在手机右下角多一个按钮，点击出来和浏览器的控制台长的比较像，有elemnt network localstoreg等等

eruda --- 这个和上面的是一样的， 只不过这个是国外的，vConsole是腾讯出品的

mock -- 前端写完了，后端接口还没有写好。 用mock写假数据

postman --- 后端写完了，前端有些页面还没有写，前端或者后端，就通过postman去测试接口

fiddle --- 抓包 （场景： 如果是要调试 写在APP里面的 网页，那么就可以使用这个工具）