Vue是一款流行開源前端框架,通過組件化開發提高了開發效率和可維護性。而Express則是一款基于Node.js的開源后端框架,可以快速構建Web應用。
在實際開發中,Vue通常與Express相互配合使用,構建出全棧JavaScript應用程序。下面,我們通過一個簡單的案例來說明Vue與Express的配合使用。
const express = require('express');
const app = express();
app.get('/api/students', function(req, res) {
const students = [
{ name: 'Tom', age: 18 },
{ name: 'Lucy', age: 17 },
{ name: 'Lily', age: 16 },
];
res.json(students);
});
app.listen(3000, function() {
console.log('Server running at http://localhost:3000');
});
上面的代碼是一個簡單的Express應用,我們通過訪問/api/students接口可以獲取到學生的信息。接下來,我們使用Vue來展示這些學生的信息。
<template>
<div>
<h1>學生信息</h1>
<ul>
<li v-for="(student, index) in students" :key="index">
{{ student.name }},{{ student.age }}歲
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
students: [],
};
},
mounted() {
this.fetchStudents();
},
methods: {
fetchStudents() {
fetch('/api/students').then(response => response.json()).then(data => {
this.students = data;
});
},
},
};
</script>
上面的代碼是一個簡單的Vue組件,我們通過v-for指令來循環渲染學生的信息,通過fetch方法來調用Express后端API獲取學生的信息。
通過上述案例,我們可以看到Vue和Express的結合使用,為我們構建全棧JavaScript應用程序提供了很大的便利。