教程：使用 Express.js 和 Vue.js 构建现代 Web 应用-JavaScript中文网-JavaScript教程资源分享门户

在当前的互联网时代，Web 应用已经成为了重要的软件开发领域之一。构建现代 Web 应用需要使用多种技术来完成，其中前端开发就是其中非常重要的领域之一。在本教程中，我们将介绍如何使用 Express.js 和 Vue.js 构建现代 Web 应用。

Express.js 简介

Express.js 是一个开源、灵活、简洁的 Node.js Web 应用框架，可以用于创建各种类型的 Web 应用程序和 API。Express.js 提供了许多功能，例如：

简化了 Node.js 的操作和功能；
可以用于处理 HTTP 请求和响应；
可以轻松地处理 URL 路由；
支持多种模板引擎。

Vue.js 简介

Vue.js 是一个流行的 JavaScript 前端框架，用于构建现代 Web 应用程序的用户界面。Vue.js 具有以下功能：

轻量级框架，易于学习使用；
双向数据绑定；
组件化开发；
支持虚拟 DOM。

使用 Express.js 和 Vue.js 构建现代 Web 应用

在我们的示例中，我们将使用 Express.js 和 Vue.js 构建一个使用 MongoDB 数据库存储数据的 Web 应用程序。

第一步：创建 Express 项目

首先，我们需要在本地计算机上安装 Node.js 和 Express.js。接下来，我们可以使用以下命令在命令行中创建一个 Express 项目：

npx express-generator --view=ejs test

这将创建一个名为 test 的新项目，并使用 EJS 模板引擎。在项目文件夹中，我们可以看到以下文件和文件夹：

app.js
bin/
node_modules/
package-lock.json
package.json
public/
routes/
views/

其中，app.js 是 Express 项目的主要 JavaScript 文件。

第二步：构建 API

接下来，我们将创建一个简单的 API 路径，该路径可以存储用户数据并在浏览器中显示。在 app.js 文件中，添加以下代码：

// javascriptcn.com 代码示例
var express = require('express');
var bodyParser = require('body-parser');
var mongoose = require('mongoose');
var User = require('./models/users.js');
var app = express();
var router = express.Router();
app.use(bodyParser.json());

mongoose.connect('mongodb://localhost/user_app').then(() => console.log('connection successful')).catch((err) => console.error(err));

router.get('/', function(req, res) {
  res.json({ message: 'API Initialized!'});
});

router.route('/users')
  .get(function(req, res) {
    User.find(function(err, users) {
      if (err)
        res.send(err);
      res.json(users);
    });
  })
  .post(function(req, res) {
    var user = new User();
    user.username = req.body.username;
    user.email = req.body.email;
    user.password = req.body.password;

    user.save(function(err) {
      if (err)
        res.send(err);
      res.json({ message: 'User created!' });
    });
  });

app.use('/api', router);

app.listen(3000, function() {
  console.log('listening on 3000');
});

第三步：创建 Vue.js 项目

接下来，我们将创建一个 Vue.js 项目。在命令行中运行以下命令：

vue create client

在创建项目时，我们可以选择使用哪些功能和插件。默认情况下，我们将选择 Babel、Router、Vuex 和 Linter。安装完成后，我们可以使用以下命令在 localhost:8080 中运行项目：

npm run serve

在项目中，我们将使用以下目录结构：

src/
  components/
    UserForm.vue
    UserList.vue
  App.vue
  main.js

第四步：创建用户界面

现在我们将创建一个用户界面，该界面允许用户输入和存储新用户。我们将创建两个组件，一个用于显示用户列表，另一个用于创建新用户。

在 UserForm.vue 中，添加以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h2>Create User</h2>
    <form @submit.prevent="createUser">
      <div>
        <label>Username: </label>
        <input type="text" v-model="username" required>
      </div>
      <div>
        <label>Email: </label>
        <input type="email" v-model="email" required>
      </div>
      <div>
        <label>Password: </label>
        <input type="password" v-model="password" minlength="6" required>
      </div>
      <button type="submit">Submit</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      username: '',
      email: '',
      password: ''
    }
  },
  methods: {
    createUser() {
      const user = {
        username: this.username,
        email: this.email,
        password: this.password
      }
      this.$store.dispatch('createUser', user)

      this.username = '';
      this.email = '';
      this.password = '';
    }
  }
}
</script>

在 UserList.vue 中，添加以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <h2>User List</h2>
    <ul>
      <li v-for="user in users" :key="user._id">
        <h4>{{ user.username }}</h4>
        <p>{{ user.email }}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    users() {
      return this.$store.state.users;
    }
  },
  created() {
    this.$store.dispatch('fetchUsers');
  }
}
</script>

在 App.vue 中，添加以下代码：

// javascriptcn.com 代码示例
<template>
  <div>
    <UserForm />
    <UserList />
  </div>
</template>

<script>
import UserForm from './components/UserForm.vue';
import UserList from './components/UserList.vue';

export default {
  components: {
    UserForm,
    UserList
  }
}
</script>

第五步：连接 API 和 Vue.js

最后，我们需要将我们刚刚创建的 Web 应用程序的前端和后端部分连接起来。我们可以使用 axios 发出请求并处理响应。在 store.js 文件中，添加以下代码：

// javascriptcn.com 代码示例
import axios from 'axios';

const state = {
  users: []
}

const getters = {}

const mutations = {
  SET_USERS(state, users) {
    state.users = users;
  }
}

const actions = {
  fetchUsers({commit}) {
    axios.get('/api/users')
      .then(response => {
        commit('SET_USERS', response.data);
      })
  },
  createUser({}, user) {
    axios.post('/api/users', user)
      .then(response => {
        console.log(response);
      })
  }
}

export default {
  state,
  getters,
  mutations,
  actions,
}

现在我们可以在浏览器中查看我们的 Web 应用程序，使用以下命令运行 Vue.js 项目：

npm run serve

在浏览器中键入 localhost:8080，将会看到一个用户表格，您可以在其中添加新用户并查看所有用户。

总结

在本文中，我们已经介绍了如何使用 Express.js 和 Vue.js 构建现代 Web 应用。我们已经了解了如何使用 Express.js 构建一个简单的 API，以及如何使用 Vue.js 构建一个用户界面并将其连接到我们的 API。这个示例应该可以作为一个好的起点，以便您可以开始构建您自己的应用程序。无论您是新手还是有经验的开发人员，Express.js 和 Vue.js 都是高效、优秀的工具，可以帮助您设计和构建出色的 Web 应用程序。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652a2b1a7d4982a6ebc84790