21xrx.com
2024-05-20 08:06:10 Monday
登录
文章检索 我的文章 写文章
Vue实现Node.js的增删改查功能
2023-07-05 15:11:49 深夜i     --     --
Vue Node js 增删改查 功能实现 数据库操作

Vue和Node.js是两个非常流行的开源技术，在现代web开发中被广泛使用。Vue是一个轻量级的前端框架，提供了很多强大的功能，如组件化、响应式设计和数据绑定；Node.js是一个运行在服务器端的JavaScript运行时环境，它可以让开发者用JavaScript编写后端应用程序。

在本文中，我们将探讨如何使用Vue实现一个简单的Node.js增删改查（CRUD）功能。我们将使用Vue.js和Node.js连接数据库来创建一个简单的web应用程序，这个应用程序涉及对电影数据的增删改查操作。

1. 创建Vue项目

首先，我们需要创建一个Vue项目。在命令行中输入以下命令：

vue create crud

这将使用Vue CLI创建一个名为crud的新项目。完成后，我们可以进入项目目录并运行应用程序：

cd crud

npm run serve

现在，我们可以在浏览器中访问http://localhost:8080/，查看我们的Vue项目是否已经成功运行。

2. 创建Node.js服务器

接下来，我们需要创建一个Node.js服务器，用于接受Vue应用程序的请求并响应数据。我们将使用Express.js框架来创建服务器。在命令行中输入以下命令：

npm install express --save

这将安装Express.js框架，并将其保存为我们应用程序的依赖项。

创建一个名为server.js的新文件，在其中添加以下代码：

const express = require('express');

const app = express();

app.get('/', (req, res) => {

 res.send('Hello World!');

});

const PORT = process.env.PORT || 5000;

app.listen(PORT, () => {

 console.log(`Server running on port ${PORT}`);

});

这段代码创建一个基本的Express.js服务器，并将其运行在本地5000端口上。

可以在命令行中输入以下命令来启动我们的服务器：

node server.js

现在，我们可以在浏览器中访问http://localhost:5000/，查看我们的服务器是否已经成功运行。

3. 实现增删改查功能

接下来，我们将使用MongoDB数据库来存储电影数据，并通过Node.js和Vue.js应用程序对其进行增删改查操作。

首先，我们需要安装mongoose模块，用于连接MongoDB数据库。在命令行中输入以下命令：

npm install mongoose --save

然后，在server.js文件中添加以下代码来连接数据库：

const mongoose = require('mongoose');

mongoose.connect(process.env.MONGODB_URI || 'mongodb://localhost/crud',

 useNewUrlParser: true);

mongoose.connection.on('connected', () => {

 console.log('Connected to database');

});

这段代码连接MongoDB数据库，并在连接成功时输出一条消息。

接下来，我们需要定义一个电影模型，用于存储电影数据。在server.js文件中添加以下代码：

const Schema = mongoose.Schema;

const movieSchema = new Schema(

 title: String);

const Movie = mongoose.model('Movie', movieSchema);

这段代码定义了一个简单的电影模型，并将其保存为Movie变量。

现在，我们可以开始实现增删改查操作。我们将使用RESTful API来处理这些操作：

- 增加：使用POST请求向服务器发送电影数据，并将其保存到MongoDB数据库中。

- 删除：使用DELETE请求向服务器发送电影ID，并从数据库中删除该电影。

- 修改：使用PUT请求向服务器发送电影ID和新电影数据，并将其更新到数据库中。

- 查询：使用GET请求从服务器获取所有电影数据，并通过Vue.js应用程序显示。

首先，我们需要使用body-parser模块来解析POST和PUT请求的请求体。在server.js文件中添加以下代码：

const bodyParser = require('body-parser');

app.use(bodyParser.json());

这段代码将body-parser模块注册为Express.js应用程序的中间件，用于解析JSON请求体。

接下来，我们需要定义HTTP路由来处理RESTful API的请求。在server.js文件中添加以下代码：

// Create a new movie

app.post('/movies', (req, res) => {

 const movie = new Movie(

  year: req.body.year

 );

 movie.save()

  .then(() => {

   res.send('Movie saved to database');

  })

  .catch((err) => {

   console.error(err);

  });

});

// Delete a movie

app.delete('/movies/:id', (req, res) => {

 Movie.findByIdAndRemove(req.params.id)

  .then(() => {

   res.send('Movie removed from database');

  })

  .catch((err) => {

   console.error(err);

  });

});

// Update a movie

app.put('/movies/:id', (req, res) => {

 const movie =

  director: req.body.director;

 Movie.findByIdAndUpdate(req.params.id, movie)

  .then(() => {

   res.send('Movie updated in database');

  })

  .catch((err) => {

   console.error(err);

  });

});

// Get all movies

app.get('/movies', (req, res) => {

 Movie.find({})

  .then((movies) => {

   res.send(movies);

  })

  .catch((err) => {

   console.error(err);

  });

});

这段代码创建了四个HTTP路由来处理RESTful API请求。每个路由都有一个唯一的URL和一个处理请求的回调函数。

现在，我们已经完成了Node.js服务器端对MongoDB数据库的增删改查操作，接下来，我们需要在Vue.js应用程序中实现前端展示、交互等功能。

4. 实现Vue.js前端

我们将使用Vue.js创建一个单页面应用程序，用于显示电影数据、添加新电影、修改电影和删除电影。

首先，在src目录中创建一个名为components的新文件夹，用于存储Vue组件。然后，创建四个组件，分别是：

- 电影列表组件（MovieList）：用于显示所有电影数据。

- 添加电影组件（AddMovie）：用于添加新电影数据。

- 修改电影组件（EditMovie）：用于修改电影数据。

- 删除电影组件（DeleteMovie）：用于删除电影数据。

每个组件均包含Vue模板、Vue样式和Vue逻辑。

首先，我们需要使用Axios模块来发送HTTP请求。在命令行中输入以下命令：

npm install axios --save

然后，我们在Vue组件中使用Axios模块发送HTTP请求。在MovieList组件中添加以下代码：

这段代码使用Axios模块从服务器获取电影数据，并在mounted生命周期中更新组件状态。然后，它定义了两个方法：handleDelete和handleEdit。handleDelete方法用于删除电影数据，handleEdit方法用于将用户重定向到修改电影数据的页面。

在AddMovie组件中添加以下代码：

    

    

    

    

    

    

   

这段代码定义了一个表单，用于添加新电影数据。将表单提交后，数据将通过Axios模块发送到服务器。

在EditMovie组件中添加以下代码：

    

    

    

    

    

    

   

这段代码定义了一个表单，用于修改电影数据。将表单提交后，数据将通过Axios模块发送到服务器。

最后，在DeleteMovie组件中添加以下代码：

Are you sure you want to delete this movie?

{{ movie.title }} ({{ movie.year }})

  

   Cancel

这段代码显示了要被删除的电影信息。将删除电影数据后，用户将被重定向回电影列表页面。

完成后，我们可以启动Vue.js应用程序，并在浏览器中访问http://localhost:8080/，就可以看到我们的应用程序了。

总结

在本文中，我们使用Vue.js和Node.js创建了一个简单的web应用程序，用于对MongoDB数据库的数据进行增删改查操作。我们使用了Axios模块发送HTTP请求，并创建了四个Vue组件来实现前端展示、交互和用户体验。这个应用程序提供了一个简单、易用且实用的CRUD操作示例，可以作为学习Vue.js、Node.js和MongoDB的一个优秀案例。

  
  

评论区

{{item['qq_nickname']}}
()
回复
回复