# nodeObject

**Repository Path**: wangyuan790586907/node-object

## Basic Information

- **Project Name**: nodeObject
- **Description**: 这是我的第一个nodejs项目,gogogog!!!!!
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-06-27
- **Last Updated**: 2022-07-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

我的nodejs项目: 
https://gitee.com/wangyuan790586907/node-object.git

 --后台管理系统

## 一- 初始化
- 1- 初始化git仓库
- 2- 配置公用忽略文件
- 3- 创建初始化前后端分npm包仓库
- 4- 提交保存连接到仓库

## 二- 前段操作 - 配置脚手架 - webpack与nodejs配合搭建项目
- 1- 基础文件环境配置 - 文件夹与文件创建 
   1) src文件夹 - index.js 入口文件
   2) public文件夹 - 公共静态资源
   3) config文件夹 - 开发环境与生产环境配置文件

- 2- webpack生产环境配置文件
   1) 出口文件
   2) 入口文件
   3) 插件1 - html自动生成, 配置, 参照模板文件
   4) 插件2 - 复制公共文件, 配置, 忽略index.html
   <!-- 5) loader1 - html-loader , 配置识别html文件 不需要,删除 -->
   6) loader2 - ejs-loader , 配置识别ejs文件
   7) resolve1 - 配置视图文件路径别名 -- 方便引入视图
   8) resolve2 - 配置默认后缀名 
   9) 出口文件 - 配置公用路径, 都默认从根目录查找 publicPath:"/"

- 3- webpack开发环境配置文件
   1) 引入生产环境文件
   2) 修改模式
   3) 创建配置服务端口
   4) 下载安装 npm install webpack-dev-server -D

- 4- ***前台路由搭建  -- 前端服务器
    spa:单页面应用, 前端路由 -- 以后不用, 用react和Vue
     -根据不同路径, 加载不同的视图 分为: 一级路由区域  二级路由区域
      1) 下载 npm i sme-router
      2) 在入口文件引入 : https://github.com/SME-FE/sme-router/blob/master/docs/document.zh.md
      3) 实例化路由器对象, 传参为作用区域(id)
      4) 在html中设置视图区, 设置id
      5) 配置路由, 访问如下:http://XX.xX.XX.xx:XXXX/#/login
      6) src下创建views视图文件夹, 创建需要的视图html文件
      7) 入口文件引入视图ejs, 响应渲染页面 传入ejs(传入数据)视图结构
      8) webpack生产中配置 html-loader(删除)  换 ejs-loader
      9) 在后端服务器配置中, 配置 historyApiFallback: true, , 前端入口文件 , 创建路由器对象, 传入第二个参数 'html5' , 前后端合作开启history模式
      
   - 二级路由区域 -- adv内的 两个二级路由
      1) 入口文件创建需要的二级路由
      2) 使用二级路由标识,  subRoute: res.subRoute()
      3) 一级路由中调用next()方法 , 传入一级ejs页面,传入二级路由标识
      4) 在需要的一级路由ejc页面中  放入二级路由标识
      5) 创建二级路由的ejs  复制模板
      6) 入口文件引入ejs, 在二级路由中, 传入调用()

- 5- ejs -- 原本用来:服务端渲染
   1) 删除之前的html文件和html-loader的配置
   2) 配置webpack支持 
   3) 添加ejs作为模板
   4) 配置自动添加后缀
   5) 引入使用ejs -- 更换之前的引入html为ejs 
      - ejs引入以后得到的是一个函数, 可以传递数据进入

- 6- AdminLTE模板 -- 框架模板
   1) 资源放入public公共资源中
   2) 在html模板文件中 引入需要的css和js模板文件
   3) ejs文件复制引入 AdminLTE模板



**js实现重定向 点击按钮跳转页面,或倒计时跳转 不刷新
   1) location.href = '新地址'
   2) window.open('标签页')  打开新的标签页
   3) location.assign('')
   4) location.replace(),替换当前地址,没有历史记录
刷新一下,不点击:
location.reload() 

## 三- 后端操作

- 1- 搭建服务器
   1) 下载express, 搭建服务器
   2) 下载mongoose, 连接数据库

- 2- 创建数据库
   1) 创建文件夹, 创建js文件, 创建连接数据库
   2) 服务端引入数据库连接文件







## 六月30日:
  -  加密方式 -- crypto 加密模块
    MD5 消息摘要加密算法
   后端-下包MD5 密码在保存时,加密加盐
   登录时, 输入密码后,加密再去库里对比

1- 添加密码加密
2- 添加成功 触发表单关闭按钮
3- 添加成功与出错 清空表单
4- 前端路由函数提取 : 路由模块化, 默认暴露路由的回调函数, 配置路径别名, 入口文件引入, 分别转移视图
5- 后端路由函数提取 : 接口模块化, 整个路由接口拿走, 创建路由, 入口文件引入使用对应路由 
6- 前端处理不同用户请求, 创api文件夹, 统一管理 分别封装axios请求 
7- 后端添加中间件, -- 正则校验, 接口直接添加参数(中间件)
   - 正则校验字符串, test()方法-测试

## 查询管理员列表
1- 前端, api添加查询请求
2- 前端, 只要进入adm/inList路径, 发送请求, 查询管理员列表
3- 后端, 搭建请求adminList路径的路由, 接口文件引入
4- 后端, 收到请求, 查询数据库, 异常处理
5- 前端, 拿到数据, 完善管理员列表视图, 处理获取的数据, 完成视图渲染
6- 封装展示管理员列表的函数, 初始化, 添加, 删除,都渲染一次  调用时写await
7- 部分视图重新渲染后, 按钮重新绑定事件, 事件委派-绑给document, e.target.id  为保存添加按钮, 再执行逻辑

## 删除管理员
1- 后端, 搭建delete类型的路由, 获取请求删除数据,
在数据库删除对应数据, 判断删除数量>0时,删除成功,处理删除失败和异常
2- 前端, 设置删除按钮的事件委派
3- 前端, 删除管理员请求, 请求数据在query
- 4- 获取到删除按钮, 添加自定义属性data-name
   -如div.dataset为一个对象, div.dataset.a = 1
   -div上添加自定义属性data-a="1"


***dom三大法宝: 添加变量, 开关, 自定义属性

## 登录功能
   
1- 后端 : 下载包jwt-simple
2- 后端 : 封装token机 + 加盐加密凭证 (无法解码)
3- 前端 : 登录请求 , 登录逻辑 - 阻止默认事件
4- 后盾 : 登录接口, 接口到引入, 获取数据, 查数据库(密码要MD5加密), 处理异常, 查询到生成token响应给客户端,  
5- 前端 : 登录请求成功, 保存token在, 路由跳转到首页



## 权限控制
   -常见发送ajax , 路由跳转
1- 请求拦截器: 发ajax请求时, 本地拿token, 放在请求头
2- 后端设置中间件, 获取请求携带token, 对token解码, 返回解码对象, 查询数据库的登录状态, 为0报错, 否则继续 next() 添加到getAdminList
3- 后端, login登陆成功后, 当前用户数据库状态改为1
4- 前端,  拦截器添加判断,状态为权限校验, 添加登录状态isLogin为false, 
5- 获取管理员列表处理权限失败异常, 跳转回登录页面
6- 删除管理员处理权限失败异常, 跳转回登录页面
7- 前端, 路由跳转权限控制 
8- 后端, 创建路由跳转权限接口, 主要是使用权限验证中间件, index引入使用
9- 前端, 创建路由切换校验请求, 管理员路由切换时,广告列表路由切换时, 引入校验,权限异常,返回到登录login
10- 退出登录, 前端发送请求, 成功删除token,页面跳转到登录
后端修改数据库对应用户状态为0 


## 添加广告
1- 


# 复习
   - cookie : 
      -客户端存储, 随着http发送, 后端做状态管理 
      -缺点容易被客户端禁用, 不在用
   -  : 
      -服务端存储, 存储信息对象, 生产唯一id, id存在客户端cookie中, 多点存储,
   - token : 客户端发送个人信息, 后端专门的token机器 根据信息生产token,发给客户端保存在本地(lock), 客户端再次发送时, token机反解析获得个人信息

# 文件上传及预览
- 表单事件
   -onchange 表单发生改变并失去焦点时触发
   -oninput 表单发生改变触发
multiple, 文件多选
accept 限制选择文件格式,只上传各种图片格式

1- 图片预览 使用js自带的fileReader对象, 实例对象有各种方法
2- 上传文件 new FormData(表单对象)

1- 前端, 添加广告逻辑, 事件委派, 发送请求, 提交文件
2- 前端, 添加图片预览
3- 后端, 添加数据库集合
4- 后端, 搭建接口, 下载引入解析FormData的包, FormData中的parse方法 解析, 创文件夹存放接受的文件

## 查询广告列表
1- 前端: 查询请求, 封装请求, 获取返回的数据, 
2- 后端: 创建接口, 查询所有广告数据, 接口引入index
3- 前端: 渲染页面, 暴露图片的静态资源文件夹