project

2 years ago · 511fe85959
16 changed files with 11209 additions and 0 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,6 @@
 {
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ]
 }
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1 @@
 node_modules
--- a/index.html
+++ b/index.html
@ -0,0 +1,11 @@
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
 </head>
 <body>
    <div id="root"></div>
 </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,37 @@
 {
  "name": "react-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "webpack server --open --mode development",
    "build": "webpack --mode production"
  },
  "repository": {
    "type": "git",
    "url": "https://git.deepdev.pro/MYW/react-project.git"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.27.2",
    "mobx": "^6.6.1",
    "mobx-react-lite": "^3.4.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.18.10",
    "@babel/preset-env": "^7.18.10",
    "@babel/preset-react": "^7.18.6",
    "babel-loader": "^8.2.5",
    "html-loader": "^4.1.0",
    "html-webpack-plugin": "^5.5.0",
    "typescript": "^4.7.4",
    "webpack": "^5.74.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.10.0"
  }
 }
--- a/src/App.js
+++ b/src/App.js
@ -0,0 +1,10 @@
 import React from "react"
 import Login from './pages/login/Login'
 function App () {
    return (
        <Login />
    )
 }
 export default App
--- a/src/components/button/Button.js
+++ b/src/components/button/Button.js
@ -0,0 +1,16 @@
 import React from "react";
 function LoginButton (props) {
  const { onSubmit } = props
        return(
            <button
            type="submit"
            onClick={() => onSubmit()}
            style={{ width: 100, height: 30, marginLeft: 170, marginTop: 30, background: '#00BFFF'}}
            >提交</button>
        )
    }
 export default LoginButton
--- a/src/components/index.js
+++ b/src/components/index.js
@ -0,0 +1,5 @@
 import EmailInput from "./input/EmailInput";
 import PasswdInput from "./input/PasswdInput";
 import LoginButton from "./button/Button";
 export { EmailInput, LoginButton, PasswdInput}
--- a/src/components/input/EmailInput.js
+++ b/src/components/input/EmailInput.js
@ -0,0 +1,51 @@
 import React, { useState } from 'react';
 const EmailInput = (props) => {
  const { onChange } = props;
  const [value, setValue] = useState('');
  const [EmailMessage, setEmailMessage] = useState('');
  const EmailInputChange = e => {
    setValue(e.target.value);
    if (judge() && onChange) {
      onChange(e.target.value);
    }
  };
  const judge = () => {
    const rules = /^[-_A-Za-z0-9]+@([_A-Za-z0-9]+\.)+[A-Za-z0-9]{2,3}$/;
    if (rules.test(value)) {
      setEmailMessage('');
      return true;
    } else {
      setEmailMessage('请输入正确邮箱');
    }
    return false;
  };
  const EmailInputOnBlur = () => {
    judge();
  };
  return (
    <div>
      <input
        id="email"
        type="text"
        placeholder="请输入邮箱"
        value={value}
        onChange={e => EmailInputChange(e)}
        onBlur={EmailInputOnBlur}
        style={{ width: 260, border: '1px solid black', marginLeft: 100, marginTop: 50 }}
      />
      <p style={{ marginLeft: 100, marginTop: 5, color: 'red' }}>
        { EmailMessage }
        </p>
    </div>
  );
 };
 export default EmailInput;
--- a/src/components/input/PasswdInput.js
+++ b/src/components/input/PasswdInput.js
@ -0,0 +1,52 @@
 import React, { useState }  from "react";
 const PasswdInput = (props) => {
    const {onChange} = props
    const [value, setValue] = useState('')
    const [passwdMessage, setpasswdMessage] = useState('')
    const PasswdInputChange = (e) => {
      setValue(e.target.value)
        if( Judge() && onChange ){
            onChange(e.target.value);
          }
    }
    const Judge = () => {
       const rules = /^[\w_-]{6,16}$/
       if(rules.test(value)) {
                setpasswdMessage('')
                return true
            } else {
                setpasswdMessage('请输入6~16位的密码')
                return false
            }
          }
        const PasswdInputOnBlur = () => {
          Judge()
          };
        return (
            <div>
            <input
            type="text"
            placeholder="请输入密码"
            value={value}
            onChange={e => PasswdInputChange(e)}
            onBlur={PasswdInputOnBlur}
            style={{ width: 260, border: '1px solid black', marginLeft: 100, marginTop: 20}}
            />
            <p
            style={{marginLeft: 100, marginTop: 5, color: 'red'}}
            >{passwdMessage}</p>
            </div>
    )
 }
 export default PasswdInput
--- a/src/index.js
+++ b/src/index.js
@ -0,0 +1,9 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App'
 const root = ReactDOM.createRoot(document.getElementById('root'))
 root.render(
    <App />
 )
--- a/src/pages/login/Login.js
+++ b/src/pages/login/Login.js
@ -0,0 +1,35 @@
 import React, { useState } from "react"
 import { EmailInput, LoginButton, PasswdInput} from '../../components/index'
 import loginStore from '../../store/LoginStore'
 import { observer } from 'mobx-react-lite'
 function Login () {
    const [email, setEmail] = useState('')
    const [passwd, setPasswd] = useState('')
    const onSubmit = async (emailValue, passwdValue) => {
      if(email === '' || passwd === '') {
        alert('请输入密码或账号')
      } else {
        await loginStore.getToken({email: emailValue, password: passwdValue, recaptcha: 'shoa-P8fe1pho<u4'})
      }
    }
    return (
        <>
        <EmailInput 
        onChange={(value) => { setEmail(value)}}
        ></EmailInput>
        <PasswdInput 
        onChange={(value) => { setPasswd(value)} }
        ></PasswdInput>
        <LoginButton onSubmit={() => onSubmit(email, passwd)}></LoginButton>
        </>
    )
 }
 export default observer(Login)
--- a/src/store/LoginStore.js
+++ b/src/store/LoginStore.js
@ -0,0 +1,22 @@
 import http from '../utils/http'
 import { makeAutoObservable } from 'mobx'
 import { setToken, getToken } from '../utils/token'
 class LoginStore {
    token = getToken() || ''
    constructor() {
        makeAutoObservable(this)
    }
    getToken = async ({ email, password, recaptcha }) => {
        const res = await http.post('/user/login', { email, password, recaptcha })
        console.log(res.data)
        this.token = res.data.accessToken
        setToken(this.token)
    }
 }
 const loginStore = new LoginStore()
 export default loginStore
--- a/src/utils/http.js
+++ b/src/utils/http.js
@ -0,0 +1,25 @@
 import axios from "axios";
 const http = axios.create({
    baseURL: 'http://mobie.api.test.com',
    timeout: 5000,
 })
 // 添加请求拦截器
 http.interceptors.request.use(function (config) {
    return config;
  }, function (error) {
    return Promise.reject(error);
  });
 // 添加响应拦截器
 http.interceptors.response.use(function (response) {
    return response.data;
  }, function (error) {
    if(error.response.status === 422) {
        alert('邮箱或者密码错误')
    }
    return Promise.reject(error);
  });
 export default http
--- a/src/utils/token.js
+++ b/src/utils/token.js
@ -0,0 +1,18 @@
 // 封装 localStorage 存取 token
 const key = 'pc-key'
 // 存取 token
 const setToken = (token) => {
    return window.localStorage.setItem(key, token)
 }
 // 获取 token
 const getToken = () => {
    return window.localStorage.getItem(key)
 }
 export {
    setToken,
    getToken
 }
--- a/webpack.config.js
+++ b/webpack.config.js
@ -0,0 +1,29 @@
 const HtmlWebPackPlugin = require("html-webpack-plugin");
 module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: "html-loader"
                    }
                ]
            }
        ]
    },
    plugins: [
        new HtmlWebPackPlugin({
            template: "./index.html",
            filename: "./index.html"
        })
    ]
 };