# react2006A

**Repository Path**: wangjiepang/react2006-a

## Basic Information

- **Project Name**: react2006A
- **Description**: react宏业找房111111111
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 8
- **Created**: 2023-03-21
- **Last Updated**: 2023-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# platform-app

## 一、github flow （已经有 pr 暂未审核，但是还需要一个新的 pr,如何实现？）

cheery-pick 摘出来一个 commit id

## 二、配置 vis Code

1. 下载 Editor Config
2. .editorconfig

```js
# http://editorconfig.org

root = true

[*] # 表示所有文件适用
charset = utf-8 # 设置文件字符集为 utf-8
indent_style = space # 缩进风格（tab | space）
indent_size = 2 # 缩进大小
end_of_line = lf # 控制换行类型(lf | cr | crlf)
trim_trailing_whitespace = true # 去除行首的任意空白字符
insert_final_newline = true # 始终在文件末尾插入一个新行

[*.md] # 表示仅 md 文件适用以下规则
max_line_length = off
trim_trailing_whitespace = false

```

3. Prettier- code formatter (用户区)

## 三、git 规范化配置 + eslint

`参考文档：https://blog.csdn.net/weixin_47980825/article/details/127473686`

### husky 可以帮助我们在 执行 git commit 提交的时候，按照 eslint 规范进行修复代码。

husky 是一个 git hook 工具，可以帮助我们触发 git 提交的各个阶段：pre-commit、commit-msg、pre-push 支持所有的 Git 钩子

```js
npx husky-init && npm install

```

### commitizen

`定义:是一个帮助我们编写规范 commit message 的工具。`

1. 安装

   > npm install commitizen -D

2. 安装 log: cz-conventional-changelog

> npx commitizen init cz-conventional-changelog --save-dev --save-exact

3. 安装 commitLint,防止用户跳过不规范提交

> 3. 安装 npm i @commitlint/config-conventional @commitlint/cli -D

```js
// commitlint.config.js
module.exports = {
  extends: ['@commitlint/config-conventional'],
}
```

### 通过以上安装，git 提交模式代码如下：

```js
// git 提交步骤：
npm run cz
git pull
git push
```

## 四、 服务器部署

### 一、项目部署介绍：前后端分离开发

前端：vue npm run build -> dist 目录(html/css/js/images...) -> nginx 服务器的静态服务读取目录下
后端：egg -> npm run dev -> 把代码传到服务器上，执行 -> npm run start
数据库部署： 线上开启一个 mysql 数据库自己可以创建账号密码

### 二、服务器介绍

1. 阿里云 （推荐）虚拟空间（2g, 1 核心 40g）
2. 腾讯云
3. 华为云
4. 七牛云

```js
// 1. 购物服务器虚拟空间 (选择安装系统 centerOs ubantu)

// 2. 给这个虚拟空间安装系统界面和工具（宝塔工具）

// 3. 创建数据库mysql

// 4. 上传代码（后端，前端）

// 5. 部署启动
```

外网面板地址: https://47.101.45.245:42595/9e253d29
内网面板地址: https://172.19.115.82:42595/9e253d29
username: ed5yohgs
password: 4a31ba72

## 五、安装 nvm nvm 管理 node 版本的管理器

nvm ls 列举当前所有的 node 版本

nvm install v18

nvm use v16 切换 node 版本号

## 六、pm2 进程管理

可以让当前的服务在服务器上持续运行

## 七、上线

1. 前端打包管理
2. 后端进程管理 pm2

## 八、mysql 连接问题讲解（是否开放端口？）端口开发 3306 默认端口（workBench）

https://dev.mysql.com/downloads/workbench/

## 九、vue3 知识点：

一、vue2 vue3 基本区别

vue2 面条式写法

二、合成 api(composition Api)

提取自定义 hooks

三、优点？

四、mitt

五、 Elment-Plus（1. 全局引入 2. 按需引入）

1. ElementPlus 按需引入（JS 代码默认支持基于 ES modules 的 摇树 tree shaking;）

```js
// 引入未使用代码
```

2. css 引入

```js
css 代码需要一次性引入
import 'element-plus/dist/index.css'

```

## 十、vue i18n-> 国际化 功能引入 （internationalization）

`https://vue-i18n.intlify.dev/guide/`

1. 安装 npm install vue-i18n@9
2. 新建一个 i18n 配置文件，配置 i18n 功能

## 十一、vue3 自定义指令开发

## 十二、egg 代码开发

## 十四、前端暗夜模式实现

## 十五、自定义指令（focus, img-load）

## 十七、字体切换

定义：font-face 是 css3 中允许使用自定义字体的一个模块，他主要是把自己定义的 Web 字体嵌入到你的网页中。

```css
/* @font-face {
      font-family: <YourDefineFontName>;
      src: <url> [<format>],[<source> [<format>]], *;
      [font-weight: <weight>];
      [font-style: <style>];
    } */

@font-face {
  font-family: 'Slidefu';
  src: local('Slidefu'), url(./assets/fonts/Slidefu-Regular-2.ttf) format('truetype');
}

font-family： 为载入的字体取名字。

src： [url]加载字体，可以是相对路径，可以是绝对路径，也可以是网络地址。[format]定义的字体的格式，用来帮助浏览器识别。主要取值为：【truetype(.ttf)、opentype（.otf）、truetype-aat、embedded-opentype(.eot)、svg(.svg)、woff(.woff)】。

WOFF
WOFF是Web Open Font Format几个词的首字母简写。这种字体格式专门用于网上，由Mozilla联合其它几大组织共同开发。WOFF字体通常比其它字体加载的要快些，因为使用了OpenType (OTF)和TrueType (TTF)字体里的存储结构和压缩算法。这种字体格式还可以加入元信息和授权信息。这种字体格式有君临天下的趋势，因为所有的现代浏览器都开始支持这种字体格式。
SVG / SVGZ
Scalable Vector Graphics (Font). SVG是一种用矢量图格式改进的字体格式，体积上比矢量图更小，适合在手机设备上使用。
EOT
Embedded Open Type。这是微软创造的字体格式。这种格式只在IE6-IE8里使用。
OTF / TTF OpenType Font 和 TrueType
Font。部分的因为这种格式容易被复制(非法的)，这才催生了WOFF字体格式。然而，OpenType有很多独特的地方，受到很多设计者的喜爱。

```

## 十八、配置路径别名（配置全局 scss 文件）看 vue.config.js 代码

## 十九、scss 命名规范和项目引入规范

> 如果需要导入 SCSS 文件，但又不希望将其编译为 CSS，只需要在文件名前添加下划线，这样会告诉 Sass 不要编译这些文件，但导入语句中却不需要添加下划线。

> 例如，将文件命名为 \_color.scss，便不会编译成 \_color.css 文件。

> @import "colors.scss" 导入的其实是 \_colors.scss 文件

### scss 如何让全局代码在所有的.vue 文件中生效

<!-- @import './assets/css/_mixin.scss'; -->

vue.config.js

`如何让以上代码在全局生效，不用每个.vue文件都引入`

## 前端路由 history 和 hash 的区别及封装

## [markdown 编辑器](https://www.wangeditor.com/)

---

## 规范：

前端规范之 JS 代码规范（ESLint + Prettier）
前端规范之 CSS 规范（Stylelint）
前端规范之 Git 提交规范（Commitizen）
前端规范之 Gti 工作流规范（Husky + Commitlint + Lint-staged）

## 十六、plugins

第二周答辩 vue 知识点总结：

```js

1. 自定义指令（图片懒加载，focus 自动聚焦）

2. 自定义hooks（切换暗夜模式，切换国际化，登陆逻辑）-> 复用逻辑

3. mitt 兄弟组件通信

4. 插件机制

5. i18n国际化

6. 插槽（upload）

7. 工程化组件注册（快速注册使用组件）

8. transition 组件使用

9. keep-alive 缓存组件 => 想缓存谁，不想缓存谁

<keep-alive include="a,b" >
  <router-view></router-view>
</keep-alive>

<KeepAlive exclude="c">
  <component :is="activeComponent" />
</KeepAlive>


```

## 多人编辑之 socket.io/socket.io-client

```js
emit 发送
on 监听
// vue:
1. npm i socket.io-client@2.3.0 -S

import mySocket from 'socket.io-client'
// 2.建立websocket连接
const socket = mySocket('http://127.0.0.1:3000')
// 3. 发送消息（生命周期发送默认消息）
onMounted(() => {
  socket.emit('enterMarkdown', { name: valueHtml.value })
  handleMarkdown()
})
const handleMarkdown = debounce(() => {
  socket.on('enterMarkdown', (data) => {
    console.log('dataA=:', data)
    valueHtml.value = data.name
  })
}, 500)


// koa:
1. npm i socket.io@2.3.0 -S

const socket = require('socket.io')

const io = socket(server)
// 监听socket是否连接成功了
io.on('connection', (socket) => {
  // 1. 自定义了一个监听事件，后端在监听
  socket.on('enterMarkdown', (data) => {
    console.log('进入了一个markdown编辑器', data)
    // 告诉其他前端进来的人
    socketUser[data.id] = socket.id
    onlineUser.push(data.account)
    onlineUser = Array.from(new Set(onlineUser))
    let sendObj = {
      name: data.name,
      onlineNum: onlineUser.length,
    }
    // 广播给前端
    io.sockets.emit('enterMarkdown', sendObj)
  })
})

```

vue 设计与实现

## 项目开发思考

1. 框架选择 vue3+ts
2. 规范化选择 IDE/Eslint/Prettier/git 规范
3. css 规范 （reset.css/Normalize.css）-排版规范
4. 路由 规范（meta 信息，导航守卫，）
5. 状态管理规范 vuex
6. 组件规范（基础组件 和 业务组件）二次封装-element-plus
7. 业务效果
8. 工具函数（utils: ajax,lodash...）
9. 代码优化审核
10. 打包上线（上线环境区分）开发环境-本地，测试环境-测试服务器，生产环境-正式服务器

## **前端**路由原理核心讲解

路由-> 后端路由

```js
router.get('/api/test', async (ctx, next) => {})
// 传递数据的，就是接口
router.post('/api/test', async (ctx, next) => {})

// 前端框架-> 传递页面的，就是路由。
前端模拟路由实现：hash值-> hash路由

http://localhost:8080/#login

http://localhost:8080/#home

前端采用了hashChange方法

```

1. history
2. hash

## 递归组件

## 1. 第三方 auth 登录

`https://gitee.com/api/v5/oauth_doc#/`
`https://www.ruanyifeng.com/blog/2019/04/oauth-grant-types.html`
第三方授权 oAuth2.0 技术

给一个临时授权，帮助从第三方获取到当前用户登录信息，然后实现登录调整

1. 在**登录**页面->点击第三方按钮
2. code 获取(第三方给的 code)
3. 第三方会重定向（跳转）到本地后台
4. 本地后台拿到 code，然后请求接口（一般第三方后台提供，获取 access_token 接口，获取身份信息的接口）
5. 本地后台处理完以上信息之后，重新跳转到前台**首页**。

## 2. 图片组件语法更新

## 3. 评论组件

## vue2 和 vue3 v-model 原理解析

```js
// vue2
<nva-bar v-model="value"></nva-bar>
<nva-bar :value="value" @input="input"></nva-bar>

- value => modelValue
- input => update:modelValue

// vue3
<nva-bar v-model="value" v-model="tabIndex"></nva-bar>
<nva-bar :modelValue="value" @update:modelValue="input"></nva-bar>
```

`注意: vue2上v-model 只能使用一个，vue3上可以使用多个v-model`

## 项目调试接口连接

1. 后端解决跨域（egg-cors）

axios.create({
baseURL:process.env.VUE_APP_EGG_URL
})

2. 后端没有解决跨域，前端解决跨域（proxy） nginx

```js
devServer: {
  proxy: {
    '/api': {
      target: process.env.VUE_APP_EGG_URL,
    },
  },
},

// nginx 项目上线之后，nginx做代理。
```