這次我們來模擬一些后臺數據，然后去請求它并且將其渲染到界面上。關于項目的搭建鄙人斗膽向大家推薦我的一篇隨筆《Vue開發環境搭建及熱更新》

一、數據建立

我這里為了演示這個過程所以自己編寫了這個data.json文件

 1 {
 2     "school":{
 3         "students":[
 4         {
 5             "name":"方毅",
 6             "sex":"男",
 7             "age":21,
 8             "class":1,
 9             "Chinese":100,
10             "Math":90,
11             "English":88,
12             "TotalPoint":278        
13         },
14         {
15             "name":"黎倩",
16             "sex":"女",
17             "age":20,
18             "class":1,
19             "Chinese":98,
20             "Math":80,
21             "English":75,
22             "TotalPoint":253        
23         },
24         {
25             "name":"陳二",
26             "sex":"男",
27             "age":22,
28             "class":2,
29             "Chinese":70,
30             "Math":60,
31             "English":50,
32             "TotalPoint":180        
33         },
34         {
35             "name":"鄧珊",
36             "sex":"女",
37             "age":22,
38             "class":2,
39             "Chinese":72,
40             "Math":68,
41             "English":90,
42             "TotalPoint":230        
43         },
44         {
45             "name":"李四",
46             "sex":"男",
47             "age":23,
48             "class":3,
49             "Chinese":88,
50             "Math":72,
51             "English":90,
52             "TotalPoint":250        
53         },
54         {
55             "name":"何武",
56             "sex":"男",
57             "age":20,
58             "class":3,
59             "Chinese":75,
60             "Math":80,
61             "English":60,
62             "TotalPoint":215        
63         },
64         {
65             "name":"馮柳",
66             "sex":"女",
67             "age":20,
68             "class":4,
69             "Chinese":100,
70             "Math":99,
71             "English":88,
72             "TotalPoint":287        
73         }],
74         "teacher":[
75             {
76                 "class":1,
77                 "name":"Miss Lee"
78             },
79             {
80                 "class":2,
81                 "name":"Miss Gao"
82             },
83             {
84                 "class":3,
85                 "name":"Mr Fang"
86             },
87             {
88                 "class":4,
89                 "name":"Miss wu"
90             }
91         ]
92     }
93 }

data.json

我們將這個文件放在src同級目錄下。
這個json的構建思路，就是學校里面有學生students和老師teacher，學生有成績等信息，老師有執教班級姓名信息。

二、編寫 dev-server.js文件

在dev-server.js文件中，我們在var app = express()后面加入這么一段代碼

 1 var app = express()
 2 //獲取data.json數據
 3 var scoreData = require('../data.json');
 4 //獲取data.json文件里面的school
 5 var school = scoreData.school;
 6 //編寫路由
 7 var apiR = express.Router();
 8 apiR.get('/school', function (req, res) {
 9   res.json({
10     errno: 0,
11     data: school
12   });
13 });
14 app.use('/api', apiR);

編寫完之后我們來測試一下到底能不能請求得到這些數據，我們在瀏覽器地址欄輸入localhost：8080/api/students/
8080是我默認的端口，具體的還要看config目錄下的index.js文件

修改這里即可更改端口號，我們剛才說所有接口相關的api都會通過/api這個路徑，所以我們在地址欄的地址就是如上所示。
在這里有一個小小的坑，如果我們修改的是項目的配置文件的話，記得重新cnpm run dev重新啟動項目，不然是不會生效，還可能出錯的！千萬記住這一步，有時候經常犯渾的。
enter之后我們就可以看到請求到的json

三、將請求的數據渲染到頁面上

接下來我們就來把請求到的數據渲染到頁面上。

1.請求數據，數據傳遞

我們首先在App.vue這個組件獲取數據，再傳遞給子組件hello，這時候我們異步請求數據需要用到vue-resource，這時候我們要先安裝vue-resource，在package.json文件中，加上這句話

然后在cmd命令行中cnpm install重新安裝依賴。
記住，使用之前先在src文件夾下面的入口文件main.js里面導入vue-resource插件并使用

安裝完vue-resource之后我們首先來使用它異步請求數據，在App.vue文件中

 1 <template>
 2   <div id="app">
 3     <hello :school="school"></hello><!--v-bind傳遞數據-->
 4   </div>
 5 </template>
 6 
 7 <script>
 8 import hello from './components/Hello.vue'//導入組件
 9 
10 
11 export default {
12   data(){
13     return{
14       school:{}
15     }
16   },
17   created(){
18     this.$http.get('/api/school').then((response)=>{//異步請求數據
19     response=response.body
20     if(response.errno===0){
21       this.school=response.data
22       console.log(this.school)//我們先來控制臺看看數據有沒有獲取到，這句測試完之后記得刪除
23     }
24     })
25   },
26   components:{//注冊hello組件
27     'hello':hello
28   }
29 }
30 </script>
31 
32 <style>
33 </style>

我們得到了一個Object類型的數據，接下來我們來編寫一下hello組件，將App父組件獲取到的數據傳遞給它，并渲染到頁面上

 1 <template>
 2   <div class="hello">
 3     <table class="stu">
 4       <caption>學生成績表</caption>
 5       <tr class="stu-th">
 6         <th v-for="t in title">{{t}}</th>
 7       </tr>
 8       <tr v-for="row in school.students">
 9         <td>{{row.name}}</td>
10         <td>{{row.sex}}</td>
11         <td>{{row.age}}</td>
12         <td>{{row.Chinese}}</td>
13         <td>{{row.Math}}</td>
14         <td>{{row.English}}</td>
15         <td>{{row.TotalPoint}}</td>
16       </tr>
17     </table>
18     <table class="che">
19       <caption>教師執教班級</caption>
20       <tr class="che-th">
21         <th v-for="c in teacher">{{c}}</th>
22       </tr>
23       <tr v-for="rows in school.teacher">
24         <td>{{rows.name}}</td>
25         <td>{{rows.class}}</td>
26       </tr>
27     </table>
28   </div>
29 </template>
30 
31 
32 <script>
33 export default {
34   data(){
35     return{
36       title:['姓名','性別','年齡','語文','數學','英語','總分'],
37       teacher:['教師姓名','班級']
38     }
39   },
40   props:{//接收App父組件傳遞過來的school數據
41     school:{
42       type:Object//定義傳遞過來的數據類型為Object，因為我們前面說到獲取到的數據類型為Object
43     }
44   }
45 }
46 </script>
47 
48 
49 <!-- Add "scoped" attribute to limit CSS to this component only -->
50 <style>
51 </style>

現在我們可以稍微的看一下效果

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

2.stylus的安裝和使用

Stylus - 富有表現力的、動態的、健壯的CSS，這是張鑫旭大神對它的定義，我們現在來安裝和使用它
首先在package.json里面的devDependencies項目依賴添加"stylus-loader": "^2.1.1"這一項，然后再重新安裝，npm install stylus
接下來編寫他們的樣式，在hello.vue文件中

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

雖然我們安裝了stylus-loader，也定義了樣式，但是運行結果還是出錯

語法出錯，我們把<style>改成<style lang="stylus" rel="stylesheet/stylus">這樣，就沒問題了，我們來看看效果

現在效果好看多了。

四、結語

這個項目主要是為了了解一下前后端交互的過程，大家下載完項目模板之后，按照上面的步驟修改相應的代碼就可以得到你想要的效果。

總結

以上是生活随笔為你收集整理的vue项目模拟后台数据的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。