vue專案模擬後台資料

這次我們來模擬一些後台資料，然後去請求它並且將其渲染到介面上。關於專案的搭建鄙人斗膽向大家推薦我的一篇隨筆《vue開發環境搭建及熱更新》

我這裡為了演示這個過程所以自己編寫了這個data.json檔案

1,14

,24,34
,44,54
,64],74         "teacher":[75,
79,83,
8791]92
}93 }

我們將這個檔案放在src同級目錄下。

這個json的構建思路，就是學校裡面有學生students和老師teacher，學生有成績等資訊，老師有執教班級姓名資訊。

12//

獲取data.json資料
3var scoredata = require('../data.json');4//
獲取data.json檔案裡面的school
5var school =scoredata.school;6//
編寫路由
7var apir =express.router();
8 apir.get('/school', function
(req, res) );
13});
8080是我預設的埠，具體的還要看config目錄下的index.js檔案
在這裡有乙個小小的坑，如果我們修改的是專案的配置檔案的話，記得重新cnpm run dev重新啟動專案，不然是不會生效，還可能出錯的！千萬記住這一步，有時候經常犯渾的。
enter之後我們就可以看到請求到的json
接下來我們就來把請求到的資料渲染到頁面上。
然後在cmd命令列中cnpm install重新安裝依賴。
記住，使用之前先在src資料夾下面的入口檔案main.js裡面匯入vue-resource外掛程式並使用
4學生成績表56
for="t in title">}78
for="row in school.students">9}
10}11}
12}13}
14}15}
1617
1819
教師執教班級
2021
for="c in teacher">}
2223
for="rows in school.teacher">24}
25}2627
2829
3031
3247
4849
50

太難看了，接下來我們用stylus來給它新增一些樣式

stylus - 富有表現力的、動態的、健壯的css，這是張鑫旭大神對它的定義，我們現在來安裝和使用它

首先在package.json裡面的devdependencies專案依賴新增"stylus-loader": "^2.1.1"這一項，然後再重新安裝，npm install stylus

接下來編寫他們的樣式，在hello.vue檔案中

1

<
style
>
2.stu
3width:700px
4border:solid 2px black
5.stu-th
6background:rgb(0,136,225)7tr
8text-align:center
9.che
10width:700px
11border:solid 2px black
12.che-th
13background:rgb(0,136,225)
14tr
15text-align:center
16style
>

語法出錯，我們把改成這樣，就沒問題了，我們來看看效果

現在效果好看多了。

vue模擬後台資料

最近正在學習vuejs這個框架，我安裝的vuejs是2.9.3的版本，在環境配置完成後開啟專案發現沒有dev server這個檔案，當時我就懵了，這表示我無法在按照以前的方法進行資料模擬，後來參考資料說dev server已經整合到了webpack.dev.conf.js裡，我先在這裡說明怎麼在新版...

Vue後台資料模擬以及抓取線上資料

現在的vue裡dev server.js被替換成了webpack dev conf.js,以下分為本地後台資料和線上資料抓取兩種情況。首先const axios require axios const express require express 其次，找到 devserverdevserver ...

vue 請求後台資料

原文 需要引用vue resource 安裝請參考官方文件 在入口函式中加入 import vueresource from vue resource vue.use vueresource 在package.json檔案中加入 dependencies 請求如下 mounted function ...