使用 Express.js 和 Vue.js 构建单页应用-JavaScript中文网-JavaScript教程资源分享门户

使用 Express.js 和 Vue.js 构建单页应用

随着互联网的普及，单页应用成为越来越多开发者的选择。单页应用通过 AJAX 技术，将请求发送到服务器后，在不刷新页面的情况下，异步更新部分页面的内容。本文将介绍如何使用 Express.js 和 Vue.js 构建一个简单的单页应用。

Express.js 简介

Express.js 是一款基于 Node.js 平台的 Web 框架，它提供了许多方便的功能，比如路由处理、中间件、模板引擎等等。在本文中，我们主要使用 Express.js 提供的路由功能来搭建后端 API。

Vue.js 简介

Vue.js 是一款轻量级的渐进式 JavaScript 框架，被广泛应用于构建互联网应用。它通过数据绑定和组件化开发的方式，简化了前端开发的流程，使得我们能够更快、更高效地开发应用。

搭建 Express.js 服务端

在开始构建单页应用前，我们先需要搭建一个 Express.js 服务端。打开终端，进入新建的目录，输入以下命令：

npm init

按照提示完成初始化，然后安装 Express.js：

npm install express --save

接下来，新建一个 server.js 文件，并输入以下代码：

const express = require('express')
const app = express()

app.listen(3000, () => console.log('Server is running on port 3000'))

这个文件用于启动一个 Express.js 服务端，并监听 3000 端口。我们可以使用 node server.js 命令启动服务端。如果一切正常，你将在终端看到 Server is running on port 3000 的输出。

构建 Vue.js 客户端

我们需要在服务端提供一个 API，用于提供数据，然后在客户端使用这些数据来渲染页面。首先，我们需要在 HTML 文件中引入 Vue.js 和我们写的 JS 文件：

// www.javascriptcn.com code example
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My SPA</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="client.js"></script>
  </head>
  <body>
    <div id="app">
      <h1>{{ message }}</h1>
    </div>
  </body>
</html>

在这个例子中，我们使用了 CDN 来引入 Vue.js。然后，我们在 <div> 中使用了 Vue.js 模板语法来绑定数据。现在，在本目录下新建一个 client.js 文件：

new Vue({
  el: '#app',
  data: {
    message: 'Hello, World!'
  }
})

在这个例子中，我们创建了一个 Vue 实例，并使用 data 属性来初始化一个变量 message 。现在我们可以使用浏览器访问 localhost:3000 来查看页面效果了。

使用 Express.js 提供 API

我们的页面现在只渲染了一个静态数据，但是并没有使用到服务端。以下为将其与服务端整合的过程：

在 server.js 文件中启用静态文件服务。

app.use(express.static('public'))

这将会让 Express.js 在 /public 目录下寻找静态文件，并返回相应的内容。

在 /api 路径下添加一个数据接口，返回一个 JSON 格式的数据。

app.get('/api/data', (req, res) => {
  const data = { message: 'Hello, World!' }
  res.send(data)
})

app.get() 方法用来定义一个 GET 请求，通过 /api/data 路径访问时返回一个包含 message 属性的 JSON 数据。

修改 client.js 文件，使用 AJAX 技术从服务器获取数据。

// www.javascriptcn.com code example
new Vue({
  el: '#app',
  data: {
    message: ''
  },
  created() {
    this.getData()
  },
  methods: {
    getData() {
      fetch('/api/data')
        .then(res => res.json())
        .then(data => this.message = data.message)
    }
  }
})

在这个例子中，我们利用 Vue.js 提供的 created() 生命周期钩子，在实例创建后立即通过 fetch() 方法发起一个 GET 请求来获取数据，然后使用 this.message 更新页面内容。

现在，打开浏览器并访问 localhost:3000，你应该可以看到一个渲染了从服务器获取的数据的页面。

结语

通过学习本文，你应该已经掌握了使用 Express.js 和 Vue.js 构建单页应用的基本方法。有了这个基础，你可以进一步探索更复杂的应用场景，比如使用路由来实现多页面应用等等。最后，附上示例代码的 Github 仓库地址：https://github.com/qiuzhiqian/single-page-app-with-express-and-vue 。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67cfe124e46428fe9ec1c48b

使用 Express.js 和 Vue.js 构建单页应用

接着读