mongodb圖片上傳 初識vue

一、回顧

1.1 node

• node 服務器
• url
• querystring
• express
• express 項目生成器
• ejs

1.2 mongodb

mongod --dbpath d:\data\db
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 + 接口

用戶數據的導入

接口的封裝

二、圖片的上傳 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 便可

三、SSR

服務端渲染(Vue) / 前端渲染（ajax） / 後端渲染(ejs)

更快的響應時間，不用等待全部的JS都下載完成，瀏覽器便能顯示比較完整的頁面了。
更好的SSR，咱們能夠將SEO的關鍵信息直接在後臺就渲染成HTML，而保證搜索引擎的爬蟲都能爬取到關鍵數據。

spa single page application

四、seo的優化

搜索引擎優化

• 爲了提高網頁在搜索引擎天然搜索結果中的收錄數量以及排序位置而作的優化行爲。簡言之，就是但願百度等搜索引擎能多多咱們收錄精心製做後的網站，而且在別人訪問時網站能排在前面。

白帽SEO和黑帽SEO

五、socket通信

先後端合做方式

• 先後端不分離 ejs
• 先後端分離 ajax
• 先後端socket通信
  微信聊天 --- 即時通信
  點外賣推送外賣訂單信息 --- 推送
  軟件更新

基於 node 中的 net 原生模塊 ---- 網絡模塊

通常使用能夠 使用 第三方模塊 socket.io

https://socket.io/

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

5.1 通信流程

根據鏈接啓動的方式以及本地套接字要鏈接的目標，套接字之間的鏈接過程能夠分爲三個步驟：服務器監聽，客戶端請求，鏈接確認。

（1）服務器監聽：是服務器端套接字並不定位具體的客戶端套接字，而是處於等待鏈接的狀態，實時監控網絡狀態。

（2）客戶端請求：是指由客戶端的套接字提出鏈接請求，要鏈接的目標是服務器端的套接字。爲此，客戶端的套接字必須首先描述它要鏈接的服務器的套接字，指出服務器端套接字的地址和端口號，而後就向服務器端套接字提出鏈接請求。

（3）鏈接確認：是指當服務器端套接字監聽到或者說接收到客戶端套接字的鏈接請求，它就響應客戶端套接字的請求，創建一個新的線程，把服務器端套接字的描述發給客戶端，一旦客戶端確認了此描述，鏈接就創建好了。而服務器端套接字繼續處於監聽狀態，繼續接收其餘客戶端套接字的鏈接請求。

5.2 socket.io

六、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必定的行爲能力。

七、數據的雙向綁定

angular --- 依賴注入
vue --- 數據劫持 結合 發佈訂閱者模式

Vue 最獨特的特性之一，是其非侵入性的響應式系統。數據模型僅僅是普通的 JavaScript 對象。而當你修改它們時，視圖會進行更新。這使得狀態管理很是簡單直接，不過理解其工做原理一樣重要，這樣你能夠避開一些常見的問題
http://www.javashuo.com/article/p-ttwlcyrf-be.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，能夠掃描和解析每一個節點的相關指令，並根據初始化模板數據以及初始化相應的訂閱器渲染。