React+mysql+express实现账号注册

最新推荐文章于 2024-09-10 19:04:52 发布

enl0ve

最新推荐文章于 2024-09-10 19:04:52 发布

阅读量2.1k

点赞数 1

分类专栏： JavaScript学习前端文章标签： React Express

本文链接：https://blog.csdn.net/Enl0ve/article/details/89045703

版权

该博客介绍了如何结合React前端框架、Express后端服务器和MySQL数据库来实现账号注册功能。通过React创建注册页面，利用Express处理注册请求，并借助MySQL进行数据存储。示例展示了相关界面截图及数据库中已有注册信息的展示。

摘要由CSDN通过智能技术生成

React实现页面部分：

//login.js
import React, {
    Component } from 'react';
import PropTypes from 'prop-types';
import {
   Button} from 'react-bootstrap';

const styles = {
   
    zhihuLogo:{
   
        stroke:"blue",
        strokeWidth:"0",
        fill:"blue",
        
    },
    titleContent:{
   
        color:"blue",
    },
    loginContainer: {
   
        textAlign: "center",   
        backgroundColor: "#fff",
        borderRadius: "2px",
        width: "400px",
        height: "350px",
        position: "absolute",
        left: "50%",
        top: "50%",
        marginLeft: "-200px",
        marginTop: "-200px",
    },
    footer: {
   
        width: "400px",
        height: "48px",
    },
    loginBody: {
   
        padding: "0px 24px",
    }
}

class Login extends Component {
   
    static propTypes = {
   
        phoneNumber: PropTypes.string.isRequired,
        validateCode: PropTypes.string.isRequired,
    }

    static defaultProps = {
   
        phoneNumber: '请输入合理的号码',
        validateCode: '请输入验证码',
    }

    constructor(props) {
   
        super(props);
        this.onValidateNumChange = this.onValidateNumChange.bind(this);
        this.onPhoneChange = this.onPhoneChange.bind(this);
        this.state = {
   
            phoneNumber: '',