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"
+        })
+    ]
+};