起因背景:

先做一个全栈的项目，实现一个自己喜欢的个人主页

技术选型:

前端：

react 技术栈
- react-dom
- hooks
- react-router-dom
- babel(也可归到后端，主要使用babel进行es6到es5的转换)
- axios

后端：

node.js 技术栈
- express 用于服务器搭建
- babel(转译es6的语法)
- cros 跨域问题
- mongodb (数据库)
  - mongoose 操作 mongodb数据库

服务器与操作系统

tx云centos7操作系统（具有公网ip）
nginx （静态资源管理，接入外网请求反向代理）

本期需求:

实现用户登录验证测试并进行页面跳转。

前端：

用户登录基本模态框
- 用户名输入
- 密码输入
- 点击提交按钮
用户跳转路由配置
- 验证成功后跳转页面

后端：

express 服务器搭建
- 服务器及端口配置
- 基本接口配置
数据库
- 后端测试数据库搭建插入测试数据
- 数据库模型建立

服务器：

搭建后台服务器
- nginx 配置暴露外网IP和端口
- 配置nodejs的反向代理

版本管理

码云(git)

前端页面

1.编写思路：

类似于creat react-app 这样的操作就不说了，主要思路就是遵循react的思想，组件化。目录构建如下：

Login组件就是一个登录模态框，它的子组件有:
- FormInput 输入框
- Button 按钮组件

实现效果如下：

这样分解组件的主要考虑的是，可以多编写一个可复用的公共样式，另外也提供了一些可选择的属性:

// FormInput.js
export default function FormInput(props) {
    // input type 属性:
    
    const [inputMust,setInputMust] = useState('');

    // 控制必填属性
    function handleInputMust() {
        // console.log(props.inputMust);
        if (props.inputMust) {
            setInputMust('(必填)');
        }
    };

    // 进行渲染
    useEffect(()=>{
        handleInputMust();
    })

    return (
        <div className="com-input">
           <span>{props.inputName}</span> 
           <input type={props.inputType} onChange={props.getInputValue}></input> 
           <span>{inputMust}</span>
        </div>
    )
}

对于 Button组件:

export default function Button(props) {

    const [buttonName,setButtonName] = useState('');
    // const [buttonEvent,setButtonEvent] = useState(()=>{});

    function handleButtonProps() {
        setButtonName(props.buttonName);
        // setButtonEvent(props.buttonEvent);
    }

    return (
        <button onClick={props.buttonClick}>{props.buttonName}</button>
    )
}

在Login.js中可以定制一些自己需要的属性:

export default function Login(props) {

  
  // const [buttonEvent,setButtonEvent] = useState(buttonEventHandle);
  const [inputNameVal,setInputNameVal] = useState('');
  const [inputPassVal,setInputPassVal] = useState('');

  function buttonEventHandle() {
    let that = this;
    const url = 'http://82.156.***.***/db'; // ip打码
    axios.post(url,{
      'id':inputNameVal !== ''?inputNameVal:'NONE',
      'pass':inputPassVal !== ''?inputPassVal:'NONE'
    }).then(res=>{
      // 登录成功后进行跳转:
      if (res.data['res']) {
        props.history.push('/home');
      }
    });
  }

  function getInputName(val) {
    console.log(val.target.value);
    setInputNameVal(val.target.value);
  }

  
  function getInputPass(val) {
    console.log(val.target.value);
    setInputPassVal(val.target.value);
  }

  return (
    <div>
    {/* login模态框 */}
      <div className="login">
        <FormInput getInputValue={getInputName} inputType="text" inputName="工号/用户名:" inputMust="true"></FormInput>
        <FormInput getInputValue={getInputPass} inputType="password" inputName="密码:" inputMust="true"></FormInput>
        <Button buttonName="登录" buttonClick={buttonEventHandle}></Button>
      </div>
    </div>
  )
}