(2/2)Vue構建單頁應用最佳實戰

時間 2019-11-06

標籤 vue 構建單頁應用最佳實戰简体版

原文原文鏈接

前言

本章節，將會把全部的請求全寫爲跨域請求。不知道爲何，不少人一用了框架就會不知所措。給你們一個忠告，享受框架帶來的便利，別忘了時刻提醒本身學好基礎知識。前端

先把一些沒必要要的代碼刪了。vue

//TimeEntries.vue 的模擬數據代碼
data () {
  // 模擬下初始化數據
  /*let existingEntry = {
    comment: '個人第一個任務',
    totalTime: 1.5,
    date: '2016-05-01'
  }*/
  return {
    timeEntries: []
  }
},
//頭像和暱稱暫時寫死
<div class="col-sm-2 user-details">
  <img src="https://avatars1.githubusercontent.com/u/10184444?v=3&s=460" class="avatar img-circle img-responsive" />
  <p class="text-center">
    <strong>
      二哲
    </strong>
  </p>
</div>


//LogTime.vue裏的模擬數據代碼
data () {
    return {
      timeEntry: {
        /*user: {
          name: '二哲',
          email: 'kodo@forchange.cn',
          image: 'https://sfault-avatar.b0.upaiyun.com/888/223/888223038-5646dbc28d530_huge256'
        },*/
      }
    }
},

咱們將專一3個字段的增刪改查，任務時間，持續時間，備註。node

正文

咱們的數據交互其實很簡單，因此我在這選擇使用你們最熟悉的express和mongodb，在一個app.js 文件裏完成全部的controller。git

首先，安裝幾個必要的包npm i express mongodb morgan body-parser --save-dev;github

簡單解釋下Morgan和body-parser，其實就是一個log美化和解析參數。具體你們能夠google下。web

在咱們的根目錄下，建立app.js初始化如下代碼vue-router

//app.js
var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var morgan = require('morgan');

var MongoClient = require('mongodb').MongoClient;
var mongoUrl = 'mongodb://localhost:27017/mission';
var _db;

app.use(morgan('dev'));
app.use(bodyParser.json());
app.use(express.static('dist'));

MongoClient.connect(mongoUrl, function (err, db) {
  if(err) {
    console.error(err);
    return;
  }

  console.log('connected to mongo');
  _db = db;
  app.listen(8888, function () {
    console.log('server is running...');
  });
});

解釋下mongoUrl這行mongodb://localhost:27017/mission 鏈接相應的端口，而且使用mission表。此時你是沒有mission數據庫的，這不用在乎。在咱們後續操做中，它將會自動建立一個mission數據庫。mongodb

上面代碼的意思是，咱們建立咱們的一個mongo鏈接，當數據庫鏈接上了後再啓動咱們的服務器。數據庫

接着先啓動咱們的mongo服務。在命令行裏 sudo mongo 。express

若是你用得是webstrom編輯器，能夠直接運行app.js，若是是命令行，那就使用 node app.js

若是看見命令行輸出了 connected to mongo server is running... 就能夠在8888端口訪問咱們的應用了。（在這以前別忘了build你的代碼）

因爲咱們講得是跨域，因此咱們講在咱們的dev環境下完成全部的請求。npm run dev

關閉咱們的8888端口頁面，進入8080端口的開發環境。

寫下咱們第一個建立任務的請求。

//app.js

//使用post方法
app.post('/create', function(req, res, next) {
    //接收前端發送的字段
  var mission = req.body;
  //選擇一個表my_mission 此時沒有不要緊，也會自動建立
  var collection = _db.collection('my_mission');
    //若是咱們須要的字段不存在，返回前端信息
  if(!mission.comment || !mission.totalTime || !mission.date) {
    res.send({errcode:-1,errmsg:"params missed"});
    return;
  }
    //若是存在就插入數據庫，返回OK
  collection.insert({comment: mission.comment, totalTime: mission.totalTime,date:mission.date}, function (err, ret) {
    if(err) {
      console.error(err);
      res.status(500).end();
    } else {
      res.send({errcode:0,errmsg:"ok"});
    }
  });
});

修改下咱們的LogTime.vue

//LogTime.vue
<button class="btn btn-primary" @click="save()">保存</button>

methods: {
    save () {
      this.$http.post('http://localhost:8888/create',{
        comment : this.timeEntry.comment,
        totalTime : this.timeEntry.totalTime,
        date : this.timeEntry.date
      }).then(function(ret) {
        console.log(ret);
        let timeEntry = this.timeEntry
        console.log(timeEntry);
        this.$dispatch('timeUpdate', timeEntry)
        this.timeEntry = {}
      })
    }
}

輸入好內容，點擊保存按鈕，會發現報了個錯。這其實就是最多見的跨域請求錯誤。

可是咱們明明寫得是post請求爲何顯示得是options呢？

這實際上是跨域請求前會先發起的一個options請求，須要先問問服務端，我須要一些操做能夠嗎？若是服務端那裏是容許的，纔會繼續讓你發送post請求。

我不知道那些使用vue-resource各類姿式也想知足跨域請求的人是怎麼想的。你想上天嗎？

因此咱們須要服務端配置，而不是前端。

//app.js
app.all("*", function (req, res, next) {
  res.header('Access-Control-Allow-Origin', '*');
  res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
  res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
  if (req.method == 'OPTIONS') {
    res.send(200);
  } else {
    next();
  }
});

Access-Control-Allow-Origin是設置你的來源域名，寫*是很危險的操做。因此咱們能夠直接寫成咱們所需的域名和端口，別人就無法請求了。

另外幾行就不解釋了，一看就懂。

不出意外，能夠發現發送了options後，立刻發送了post，而後就建立成功了。看下mongo的表，也多了一條記錄。

接着來讓咱們一口氣寫完剩下的三個請求。列表渲染，刪除計劃，獲取總時長。

//app.js
var ObjectID = require('mongodb').ObjectID 

//獲取總時長
app.get('/time', function(req, res, next) {
    //獲取數據表
  var collection = _db.collection('my_mission');
  var time = 0;
  //查詢出全部計劃
  collection.find({}).toArray(function (err, ret) {
    if(err) {
      console.error(err);
      return;
    }
    //全部計劃累加時長
    ret.forEach(function (item, index) {
      time += +item.totalTime;
    });
    //返回時長
    res.json({errcode:0,errmsg:"ok",time:time});
  });
});

//獲取列表
app.get('/time-entries', function(req, res, next) {
  var collection = _db.collection('my_mission');
  collection.find({}).toArray(function (err, ret) {
    if(err) {
      console.error(err);
      return;
    }
    res.json(ret);
  });
});

//刪除計劃
app.delete('/delete/:id', function (req, res, next) {
  var _id = req.params.id;
  var collection = _db.collection('my_mission');
  console.log(_id)
  //使用mongodb的惟一ObjectId字段查找出對應id刪除記錄
  collection.remove({_id: new ObjectID(_id)} ,function (err, result) {
    if(err) {
      console.error(err);
      res.status(500).end();
    } else {
      res.send({errcode:0,errmsg:"ok"});
    }
  });
});

前端部分

//App.vue
ready() {
    this.$http.get('http://localhost:8888/time')
      .then(function(ret) {
        this.totalTime = ret.data.time;
      })
      .then(function(err) {
        console.log(err);
      })
},

//TimeEntries.vue 
route : {
  data(){
    this.$http.get('http://localhost:8888/time-entries')
      .then(function(ret) {
        this.timeEntries = ret.data;
      })
      .then(function(err) {
        console.log(err);
      })
  }
},

//TimeEntries.vue
<div class="col-sm-1">
  <button
    class="btn btn-xs btn-danger delete-button"
    @click="deleteTimeEntry(timeEntry)">
    X
  </button>
</div>

deleteTimeEntry (timeEntry) {
    // 刪除
    let index = this.timeEntries.indexOf(timeEntry)
    let _id = this.timeEntries[index]._id
    if (window.confirm('確認刪除?')) {
      this.$http.delete('http://localhost:8888/delete/' + _id)
        .then(function(ret) {
          console.log(ret);
        })
        .then(function(err) {
          console.log(err)
        });
      this.timeEntries.splice(index, 1)
      this.$dispatch('deleteTime', timeEntry)
    }
}