vue項目模擬後臺數據

時間 2019-12-09

標籤 vue 項目模擬後臺數據简体版

原文原文鏈接

此次咱們來模擬一些後臺數據，而後去請求它而且將其渲染到界面上。關於項目的搭建鄙人斗膽向你們推薦個人一篇隨筆《Vue開發環境搭建及熱更新》html

1、數據創建

我這裏爲了演示這個過程因此本身編寫了這個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，學生有成績等信息，老師有執教班級姓名信息。

2、編寫 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

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

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

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