登录注册页修改

.umirc.ts

@@ -11,7 +11,7 @@ export default defineConfig({
   routes: [
     {
       path: '/',
-      redirect: '/home',
+      redirect: '/login',
     },
     {
       name: '首页',
@@ -20,7 +20,7 @@ export default defineConfig({
       icon: 'HomeOutlined',
     },
     {
-      name: ' 基础图层',
+      name: '基础图层',
       path: '/baseMap',
       component: './BaseMap',
       icon: 'BlockOutlined',
@@ -31,12 +31,12 @@ export default defineConfig({
     //   component: './Access',
     // },
     {
-        name: ' CRUD 示例',
+        name: 'CRUD 示例',
         path: '/table',
         component: './Table',
     },
     {
-      name: ' 登录',
+      name: '登录',
       path: '/login',
       component: './Login',
       // 不展示菜单
@@ -45,7 +45,16 @@ export default defineConfig({
       hideInMenu: true,
     },
     {
-      name: ' 关于我们',
+      name: '注册',
+      path: '/register',
+      component: './Register',
+      // 不展示菜单
+      menuRender: false,
+      // 不展示在菜单栏里
+      hideInMenu: true,
+    },
+    {
+      name: '关于我们',
       path: '/about',
       component: './About',
     },
@@ -66,7 +75,7 @@ export default defineConfig({
   ],
   proxy: {
     '/api': {
-      'target': 'http://101.42.40.202:8081',//8.142.119.212:8083
+      'target': 'http://localhost:8081',//101.42.40.202:8081
       'changeOrigin': true,
       // 'pathRewrite': { '^/api' : '' },
     },

src/api/index.js

@@ -1,10 +1,18 @@
 import { request } from '@umijs/max';
 
 // 密码登录
-export function passwordLogin( params ) {
+export function passwordLogin( data ) {
   return request('/api/user/login', {
+    method: 'POST',
+    data: data
+  });
+}
+
+// 发送注册验证短信
+export function registerSms( params ) {
+  return request('/api/user/registerSms', {
     method: 'GET',
-    params: params,
+    params: params
   });
 }
 
@@ -20,6 +28,6 @@ export function queryUserMenu() {
 export function getLayerPoints( params ) {
   return request('/api/basicMap/getLayerPoints', {
     method: 'GET',
-    params: params,
+    params: params
   });
 }

src/index.less

@@ -56,13 +56,12 @@ body {
   height: 42px;
 }
 #login_page input {
-  font-size: 22px;
+  font-size: 18px !important;
   box-shadow: none;
 }
-#login_page .ant-form-item-required, #login_page input{
+// #login_page .ant-form-item-required, #login_page input{
-  color: #A7B0BC;
+//   color: #A7B0BC;
-
+// }
-}
 #login_page .ant-form-item-required, #login_page input, #login_page .ant-btn{
   font-size: 22px;
   font-family: Source Han Sans CN-Regular, Source Han Sans CN;

src/pages/Login/index.js

@@ -1,3 +1,4 @@
+import { useState } from 'react';
 import { Tabs } from 'antd';
 import PasswordLogin from './passwordLogin';
 import VerificationCodeLogin from './verificationCodeLogin';
@@ -11,9 +12,6 @@ function Login (e) {
           <Tabs.TabPane tab="密码登录" key="1">
             <PasswordLogin></PasswordLogin>
           </Tabs.TabPane>
-          <Tabs.TabPane tab="验证码登录" key="2">
-            <VerificationCodeLogin></VerificationCodeLogin>
-          </Tabs.TabPane>
         </Tabs>
       </div>
     </div>

src/pages/Login/passwordLogin.js

@@ -18,9 +18,9 @@ function Login (e) {
     // }
     passwordLogin({username: values.username, password: values.password}).then((e) => {
         if (!e.success) {
-            message.error('登录失败');
+            message.error(e.message);
           } else {
-            navigate('/Home');
+            navigate('/home');
             // cookie.save('username', 'wyd');
           }
     })
@@ -79,18 +79,18 @@ function Login (e) {
         <Input.Password placeholder='请输入密码' bordered={false}/>
     </Form.Item>
 
-    <Form.Item
+    {/* <Form.Item
         name="remember"
         valuePropName="checked"
         style={{marginTop: '38px'}}
     >
       <Checkbox style={{fontSize: '18px'}}>同意<a>服务条款</a></Checkbox>
       <a style={{float: 'right', fontSize: '18px'}}>忘记密码？</a>
-    </Form.Item>
+    </Form.Item> */}
 
     <Form.Item style={{marginTop: '68px'}}>
         <Button type="primary" htmlType="submit" style={{height: '72px'}} block>密码登录</Button>
-        <a className='new-user'>新用户注册</a>
+        <a className='new-user' href='/register'>新用户注册</a>
     </Form.Item>
     </Form>
   );

src/pages/Login/verificationCodeLogin.js

@@ -29,7 +29,7 @@ function VerificationCodeLogin (e) {
 	}
 
     let onFinish = (values) => {
-        passwordLogin({username: values.username, password: values.password}).then((e) => {
+        passwordLogin({values}).then((e) => {
             if (!e.success) {
                 message.error('登录失败');
               } else {

src/pages/Register/index.js

@@ -0,0 +1,162 @@
+import { useState } from 'react';
+import { Form, Input, Button, Checkbox, message, Col, Row, Tag, Tabs } from 'antd';
+import '../../index.less';
+import { useNavigate } from 'react-router-dom';
+import { registerSms } from '../../api';
+
+function Register(e) {
+
+  let navigate = useNavigate();
+  let [code, setCode] = useState('获取验证码');
+  let [coding, setCoding] = useState(false);
+  let [mobile, setMobile] = useState('');
+  const [form] = Form.useForm();
+  let onMobileChange = (e) => {
+    let val = e.target.value;
+    setMobile(val)
+  }
+  // 点击获取验证码
+  let getCheckCode = (values) => {debugger
+    // e.preventDefault();
+    // 请求发送验证码接口，请求成功开始倒计时
+    registerSms({'phone': mobile}).then((e) => {
+      if (!e.success) {
+        message.error(e.message);
+      } else {
+        countDown(60);
+      }
+    })
+  }
+  // 倒计时
+  let countDown = (code) => {
+    let count = parseFloat(code);
+    if (code === 1) {
+      setCode('获取验证码');
+      setCoding(false);
+    } else {
+      count = count - 1;
+      setCoding(true);
+      setCode(`${count}s后重新发送`)
+      setTimeout(countDown, 1000, count);
+    }
+  }
+  let onFinish = async (values) => {
+    register({
+      username: values.username,
+      password: values.password
+    }).then((e) => {
+      if (!e.success) {
+        message.error(e.message);
+      } else {
+        message.success("注册成功");
+        navigate('/login');
+      }
+    })
+  };
+  let onFinishFailed = (errorInfo) => {
+    console.log('Failed:', errorInfo);
+  };
+
+  return (
+    <div id='login_page'>
+      <div className='login_right'>
+        <Tabs defaultActiveKey="1" centered>
+          <Tabs.TabPane tab="账号注册" key="1">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{
+                span: 16,
+                offset: 4,
+              }}
+              wrapperCol={{
+                span: 16,
+                offset: 4,
+              }}
+              layout='vertical'
+              initialValues={{
+                remember: true,
+              }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
+            >
+              <Form.Item
+                label="手机号"
+                name="mobile"
+                className='formItemStyle'
+                rules={[
+                  {
+                    required: true,
+                    message: '手机号码不能为空!',
+                  },
+                ]}
+                style={{ marginBottom: '45px' }}
+              >
+                <Input placeholder='请输入手机号码' value={mobile} onChange={onMobileChange}/>
+              </Form.Item>
+              <Form.Item
+                label="验证码"
+                name="verificationCode"
+                className='formItemStyle'
+                rules={[
+                  {
+                    required: true,
+                    message: '验证码不能为空!',
+                  },
+                ]}
+              >
+                <Row>
+                  <Col span={16}><Input placeholder='请输入验证码' /></Col>
+                  <Col span={8}><Button disabled={coding} type="link" onClick={getCheckCode}>{code}</Button></Col>
+                </Row>
+              </Form.Item>
+              <Form.Item
+                label="用户名"
+                name="username"
+                className='formItemStyle'
+                rules={[
+                  {
+                    required: true,
+                    message: '用户名不能为空!',
+                  },
+                ]}
+              >
+                <Input.Password placeholder='请输入用户名' bordered={false} />
+              </Form.Item>
+              <Form.Item
+                label="密码"
+                name="password"
+                className='formItemStyle'
+                rules={[
+                  {
+                    required: true,
+                    message: '密码不能为空!',
+                  },
+                ]}
+              >
+                <Input.Password placeholder='请输入密码' bordered={false} />
+              </Form.Item>
+
+              <Form.Item
+                name="remember"
+                valuePropName="checked"
+                style={{ marginTop: '38px' }}
+              >
+                <Checkbox style={{ fontSize: '18px' }}>同意<a>服务条款</a></Checkbox>
+              </Form.Item>
+
+              <Form.Item style={{ marginTop: '68px' }}>
+                <Button type="primary" htmlType="submit" style={{ height: '72px' }} block>立即注册</Button>
+                <a className='new-user'>前往登录</a>
+              </Form.Item>
+            </Form>
+          </Tabs.TabPane>
+        </Tabs>
+      </div>
+    </div>
+  );
+}
+
+
+export default Register;