Vue.js + Node.js + MongoDB 构建 SPA 应用

介绍

随着互联网的迅速发展，Web 应用程序的开发变得越来越复杂。为了提高用户体验、增强应用性能和易用性，前端技术也得到了长足的发展。Vue.js 是一款渐进式 JavaScript 框架，可帮助我们构建出高效、灵活且易用的单页面应用（SPA）。Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，可利用事件驱动和非阻塞 I/O 的模型构建高扩展性和高性能的网络和服务器应用程序。MongoDB 是一个面向文档的 NoSQL 数据库管理系统，由于它的高可用性和可扩展性，它已成为 Web 开发领域中最流行的数据库之一。本文将介绍如何使用 Vue.js、Node.js 和 MongoDB 构建一个基于单页面应用程序的 Web 应用程序。

技术栈

你需要的前置技能：

• 熟悉基本的 JavaScript、HTML 和 CSS。
• 熟悉 Vue.js 和 Node.js 的基础。

我们将使用以下技术：

• Vue.js：客户端渲染框架。
• Node.js：服务器端运行时。
• Express.js：Web 应用程序框架。
• MongoDB：文档型 NoSQL 数据库。

步骤

在开始编码之前，请确保在本地安装了以上列出的所有技术。接下来，我们将完成以下步骤：

1. 创建一个 Express.js 的 Web 应用程序和一个 MongoDB 数据库。
2. 配置 Express.js 和 MongoDB。
3. 使用 Vue.js 构建客户端应用程序。
4. 将客户端和服务器端进行连接。
5. 编写外观和响应式页面。
6. 将数据存储在 MongoDB 中，并通过服务器 API 发送和接收数据。

1. 创建一个 Express.js 的 Web 应用程序和一个 MongoDB 数据库

首先，让我们建立一个基于 Express.js 的 Web 应用程序和一个 MongoDB 数据库。你可以使用以下命令来安装 Express.js 和 MongoDB：

npm install express mongodb --save

创建一个名为 "server.js" 的服务器文件，并初始化 Express.js 应用程序，如下所示：

// javascriptcn.com code example
// 引入 Express.js 库
const express = require("express");
// 创建 Express.js 应用程序
const app = express();

// 设置应用程序端口
const port = process.env.PORT || 3000;

// 启动 Web 服务器
app.listen(port, () => {
  console.log(`Server running on port ${port}`);
});

接下来，我们将创建一个基于 MongoDB 的数据库。你可以使用以下命令安装 MongoDB：

npm install mongodb --save

然后，请创建一个名为 "db.js" 的文件，并编写以下代码以连接到 MongoDB 数据库：

// javascriptcn.com code example
// 引入 MongoDB 客户端库
const MongoClient = require('mongodb').MongoClient;

// 数据库地址
const url = 'mongodb://localhost:27017';

// 数据库名称
const dbName = 'myapp';

// 连接到 MongoDB 数据库
MongoClient.connect(url, (err, client) => {
  if (err) throw err;

  console.log(`Connected to MongoDB server`);

  const db = client.db(dbName);

  // 关闭客户端连接
  client.close();
});

现在，我们已创建了一个 Express.js 的 Web 应用程序和一个 MongoDB 数据库。

2. 配置 Express.js 和 MongoDB

在将 Express.js 和 MongoDB 进行结合之前，我们需要进行一些配置。为了实现这一点，我们将使用第三方库。请确保安装以下依赖：

npm install cors body-parser --save

现在，我们可以将以下代码添加到 "server.js" 中以启用 CORS 支持，并配置 body-parser 中间件：

// javascriptcn.com code example
const cors = require("cors");
const bodyParser = require("body-parser");

// 通过 CORS 支持跨域请求
app.use(cors());

// 配置请求体解析
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 发现 Express App，设置根路径
app.get("/", (req, res) => {
  res.send(`Hello World`);
});

3. 使用 Vue.js 构建客户端应用程序

现在，让我们使用 Vue.js 构建基于客户端的应用程序。同样，请确保安装了 Vue.js：

npm install vue --save

在此项目中，我们将使用 Vue CLI 自动化工具，使用以下命令全局安装它：

npm install -g vue-cli

接下来，请使用以下命令创建基于 Vue.js 的 Web 应用程序：

vue init webpack myapp

该命令将创建名为 "myapp" 的新目录，其中包含生成的应用程序模板。现在，切换到新创建的应用程序文件夹，并使用以下命令安装依赖项：

cd myapp
npm install

以下是 Vue.js 应用程序的主要文件：

• "src/main.js" - 主 JavaScript 文件。
• "src/App.vue" - 主 Vue 应用程序文件。
• "src/components" - Vue 组件目录。

在 "src/main.js" 文件中添加以下代码，启动 Vue 应用程序：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

4. 将客户端和服务器端进行连接。

现在，我们已准备好连接客户端和服务器端。为此，请添加以下代码到 "server.js" 文件中：

// 公开静态资源，这里是 dist 目录
app.use(express.static("myapp/dist"));

调用 API

我们可以使用以下代码在客户端和服务器之间进行交流，该代码使用 Axios：

1. 首先，请安装 Axios：

npm install axios --save

1. 然后，请在 "package.json" 文件中添加以下内容：

// javascriptcn.com code example
{
  "name": "myapp",
  "version": "1.0.0",
  "description": "Vue.js SPA and Node.js API",
  "main": "server.js",
  "scripts": {
    "dev": "node server.js",
    "build": "vue-cli-service build && node server.js"
  },
  "dependencies": {
    "axios": "^0.18.0",
    "body-parser": "^1.18.3",
    "cors": "^2.8.5",
    "express": "^4.16.4",
    "mongodb": "^3.2.18",
    "serve-static": "^1.13.2"
  }
}

1. 最后，请在 "App.vue" 中添加以下代码，以调用服务器端 API：

// javascriptcn.com code example
<template>
  <div class="hello">
    <h1 v-if="greeting">{{ greeting }}</h1>
    <form v-if="!greeting" @submit.prevent="submit">
      <input type="text" v-model="name" placeholder="请输入姓名" />
      <button type="submit">提交</button>
    </form>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      name: '',
      greeting: '',
    };
  },
  methods: {
    submit() {
      axios
        .post(`http://localhost:3000/api/users`, { name: this.name })
        .then(res => {
          this.greeting = res.data.message;
        })
        .catch(err => {
          console.log(err);
        });
    },
  },
};
</script>

5. 编写外观和响应式页面

在这一步中，我们将使用 Materialize CSS 框架来设计 UI。我们将在 Vue.js 应用程序中使用 Materialize Vue 插件。首先，请安装 Materialize CSS：

npm install materialize-css --save

接下来，请使用以下命令安装 Materialize Vue 插件：

npm install vue-materialize --save

要连接 Materialize Vue，请添加以下代码到 "src/main.js" 中：

import 'materialize-css/dist/css/materialize.min.css';
import 'materialize-css/dist/js/materialize.min.js';
import VueMaterial from 'vue-materialize';

Vue.use(VueMaterial);

还需要按照 Materialize Vue 官网中的话，舍去Vue-cli自动生成的/App.vue 和/components目录，重新写一个App.vue，写法如下：

// javascriptcn.com code example
<template>
  <div>
    <nav>
      <div class="nav-wrapper blue-grey darken-4">
        <a href="#" class="brand-logo center">SPA</a>
        <ul id="nav-mobile" class="right hide-on-med-and-down">
          <li><router-link to="/">Home</router-link></li>
          <li><router-link to="/about">About</router-link></li>
          <li><router-link to="/users">Users</router-link></li>
        </ul>
      </div>
    </nav>

    <router-view></router-view>
  </div>
</template>

同时，不要忘记修改 "src/main.js" 文件中的代码：

// javascriptcn.com code example
import Vue from 'vue';
import router from './router';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import App from './App.vue';

import 'bootstrap/dist/css/bootstrap.css';
import 'bootstrap-vue/dist/bootstrap-vue.css';

Vue.config.productionTip = false;

Vue.use(BootstrapVue);
Vue.use(IconsPlugin);

new Vue({
  router,
  render: h => h(App),
}).$mount('#app');

我们可以使用以下代码在 "src/components" 目录中创建组件：

// javascriptcn.com code example
<template>
  <div>
    <ul>
      <li v-for="user in users" :key="user._id">
        <span>{{ user.name }}</span> - <span>{{ user.email }}</span>
      </li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data: () => ({
    users: [],
  }),
  created() {
    axios
      .get('http://localhost:3000/api/users')
      .then(res => (this.users = res.data))
      .catch(err => console.log(err));
  },
};
</script>

接下来，在 "router.js" 中添加以下代码：

// javascriptcn.com code example
import Vue from 'vue';
import Router from 'vue-router';

import Home from './components/Home.vue';
import About from './components/About.vue';
import Users from './components/Users.vue';

Vue.use(Router);

const router = new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
    },
    {
      path: '/about',
      name: 'About',
      component: About,
    },
    {
      path: '/users',
      name: 'Users',
      component: Users,
    },
  ],
});

export default router;

我们已经编写了外观和响应式页面，我们的 Web 应用程序现在看起来非常漂亮。

6. 将数据存储在 MongoDB 中，并通过服务器 API 发送和接收数据

现在，我们将使用以下代码连接到 MongoDB 数据库并存储数据：

// javascriptcn.com code example
const MongoClient = require('mongodb').MongoClient;
const ObjectID = require('mongodb').ObjectID;

// 您的数据库 URI 和名称
const uri = 'mongodb://localhost:27017/myapp';
const dbName = 'myapp';

// 连接到 MongoDB 数据库
MongoClient.connect(uri, { useNewUrlParser: true }, (err, client) => {
  if (err) throw err;

  const db = client.db(dbName);

  // 此 API 将保存新用户记录到 MongoDB
  app.post('/api/users', (req, res) => {
    const { name } = req.body;

    const collection = db.collection('users');

    collection.insertOne({ name }, (err, doc) => {
      if (err) throw err;

      const message = 'Hello, ' + name + '. You have successfully signed up.';

      res.json({ message });
    });
  });

  // 此 API 将从 MongoDB 加载用户数据
  app.get('/api/users', (req, res) => {
    const collection = db.collection('users');

    collection.find().toArray((err, docs) => {
      if (err) throw err;

      res.json(docs);
    });
  });

  app.listen(port, () => {
    console.log(`Server running on port ${port}`);
  });
});

我们已成功将数据存储在 MongoDB 中，并将其发送和接收到客户端。

结论

在本教程中，我们使用了 Vue.js、Node.js 和 MongoDB 构建出了一个简单的 Web 应用程序。Vue.js 是一款非常受欢迎的客户端渲染框架，可帮助您创建快速、灵活且易用的单页面应用程序。Node.js 则是一个高度灵活和可扩展的 JavaScript 运行时，它支持非阻塞 I/O、跨平台开发和事件驱动架构。MongoDB 是一种高性能、弹性和高可用性的数据库，支持面向文档的 NoSQL 数据库管理。通过结合这些技术，我们可以轻松构建出现代化的 Web 应用程序。

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