node.js+react写的一个登录注册 demo测试

node.js+react写的一个登录注册 demo测试

源码下载链接：点击下载

先看一下目录结构

在说一下注意事项：

前端使用create-react-app脚手架

node使用 express-generator搭建
跨域问题，在后端安装core

post、put传递的参数在body里面获取
get、delete传递的参数在query里面获取

具体代码

前端

前端api文件中封装的路由

import 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 = {
    // 注册(post)
    register(params) {
        return axios(
            {
                method: "POST",
                url: base.baseUrl + base.register,
                data: params
            });
    },

    // 登录(post)
    login(params) {
        return axios(
            {
                method: "POST",
                url: base.baseUrl + base.login,
                data: params
            }
        )
    },

    //修改(put)
    updata(params) {
        return axios(
            {
                method: "put",
                url: base.baseUrl + base.updata,
                data: params
            }
        )
    },
    // 删除(delete)
    del(params) {
        return axios(
            {
                method: "delete",
                url: base.baseUrl + base.del,
                params: params
            }
        )
    },

    // 所有用户(get)
    allUser(params) {
        return axios(
            {
                method: "get",
                url: base.baseUrl + base.allUser,
                params: params
            }
        )
    }
}

export default api; 

前端列举一个例子：删除用户的请求

    const del = () => {
        console.log(delName, 'delName');
        api.del({
            delName,
        })
            .then(res => {
                console.log('success');
                alert('注销成功，重新登录')
                localStorage.removeItem('name');
                props.history.push('/mine/login');
            })
            .catch(err => {
                console.log('请求失败');
                console.log(err);
            });
    };

后端

链接数据库

let mysql = require('mysql');

let conn = mysql.createConnection({
    host: 'localhost',
    user: 'xxx',
    password: 'xxx',
    database: 'login'
});
conn.connect();


let query = (sql, callback) => {
    conn.query(sql, (err, data) => {
        if (err) {
            return err;
        }
        callback(data);
    })
}

module.exports = {
    query
};

引入跨域

var app = express();

const cors = require('cors');

后端接口路由：

var express = require('express');
var router = express.Router();
const db = require('./../utils/db')

/* GET users listing. */
router.get('/', function(req, res, next) {
  res.send('respond with a resource');
});


// 注册
router.post('/register', (req, res) => {

  let name = req.body.name.trim();
  let pwd = req.body.pwd.trim();
  console.log(name, pwd);

  //注意这里的name要加 '', 这里是后面改的，下载的源码有错误自行修改
  let sql = `select * from login where name = '${name}'`;
  db.query(sql, data => {
      console.log(data,'注册data');
      if (data.length > 0) {
          res.send({ msg: '用户名已存在' });
      } else {
          let sql2 = `insert into login values(null,'${name}','${pwd}')`;
          db.query(sql2, data => {
              if (data.affectedRows > 0) {
                  res.send({ msg: '注册成功,请登录' });
              } else {
                  res.send({ msg: '插入失败' });
              }
          });
      }
  });
});

// 登录
router.post('/login', (req, res) => {
  console.log(req.body,'req.body');
  console.log(req.query,'req.query');
  // let {name,pwd} = req.body
  let name = req.body.name.trim();
  let pwd = req.body.pwd.trim();
  // // console.log(name,pwd);

  let sql = `select * from login where name = '${name}' and pwd="${pwd}"`;
  db.query(sql, data => {
      // console.log(data,'data登录');
      if (data.length > 0) {
          res.send({ msg: '登录成功', storage: name, num: Math.floor(Math.random() * 4) });
      } else {
          res.send({ msg: '账号密码错误' });
      }
  });
});

// 修改
router.put('/updata', (req, res) => {
  // console.log(req.body, 'body');
  let name = req.body.name.trim();
  let pwd = req.body.pwd.trim();
  console.log(name,pwd,'name  pwd');
  // update login set pwd = 888 where pwd = 123
  let sql = `update login set pwd = ${pwd} where name = ${name}`;
  db.query(sql, data => {
      console.log(data,'data');
      if (data.affectedRows > 0) {
          res.send({ msg: '修改成功，请重新登录' });
      } else {
          res.send({ msg: '修改失败' });
      }
  });
});
// 删除
router.delete('/del', (req, res) => {
  let { delName } = req.query;
  console.log(delName);
  let sql = `delete from login where name = ` + delName;
  db.query(sql, data => {
      console.log(data, 'data');
      if (data.affectedRows > 0) {
          res.send({ msg: '删除成功' });
      } else {
          res.send({ msg: '删除失败' });
      }
  });
});
// 查看所有用户
router.get('/allUser', (req, res) => {
  let sql = `select * from login`;
  db.query(sql, data => {
      console.log(data, 'data查看所有用户');
      if (data.length > 0) {
          res.send(data);
      } else {
          res.send({ msg: 0 });
      }
  });
});

module.exports = router;

源码下载链接：点击下载