mongodb图片上传 初识vue

1、回顾

1.1 node

• node 服务器
• url
• querystring
• express
• express 项目生成器
• ejs

1.2 mongodb

mongod --dbpath d:datadb
mongo

db.users.insert({})
db.users.insert([{},{}])
db.users.insertOne({})
db.users.insertMany([{},{}])

db.users.deleteOne({})
db.users.deleteMany({})

db.users.updateOne({}, {$set: {}})
db.users.updateMany({}, {$set: {}})
db.users.updateOne({}, {$inc: {}})
db.users.updateMany({}, {$inc: {}})

db.users.find()
db.users.find({})
db.users.find({}, {})
db.users.find({}, {}).sort({})
db.users.find({}, {}).count()
db.users.find({}, {}).skip().limit()
db.users.find({}, {}).toArray()

1.3 封装 mongodb

异步操作 - promise

1.4 express 项目 + mongodb

用户的增删改查

1.5 express 项目 + mongodb + 接口

用户数据的导入

接口的封装

2、图片的上传 1 - 5 - myapp

cnpm i multer -S

Multer 不会处理任何非 multipart/form-data 类型的表单数据。

views/index.ejs

<form action="/upload" enctype="multipart/form-data" method="POST">
  <input type="text" name="proname" placeholder="产品名称">
  <input type="file" name="avatar" id="">
  <input type="submit" value="上传">
</form>

routes/index.js

var multer  = require('multer')
// 将上传的图片存放到 uploads 的文件夹内部
// 如果放进了public ，静态的资源文件
// 如果不放，需要将 uploads 设置为静态的资源文件 --- 多添加代码
var upload = multer({ dest: 'public/uploads/' })

router.post('/upload', upload.single('avatar'), function (req, res, next) {
  console.log(req.file) // 包含的文件信息
  console.log(req.body) // 文本域的信息
  res.send(req.file)
})

查看文件的信息

{ fieldname: 'avatar',
  originalname: '11.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: 'public/uploads/',
  filename: '40ff4438d4e6752d209b64808c396f16',
  path: 'public\uploads\40ff4438d4e6752d209b64808c396f16',
  size: 181714 }

图片 上传成功， 但是图片访问不了，没有后缀名

将原图片的后缀名截取下来，和上传了的图片的名称进行拼接即可

nodejs中的模块 fs

fs.rename(oldPath, newPath, () => {})

router.post('/upload', upload.single('avatar'), function (req, res, next) {
  console.log(req.file) // 包含的文件信息
  console.log(req.body) // 文本域的信息
  // res.send(req.file)
  let arr = req.file.originalname.split('.')
  let type = arr[arr.length - 1] // 后缀名
  
  let oldPath = req.file.destination + req.file.filename
  let newPath = req.file.destination + req.file.filename + '.' + type

  fs.rename(oldPath, newPath, (err) => {
    if (err) throw err;
    res.send('上传成功')
  })
})

将图片保存到数据库

数据库中保存的头像的数据 直接写 /uploads/ + req.file.filename + '.' + type 即可

3、SSR

服务端渲染(Vue) / 前端渲染（ajax） / 后端渲染(ejs)

更快的响应时间，不用等待所有的JS都下载完成，浏览器便能显示比较完整的页面了。
更好的SSR，我们可以将SEO的关键信息直接在后台就渲染成HTML，而保证搜索引擎的爬虫都能爬取到关键数据。

spa single page application

4、seo的优化

搜索引擎优化

• 为了提升网页在搜索引擎自然搜索结果中的收录数量以及排序位置而做的优化行为。简言之，就是希望百度等搜索引擎能多多我们收录精心制作后的网站，并且在别人访问时网站能排在前面。

白帽SEO和黑帽SEO

5、socket通讯

前后端合作方式

• 前后端不分离 ejs
• 前后端分离 ajax
• 前后端socket通讯
  微信聊天 --- 即时通讯
  点外卖推送外卖订单信息 --- 推送
  软件更新

基于 node 中的 net 原生模块 ---- 网络模块

一般使用可以 使用 第三方模块 socket.io

https://socket.io/

TCP 可靠 / UDP 不可靠 ---- 三次握手

5.1 通讯流程

根据连接启动的方式以及本地套接字要连接的目标，套接字之间的连接过程可以分为三个步骤：服务器监听，客户端请求，连接确认。

（1）服务器监听：是服务器端套接字并不定位具体的客户端套接字，而是处于等待连接的状态，实时监控网络状态。

（2）客户端请求：是指由客户端的套接字提出连接请求，要连接的目标是服务器端的套接字。为此，客户端的套接字必须首先描述它要连接的服务器的套接字，指出服务器端套接字的地址和端口号，然后就向服务器端套接字提出连接请求。

（3）连接确认：是指当服务器端套接字监听到或者说接收到客户端套接字的连接请求，它就响应客户端套接字的请求，建立一个新的线程，把服务器端套接字的描述发给客户端，一旦客户端确认了此描述，连接就建立好了。而服务器端套接字继续处于监听状态，继续接收其他客户端套接字的连接请求。

5.2 socket.io

6、vue基础

6.1 开发规范

组件化开发 ---- 组件的首字母大写

bootstrap 按钮

.btn {}
.btn-danger {}
.btn-xs {}
<button class="btn btn-danger btn-xs"></button>

常用js规范 - jslint

var a = 1
var fn = function () {}
if (a === 1) {}
for (var i = 1; i < 10; i++) {}
  var b = 2

修改编辑器的默认配置，修改 一个tab键为2个空格 设置 - tabSize

6.2 了解vue

• vue
• 构建数据驱动的web应用开发框架
• Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架
• Vue 被设计为可以自底向上逐层应用
• Vue 的核心库只关注视图层
• 便于与第三方库或既有项目整合
• Vue 不支持 IE8 及以下版本

6.3 MVX模式

MVC
mvc最早出现在 java 中, 前端中 最早体现 MVC 的是 angularjs
** model view controller **

model 数据源 ----- sql/collection/users.js
view 视 图 ----- views/users.ejs
controller 控制器 -- routes/users.js

优点：耦合性低、重用性高、生命周期成本低、部署快、可维护性高、有利软件工程化管理
缺点：由于模型和视图要严格的分离，这样也给调试应用程序带来了一定的困难。每个构件在使用之前都需要经过彻底的测试。

MVP

** model view presenter(发布层) **

所有的交互都发生在Presenter内部，而在MVC中View会直接从Model中读取数据而不是通过 Controller。
View 与 Model 不发生联系，都通过 Presenter 传递。
View 非常薄，不部署任何业务逻辑，称为”被动视图”（Passive View），即没有任何主动性，而 Presenter非常厚，所有逻辑都部署在那里。

MVVM

** model view viewmodel **

可以把ViewModel看作一个藏在View后面的好帮手，它把View需要的数据暴露给它，并且赋予View一定的行为能力。

7、数据的双向绑定

angular --- 依赖注入
vue --- 数据劫持 结合 发布订阅者模式

Vue 最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript 对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样你可以避开一些常见的问题
https://www.cnblogs.com/libin-1/p/6893712.html

7.1 数据劫持

对象 有 属性， 设置属性， 获取属性的值， 属性会有2个方法 set get

v-model属于vue中表单数输入的一个指令，实质是一个属性，属性的值是一个变量 msg

7.2 数据劫持

var obj = {
    name: 'vue学习指南'
  }
  console.log(obj.name) // vue学习指南

  // 目标 ===> 《vue学习指南》

  // Object.defineProperty(对象， 属性， {
  //   set () {},
  //   get () {}
  // })

  var str = ''
  Object.defineProperty(obj, 'name', {
    set (val) {
      str = "《"+val+"》"
    },
    get () {
      return str
    }
  })

  console.log(obj.name) // 空值   ----  直接调用了 get方法

  // 目标 ===> 《vue学习指南》     ----  必须得调用 set 方法
  obj.name = 'vue学习指南'         // ----- 调用了 set 方法
  console.log(obj.name) // 《vue学习指南》 

7.3 原理

原理

1.实现一个监听器Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。
2.实现一个订阅者Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。
3.实现一个解析器Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据以及初始化相应的订阅器渲染。