npm i
npm run dev
- 安装 npm install crypto --save
-
首先 , 在main.js 文件中定义 一个 eventBus 对象 , 其实就是一个全新的 Vue实例
-
接着在 兄弟组件中引入 main.js
Vue 中 , emit和 on 方法. 他们都带有 类似发布订阅模式 , EventBus的原理
let event = {
list : {},
on (key ,fn) {
if(!this.list[key]) {
this.list[key] = [];
}
this.list[key].push(fn)
},
emit() {
let key = Array.prototype.shift.call(arguments);
fns = this.list[key];
if(!fns || fns.length === 0) {
return false;
}
fns.forEach(fn => {
fn.apply(this, arguments);
})
},
// 取消订阅的方法
remove(key, fn) {
let fns = this.list[key];
// 如果缓存列表中没有函数 , 返回 false
if(!fns) return false;
// 如果没有传对应函数的话 , 就会将 key 值对应缓存列表中的函数都情况掉
if(!fn) {
fns && (fns.length = 0)
} else {
// 遍历缓存列表 , 看看传入的 fn 与 哪个函数相同
// 如果相同就直接从缓存列表中删除即可
fns.forEach((cb ,i) => {
if(cb === fn) {
fns.splice(i,1)
}
})
}
}
}
- 创建一个对象(缓存列表)
- on 方法用来把回调函数 fn 都加到缓存列表中
- emit 方法取到 arguments 里第一个参数 key , 根据 key 值去执行对应缓存列表中的函数
- remove 方法根据 key 值取消订阅
-
state 用来数据共享数据存储 state : { // 存放的键值对 就是所要管理的状态 name : 'hw' }
使用 this.$store.state.name
-
mutation 用来注册改变数据状态 mutation 是操作数据的方法的集合 , 比如对该数据的修改 , 增加, 删除等待
mutation 方法都有默认的行参 ([state],[payload])
- state 是当前 vuex 对象中的 state
- payload 是该方法在被调用时传递参数使用的
在组件中 , 我们需要这样去调用这个 mutation this.$store.commit('edit')
-
getters 用来对共享数据进行过滤操作 getters 可以对 state 中的成员加工后传递给外界
getters 中方法有两默认参数
- state 当前 vuex对象中的状态对象
- getters 当前 getters 对象 , 用于将 getters 下其他 getter 拿来用
组件中调用 this.$store.getters.nameInfo
note : 类似于 computed 计算属性
-
actions 解决异步改变共享数据 由于直接在 mutation 方法中进行异步操作 , 将会引起数据失效 .所以提供了 actions 来进行专门进行异步操作 , 最终提交 mutation 方法
actions 中的方法有两个默认参数
- context 上下文()对象
- payload 挂载参数
异步操作 , 需要使用 actions aEdit(context,payload) { setTimeout(() => { context.commit('edit',payload) },2000) }
组件中调用 this.$store.dispatch('aEdit',15)
查找数据 , 查看是否有已经存在的用户数据 , 有则返回 对应的数据(比如对应的头像) , 否则 返回 未注册
2.1 手机验证 为识别 请求验证的 是 人 , 而非机器
2.2 注册成功后 , 返回 cookie , 并返回默认头像 , 以及 登录显示状态
设计思路
3.1 通过写文章点击按键 , 来引导到 写文章页面
1. 安装 mavonEditor
npm install mavon-editor --save
2. Vue 项目中引入 mavonEditor
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
3. 难点和重点
当点击保存按键时 , 把 markdown 数据 传递个后端(难点)
如果有存在封面图片 , 把图片也传递给后端(难点)
- 前端
-
获得文件对象 file
-
生成文件切片 const size = 1024; // 切片大小 let cur = 0; file.slice(cur, cur + size)
-
并发上传切片 ajax + Promise.all
发送 formData -
发送合并请求 function mergeRequest() {} 发送 file.size , file.name
- 后端
- 跨域处理 res.setHeader("Access-Control-Allow-Origin", "*");
- 接收切片 使用 使用 multiparty 包处理前端传来的 FormData
- 合并切片 3.1 对 切片进行排序 3.2 合并切片 创建读写流 , const readStream = fs.createReadStream(path); readStream.pipe(wirteStream); 并发合并切片
npm start
ruoter.post('/login')
routor.post('/register')
1. 用于把前端传递的 markdown (html) 数据保存在 数据库中
2. 如果传递了封面图片 , 则把图片也传递给后端 , 并且存储到数据库中(分割图片)
怎么用 sequelize 把 图片存储到 mysql 中
从接口中获得用户信息之后 , 存到数据库之前 , 必须加密一下 , 以防止数据库中密码被窃取
就直接用最简单的 md5 加密 , 虽然这样安全性并不高
md5 是开发中经常使用的算法之一 , 官方称为摘要算法 , 具有以下几个特点
- 不可逆
- 不管加密的内容多长 , 最后输出的结果长度都是相等的
- 内容不同输出的结果完全不同 , 内容相同输出的结果完全相同
mysql
1.1 安装 sequelize
npm install --save sequelize
1.2 sequelize 的 增删改查
sequelize.findOne
-
user.findOne 查找一个
-
查找所有 => 返回一个数组 user.findAll
-
更新 user.update
- git add
- git commit -m ''
- git push