返回

实战:发挥Lumen和Vue之强大力量,构建个人清单应用(四)开发清单模块接口

前端

今天是笔者参与8月更文挑战的第30天,活动详情查看:8月更文挑战。

个人清单应用开发

我们的清单应用功能非常不复杂,所以我们只为它提供一个编辑昵称和性别的功能,让用户可以直接更新用户的这两个字段。

前端只需传输两个字段

接下来,在前端需要传输的参数只有 nick_namesex 两个,它们直接更新用户的这两个字段即可。
代码如下:

'use strict';

const express = require('express');
const app = express();
const port = 3000;

// 数据库连接
const mysql = require('mysql');
const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'todo_list'
});

// 开启数据库连接
connection.connect();

// 前端需要传输的参数只有 nick_name 和 sex 两个
app.post('/api/user/update', (req, res) => {
  // 获取前端传输的参数
  const { nick_name, sex } = req.body;

  // 更新用户的昵称和性别
  const sql = `UPDATE users SET nick_name = ?, sex = ? WHERE id = 1`;
  connection.query(sql, [nick_name, sex], (err, result) => {
    if (err) {
      res.status(500).json({
        success: false,
        message: '更新失败'
      });
    } else {
      res.json({
        success: true,
        message: '更新成功'
      });
    }
  });
});

// 开启服务
app.listen(port, () => {
  console.log(`服务已开启,端口号:${port}`);
});

结语

上述内容就是关于我们如何使用 Lumen 和 Vue 来构建个人清单应用的第四部分。在这一部分中,我们主要介绍了如何开发清单模块接口。至此,我们的个人清单应用已经基本完成。在下一部分中,我们将介绍如何将应用部署到服务器上。

希望本文对您有所帮助,如果您有任何问题,欢迎随时留言给我。