使用Vue.js和Express.js构建全栈Web应用

依旧_99
2,002 阅读2分钟

在本文中，我们将学习如何结合Vue.js和Express.js构建一个全栈Web应用。Vue.js作为前端框架，用于构建用户界面，而Express.js是一个Node.js的Web应用框架，用于构建后端服务。通过这两者的结合，我们能够快速搭建一个具有前后端功能的Web应用。

准备工作

在开始之前，确保你已经具备以下环境和知识：

  1. 熟悉Vue.js基础知识和Vue组件开发。Vue的安装及创建项目 - 掘金 (juejin.cn)
  2. 安装Node.js和npm（Node.js的包管理器）。Node.js的安装和使用 - 掘金 (juejin.cn)

创建Vue.js项目

首先，我们来创建一个新的Vue.js项目：

  1. 打开命令行，并执行以下命令来安装Vue CLI（如果你还没有安装它）：
npm install -g @vue/cli
  1. 创建一个新的Vue项目：
vue create full-stack-app

在创建项目时，选择默认设置或根据你的需要进行自定义配置。

创建Express.js后端

接下来，我们将创建Express.js后端，用于提供数据和服务：

  1. 在Vue项目的根目录下，创建一个新的文件夹server。
  2. 在server文件夹中，创建一个新的JavaScript文件app.js：
const express = require('express');
const app = express();

app.get('/api/data', (req, res) => {
  const data = {
    message: 'Hello from Express!'
  };
  res.json(data);
});

const port = process.env.PORT || 5000;
app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

在这里，我们简单地创建了一个Express应用，并在/api/data路由上返回一个JSON数据。

  1. 在server文件夹中，运行以下命令安装依赖：
npm init -y
npm install express

配置前后端代理

由于我们的Vue应用和Express应用将运行在不同的端口上（Vue默认为8080，Express默认为5000），为了解决跨域问题，我们需要配置前后端代理。

  1. 在Vue项目的根目录下，找到vue.config.js文件（如果没有则创建），并添加以下配置：
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        ws: true,
        changeOrigin: true
      }
    }
  }
};

这将把所有以/api开头的请求代理到Express后端的地址（http://localhost:5000）。

修改Vue组件

现在，我们需要修改Vue组件来调用Express后端提供的数据。

  1. 在Vue项目的src目录下，创建一个新的文件夹components，然后在其中创建一个新的组件文件HelloWorld.vue：
<template>
  <div>
    <h1>{{ message }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        const response = await this.$http.get('/api/data');
        this.message = response.data.message;
      } catch (error) {
        console.error(error);
      }
    }
  }
};
</script>

在这里，我们使用了Vue的$http对象来发起HTTP请求，从Express后端获取数据并将其显示在页面上。

在App.vue中使用HelloWorld组件

最后，我们将HelloWorld组件添加到App.vue中以显示数据：

<template>
  <div id="app">
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue';

export default {
  components: {
    HelloWorld
  }
};
</script>

运行应用

现在，我们已经完成了全栈Web应用的开发。运行以下命令启动应用：

npm run serve

现在，打开浏览器并访问http://localhost:8080，你将看到页面上显示"Hello from Express!"，这是从Express后端获取的数据。

结论

现在已经成功使用Vue.js和Express.js构建了一个全栈Web应用。通过结合Vue的前端能力和Express的后端服务，你可以构建出功能强大的全栈应用。希望这篇文章对你有所帮助，让你对Vue.js和Express.js的结合应用有了更深入的了解。愿你在全栈开发的旅程中取得更多成就，创造出更多优秀的应用作品！

avatar
文章
阅读
粉丝