README.md · ice19/yiliao_95

## 1. 公司项目开发流程

公司项目开发流程？你们公司开发的人员组织情况？

运维(我们是阿里巴巴公司，我现在给天猫app增量一个元旦的活动功能。首先有多个多家的版本多种语言，在北京/武汉/成都/上海/广东等 都有服务器。 需要把我们开发的代码部署到不同的服务器里面去)

项目(产品)经理 ---> 技术总监(前端组长，后端java组长，运维，UI,测试)

产品需求会 ---- 项目经理带着各个团队的人员，开会，拿出来他准备好的 "原型图“, 前端和后端格提出自己的意见，原型图里面有什么需要改动的或者不合理的
这个会开完以后，就会确定产品的一些时间。  UI设计图给前端的时间，前后端联调时间， 测试的时间，UAT上线的前一步验证的时间， 上线的时间

前端组长就会安排团队的3个人负责这个项目， 怎么样创建项目，怎么样确定分支模型，每个人负责什么模块。 后面具体的人就和UI小姐姐对接，他的ui设计稿写完了我们就可以吧静态页面完成

静态页面写完了以后，问后端当前页面的接口写完了没有，如果没有写完，可以使用mock假数据发请求，完成页面。等到了前后端联调，在换个接口地址就可以了

接口联调完毕以后，在交给测试去测试，有bug就去 jira平台 自己找自己的bug，改完了再让他测

都测试了没问题，发uat邮件，给产品经理验收

验收没问题，就找一个晚上的用我们系统没什么人的时间 上线

1.1开会 ---  1.16联调 --- 1.19联调结束，交给测试 --- 1.24测试完毕 ---> 1.26上线

## 2. npm yarn pnpm的区别

他们都是下载npm包的，安装依赖
npm ----  下载node，安装以后，电脑自动就有npm --- 还需要在家目录里面设置 .npmrc

yarn ----  npm install yarn -g   yarn工具是npm下载的，---也要在家目录里面设置.yarnrc

pnpm ----   npm install pnpm -g   pnpm也是npm下载

如果要下载一个axios包
npm i axios
yarn add axios
pnpm i axios

看网站质量排名 (国内)
掘金 ---> 思否segmentfort ---> 博客园  --->  CSDN ---> 知乎 --> 简书
谷歌 ---> bing搜索  ---> 百度

npm 5 之前下载包的时候，没有lock文件。同一个项目不同的电脑可能安装的包不一样。 facebook开源了yarn工具，自带有lock文件，保证不同的电脑不同的环境，下载统一项目所有的包版本和地址都一样。速度也必npm快

npm5版本以后，增加了lock。 基本上工作里面npm yarn 都可以用

pnpm也是包管理工具，后面发明的，主要是解决了 node_modules 磁盘占用空间的问题。 核心本质就是通过 硬链接的形式，链接到特殊的地方去找对应的包，不要每个项目下载 相同的包

## 3. import与export混合使用

`export * from './user' // export *  叫统一导出，他的文档在阮一峰的 es6文档里面找 https://es6.ruanyifeng.com/`

```
// 默认导出一个文件只能有一个
export default pinia

// 按需导出一个文件可以有多个
// https://es6.ruanyifeng.com/
export * from './user' 
// export * from './A'
// export * from './B'
// export * from './C'
// export * from './D'
// export * from './E'
```

## 4. 二次三次封装axios

```
export default instance

export const request = (url: string, method: string, obj: any) => {
  return instance.request({
    url,
    method,
    // 动态的key，使用数组的中括号形式去写
    [method.toUpperCase() === 'GET' ? 'params' : 'data']: obj
    // data: obj,
    // params: obj
  })
}
```

## 5. vue3怎么自定义组件名称，组件名称的作用？

1. 再写一个script，用vue2的选项式写法添加name属性
2. 通过插件vite-plugin-vue-setup-extend

```javascript
<script lang="ts">
export default {
  // 下面是vue2的写法
  name: 'LoginCom'
}
</script>

pnpm install vite-plugin-vue-setup-extend
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
plugins: [
  vue(),
  Components({
    resolvers: [VantResolver()]
  }),
  VueSetupExtend()
],
    
<script setup lang="ts" name="LoginCom"></script>
```

> 组件的name属性有什么用:

1.vue devtools查看组件 2.keep-alive组件缓存使用 3. 递归组件使用名称

## 6. vue深度选择器问题

添加了scoped以后，van的样式就不会生效，样式穿透的问题，涉及到深度选择器

修改vant-ui的样式，一般是两种方法：

1. 再写一个style标签，不写scoped属性， 在结合一个自定义的父类，实现私有化

```
<div class="cp-nav-bar">
  <van-nav-bar
    left-arrow
    @click-left="onClickLeft"
    right-text="注册"
    @click-right="onClickRight"
  />
</div>

2. 深度选择器的语法，有很多的变化，

```
// 在vue2里面 SASS/SCSS ::v-deep .main     LESS  /deep/ .main
// 在vue3里面  :deep(.main) {}
<style lang="scss" scoped>
:deep(.van-nav-bar__text) {
  color: var(--cp-primary);
}
</style>
```

3. css less sass postcss的区别

less sass 前缀处理器， 比如写less sass的一些 函数  if else，经过sass或者less的 处理器，转换为css

postcss 是后置处理器，有了css文件以后，在结合postcss的一些插件 ，比如postcss-px-to-viewport 将css文件里面的px单位 转换为 vw vh 实现响应式。 还有一些postcss插件，专门给c3属性 添加不同浏览器的前缀  -- autoprefixer

```
-webkit-transform:rotate(-3deg); /*为Chrome/Safari*/
-moz-transform:rotate(-3deg); /*为Firefox*/
-ms-transform:rotate(-3deg); /*为IE*/
-o-transform:rotate(-3deg); /*为Opera*/
transform:rotate(-3deg);

我们工作里面 只用写transform:rotate(-3deg); ，但是postcss的插件autoprefixer，会自动识别一些css3的高级的语法，帮我们给所有浏览器加个兼容性的配置
在我们写vue2 vue3项目的时候，脚手架默认帮我们安装了这些插件，所以我们不用再去做了
```

## 7. vite工程里面使用svg自定义组件

## 8. 路由守卫

路由守卫(路由钩子函数)常用的有哪些？----  https://router.vuejs.org/zh/guide/advanced

钩子函数： 在特定的时机 自动执行的函数

1. 全局：  前置路由守卫，后置路由守卫

2. 路由独享的守卫 beforeEnter

3. 组件内的守卫 3个

```
router.beforeEach((to) => {
  console.log('beforeEach钩子', to)

return true // 表示路由放行，类似于vue2的 next()
})

// 没有next函数，一般在这里面修改页面标题，统计 pv uv 数据等等
router.afterEach((to) => {
  console.log('afterEach钩子', to)
})
```

```
{
  path: '/home',
  name: 'home',
  beforeEnter: () => {
    console.log('当前首页独享的路由守卫，beforeEnter')
  },
  component: () => import('@/views/Home/index.vue')
},
```

```
import { onBeforeRouteLeave } from 'vue-router'

// 注释法解决bug，就是之前写了什么代码导致的报错，里面注释掉再去看，将错误定位到某一行就可以了
// onBeforeRouteLeave(() => {
//   console.log('组件内的钩子，离开组件， onBeforeRouteLeave')
// })
```

## 9. 前端和UI工作流程

1. 根据ui给的设计稿，1:1还原即可
   1. 你们公司ui有的工具： figma， skech,  慕客， 墨刀
   2. B端  C端   2B  2C -----  2--two--to
      1. business商业    前端来说一般是后台产品
      2. customer 用户  前端来说一般的 拼多多，淘宝，京东  ------  UI检查就比较细致 --- ui走查  --上线前最后一步
      3. p2p    personal to personal  个人对个人
      4. o2o   online  to  offline  线上到线下

## 10 身份证号的正则匹配

```
普通替换
'abcedfg'.replace('abc', '') -------- edfg
正则替换，  i表示不区分大小写   g表示全局匹配
'abacaeadafaaaag'.replace(/a/ig, '') -------- bcddfg

带有小括号的正则表示 分组匹配， 会自动在replace函数里面 新增多个变量 $1 $2 $3 一个括号多一个变量
表示匹配到的内容。 一般用来加密
33333333333.replace(/^(.{4}).+(.{4})$/, `$1**********$2`)
```

## 11. v-model绑定计算属性

默认就诊人的计算属性： checkbox组件需要的值是 true或者false； 但是后端需要的值是0 1

我们就是用可以修改的计算属性，get函数里面 同0 1 将计算属性改为 true  false，在set里面，就是用户点击了checkbox复选框的时候，对计算属性有修改的地方，那么我们就将修改的true 和false，在又反转回 0  1 给后端使用

这个默认的业务一定要说清楚 页面上显示的内容true/false，和后端需要的内容0 1

核心的做法，就是通过可以修改的计算属性 get，set形式。 将v-model上面绑定一个计算属性

```
绑定ref的值，页面显示的值和后端需要的对不上
<van-checkbox v-model="formDetail.defaultFlag"></van-checkbox>

绑定计算属性的值，计算属性使用get set形式，get就给页面显示用，set就是设置后端数据使用
<van-checkbox v-model="defaultFlagCom"></van-checkbox>
```

```
const defaultFlagCom = computed({
  get() {
    return formDetail.value.defaultFlag === 0 ? false : true
  },
  set(val) {
    formDetail.value.defaultFlag = val ? 1 : 0
  }
})
```

## 12. vue3里面v-model父子通信的简写

首先vue3没有sync语法，

之前vue2的语法:

vue2里面父子通信的简写  v-model  sync。 他们俩的区别就是 v-model一个组件只能用一个，sync语法一个组件可以用多次

```
vue2的 v-model 和 sync简写的语法
<cp-radio-btn :value="formDetail.gender" @input="updateGenderEvent" /> 
<cp-radio-btn v-model="formDetail.gender" />
<cp-radio-btn :gender="formDetail.gender" @update:gender="updateGenderEvent" />
<cp-radio-btn :gender.sync="formDetail.gender" />
```

vue3有区别？ vue3废弃了 sync语法， v-model在vue3里面一个组件上也可以使用多次

```
<TestModel :modelValue="msg" @update:modelValue="msg = $event" />
<TestModel v-model="msg" />
这里是v-model在组件上只用一次的场景，子组件里面
const props: any = defineProps({
  modelValue: String
})
const emits = defineEmits(['update:modelValue'])

抛出事件和数据
emits('update:modelValue', props.modelValue + '-')
```

```
<TestModel v-model:msg="msg" v-model:count="count" />
这是一个组件上面使用多个 v-model 传值
const props: any = defineProps({
  msg: String,
  count: Number
})
const emits = defineEmits(['update:msg', 'update:count'])
抛出事件
emits('update:msg', props.msg + '-')
emits('update:count', props.count + 1)
```

## 13. 身份证号校验

## 14. 有没有封装过什么组件？

我工作里面经常封装各种组件，就是将UI给的设计稿一看，将一些页面公共的部分抽离出来，写成一个组件，然后将不同的地方通过 父子通信的方式向子组件传递数据，实现不同组件的定制化需求

我之前写简历上面的第一个项目的时候，是一个h5的项目，封装过个一个公共的顶部导航栏组件

1. 首先这个组件是二次封装的vant-ui组件库的组件，对于不同的页面进行定制化的配置
2. 在一些一级路由页面，导航栏的中间标题，左侧右侧文本，我写了3个属性传递给子组件，如果不传递就给这些值写个默认值，我还是通过vue3的 ts泛型写的传值
3. 这个组件左侧和右侧的部分可以点击，不同的页面点击效果不一样，然后我就将需要定制化的操作封装为一个函数，然后传递给子组件。也给这个函数写个默认值，如果用户传递了函数就是用用户的操作。 例如有些页面右上角是保存和编辑，有些页面使用的是 登录 注册等路由跳转时间。那我在事件处理函数里面，就先判断用户有没有传递函数，有就调用用户的函数没有传递就默认执行事件

## 15. vue3技术栈

vue3  vue-router  pinia  id-card  @vueuse/core

## 16. @vueuse/core

这个包是我开发vue3项目必用的包，里面包含了非常多的实用工具hooks。让代码的封装和可复用性体现的非常全面。例如我之前要写一个resize事件，xxx

## 17. 自己封装一些hooks

我之前写过一个医疗项目，这个项目涉及到一个关注功能，我们的项目，针对于登录的用户，可以关注医生，关注百科文章，关注常见疾病，关注各种新闻等等。 就涉及到**代码逻辑的复用**, vue2有一种技术叫mixin，不是很好用。在vue3里面我们想要封装一些功能的逻辑代码，通常使用和react类似的hooks写法

我们这个关注业务，我是这么封装的：

我给hooks起了个名称useFollow 本质上是一个函数，接受动态的参数， 看我们这个hooks里面封装的函数，调用的时候需要什么参数就传递什么参数。我之前封装这个hooks就一个变量loading和一个发请求的函数follow。 然后在useFollow这个hooks函数里面 返回一个对象，里面有这两个属性。在任何页面想要实现关注的业务，只需要将useFollow调用一下，返回值使用对象解构就可以实现 **逻辑复用**

## 18. 魔法数字ENUM

一些看不懂的数字，如果没有写注释，后面读代码就很困难

ts---  enum 枚举

枚举就类似于 字面量类型 + 联合类型

创建枚举类型 --- 我们开发主要用枚举来解决 代码中魔法数字的问题

\1. 值的内容，默认从0开始，依次累加

\2. 手动改变值也可以， 改数字就是累加

\3. 手动改值是字符串就不累加了

```
export enum ConsultType {
  // 找医生
  Doctor = 1,
  // 快速问诊
  Fast,
  // 开药问诊
  Medication
}

等价于  1|2|3

123数字没有意义看不懂，所以推荐使用枚举类型
```

我之前在写一个医疗项目的时候，关于就诊类型，例如找医生，急速问诊，开药问诊 这三种类型，我们后端需要的值是123,但是这样代码里面就不利于后期维护。所以我使用了枚举类型，enum定义了很多有语义化的变量，来解决项目中的 这种魔法数字问题。大大方便了后期项目的维护

还有类似于看病时间 一周内，一月内 半年内  一年以上。性别男女 12等等。凡是后端需要使用1234这种数字类型的，我都会去使用 枚举定义。不过需要注意的是，枚举的ts会参数代码运行，需要卸载ts后缀文件里面，不能写在d.ts的后缀文件里面

## 19. 布局技巧

需求： 一个页面有上下布局，上面固定高度50，下面自动高度。 下面部分又有左右布局， 左边固定50，右边自动宽度？

2种方案：

1.. 给上面position:fixed 固定定义，当页面过长，滑动页面的时候，顶部就不会走。这个时候上下滑动页面，滚动条属于body，整个页面的滚动

2..给下面div设置一个固定高度`calc(100vh - 50px)` 这样的话，整个页面就不会出现滚动条，因为页面整体就只有100vh。 下面左右会自动出现滚动条

## 20. 有没有封装过组件？

我之前封装过一个自定义结构的复选框组件，

再最近写过的一个医疗项目里面，关于患者的性别，男女的选择。以及患者患病的时间，一周/一月/半年/一年等。还有是否就诊过等业务需求，我都是自己封装组件，将页面上要选择的 内容写成一个个小方块，点击div实现复选框的选择

主要涉及到的属性有 当前要渲染的数组列表list。双向绑定v-model语法糖绑定的后端需要的字段，以及不同页面显示不同结构的 showLeft字段等。 结合vue3 的ts泛型参数，和默认值定义好属性。完成对应结构的复用

## 21. import type 与 import区别

import type  后面导进来的内容 是类型，不能当做值来用

import 导入的可以当做值也可以当做类型

就拿枚举举例

```
// 是否就诊过
export enum Flag {
  NoAttendance,
  Attendance
}
1. 
import { Flag } from '@/enums/index'

const a: Flag = 1  或者 const a: Flag = Flag.Attendance  两个写法都可以
// 冒号哪里是将枚举当做类型，来约束变量a。  等号后面是将枚举当做值来用
这就是将枚举当做类型类使用， 枚举类型等价于  字面量类型  + 联合类型
上面代码等价于  const a: 0|1 = 1

2.
import type { Flag } from '@/enums/index'
加上了type 表示导入进来的就是一个类型，不能当做值来使用
例如 const a = number 肯定报错， number是一个类型，是抽象的东西，是不能赋值的

对应枚举也是一样
const a = Flag.Attendance 也会报错。 类型是不能赋值的

所以枚举的导入不能加import type
其他的接口 泛型 函数 等类型可以用import  type
```

## 22.计算属性的get set常用

经常和checkbox放在一起使用

前端读取值的时候，通过get函数 返回true false

后端java接口需要数字的时候，通过set函数，手动返回 0 1这种

复选项checkbox和单选框radio 语法糖  checked属性 + change事件

一般的表单输入框 input 语法糖就是 value + input 事件

```
<van-checkbox v-model="paymentMethodComputed" />
这个是双向绑定的语法，是一个语法糖，是checked属性 + change事件
等价于
<van-checkbox :checked="a" @change="a = $evnet" />

当然也可以不在一个组件上面写属性 + 事件，可以在多个元素上面写
<div @click="a = 1">
	<van-checkbox :checked="a"/>
</div>
```

## 23. 支付（支付宝与微信）

1. 支付宝支付的函数

我曾经在上一个项目里面对接过支付宝支付。测试的时候，我之前用支付宝的沙箱APP 或者 浏览器的支付宝页面都做过支付。对于我们前端来说，核心要准备的参数就是 订单编号 + 支付方式 + (支付成功以后)的回调页面的地址。 之前这个项目支付方式我们有 微信 支付宝 云闪付三种。 主要的对接的难点我觉得在后端哪里。前端只需要在生成订单以后，做一些校验工作即可

2. 小程序的支付

1.小程序支付先要登录获取token ----  wx.login (得到一个code值)  wx.getUserInfo(获取4个参数) ---调公司自己java接口，生成token

2.小程序支付的核心 wx.requestPayment() --- 这个api学员5个参数 ---- 先调java接口 生成订单编号，---- 再调接口生成对应5个参数---- 最后在发起原生支付

```
// 下面这个请求是和我们的java接口通信，java再和支付宝 支付接口对接。 返回一个支付宝的支付连接地址即可
const res = await consultPayRequest({
  paymentMethod: paymentMethod.value,
  orderId: orderId.value,
  // 支付宝支付成功以后，回来跳转的页面
  payCallback: 'http://localhost:5173/#/room'
})
console.log(res)
// 请求成功以后，会返回一个支付宝的公网地址，需要使用BOM的location api手动跳过去
window.location.href = res.data.payUrl
```

## 24. 聊天室的UI界面

所谓的聊天室软件，就是将当前页面所有消息的格式，所有的div都写出来，然后在通过v-if结合消息的类型，有条件去展示。对于我们这个项目来说，一条消息就是一个room-message 组件

```
<room-message v-for="item in msgList" :key="item.type" :type="item.type"></room-message>
```

```
<div class="msg msg-illness" v-if="type === 1">

<div class="msg msg-tip msg-tip-cancel" v-if="type === 4">
```

## 25. HTTP网络通信协议

计算机网络： 7层网络协议 ----  4层网络

物理链路层 ----  TCP(打电话)、UDP(发短信)传输层协议 ---IP 网络层协议 --- 应用层(HTTP  FTP  POP3, websocket)

TCP的三次握手和四次挥手

HTTP协议： 前端发请求， 后端给响应

websocket协议： 前端可以给后端发，  后端也可以主动给前端发

针对于股票这种网站，数据需要实时的更新的。

还有针对多人聊天室的，有一个发消息，服务器就通知(广播)给所有进入直播间的家人，家人们都会受到对应的信息

## 26. 聊天简历上可写技术栈关键词

websocket  socket.io  @vueuse/core

聊天室使用websocet协议 写代码的基本步骤

socket.io 是一个工具包，前端和后端都需要安装使用这个包

前端使用的是 socket.io-client 这个包

和后端简历链接进行通信 有下面几个步骤

1.  创建socket实例const socket = io()
2. 建立连接成功  socket.on('connect', () => {})
3. 发消息给别人  socket.emit('自定义事件名称'，'数据')
4. 收消息  socket.on('自定义事件名称', (e)=> {})
5. 离开页面，关闭socket连接，节约服务器资源 socket.close()

**之前项目的重点**

之前在写医疗项目的时候，我和后端沟通以后，写了这么几个事件

1. **chatMsgList** 先在代码里面 socket.on() 监听这个事件，获取到之前的消息历史
2. 患者给医生发消息 **sendChatMsg** 事件；  医生端就监听这个事件
3. 患者可以接受别人的消息 **receivedChatMsg**事件； 医生端也可以监听这个事件
4. 还有一个获取消息是否读取状态的事件**updateMsgStatus**

ice19/yiliao_95

简介

发行版

贡献者

近期动态

ice19/yiliao_95 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

ice19/yiliao_95