Javascript 如何从后端到前端使用Axios

我使用reactjs作为我的开发工具，使用mongoDB作为我的后端数据库

我的后端代码如下所示：

const express = require("express");
const jwt = require("jsonwebtoken");
const bcrypt = require("bcrypt");
const { User, VerificationCode } = require("../models");
const { isLoggedIn, getLoggedInUserId, generateRefreshToken } = require("./middlewares");
const sendVerificationEMail = require("./bin/send_email").sendVerificationEmail;
require("dotenv").config();

const router = express.Router();

router.post("/register", async (req, res, next) => {
  const { email, username, password, first_name, last_name } = req.body;
  try {
    // Check if the email is duplicating
    let existingUser = await User.findOne({ where: { email } });
    if (existingUser) {
      return res.status(409).json({
        success: false,
        message: "User already exists.",
      });
    }

    existingUser = await User.findOne({ where: { username } });
    if (existingUser) {
      return res.status(409).json({
        success: false,
        message: "Same nickname user exists.",
      });
    }
    const hash = await bcrypt.hash(password, 12);
    await User.create({
      email,
      username,
      password: hash,
      first_name,
      last_name,
    });
    return res.status(200).json({
      success: true,
      message: "Signup successful.",
    });
  } catch (error) {
    return res.json({
      success: false,
      message: "Signup failed.",
    });
  }
});

// Login
// Create token and return to user (httpOnly cookies)
router.post("/login", async (req, res, next) => {
  const { email, password } = req.body;

  // Make a inquiry of the user through email
  try {
    const user = await User.findOne({ where: { email }, raw: true });
    if (!user) {
      return res.status(401).json({
        success: false,
        message: "No member exists.",
      });
    }

    // Check password
    const isMatch = await bcrypt.compare(password, user.password);
    if (isMatch) {
      // If the password matches,create JWT payload 
      const payload = {
        uid: user.id,
      };

      // JWT token create
      const token = jwt.sign(payload, process.env.JWT_SECRET, { expiresIn: req.app.get("jwt_expiration") });

      // New refresh token and create expiration for it
      let refresh_token = generateRefreshToken(req, user.id);
      let refresh_token_maxage = new Date() + req.app.get("jwt_refresh_expiration");

      // Browswer httpOnly cookie setting
      res.cookie("access_token", token, {
        // secure: true,
        httpOnly: true,
      });
      res.cookie("refresh_token", refresh_token, {
        // secure: true,
        httpOnly: true,
      });

      // Save the account id as key and save in Redis server
      req.client.set(
        user.id,
        JSON.stringify({
          refresh_token: refresh_token,
          expires: refresh_token_maxage,
        }),
        req.client.print
      );

      return res.json({
        success: true,
        uid: user.id,
        message: "Login Successful",
      });
    } else {
      return res.status(401).json({
        success: false,
        message: "Password's don't match.",
      });
    }
  } catch (error) {
    console.error(error);
    res.status(401).json({
      success: false,
      message: "Login Error",
    });
  }
});

module.exports = router;

我的登录前端代码如下：（Login.js）

import React，{Component}来自“React”；
从“./picture/login.png”导入登录名；
从“react引导/表单”导入表单；
从“axios”导入axios；
导出默认类注册扩展组件{
render（）{
返回(




登录

电子邮件地址
我们永远不会与其他人共享您的电子邮件。
密码
提交


);
}
}

我的注册前端代码是：（Signup.js）

import React，{Component}来自“React”；
从“react引导/表单”导入表单；
从“./picture/welcome.png”导入欢迎信息；
导出默认类注册扩展组件{
render（）{
返回(




注册

*电子邮件地址
*用户名
*密码
*名字
*姓氏
电话
标有星号（*）的字段是必填字段。
注册


);
}
}

---

我真的不知道如何使用axios连接后端和前端。登录服务器url为localhost:8002/auth/login，对于注册：localhost:8002/auth/signup，您必须在React组件中创建一个使用axios调用后端的函数，然后将其作为onClick处理程序添加到submit按钮

要使用axios发出请求，您必须使用axios模块上提供的功能。在您的情况下，这可能看起来像这样：

    function onSubmit() {
        axios.post('localhost:8002/auth/login', 
           {username: username, 
            password: password });
    }

<button type="submit" className="btn btn-info btn-block" onClick={onSubmit}>Submit</button>

请注意，axios.post会返回一个承诺，因此您必须等待它/使用。然后才能从后端获得响应。当您拥有该功能时，您可以将其附加到登录按钮上，如下所示：

    function onSubmit() {
        axios.post('localhost:8002/auth/login', 
           {username: username, 
            password: password });
    }

<button type="submit" className="btn btn-info btn-block" onClick={onSubmit}>Submit</button>

提交

编辑：用户名和密码值当然是用户通过输入字段输入的值。您可以将这些存储在组件的状态中