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);

 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>

 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>

 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>