技能点.md · 牛晓东/知识点总结

# 技能点  TS GIT CSS JS ！！！！

## 1.无限极分类代码

模型定义：

```js
const mongoose = require('mongoose')

const Schema = mongoose.Schema

const TypeType = {
    name:String,
    type_id:{
        type:mongoose.Types.ObjectId,
        ref:"type"
    }
}

const TypeModel = mongoose.model('type',new Schema(TypeType),'type')

module.exports =  TypeModel

```

无限极代码

```js
    const data = await DepartmentModel.find({}).lean()
    let treeObj = {}
    data.forEach(item => {
        treeObj[item._id] = item
    })
    let treeList = []
    data.forEach(item => {
        if (!item.depart_id) {
            treeList.push(item)
        } else {
            if (!treeObj[item.depart_id].children) {
                treeObj[item.depart_id].children = []
            }
            treeObj[item.depart_id].children.push(item)
        }
    })
```

## 2.前端处理字段不对应问题（映射）

```js
 const mapItems=(items)=>{
        return items.map(item=>{
            let newItem={
                title:item.title,
                key:item._id,
                children:item.children,
                value:item.title
            }
            if(item.children){
                newItem.children=mapItems(item.children)
            }
            return newItem
        })
    }
```

## 3.redux的使用

1. 下载

```
   npm i @reduxjs/toolkit
   npm i react-redux
   ```

2. 主文件

```js
   import {Provider} from 'react-redux'
    <Provider store={store}>
       <RouterProvider router={router}></RouterProvider>
       </Provider>
   ```

3. redux/index.js

```js
   import {configureStore} from '@reduxjs/toolkit'
   import cart from './cart/car'
   const store = configureStore({
       reducer:{
           cart:cart
       }
   })
   export default store
   ```

4. cart/car.js

```js
   import { createSlice } from '@reduxjs/toolkit'
   
   const Storage = {
       setStorage(key,value){
           localStorage[key] = JSON.stringify(value)
       },
       getStorage(key){
           return JSON.parse(localStorage.getItem(key))
       }
   }
   const cart = createSlice({
       name: "cart",
       initialState: {
           cartList: Storage.getStorage('carList') || [],
           detailsItem:Storage.getStorage('detailsItem') || {},
           isShow:false,
           spinning:true
       },
       reducers: {
           addCart(state, actions) {
               console.log(actions)
               state.cartList.unshift(actions.payload)
           },
           getDetailsItem(state,actions){
               state.detailsItem = actions.payload
           },
           changeIsShow(state,actions){
               state.isShow = actions.payload
           },
           changeSpinning(state,actions){
               state.spinning = actions.payload
           }
       }
   
   })
   export const {addCart,getDetailsItem,changeIsShow,changeSpinning} = cart.actions
   export default cart.reducer
   ```

5. 使用redux中的变量或者方法

```js
   import {useDispatch,useSelector} from 'react-redux'
   //方法
   const dispatch = useDispatch()
   dispatch(addCart(obj))
   //变量
   const isShow = useSelector((a)=>a.cart.isShow)
   ```

## sass  、less

## 4.无限滚动

```js
const [num, setnum] = useState(6)

window.onscroll = ()=>{
    if (document.documentElement.scrollTop + window.innerHeight > document.documentElement.scrollHeight - 1) {
      console.log(document.documentElement.scrollTop)
      console.log(document.documentElement.innerHeight)
      console.log(document.documentElement.clientHeight)
      console.log('加载中')
      setTimeout(() => {
        setnum(num + 3)
      }, 1000)
    }
  }
  
   {newGoodsList.slice(0, num).map(item => {
            return (
              <Item item={item} key={item._id}></Item>
            )
          })}
```

## 5.电话正则

```js
let reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
reg.test(props.phoneNumber)
```

## 6.react拖拽  react-draggable

1.移动端如果想要点击拖动元素 实现点击事件可以使用手指触摸  onTouchStart

2.移动位置之后 保存位置 同 onStop(event,data){} 可以获取到最后的位置   data ===> {x,y}

```js
import Draggable from 'react-draggable'

{wishList.map(item => {
                    return <Draggable
                        key={item.key}
                        position={{ x: item.x, y: item.y }}
                        // onDrag={() => {
                        
                        // }}
                        onStop={(event, data) => {
                            // setIsClick(true)
                            updateXYWish(item, data)
                        }}

>
                        <div
                            className='wishItemBox'
                            onTouchStart={() => {
                                updateWish(item)

}}
                        >
                            <img src={item.imgSrc} alt="" />
                            <span>{item.text}</span>
                            <button>x</button>
                        </div>
                    </Draggable>
                })}
```

## 7.react阻止事件冒泡

```js
onClick={(e)=>{
            e.stopPropagation()
          }}
```

## 8.小球动画

```js
import React, { useState, useRef } from 'react'
import './index.less'
 
export default function Drag() {
 
  // 此变量用来修改和定义小球的位置，小球的初始位置在左上角，位置可调
  const [balll, setBalll] = useState(0)
  const [ballt, setBallt] = useState(0)
 
  // 此变量用来修改和定义小球的动画
  const [tran, setTran] = useState('')
 
  // 获取小球DOM元素
  const ball = useRef(null)
 
  // 实现小球动画的函数
  const clickbtn = (e) => {
    console.log(e);
    // 修改小球位置，当触发点击事件时，将小球的位置修改为鼠标点击位置的X和Y轴
    setBalll(e.clientX)
    setBallt(e.clientY)
 
    // 设置小球动画
    setTran('left 0s, top 0s')
 
    setTimeout(() => {
      // 另一个动画
      setTran('left 1s cubic-bezier(.35,.8,1,1), top 1s ease-in')
 
      // 设置小球下一个要去的位置，也就是动画中演示的左下角。
      setBalll(20)
      setBallt(700)
    }, 20)
  }
 
  return (
    <div>
      <div id='ball' ref={ball} style={{ top: ballt, left: balll, transition: tran }}></div>
      <button onClick={(e) => clickbtn(e)}>按钮</button>
    </div>
  )
}
 
```

```css
 
#ball {
  width: 15px;
  height: 15px;
  background: #f4ad52;
  border-radius: 50%;
  position: fixed;
  z-index: 1000;
}
button {
  position: fixed;
  top: 100px;
  right: 0;
  z-index: 1000;
}
```

## 8.input输入框取消边框

```css
.conInp input {
    border: none;
}

.conInp input:focus {
    outline: none;
}

```

antd中的输入框是box-shadow

```css
.conInp input {
    border: none;
}

.conInp input:focus {
    box-shadow: none;
}
```

## 9.antd表单验证 规则自定义 使用正则怎么使用

#### Rule

```js
import { Form, Input } from 'antd';

// 定义一个函数，根据类型返回不同的验证规则
export const checkRules = (type: string) => {
  switch(type) {
    case 'telPhone' :
      return ([{ required: true, pattern: /^1[34578]\d{9}$/, message: '手机号格式不正确' }]);
    case 'idCard' :
      return ([{ required: true, pattern: /^(^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$)|(^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])((\d{4})|\d{3}[Xx])$)$/, message: '身份证格式不正确', }]);
    // 其他类型...
    default :
      return;
  }
}

// 在表单项中使用
<Form.Item label="姓名">
  {getFieldDecorator("name", { rules: checkRules('null') })(
    <Input placeholder="请输入姓名" onChange={e => this.inputOnChange("name", e.target.value)} />
  )}
</Form.Item>

```

## 10.JWT鉴权

```js
const jsonwebtoken = require('jsonwebtoken')
const secret = "kerwin"
const JWT = {
    generate(value,expires){
        return jsonwebtoken.sign(value,secret,{expiresIn:expires})
    },
    verify(token){
        try{
            return jsonwebtoken.verify(token,secret)
        }catch(e){
            return false
        }
    }
}

module.exports = JWT
```

```js
 const token = JWT.generate({
                _id: result[0]._id,
                username: result[0].username
            }, '1d')
			res.setHeader('Access-Control-Expose-Headers', 'Authorization')
            res.header("Authorization", token)
```

##### res.setHeader('Access-Control-Expose-Headers', 'Authorization')为什么要加这一句

`res.setHeader('Access-Control-Expose-Headers', 'Authorization')` 这一句代码的作用是允许前端在跨域请求时访问到自定义的响应头部，其中包括了 `Authorization` 头部。

让我们来详细解释一下：

1. **跨域请求**：在前后端分离的应用中，当前端页面从一个域名（例如 `http://localhost:3000`）向另一个域名（例如 `http://api.example.com`）发起请求时，就会涉及到跨域请求。浏览器会执行一些安全策略，限制跨域请求的访问权限。

2. **响应头部**：在服务器响应请求时，可以设置一些响应头部信息。其中，`Access-Control-Expose-Headers` 是一个用于配置跨域请求的响应头部。它指定了哪些自定义头部可以被前端访问到。

3. **Authorization 头部**：`Authorization` 头部通常用于携带用户的身份验证信息，例如 token。在你的应用中，后端可能会在登录成功后将用户的 token 添加到响应头部的 `Authorization` 字段中，以便前端获取并存储。

4. **为什么需要设置 `Access-Control-Expose-Headers`**：默认情况下，浏览器只允许前端访问一些常见的头部信息，例如 `Content-Type`、`Cache-Control` 等。如果你的后端在响应头部中添加了自定义的头部（例如 `Authorization`），浏览器会阻止前端访问这些自定义头部，以保护用户的安全。

通过设置 `Access-Control-Expose-Headers`，你告诉浏览器允许前端访问指定的自定义头部，包括 `Authorization`。这样，前端就能够正确获取到 token 了。

总之，`res.setHeader('Access-Control-Expose-Headers', 'Authorization')` 的作用是确保前端能够访问到后端设置的 `Authorization` 头部，以便获取用户的身份验证信息。

前端 util/axios.config.js

```js
import axios from 'axios'

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    const token = localStorage.getItem("token")
    config.headers.Authorization = `Bearer ${token}`
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    const {authorization} = response.headers
    authorization && localStorage.setItem("token",authorization)
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    // console.log(error)
    const {status} = error.response
    if(status ===401){
      localStorage.removeItem("token")
      window.location.href="#/login"
    }
    return Promise.reject(error);
  });
```

后端

```js
app.use((req,res,next)=>{
  // 如果token有效通过,next()
  // 如果token过期了，返回401
  if(req.url==='/adminapi/user/login'){
    next()
    return
  }
  const token = req.headers["authorization"].split(" ")[1]
  if(token){
    var payload = JWT.verify(token)
    if(payload){
      const newToken = JWT.generate({
        _id:payload._id,
        username:payload.username
      },"1d")
      res.header("Authorization",newToken)
      next()
    }else{
      res.status(401).send({errCode:"-1",errorInfo:"token过期"})
    }
  }
})
```

## 11.文本省略

### 单行文本省略

当文本超出容器宽度时，我们可以使用`text-overflow`属性来设置省略号。同时，我们还需要设置`white-space`属性为`nowrap`，这样可以防止文本换行。接下来，我们还需要设置`overflow`属性为`hidden`，这样超出容器宽度的文本就会被隐藏起来。下面是一个示例：

```css
.container {
  width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

### 多行文本省略号

首先，我们需要设置`display`属性为`-webkit-box`，并且设置`-webkit-line-clamp`属性为希望展示的行数。同时，我们还需要设置`-webkit-box-orient`属性为`vertical`，这样可以实现垂直排列的效果。最后，我们需要设置`text-overflow`属性为`ellipsis`，这样超出容器宽度的文本会被省略号替代。

```css
.container {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

### 文字在第二行出现省略号

有时候，我们需要在文字的第二行出现省略号。要实现这个效果，我们可以借助伪元素`::before`来生成一个看似是第二行的空白元素，并设置宽度和高度满足文本的第二行要求。具体代码如下：

```css
.container {
  position: relative;
  width: 200px;
  overflow: hidden;
}

.container::before {
  content: "";
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: -1em;  /* 与第一行文字的行高相等 */
  width: 100%;
  height: 1em;  /* 与第一行文字的行高相等 */
  background: linear-gradient(to right, transparent, #fff 50%);  /* 为了遮挡多余的文字 */
  pointer-events: none;  /* 禁用伪元素的鼠标事件 */
}

.container p {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
```

在上面的示例中，我们创建了一个容器，并使用伪元素`::before`生成了一个看似是第二行的空白元素。我们还需要设置容器的`position`为`relative`，这样伪元素的定位会相对于容器进行。通过计算伪元素的宽度和高度，我们可以让其覆盖到文字的第二行，然后使用背景渐变将超出的文字遮挡住。

## 12.Date.now()怎么转化为日期

```js
let timestamp = Date.now();
let date = new Date(timestamp);
如果你想将Date对象转换为特定的日期格式字符串，你可以使用Date对象的一些方法，如getFullYear(), getMonth(), getDate(), getHours(), getMinutes(), 和 getSeconds()等
```

## 13.查看指定的端口号是否被占用

查看占用端口号的是哪些服务

```shell
netstat -ano|findstr 3000
```

强制停止正在运行的端口号

```shell
taskkill -PID <pid> -F
```

## 14.数据滚动

```html
 <div className='homeLeftTwo'>
         <div className='homeLeftTwo2'>
            <p>asdgfadgfadfgasdfgadfg ad</p>
			<p>asdgfadgfadfgasdfgadfg ad</p>
			//......
          </div>
 </div>
```

```css
.homeLeftTwo{
    width: 100%;
    height: 200px;
    color: aliceblue;
    text-align: center;
    overflow: hidden;
}
.homeLeftTwo2{
    animation: scroll 250s linear infinite;
}
@keyframes scroll{
    0%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-100%);
    }
}
```

## 15.触底加载

> 原理：页面被卷去的高度+可视的Dom高度>=滚动条的长度
>
> ```
> //对应的Api各个部分对应的Api如下
> 页面被卷去的高度: 
> window.scrollY  ||  window.pageYOffset  || document.documentElement.scrollTop
> 
> 视口的高度:  document.documentElement.clientHeight
> 
> 滚动条的长度: document.documentElement.scrollHeight || document.body.scrollHeight 
> 
> (以上的Api都是在谷歌浏览器中使用的,其他的浏览器可能有一些不兼容,所以自己可以测试一下)
> ```
>
>

## 16.块元素垂直水平居中

>   方式1：[margin](https://so.csdn.net/so/search?q=margin&spm=1001.2101.3001.7020): auto + 绝对定位 
>
> ```css
> .wrapper {
>     position: relative;
>     background: yellow;
>     width: 500px;
>     height: 300px;
> }
> .block {
>     background: red;
>     width: 150px;
>     height: 150px;
>     margin: auto;
>     position: absolute;
>     left: 0;
>     right: 0;
>     top: 0;
>     bottom: 0;
> }
> ```
>
>

牛晓东/知识点总结

简介

发行版

贡献者

近期动态

牛晓东/知识点总结 .gitee-modal { width: 500px !important; }

简介

发行版

贡献者

近期动态

搜索帮助

牛晓东/知识点总结