初始化

package.json

@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "antd": "^5.17.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

src/App.jsx

@@ -1,34 +1,94 @@
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
+import { LockOutlined, UserOutlined } from '@ant-design/icons';
+import { Button, Checkbox,Form, Input, Row, Col } from 'antd';
 import './App.css'
 
+
 function App() {
-  const [count, setCount] = useState(0)
+  const [count, setCount] = useState(0);
+  /*const srcLogo=getCode();
+  console.log(srcLogo);
+  */
+  const [src ,setSrc]=useState(reactLogo);
+  async function getCode(){
+      setCount(count => count + 1);
+      const response =await fetch('/api/auth/captcha',{ method:'post'});
+      console.log(response);
+      const data = await response.json();
+      setSrc("data:image/jpeg;base64,"+data.data.captcha)
+  }
+  function resCode()
+  {
+      getCode();
+  }
 
   return (
-    <>
-      <div>
-        <a href="https://vitejs.dev" target="_blank">
-          <img src={viteLogo} className="logo" alt="Vite logo" />
-        </a>
-        <a href="https://react.dev" target="_blank">
-          <img src={reactLogo} className="logo react" alt="React logo" />
-        </a>
-      </div>
-      <h1>Vite + React</h1>
-      <div className="card">
-        <button onClick={() => setCount((count) => count + 1)}>
-          count is {count}
-        </button>
-        <p>
-          Edit <code>src/App.jsx</code> and save to test HMR
-        </p>
-      </div>
-      <p className="read-the-docs">
-        Click on the Vite and React logos to learn more
-      </p>
-    </>
+      <Form
+          name="normal_login"
+          className="login-form"
+          initialValues={{
+              remember: true,
+          }}
+      >
+          <Form.Item
+              name="username"
+              label="账号"
+              rules={[
+                  {
+                      required: true,
+                      message: 'Please input your Username!',
+                  },
+              ]}
+          >
+              <Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="Username" />
+          </Form.Item>
+          <Form.Item
+              name="password"
+              label="密码"
+              rules={[
+                  {
+                      required: true,
+                      message: 'Please input your Password!',
+                  },
+              ]}
+          >
+              <Input
+                  prefix={<LockOutlined className="site-form-item-icon" />}
+                  type="password"
+                  placeholder="Password"
+              />
+          </Form.Item>
+          <Form.Item
+              name="yanzhenma"
+              label="验证码"
+              rules={[
+                  {
+                      required: true,
+                      message: 'Please input your Yanzhenma!',
+                  },
+              ]}
+          >
+              <Input placeholder="验证码"/><img src={src} alt="yanzhenma" onClick={resCode}/>
+          </Form.Item>
+          <Form.Item>
+              <Form.Item name="remember" valuePropName="checked" noStyle>
+                  <Checkbox>Remember me</Checkbox>
+              </Form.Item>
+
+              <a className="login-form-forgot" href="">
+                  Forgot password
+              </a>
+          </Form.Item>
+
+          <Form.Item>
+              <Button type="primary" htmlType="submit" className="login-form-button">
+                  Log in
+              </Button>
+              Or <a href="">register now!</a>
+          </Form.Item>
+      </Form>
   )
 }
 

vite.config.js

@@ -4,4 +4,12 @@ import react from '@vitejs/plugin-react'
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [react()],
+  server: {
+    proxy: {
+      '/api': {
+        changeOrigin: true,
+        'target': 'https://test.sdinb.com/'
+      }
+    }
+  }
 })