本文共 3328 字，大约阅读时间需要 11 分钟。

node.js + React 写的一个登录注册 DEMO 测试

目录结构

注意事项

• 确保前端和后端运行在同一网络环境下
• 后端数据库连接信息需修改为实际数据库配置
• 用户注册时 name 字段需加上单引号
• 后端 API 路由需根据实际项目路径调整

前端代码示例

// src/api/index.jsimport axios from 'axios';const base = {  baseUrl: 'http://localhost:3001',  register: '/users/register',  login: '/users/login',  updata: '/users/updata',  del: '/users/del',  allUser: '/users/allUser'};const api = {  register(params) {    return axios({      method: 'POST',      url: base.baseUrl + base.register,      data: params    });  },  login(params) {    return axios({      method: 'POST',      url: base.baseUrl + base.login,      data: params    });  },  updata(params) {    return axios({      method: 'PUT',      url: base.baseUrl + base.updata,      data: params    });  },  del(params) {    return axios({      method: 'DELETE',      url: base.baseUrl + base.del,      params: params    });  },  allUser(params) {    return axios({      method: 'GET',      url: base.baseUrl + base.allUser,      params: params    });  }};export default api;

后端代码示例

const express = require('express');const router = express.Router();const db = require('./utils/db');router.get('/', (req, res) => {  res.send('欢迎访问我们的登录注册系统');});// 用户注册路由router.post('/register', (req, res) => {  const { name, pwd } = req.body;  const sql = `SELECT * FROM login WHERE name = '${name}'`;  db.query(sql, (error, data) => {    if (error) return res.status(500).send('数据库错误');    if (data.length > 0) {      return res.send({ msg: '用户名已存在' });    }    const insertSql = `INSERT INTO login (name, pwd) VALUES('${name}', '${pwd}')`;    db.query(insertSql, (error, data) => {      if (error) return res.status(500).send('插入失败');      return res.send({ msg: '注册成功,请登录' });    });  });});// 用户登录路由router.post('/login', (req, res) => {  const { name, pwd } = req.body;  const sql = `SELECT * FROM login WHERE name = '${name}' AND pwd = '${pwd}'`;  db.query(sql, (error, data) => {    if (error) return res.status(500).send('登录失败');    if (data.length > 0) {      return res.send({ msg: '登录成功', storage: name });    }    return res.send({ msg: '账号或密码错误' });  });});// 用户信息修改路由router.put('/updata', (req, res) => {  const { name, pwd } = req.body;  const sql = `UPDATE login SET pwd = '${pwd}' WHERE name = '${name}'`;  db.query(sql, (error, data) => {    if (error) return res.status(500).send('修改失败');    if (data.affectedRows > 0) {      return res.send({ msg: '修改成功,请重新登录' });    }    return res.send({ msg: '修改失败' });  });});// 用户删除路由router.delete('/del', (req, res) => {  const { delName } = req.query;  const sql = `DELETE FROM login WHERE name = '${delName}'`;  db.query(sql, (error, data) => {    if (error) return res.status(500).send('删除失败');    if (data.affectedRows > 0) {      return res.send({ msg: '用户已成功删除' });    }    return res.send({ msg: '删除失败' });  });});// 查看所有用户路由router.get('/allUser', (req, res) => {  const sql = `SELECT * FROM login`;  db.query(sql, (error, data) => {    if (error) return res.status(500).send('查询失败');    if (data.length > 0) {      return res.send(data);    }    return res.send({ msg: 0 });  });});module.exports = router;

源码下载建议

根据上述代码示例，建议将前端和后端代码分别下载至项目根目录，进行如下步骤：

如有疑问，可在项目 issue 中反馈。

转载地址：http://ppjfk.baihongyu.com/