掌握並熟練運用vue後，咱們還須要知道什麼

原由

最近，公司在招兵買馬，吸納了不少的優秀人才，起初我對這一現象並不重視，自我認爲這就是由於公司最近的項目作的不錯，
老闆要把項目作大作強，所以招一些技術大牛無可厚非，同時說句比較臉皮厚的話本身也不差，尤爲是在這個前端這一起仍是比較有信心的，
可是偶然間和老大的一次談話引發了個人警戒。我發現事情並非我原來想象的那樣，新招的這些技術大牛基本都是偏向於全棧工程師，
因爲公司要作大，要增長一個團隊，招一些全棧的技術大牛無可厚非，可是有必要全都是嗎？這其中必定有緣由，咱們公司如今作的項目主要用的就是先後端分離，
一個項目組中有一個美工，一個運維，一個項目負責人，兩個前端，3個後臺，別的先不說，一個前端寫基本的頁面，一個前端主要寫MVVM的前端，
若是找全棧就團隊就能夠省去1-2人，對公司來講，既節省人力又節省成本，最重要的是還能夠提高開發效率。因此如今前端就面臨兩個問題，
在將來的求職中將會被壓低薪水，被迫轉爲純前端或者全棧的風險。原本我還覺得是我杞人憂天本身嚇本身，因此就開始詢問其餘作程序猿的朋友和同窗，
發現他們的公司也有這個苗頭，雖然是苗頭，但我仍是決定去各個招聘網站看一看發現80%的公司（1-3年工做經驗也是）都要求有後端開發的項目經驗，雖然要求不高，
要求掌握一門php/java/python等後端語言。因此如今的雖然招的前端開發但實際上是準全棧，我估計再過一段時間可能招的會是全棧。

注：以上僅表明我的觀點

行動

基於上述的大膽想法，我決定好好的補一補後端的相關知識，造成一套本身的前端技術棧。

傳統的前端：

html(html5)
css(css3)
js（jquery，zepto.js）
ajax

作先後端分離的前端還須要：

vue.js, rect, angular(至少其中一種)
webpack
node.js
git

增長的技術：

php/java/python等後臺語言一種（我選python）
mysql/sql server/mongodb 等數據庫語言的一種(我選mongodb)
再選一種服務器語言熟悉瞭解就行

開發環境（根據我的喜愛）

我的技術棧

html5,
css3,
js,
vue.js （elemnt-ui, muse-ui）

node.js
webpack
git

epxress（koa）
mongodb

注：由於公司最近在新的磨合，本身有機會接觸和跟上這一波的前端開發的趨勢，感謝公司，感謝各位同事。

項目演示

項目實踐

爲了防止各位看官的噴，決定不拿公司的項目來講事兒，因此以一個在網上看的項目爲原型，本身重寫一個（一個自適應的小項目）。

參考項目地址

這個項目中有一些好的點子，因此個人給做者star一下，正是有這些具有開源精神的前輩咱們才能在編程的路上越走越穩，越走越快。

可是這個項目我的不喜的一些地方：

1.爲何有了webpack後還要使用gulp？
我的認爲如今webpack已經很強大了，gulp已經能夠放一邊了
2.寫的沒有規律
對於一個有強迫症的人來講，代碼

項目我很是喜歡的地方：

1.express 的合併使用
由於在vue-cli的開發環境中已經使用了express，因此嘗試了使用express+mongodb做爲後端的開發組合，真的很棒，在我所看的幾個
項目中的大部分是都是另起一個package.json，這樣作的弊端就不言而喻了。
2.服務器端的代理設置
找了一個可無償使用的代理服務商jsonbird(前期能夠不學着一塊快速入手)
後期express代理配置學習

我的改進的地方

1. element-ui不是一個能夠進行響應式開發的框架
   我的經過學習如何進行組件的開發，我對我所熟悉的muse-ui和element-ui進行了修改，但仍是有必定的問題，要想達到bootstrap兼容、適應的效果，
   就不得根據具體狀況進行微調
2. 如何引入express-generator

   這個我的很簡單各位童鞋能夠試一下

3. 改進代碼

   做爲一個代碼強迫症的人，若是別人不把代碼按快進行書寫，我是很難看下去的，
   因此就本身試着寫了一下。

代碼分析

1.拷貝數據

本示例抓取的是豆瓣的相關數據，只要在其代碼的js中找到該api便可，本示例爲：
http://api.douban.com/v2/movi...
因爲該api能夠直接讀取數據不用使用反向代理技術
另一點，咱們使用第三方的數據通常不會使用每條記錄中的全部數據，而且不會使用全部的記錄，而是使用若干條記錄。
因此，該實例的中的server/db/data.js有必定的參考價值。

2.既然是要作後端咱們就要知道經典的mvc，瞭解MVVM中的m

m表明的是模型，它實現的是業務邏輯，
本示例的一個model文件爲server/models/schema/move.js用來建立move的集合（也即咱們常見的表）
並定義每行文檔的數據類型（咱們常見的數據記錄，行）

1. 實現該model的操做

   數據的操做便是增刪改查

   // 查詢全部電影
   router.get('/movie', (req, res) => {

   Movie
      .find({})
      .sort({
          update_at: -1
      })
      .then(movies => {
      res.json(movies)
   })
   .catch(err => {
      res.json(err)
   })

   })

   // 添加一部電影
   router.post('/movie', (req, res) => {

   //使用Movie model上的create方法儲存數據
    Movie.create(req.body, (err, movie) => {
        if (err) {
          res.json(err)
        } else {
          res.json(movie)
        }
      })

   })

   // 更新一部電影
   router.put('/movie/:id', (req, res) => {

   Movie.findOneAndUpdate({
      _id: req.params.id
    }, {
      $set: {
        title: req.body.title,
        rating: req.body.rating,
        poster: req.body.poster,
        introduction: req.body.introduction
      }
    }, {
      new: true
    })
    .then(movie => res.json(movie))
    .catch(err => res.json(err))

   })

   // 刪除一部電影
   router.delete('/movie/:id', (req, res) => {

   Movie.findOneAndRemove({
        _id: req.params.id
      })
      .then(movie => res.send(`${movie.title}刪除成功`))
      .catch(err => res.json(err))

   })

本文只是我有感而寫，根據公司前段時間的體會和公司同事的幫助，以及本身最近學習體會總結而成。

源碼已上傳到github地址https://github.com/lvzhenbang/vue2-express