# s_1808A_高级nodejs

**Repository Path**: wyp0712/s-1808-advanced-nodejs

## Basic Information

- **Project Name**: s_1808A_高级nodejs
- **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-02-18
- **Last Updated**: 2022-12-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# s_1808A_高级nodejs


## day1: 第一天笔记：

#### git笔记 （所有 git操作之前 一定要清空工作区域）

1. git是什么？分布式代码管理 工具
   （代码仓库：码云 - github - gitlab）

   git 可以实现基于以上的仓库的代码管理

   git clone ssh
   git checkout -b dev
   git status 检查代码修改情况
   git commit -m "代码修改情况说明"
   git pull 重新拉取一下代码：（团队开发，防止别人代码已经提交了新的代码）
   git push 提交

2. git工作流：(面试题)

- 工作区 workplace：
- 暂存区          ：git add
- 本地仓库        : git commit -m ""
- 远程仓库        : git push


3. git分支管理：
  git checkout -b <name> 创建并且切换到对应分支上
  git push
  git log 查看commit日志 （一旦输入这个代码，会进入编辑状态,输入wq回车 退出当前编辑区域）
  git push --set-upstream origin <dev>

  git checkout master

  git merge 合并代码 （如果你想用master合并dev。一定要先切换到master分支上）


4. git 安装 / 密钥填写

  cat ~/.ssh/id_rsa.pub 拿到密钥。复制到远程仓库中。就可以将本地代码和远程关联上了




#### nrm 切源工具

1. 安装nrm切源头工具
   npm i nrm -g 全局安装
2. nrm命令：
   nrm ls 列举出所有的源
   nrm use <name> 切换源

#### npm 包管理工具  编写一个包，并且发布到npm官网上

 1. 注册npm官网账号
 2. 邮箱一定要验证（先验证邮箱在提交代码）
 3. 编写包 node 包  CommonJS规范
  ```js
  `1.  npm init -y `
  `2. package.json是什么？ 包管理文件`


  ```
 4. 登陆官网 npm login (账号/密码/邮箱)
 5. 发布包 npm publish  1.0.0
 6. 更新包  1.0.1  npm publish
 7. 删除包 npm unpublish <bao-name> --force


## 第二天笔记： node命令行工具开发

1. 命令行工具是什么？   命令  行 ：运行在终端中一行的一种操作命令

  vue create
  create-react-app my-app --tempalte typescript
  vue add element-ui
  nrm ls / nrm use
  npm i jquery -D / -S

2. 如何开发？

```js
1. 创建文件一个文件 ，文件可以是一个没有/有（.js）后缀的文件; npm init -y
www.js
www

2. 指定环境变量
#!usr/bin/env node

3. 在package.json文件中 执行运行字段：bin: {} 映射相应的文件  bin: 启动命令字段
 bin: {
    'vue' : './bin/www'
 }
  "bin": {
     "my-vue": "./bin/www"
  },
  // 只要我在控制台输入my-vue这个命令，就能去执行 后面对应的文件内容，前提是已经执行了npm link

4. 执行npm link 命令 ，生成全局命令
 npm link

5. 编写命令所需要的代码




```

## day3天笔记：

#### 回顾知识：

1. npm 发包
2. node命令行工具编写
3. fs path

#### 异步解决方案 四种解决方案：

1. 回调函数          ----->   vue --- vuex (actions)  redux-thunk: dispatch(() => {}) / dispatch({})
2. promise          ----->

   actions: {
     UpdateToken({ commit }, data) {
       return new Promise((resolve, reject) => {
          axios.get('/api/user', res => {
            commit('')
            resolve({code: 0, msg: 'success'})
          })
       })
     }
   }

   import { mapActions } from 'vuex';

   methods: {
      ...mapActions(['UpdateToken'])
      handleClick() {
         this.UpdateToken()
         .then(res => {
           // 获取到异步解决的结果
           this.$router.push()
         })
      }
   }

3. *   redux-saga  异步解决中间件 （*函数）
4. async await

koa 后台框架


#### koa 一代web框架：

1.安装
npm i koa -S

2. koa中间件执行顺序遵循 洋葱圈模型 规律

#### 2. nodemon
npm i nodemon -g
/ npm i nodemon -S

#### 3. 洋葱圈模型

#### 4. restful api

#### 5. 路由：


router.allowedMethods();
1. 检测服务器所支持的请求方法
接口上写了 get,post 等方法, 用户想知道接口上支持什么方法可以用 options 方法来请求
在 Headers 返回体里有个 allow 字段, 代表返回的接口允许的方法
2. CORS 中的预检请求
这个方法可能只支持网站的部分接口部分方法的跨域
所以如何知道某接口是否可以跨域,所以可以用 options 方法来检测
如果允许再发出真实请求

#### 模块化规范


#### day4 笔记：

- 回顾知识：
  1. koa 起服务 web框架 后台框架
  2. koa-router 路由   / 写接口
  3. koa-服务器数据收集
  4. 命令行工具搭配koa使用

- 数据库知识：

1. 安装：mysql软件
   安装可视化操作mysql软件

mysql安装地址:
`https://dev.mysql.com/downloads/mysql/`
workbench安装地址：
`https://dev.mysql.com/downloads/workbench/`

数据库：
硬盘数据库/内存数据库
（mysql/moongdb）  存储容量大
 (redis)          运行速度快/存取速度快
mysql / mongodb
mysql:关系型数据库（表table）
mongodb: json数据库 （json）


2. 数据库存储数据类型：

- 整数类型；Int
- 字符串类型：Varchart()
- 时间类型：DateTime()    NOW()

3. 数据库操作：

node包：mysql操作数据库的一个包；
- 创建连接池
- 查询  pool.query(sql)

4. sql语句：

 查询：
 删除：
 更新：
 修改语句：
 分页查询/倒序查询/模糊搜索查询/多条件/精确条件（且条件/或条件）


## day5笔记：

1.  koa框架目录生成器：
npm i koa-generator -g

koa1 / koa2

2. koa2 <文件名字>

3. 安装依赖 npm i

4. 跨域：
  - ajax ----> XMLHttpRequest 前后端交互的一个工具；/ axios
  - 什么是同源策略？
```js
   同端口/同协议/同域名
   http/https:// s ssl证书
   www.baidu.com
   /访问地址
   ? 参数

  https://www.baidu.com/baike/yangmi?gender=0&t=jc
  // http 默认端口：80 对外访问端口
  // https:// 默认端口：443
  // ip ---> 域名；
  // localhost : 127.0.0.1

  // DNS解析：计算机上浏览器会将 域名通过DNS解析解析查找到ip

  // dns解析的时候，会查找一个文件 c: window32/system/drivers/etc/hosts



  http://localhost:3004/api/login


  如果访问地址，碰到了，非同端口/同域名/同协议；就会产生跨域现象；
```

5. 如何跨域？

 - 前端跨域

   代理跨域：
  ```js
   proxy: {
      "/api": {
        target: 'http://localhost:3004', // 后端地址
        changeOrigin: true, // 是否改变域名
        ws: true // 是否支持 ws协议 websocket
        // pathRewrite: { 路径重写
        //   // 路径重写
        //   "/api": "" // 这个意思就是以api开头的，定向到哪里, 如果你的后边还有路径的话， 会自动拼接上
        // }
      }
    }
  ```

 - 后端跨域
   设置响应头：
   Access-Control-Allow-Origin: '*' 允许任何人访问；





## 作业：

- day5:
  1. 书写返回模型
  2. 练习接口 6个接口
  3. vue 访问 代理访问：
  4. /api/login (返回token)---->
  5. /api/userInfo （用户信息接口 nickname/gender/avtar/address） (带token访问)

登陆页面-要求先访问登陆接口。token存储本地存储
然后跳转进入首页-访问用户信息接口。并且渲染用户信息



## day6: koa - blogs开发

用户增删改查

- 表结构设计：
1. users表

 id:       Int  pk nn ai
 username: Varchart(200)
 password: Varchart(60)
 userid: 身份 0:超级管理员 / 1： 普通人员
 createTime: BIGINT(13)
 updateTIme: BIGINT(13)  13位时间戳

2. blogs表
 id:
 title:
 content: LongText
 createTime: BIGINT(13)
 updateTime: Bigint (13)
 author: id表示 （userid）

 type:   文章类型： 0：web前端 1：nodeJS 2：后台 3: js 4: 运维


- 接口设计：规范


1. 登陆  /api/login
2. 注册 /api/register
3. 作者添加接口： post   /api/user
4. 作者删除接口： delete /api/user/:id
5. 作者修改接口： put    /api/user/:id
6. 作者查看接口： get    /api/user

7. 博客列表接口： get      /api/blogs
8. 博客详情接口： get      /api/blogs/detail/:id
9. 博客修改接口： put      /api/blogs/:id
10. 博客增加接口： post     /api/blogs
11. 博客删除接口： delete   /api/blogs/:id


- 模型设计：sql语句
1. 登陆模型： `select * from users where username=${} and password=${}`
    `select * from users where username=? and password=?, [${username}, ${password}]`

2. 注册模型：

`insert into users (username, nickname, password) values (?, ?, ?), []`;

3. 增删改查模型

`update set blogs title=?, content=? where id="", []`

`delete from blogs where id=?, [${id}]`


- 数据结构：

data: [
  {
    id: '',
    title: '',
    title: ''
  }
]

- 参数设计


- 设计项目目录结构：

app.js 主入口文件
router-
  users.js
  blogs.js
db-
  index.js
config-
  index.js
controllers:
  users.js
  blogs.js
models-
  users.js
  blogs.js












#### jsonwebtoken JWT技术：

1. jwt： 定义
2. 能干什么？校验身份
3. 怎么校验？
  - npm i jsonwebtoken -S
  - 编写中间件：1. 注意错误处理 2. 携带密钥
  - 直接放在接口后面，当前接口的中间件前面使用

RBAC权限校验：

1. const token = jwt.sign('用户基本信息，一般不包括密码'，'密钥'，'过期时间')
2. 将token带给前端（二次封装axios 统一携带token）
3. jwt.verify(authorization, '密钥'), 只要能解密成功，就说明，当前用户身份没问题  await next()继续执行下一个中间件
4. 如果有问题？ctx.body给前端返回响应的错误处理信息；

#### crypto 加密第三方包；md5;

const crypto = require('crypto')
// 1. 定义密钥
const secret_key = 'Kjwi769,$#'
// 2. 定义加密规则
const md5 = (pwd) => {
  return crypto.createHash('md5').update(pwd).digest('hex');
}
// 3. 定义加密函数
const getPassword = (content) => {
  return md5(`password=${content}&&secret_key=${secret_key}`)
}







exports.getPassword = getPassword
// exports.relativeTime = time => moment(new Date(time * 1000)).fromNow();


const jwt = require('jsonwebtoken')
const token = jwt.sign({ ...data }, app.config.keys, { expiresIn: '24h' })

let data = jwt.verify(authorization, app.config.keys)


#### 跨域之后端跨域；

## 开发环境下都是前端代理跨域

## 上线环境下，全部都是后端跨域：（上线之后无跨域）


#### react ts

redux:  数据状态管理器，数据流解决方案
   三大原则：
   1. 数据唯一
   2. state只读
   3. 修改通过reducer（纯函数）  不可变值？
react-redux  ： 连接react组件 和 redux数据的一个中间件 { connect Provider };
react-router-dom :
      : history :  监听浏览器 历史记录  popState pushState replaceState;
                   history.push()
                   history.replace()

      : hash    :  监听 hash值 使用这个事件hashChange变化： http://127.0.0.1:3000/login/#/login
styled-components  css in js写法  将css以js组件的方式书写代码；可以直接复用；
axios
redux-thunk  redux解决异步的中间件 （）回调
redux-saga   redux解决异步的中间件  () * generator函数

## react-hooks
useState
useEffect

自定义hooks
useMemo
useCallback

useContext
useLayoutEffect
useRef


## ui  ant-design


#### typescript
/**
 *
 * 类型 注解：
 * 类型 推断：
 *
 * 1. 基本类型进行 注解/推断
 * 2. 引用类型进行 注解/推断
 *
 * 3.   Object {} key : value
 * 4.   Array  [] value  { key: value }
 * 5.   Function function() {};   1. 注解参数 2. 注解返回值 3. 注解实参
 *    () => {}
 *
 * 1. 凡是别人传给我的，都要注解（必须）
 * 2. 凡是我自己定义的，理论上都可以推断 但是只要别人使用这个数据，也🉐️注解
 *
 * 哪什么去注解呢？
 *
 * 1. 接口  interface
 * 2. 类型  type
 * 3. 泛型  <>
 *
 * any  任意
 * void 空
 * never 错误
 */


#### react前端代理实现方式

1. package.json中直接添加 proxy字段
2.



#### vue3.0 composition-api (合成api)

setup(props, context) {}

1. setup中没有this;
2. 数据 / 方法 / 路由 / vuex;
3. setup函数没有created生命周期；setup本身就是created生命周期；
4. setup返回一个新对象，但是不要以 ...拓展 抛出

```js
import { reactive,computed, onMounted, onUpdated, onUnMounted } from 'vue'
- 数据 ： 需要reactive/toRef去定义响应式数据
reactive
toRef

- 方法/函数 : 直接定义

 const handleClick = () => {}

- 路由
import { useRouter, useRoute, Watch } from 'vue-router'
直接定义调用即可
const router = useRouter()
const route = useRoute()
import { useStore } from 'vuex'
const store = useStore()

```



## RBAC 权限分配：

路由过滤


## 百度小说案例

#### 建表：

- users
  id  username  password nickname avatar createTime

- bookList
  bookId bookName bookType bookPrice bookSkuCount createTime


- bookRack 书架表
  bookRackId userId bookId divideId


egg-server   服务端代码
1. 查询book接口 （分类查询）
   /api/queryBooks
   methods: GEt
   params: {
     page: ''
     size: ''
     type: 书籍类型
   }
2. 详情接口  （）
   /api/detail/:bookId
3. 加入书架接口
   /api/bookRack
   method: post
   data: {
     bookId: ''
   }
4. 书架-创建分组 /

   /api/personBookRack

   method: post
   - 分组名称
   - 分组位置
   - 分组中的书籍信息

5. 删除书籍/删除分组
6.
   /api/deleteBook  method: get  params: bookId
   /api/deleteBookRack method: delete data: bookRackId(还需要删除分组下面的所有的书籍)


react-admin  后台管理系统

页面：
- 登陆页面
- 管理 书籍 列表页面 （增删改查）
- 管理书架页面 （书架中的书籍的增删改查）
- 分组管理 / 分组下段（展示书籍）

react-client 客户端

- 首页
- 分类页面
- 书架页面
- 分组页面




#### 功能点：

1. 登陆注册
2. 跳列表
3. 跳详情
4. 文章增删改查


uses:
/api/login
/api/register

blogs:

get /api/findBlogs
post /api/addBlogs
post /api/updateBlogs/:id
get /api/deleteBlogs/:id

get /api/detail/:id

get 模糊搜索接口
  `select * from zipcode where address like'%"`
  <!-- & zipcode_key & "%' -->


 前端页面：

 登陆页面：login

 注册页面：

 文章列表页面：

    <h1>添加</h1>

 文章标题一
 作者 日期
 显示文章的第一行文字：     删除  编辑


文章标题一
 作者 日期
 显示文章的第一行文字：

  文章标题一
 作者 日期
 显示文章的第一行文字：


详情页面：id








## 面试题：

1. git工作流？
2. http/https区别
3. 进程  / 线程 是什么东西？  js是单线程语言？   node是单线程js  有什么优势？
4. 什么是纯函数？
5. redux三大原则？
6. 单项数据流？