Nest 项目小实践之前端注册登陆

使用 react 写登陆和注册 跑起来 添加 router

npx create-vite book-management-system-frontend2

npm run dev

npm install --save react-router-dom

main.tsx 添加路由

import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter} from 'react-router-dom';

function BookManage() {
  return <div>book</div>;
}

function Login(){
  return <div>login</div>;
}

function Register(){
  return <div>register</div>;
}

const routes = [
  {
    path: "/login",
    element: <Login/>,
  },
  {
    path: "/register",
    element: <Register/>,
  },
  {
    path: "/",
    element: <BookManage/>,
  },
];

const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(<RouterProvider router={router}/>);

添加这几个

内容先写最简单

更新 main.ts

import ReactDOM from 'react-dom/client';
import { RouterProvider, createBrowserRouter } from 'react-router-dom';
import { Login } from './pages/Login'
import { Register } from './pages/Register'
import { BookManage } from './pages/BookManage'

const routes = [
  {
    path: "/login",
    element: <Login/>,
  },
  {
    path: "/register",
    element: <Register/>,
  },
  {
    path: "/",
    element: <BookManage/>,
  },
];

const router = createBrowserRouter(routes);

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);

root.render(<RouterProvider router={router}/>);

使用 antd 让页面更好看

npm install antd --save

注册页面

import { Button, Form, Input } from 'antd';
import './index.css';

interface RegisterUser {
    username: string;
    password: string;
    password2: string;
}

const onFinish = (values: RegisterUser) => {
    console.log(values);
};

const layout1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
}

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

export function Register() {
    return <div id="register-container">
        <h1>图书管理系统</h1>
        <Form
            {...layout1}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入用户名!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="确认密码"
                name="password2"
                rules={[{ required: true, message: '请输入确认密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                {...layout2}
            >
                <div className='links'>
                    <a href='/login'>已有账号？去登录</a>
                </div>
            </Form.Item>

            <Form.Item
                {...layout2}
            >
                <Button className='btn' type="primary" htmlType="submit">
                    注册
                </Button>
            </Form.Item>
        </Form>
    </div>   
}

index.css

#register-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}

#register-container .links {
    display: flex;
    justify-content: center;
}

#register-container .btn {
    width: 100%;
}

访问看看

输入信息打印看下

使用 axios 调用后端接口

npm install --save axios

添加文件 interfaces/index.ts

import axios from "axios";

const axiosInstance = axios.create({
  baseURL: "http://localhost:3000/",
  timeout: 3000,
});

export async function register(username: string, password: string) {
  return await axiosInstance.post("/user/register", {
    username,
    password,
  });
}

在 Register 组件的 onFinish 里调用

const onFinish = async (values: RegisterUser) => {

    if(values.password !== values.password2) {
        message.error('两次密码不一致');
        return;
    }

    try {
        const res = await register(values.username, values.password);

        if(res.status === 201 || res.status === 200) {
            message.success('注册成功');

            setTimeout(() => {
                window.location.href = '/login';
            }, 1000);
        }
    } catch(e: any) {
        message.error(e.response.data.message);
    }
}

提示跨域 需要配置下

再次注册就会成功 会跳转到 登陆页

实现下

import { Button, Form, Input, message } from 'antd';
import './index.css';

interface LoginUser {
    username: string;
    password: string;
}

const onFinish = async (values: LoginUser) => {
    console.log(values);
}

const layout1 = {
    labelCol: { span: 4 },
    wrapperCol: { span: 20 }
}

const layout2 = {
    labelCol: { span: 0 },
    wrapperCol: { span: 24 }
}

export function Login() {
    return <div id="login-container">
        <h1>图书管理系统</h1>
        <Form
            {...layout1}
            onFinish={onFinish}
            colon={false}
            autoComplete="off"
        >
            <Form.Item
                label="用户名"
                name="username"
                rules={[{ required: true, message: '请输入用户名!' }]}
            >
                <Input />
            </Form.Item>

            <Form.Item
                label="密码"
                name="password"
                rules={[{ required: true, message: '请输入密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                {...layout2}
            >
                <div className='links'>
                    <a href='/register'>没有账号？去注册</a>
                </div>
            </Form.Item>

            <Form.Item
                {...layout2}
            >
                <Button className='btn' type="primary" htmlType="submit">
                    登录
                </Button>
            </Form.Item>
        </Form>
    </div>
}

index.css

#login-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}

#login-container .links {
    display: flex;
    justify-content: center;
}

#login-container .btn {
    width: 100%;
}

试试登陆

添加

login onFinish 里使用

const onFinish = async (values: LoginUser) => {
    try {
        const res = await login(values.username, values.password);

        if(res.status === 201 || res.status === 200) {
            message.success('登录成功');

            setTimeout(() => {
                window.location.href = '/';
            }, 1000);
        }
    } catch(e: any) {
        message.error(e.response.data.message);
    }
}

注册后登陆就可 登陆成功 到这里