# s_1809A_gao6

**Repository Path**: wyp0712/s_1809A_gao6

## Basic Information

- **Project Name**: s_1809A_gao6
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-04-19
- **Last Updated**: 2025-01-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# s_1809A_gao6


## day1 js运行原理

## day2


1. 配置用户名 git config --global user.name "your name"
2. 配置用户邮箱 git config --global user.email "your_email@youremail.com"
3. 生成密钥 ssh-keygen -t rsa -C "1240847112@example.com"
4. 找到密钥 .ssh文件夹中的 id_rsa.pub 粘贴其中的代码，放置在 github gitlab 码云下的设置中的配置ssh的地方；

  cat ~/.ssh/id_rsa.pub
- git  （`所有的git操作之前请一定先 清空工作区域`）

1. 创建仓库
2. 克隆仓库

  git status 查看当前文件修改状态
  git add . /单个文件或者多个文件名字

  git commit -m "add"

  - add: 新增文件             将工作区域文件 提交到暂存区域
  - remove: 删除文件或者功能   将暂存区域文件 提交到本地仓库
  - update: 更新文件或者功能
  - batch： 批量修改文件

  git pull  先拉取后推送
  git push  将本地仓库代码文件 提交到远程仓库



- 编辑器源代码管理工具操作 git;

  1. 黄色 代表修改
  2. 绿色 代表新增
  3. 紫色 代表冲突 （多了一种操作，手动修改当前的冲突，然后提交）


- 分支操作

  创建分支
  git checkout -b feture_student
  切换分支
  删除分支


- 分支命名：

master -  主线分支


feature  功能分支  feature_student

release_01  发布分支
release_02

project  项目分支 project_qingdao

项目上线之后
fix     修复分支


## day3

vue 数据双向绑定原理

写代码：

1. 关注数据（接口）
2. 关注ui视图（组件）
   - 基础组件
   - 业务组件（交互） --- 触发方法
3. actions/mutaions

- 组件传参：

1. 关注数据 data() {}
2. 关注ui
3. 组件传参：（数据往下流、逻辑往上走）

数据往下流  父传子（单向数据流）
逻辑往上走  子传父 （$emit,所有的逻辑都交给父组件处理）

**api封装和axios二次封装**

****

## day4:

**require.context**

1. 定义：webpack的api,自动全局注册，组件，

```js
const requireComponent = require.context(
  './echarts',// 其组件目录的相对路径
  false,// 是否查询其子目录
  /[A-Z]\w+\.(vue|js)$/, // 匹配基础组件文件名的正则表达式
)

requireComponent.keys().forEach(fileName => {
  const componentConfig = requireComponent(fileName)
  // 获取组件的 PascalCase 命名
  const componentName = fileName.split('/').pop().replace(/\.\w+$/, '')
  // 全局注册组件
  Vue.component(
    componentName,
    componentConfig.default || componentConfig
  )
})
```

功能：
- 全局注册图表组件
- svg-icon （svg-sprite-loader）（不做要求）

**Vue.use 这个组件的注册他干了什么？**

import ElementUi from ''
Vue.use()

 vue.use讲解自动调用install方法
1. 封装一个toast轻提示组件

- 如何调用toast/message组件

<Message /> vue.component
this.$message.show('')
Vue.prototype.$message = {
  show() {},
  hide() {}
}
- 以上两种调用方式，需要通过Vue.use进行统一处理
Vue.use自动调用一个install方法

**font字体引入**

h5新特性：@font-face {} 服务端字体


**image组件封装**

基础组件：imageview / button / input / select / icon
业务组件：form table page search upload carousel ....

**vuex模块化**

1. module

   namespaced: true, 命名空间
   state: {}....



## day4-react-ts

#### typescript


1. 定义： ts是js的一个超集；
2. 作用：类型规范（interface/type/泛型）

**ts运行环境讲解**
npm i typescript -g

tsc -v

npm i ts-node -g

ts-node -v

初始化生成ts运行环境
tsc --init

/**
 * ts的类型校验功能
 *
 *  1. 数据类型 （基本 引用）
 *  2. 函数数组
 *  3. @修饰器
 */

#### create-react-app ts-app
下载自带的react ts框架
create-react-app react-ts --template typesript


1. 路由导航与原生浏览器操作一致 hash history
   <BrowerRouter></BrowerRouter>
2. 路由的路径解析原理与原生浏览器一致，可以自动识别url
   <Route></Route>
3. 路径的切换以页面为单位，不要页面堆叠
   <Switch></Switch>

#### hooks

## day5

**react Hook**

- react hook 代替两个东西：
1. 状态
2. 生命周期

- react hook形式：
  useState： 获取状态，设置状态
  useEffect： 生命周期，watch
  useRef:  操作dom

  useContext: 嵌套组件传值
  useReducer (useState)：

  优化：一般优化子组件的不相关的render;
  useMemo: 包装逻辑，优化逻辑
  useCallback：优化函数返回值（回调函数-传入了子组件） （优化useMemo的书写形式）

  自定义Hook： 以use开头的一个函数；

1. todo-list案例

2. 组件优化


- react 组件代码组织规范：

  一个文件夹：
  1. 导出文件 index.ts
  2. 多个组件文件
  3. css样式文件：styled-components (css in js 方案)

- react hook 文档：
https://www.jianshu.com/p/1252be39c702?from=timeline

**移动端页面适配**
html ===> rem:相对单位：（定义：是一个根据根节点字体大小变化而变化的一个字体单位）

html {
  font-size: 250px;
}

250px = 1rem


**组件懒加载(路由)**


## day6

1. typescript

推断类型（自带的）


**注解类型**
1. 注解方式：接口注解/type注解/泛型注解
2. 注解文件类型 index.d.ts


**注解ts类型规律总结**
3. 注解都在源头上，（定义的时候，就要注解）
4. 注解如果在操作上，特殊情况可以使用断言方式，（indom as any）
5. 如果涉及到后端传递过了的数据，可以使用any注解:  any[]


**redux: / react-redux / redux-thunk / redux-saga**

1. 三大原则：
 - 单一数据源
 - 数据只读（）
 - 需要通过reducer纯函数修改（什么是纯函数，为什么return一个新地址对象）



redux跟组件的数据没有关系


## day7:
(redux关联-国际化-登陆-业务场景)
**i18n**
语言切换功能完成

i nternationalizatio n 国际化：

- 原理：
1. 将语言包作为静态资源单独保存在项目中，xml/json格式 （估工期）
2. 每一种语言对应一个文件
3. 切换语言设置，随之更改语言文件 （redux/vuex/dva/mobx）

- I18n工具
  1. i18next: 目前的主流框架(vue-i18n)
  2. react-i18next: i18next的react插件

- 使用：
  1. npm i i18next  react-i18next -S


**redux完成语言切换功能**

1. 两种组件

- class组件 withTranslation WithTranslation
  WithTranslation： 注解文件 跟其他的注解文件是平行关系
  withTranslation: 将当前的props中，注入t函数
  class Header extends React.Components<RouteComponetProps & WithTranslation, State>
  // 联合类型
  Parcel<RouteComponetProps & WithTranslation>
  如果要先使用路由功能，再使用i18n功能，
  withTranslation()( withRouter(HeaderComponent) )

- FC组件：useTranslation
  const { t } = useTranslation();

- 关联redux功能实现语言切换；

  class组件： react-redux { connect }

  FC组件：
  import { useSelector } from 'react-redux'
  const {} = useSelector((s: 解决详细注解s参数问题？) => s.store)


- 如何注解useSelector中的store参数； （优化手段）

 如果要注解一个东西。就必须明白当前的这个东西到底是干什么用的？
 1. useSelector的作用是取数据（store.getState()）
 2. 说明我当前想要的是store.getState的返回值，
 3. 可以使用ts提供的一个反向注入ReturnType<typeof store.getState>
 4. 在store文件中。定义type RootState = <typeof store.getState> 并且抛出;
 5. 每次在引入的时候，都取拿上store文件中的RootState去注解组件，会造成组件和store数据的耦合。
 6. 为了解决以上问题，引入了一个自定义Hook文件，hooks。
  ```js
  // redux/store.ts
  export type RootState = ReturnType<typeof store.getState>

  // redux/hooks.ts
   import {
     useSelector as useReduxSelector,
   TypedUseSelectorHook } from 'react-redux'
   import { RootState } from './store'
   // 包装一个已经注解好的useSelector，然后抛出。这样子在组件内部就可以不用每次跟store数据耦合了
   export const useSelector:TypedUseSelectorHook<RootState> = useReduxSelector;
  ```

**class组件**

**函数组件**


## 安排：

1. 微信读书案例；

2. 组件库封装： ts ->  pc组件库

- 基础组件

  Button
  icon
  menu
  upload

- 业务组件

3. zarm  / antd-moile

4. dva学习：redux + react-rouder + fetch (redux-saga)

5. umi学习：dva + antd + antd-mobile ....
   - 路由
  ```js
  import { useDispatch, useHistory } from 'umi';

  ```


## 微信读书：（组件/功能开发/接口）


1. 分组弹出框  0.5
2. 封装一个图片基础组件 0.5
3. 页面：书架页面   2

1. 编辑/分组  1


4 + 2 = 6；


工程组织：

pages/views
components
store
hooks
utils
api


header
  - index.ts
  - Header.tsx
  - .scss/css/styled-components

server + nginx部署  （egg）


官网 - 贝壳找房/旅游网/易车网

1. 图片
2. 轮播图
3. 按条件搜索

后台系统：

前台展示系统：

## day9:

设计模式：一种经验总结；24种设计模式；

观察者 模式：最重要；

face: 观察者模式 和 发布订阅模式？


scss: 局部文件命名以_sass命名

_style.scss 引入不需要加_

**icon-fon字体网站**
https://fontawesome.com/how-to-use/on-the-web/using-with/react

button组件封装，
icon组件封装

**icon字体演变**

1. 精灵图      ---> png
2. font-icon  ---> svg


## umi-app

1. 路由（约定路由/配置路由）
2. redux () - saga - dva
3. 配置 --侧边antd  / 权限路由配置（navLink+token）
4. 自定义hook


## 微信小程序：
`https://mp.weixin.qq.com/`

1. 注册小程序  （）
2. 下载微信开发者工具
3. 进入微信公众开发平台 （选小程序）
4. 查找用户的appId

## umi-app

1. 路由 （配置/约定）
2. dva(redux (redux-saga) 异步)
3. 插件机制
4. 自定义hook dva umi { useDispatch, useHistory, useSelector } from 'umi';


## 数据流解决方案（状态管理器）

vuex

redux
dva
mobx


#### mobx 数据流解决方案：

1. 存数据
2. 取数据
3. 更新数据 （更新ui渲染）

实现以上三种的方式不同？
1. 可观测 数据
2. 可观测 行为
3. 更新数据

安装方式：
1. tyarn add mobx
2. tyarn add mobx-react
3. 开启装饰器模式  @ --- class组件上

原理：任何源自应用状态的东西都应该自动地获得。

- mobx数据流解决方案步骤

1. 定义可观测的数据   class  observable
2. 定义一个可观测的组件 observer
3. 定义一个可观测的行为；？action


store ---- -----
 |              |
 |              |
 |              |
ui渲染 ------ 可观测行为

### nginx：反向代理，静态资源

1. 静态资源服务器？

  html/css/js/img/video/audio.... 网站 --- 发布

2. 服务器要能读取网站的所有资源， java/php(phpmyadmin) www/


3. node服务器 http.createServer((req, res) => {})

   proxy: { 代理 }


4. nginx 静态资源读取服务器 / 反向代理


mac电脑安装nginx (brew install nginx)


#### 服务器上：

1. 前端代码

vue/react

2. egg-server代码

egg

3. 跨域问题：同端口/同协议/同域名 （浏览器）

4. 服务端接口跨域  cors() 加了一个头 Access-cltrol-allow-origin: 47.101.45.245

axios二次封装

axios.craete({
  baseURL: 'http://47.101.45.245:7001'
})

axios.get('/api/user')



#### json-server 静态资源服务器： mongdb

1. 支持restFul api


#### 大屏拖拽：

- 工具构成：

1. 技术栈：react + mobx + react-beautiful-dnd + echarts/hightcarts/datav + grid布局 + json

2. 功能点分析：

  - 组件可拖拽
  - 布局可控制（row col） dnd --->  json ---->  grid (24 / 24 -> 12/24 -> 8/24)

  - 样式：

    - 要求每个组件都是-可拖拽实现的
    - 要求可以动态获取当前组件的-数据
    - 要求当前大屏数据可视化的布局，可定制，row col --> json

  - 数据：

    onDragEnd(item) {
      return <div></div>
    }

3. - 要求数据可设置：（展示数据-/富文本编辑json） 弹出框展示



## umi-app;

#### 权限场景：

**路由级别的权限**

  核心处理路由表：

  umi-app: 处理侧边栏的a标签； <Routes /> 渲染

  [
    {
      path: '/amdin'
    },
    {
      path: '/posts'
    }
  ]

  http://localhost:8080/posts  404页面 / 403页面

  基于token做一个导航守卫功能；


```js
const routes = [
    {
      path: '/amdin',
      auth: [0, 1],
      children: [
        {
          path: '/amdin',
          auth: [0,1],
        }
      ]
    },
    {
      path: '/posts',
      auth: [0]
    }
  ]

1. 定义路由表权限字段

2. 封装一个递归的过滤函数

 const filterRoutes = (routes, userId) => {
   // 1. 处理第一层数据
   const filterArr = routes.filter(v => v.auth.indexOf(userId) !== -1)

   filterArr.forEach(item => {
     item.children = (item.children && item.chidlren.length && filterRoutes(item.children, userId))
   })

   return filterArr;
 }
  // userId :  0
 const filterRoutes = filterRoutes(routes, 0)
```

3. vue框架。

  - Router.addRoutes(filterRoutes)

  - react 数组操作就可以了
  // js
  const config = () => {
    return {
      [

      ]
    }
  }

  // json
  [{}] JSON.parse(JSON.stringify())


**组件级别的权限**

组件 --- data ---

HOC()
自定义Hook

const useMyComponent = (userId) => {
  if(userid === 1) {

  } else {

  }
  return []
}

 cosnt [] = useMyComponent(icon)
  data.map(item => {
    return HOC(itme.auth)(<Icon />)/> HOC(item.auth)(<<input /> />)/> <button></button>
  })



#### jira 项目 （管理项目/管理人员/管理接口）

- 技术栈：umi + echarts + dnd

- 安装包：react-beautiful-dnd / antd / echarts / highcharts / datav

- 功能点分析：
 1. 项目过滤/负责人过滤
 2. 项目拖拽/项目看板


#### 错误边界：

定义：部分 UI 的 JavaScript 错误不应该导致整个应用崩溃，为了解决这个问题，React 16 引入了一个新的概念 —— 错误边界。

`解释：一处js代码错误，可能会导致整体react渲染树被卸载掉，出现了一个大白屏效果，用户体验比较差，导致客户流失，为了解决这个问题，有了错误边界`

特点：捕捉ui渲染错误，不能捕捉异步错误

方式：生命周期捕捉

```js
 // 负责捕捉 ui错误， 不能在当前的生命周期中放置异步方法
  static getDerivedStateFromError(error) {
    return { error: true }
  }

  // 可以在生命周期中放置异步方法
  componentDidCatch(error, errorInfo) {
    // 你同样可以将错误日志上报给服务器
    // logErrorToMyService(error, errorInfo);
  }
```

使用场景：
1. 开发环境不需要，
2. 一般 上线之后解决捕捉错误提示

（上线之后）
1. 错误边界
2. ...


#### 错误捕捉总结：

错误类型：
1. 工程化错误 （配置错误）
2. 组件渲染错误（代码错误）
3. 接口错误 （后台异步请求错误）

解决方案：
1. 通过webpack配置解决 devtools调试模式/可以进行node层面的错误捕捉
2. 组件渲染错误捕捉（错误边界（生命周期-参与渲染）  / ts强类型注解
3. promise .catch / axios二次封装捕捉错误状态码


html页面错误：

1. 层级错误（定位，脱离文档流）
2. 优先级错误 class id span
3. ui样式错误：样式穿透 sass/less/stylus

span
  width: 100px
  height: 100px
   a
    color: red


#### vue3语法：

**合成api  compositionAPI**


- 组件  sfc组件
- setup函数写法   setup(props, context) {  }没有this
- 数据写法

  ref      基本类型
  reactive 引用类型

- 路由写法

  useRouter
  useRoute

- 仓库写法

  useStore


- 生命周期 onMounted ....
- 组件传值


### tsx写法

index.vue  --sfc--  index.tsx/jsx

import {} from 'vue'