vue項目模擬后台數據

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

一、數據建立

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

{
    "school":{
        "students":[
        {
            "name":"方毅",
            "sex":"男",
            "age":21,
            "class":1,
            "Chinese":100,
            "Math":90,
            "English":88,
            "TotalPoint":278        
        },
        {
            "name":"黎倩",
            "sex":"女",
            "age":20,
            "class":1,
            "Chinese":98,
            "Math":80,
            "English":75,
            "TotalPoint":253        
        },
        {
            "name":"陳二",
            "sex":"男",
            "age":22,
            "class":2,
            "Chinese":70,
            "Math":60,
            "English":50,
            "TotalPoint":180        
        },
        {
            "name":"鄧珊",
            "sex":"女",
            "age":22,
            "class":2,
            "Chinese":72,
            "Math":68,
            "English":90,
            "TotalPoint":230        
        },
        {
            "name":"李四",
            "sex":"男",
            "age":23,
            "class":3,
            "Chinese":88,
            "Math":72,
            "English":90,
            "TotalPoint":250        
        },
        {
            "name":"何武",
            "sex":"男",
            "age":20,
            "class":3,
            "Chinese":75,
            "Math":80,
            "English":60,
            "TotalPoint":215        
        },
        {
            "name":"馮柳",
            "sex":"女",
            "age":20,
            "class":4,
            "Chinese":100,
            "Math":99,
            "English":88,
            "TotalPoint":287        
        }],
        "teacher":[
            {
                "class":1,
                "name":"Miss Lee"
            },
            {
                "class":2,
                "name":"Miss Gao"
            },
            {
                "class":3,
                "name":"Mr Fang"
            },
            {
                "class":4,
                "name":"Miss wu"
            }
        ]
    }
}

我們將這個文件放在src同級目錄下。

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

二、編寫 dev-server.js文件

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

var app = express()
//獲取data.json數據
var scoreData = require('../data.json');
//獲取data.json文件里面的school
var school = scoreData.school;
//編寫路由
var apiR = express.Router();
apiR.get('/school', function (req, res) {
  res.json({
    errno: 0,
    data: school
  });
});
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文件中

<template>
  <div id="app">
    <hello :school="school"></hello><!--v-bind傳遞數據-->
  </div>
</template>

<script>
import hello from './components/Hello.vue'//導入組件


export default {
  data(){
    return{
      school:{}
    }
  },
  created(){
    this.$http.get('/api/school').then((response)=>{//異步請求數據
    response=response.body
    if(response.errno===0){
      this.school=response.data
      console.log(this.school)//我們先來控制台看看數據有沒有獲取到，這句測試完之后記得刪除
    }
    })
  },
  components:{//注冊hello組件
    'hello':hello
  }
}
</script>

<style>
</style>

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

<template>
  <div class="hello">
    <table class="stu">
      <caption>學生成績表</caption>
      <tr class="stu-th">
        <th v-for="t in title">{{t}}</th>
      </tr>
      <tr v-for="row in school.students">
        <td>{{row.name}}</td>
        <td>{{row.sex}}</td>
        <td>{{row.age}}</td>
        <td>{{row.Chinese}}</td>
        <td>{{row.Math}}</td>
        <td>{{row.English}}</td>
        <td>{{row.TotalPoint}}</td>
      </tr>
    </table>
    <table class="che">
      <caption>教師執教班級</caption>
      <tr class="che-th">
        <th v-for="c in teacher">{{c}}</th>
      </tr>
      <tr v-for="rows in school.teacher">
        <td>{{rows.name}}</td>
        <td>{{rows.class}}</td>
      </tr>
    </table>
  </div>
</template>


<script>
export default {
  data(){
    return{
      title:['姓名','性別','年齡','語文','數學','英語','總分'],
      teacher:['教師姓名','班級']
    }
  },
  props:{//接收App父組件傳遞過來的school數據
    school:{
      type:Object//定義傳遞過來的數據類型為Object，因為我們前面說到獲取到的數據類型為Object
    }
  }
}
</script>


<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
</style>

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

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

2.stylus的安裝和使用

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

首先在package.json里面的devDependencies項目依賴添加"stylus-loader": "^2.1.1"這一項，然后再重新安裝，npm install stylus

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

<style>
.stu
  width:700px
  border:solid 2px black
  .stu-th
    background:rgb(0,136,225)
  tr
    text-align:center
.che
  width:700px
  border:solid 2px black
  .che-th
    background:rgb(0,136,225)
  tr
    text-align:center
</style>

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

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

現在效果好看多了。

四、結語

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