vue項目實戰(第一回)

• 完整的項目地址https://github.com/darenone/v...
• 系列文章一https://github.com/darenone/v...
• 系列文章二https://segmentfault.com/a/11...

前言

此項目是我在學習vue框架和開發公司項目的時候把須要用的vue技術點、經常使用的功能模塊、開發中遇到的坑所有集成或記錄到這個小項目裏，以便本身開發之後的項目中用到，同時分享出來供你們學習借鑑，也鞭策本身持續學習和更新，若是不足之處歡迎各位同窗批評指正，在下必定虛心學習

用vue-resource請求本地數據

• 安裝

npm install vue-resource --save

• 在main.js引入

import VueResource from 'vue-resource'
Vue.use(VueResource)

• 用expressjs寫RESTful API

打開項目build/webpack-dev.conf.js文件 添加以下代碼

const express = require('express')
const app = express()
var appData = require('../data.json') //加載本地數據文件
var seller = appData.seller //獲取對應的本地數據
var goods = appData.goods
var ratings = appData.ratings
var newsList = appData.newsList
var login = appData.login
var apiRoutes = express.Router()
app.use('/api', apiRoutes)
  
devServer: {
before(app) {
  app.get('/api/login', (req, res) => {
    res.json({
      errno: 0,
      data: login
    })
  }),
  app.get('/api/newsList', (req, res) => {
    res.json({
      errno: 0,
      data: newsList
    })
  })
}
  }

在項目根目錄新建一個data.json的內容以下：

{
  "newsList": [
    {
      "name": "新聞1新聞1新聞1新聞1新聞1新聞1新聞1新聞1新聞1新聞1新聞1新聞1新聞1新聞1",
      "url": "http://starcraft.com"
    },
    {
      "name": "新聞2新聞2新聞2新聞2新聞2新聞2新聞2新聞2新聞2新聞2新聞2新聞2新聞2新聞2",
      "url": "http://starcraft.com"
    },
    {
      "name": "新聞3新聞3新聞3新聞3新聞3新聞3新聞3新聞3新聞3新聞3新聞3新聞3新聞3新聞3",
      "url": "http://starcraft.com"
    },
    {
      "name": "新聞4新聞4新聞4新聞4新聞4新聞4新聞4新聞4新聞4新聞4新聞4新聞4新聞4新聞4",
      "url": "http://starcraft.com"
    }
  ],
  "login": {
    "username": "zongqiang",
    "userId": 2333
  }
}

重啓應用以後咱們來模擬請求一個數據 homepage/index.vue

created: function () {
    this.$http.get('api/newsList').then((res) => {
      this.newsList = res.data.data
      console.log(this.newsList)
    }, (err) => {
      console.log(err)
    })
  }

能正常拿到數據，那咱們之後的在沒有後端給咱們提供api的時候就就能夠這樣來作
markdown在線編輯
http://mahua.jser.me/
https://www.zybuluo.com/mdeditor