Nest通关秘籍

外观

先不着急写其他两个微服务，我们先来写一下前端页面。

先来写下用户注册、登录页面。

新建个 react 项目：

npx create-vite exam-system-frontend

进入项目目录，把开发服务跑起来：

npm install
npm run dev

浏览器访问 http://localhost:5173 可以看到这个界面：

就说明 react 项目成功跑起来了。

然后我们添加 router：

npm install --save react-router-dom

在 main.tsx 加上路由的配置：

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

function Aaa() {
  return <div>aaa</div>;
}

function Bbb(){
  return <div>bbb</div>;
}

function Layout() {
  return <div>
    <div><Link to="/aaa">to aaa</Link></div>
    <div><Link to="/bbb">to bbb</Link></div>
    <div>
      <Outlet/>
    </div>
  </div>
}

const routes = [
  {
    path: "/",
    element: <Layout/>,
    children: [
      {
        path: "aaa",
        element: <Aaa />,
      },
      {
        path: "bbb",
        element: <Bbb />,
      }    
    ],
  }
];
const router = createBrowserRouter(routes);

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

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

配置了 3 个路由：

访问 / 的时候，渲染 Layout 组件。

访问 /aaa 的时候，渲染 Aaa 组件。

访问 /bbb 的时候，渲染 Bbb 组件。

以及出错的时候，渲染 ErrorPage 组件。

其中，aaa 和 bbb 是 / 的子路由，渲染在 Layout 组件的 Outlet 的地方。

这就是 React Router 的基本用法。

测试下：

都没问题。

然后创建 3 个组件：Login、Register、UpdatePassword

pages/Login/index.tsx

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

pages/Register/index.tsx

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

pages/UpdatePassword/index.tsx

javascript
export function UpdatePassword() {
    return <div>UpdatePassword</div>
}

改下 index.tsx 配置对应的路由：

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

const routes = [
  {
    path: "/",
    element: <div>index</div>,
  },
  {
    path: "login",
    element: <Login />,
  },
  {
    path: "register",
    element: <Register />,
  },
  {
    path: "update_password",
    element: <UpdatePassword />,
  }
];
const router = createBrowserRouter(routes);

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

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

测试下：

都没啥问题。

然后来写 Login 页面：

引入 Ant Design 组件库：

npm install antd --save

在 Login 组件引入 DatePicker 组件：

javascript
import { DatePicker } from "antd";

export function Login() {
    return <div><DatePicker/></div>   
}

没啥问题，说明 antd 引入成功了。

然后我们把登录页面写一下：

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

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

const onFinish = (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>
                    <a href='/update_password'>忘记密码</a>
                </div>
            </Form.Item>

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

其中，layout 是 label 和 wrapper 的比例分配，antd 的栅格系统一共分了 24 份。

上面两个 Form.Item 是 label 4 份，wrapper 20 份。

下面两个 Form.Item 是 label 0 份，wrapper 24 份。

colon 为 false 是去掉 label 后的冒号

然后 css 部分如下：

css
#login-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#login-container .links {
    display: flex;
    justify-content: space-between;
}
#login-container .btn {
    width: 100%;
}

访问 /login，可以看到现在的登录页面：

输入用户名、密码，点击登录：

控制台打印了拿到的表单值。

我们安装下 axios：

npm install --save axios

我们把后端用户微服务跑起来：

npm run start:dev user

在前端项目创建个 interfaces/index.ts

javascript
import axios from "axios";

const userServiceInstance = axios.create({
    baseURL: 'http://localhost:3001
    /',
    timeout: 3000
});

export async function login(username: string, password: string) {
    return await userServiceInstance.post('/user/login', {
        username, password
    });
}

在这里集中管理接口。

然后在 Login 组件 onFinish 里调用：

javascript
const onFinish = async (values: LoginUser) => {
    try {
        const res = await login(values.username, values.password);
        if(res.status === 201 || res.status === 200) {
            message.success('登录成功');

            console.log(res.data);
        } 
    } catch(e: any){
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};

在 user 微服务开启跨域：

登录下：

然后完善下 onFinish 方法：

javascript
const onFinish = async (values: LoginUser) => {
    try {
        const res = await login(values.username, values.password);
        if(res.status === 201 || res.status === 200) {
            message.success('登录成功');

            localStorage.setItem('token', res.data.token);
            localStorage.setItem('userInfo', JSON.stringify(res.data.user));
        } 
    } catch(e: any){
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
};

返回 success 的时候，把 token 和 userInfo 存入 localStorage

测试下：

这样，登录的前后端功能就都完成了。

然后来写下注册页面：

实现下 Register 页面组件：

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

export interface RegisterUser {
    username: string;
    password: string;
    confirmPassword: string;
    email: string;
    captcha: string;
}

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


const layout1 = {
    labelCol: { span: 6 },
    wrapperCol: { span: 18 }
}

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

export function Register() {
    const [form] = useForm();

    return <div id="register-container">
        <h1>考试系统</h1>
        <Form
            form={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="confirmPassword"
                rules={[{ required: true, message: '请输入确认密码!' }]}
            >
                <Input.Password />
            </Form.Item>

            <Form.Item
                label="邮箱"
                name="email"
                rules={[
                    { required: true, message: '请输入邮箱!' },
                    { type: "email", message: '请输入合法邮箱地址!'}
                ]}
            >
                <Input />
            </Form.Item>

            <div className='captcha-wrapper'>
                <Form.Item
                    label="验证码"
                    name="captcha"
                    rules={[{ required: true, message: '请输入验证码!' }]}
                >
                    <Input />
                </Form.Item>
                <Button type="primary">发送验证码</Button>
            </div>

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

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

和登录页面差不多，只不过多了一个验证码。

对应的 register.css 如下：

css
#register-container {
    width: 400px;
    margin: 100px auto 0 auto;
    text-align: center;
}
#register-container .links {
    display: flex;
    justify-content: flex-end;
}
#register-container .btn {
    width: 100%;
}
#register-container .captcha-wrapper {
    display: flex;
    justify-content: flex-end;
}

浏览器访问下

填入信息，点击注册，控制台会打印表单值：

然后来调用下注册接口和发送验证码的接口。

在 interfaces 里添加这两个接口：

javascript
export async function registerCaptcha(email: string) {
    return await userServiceInstance.get('/user/register-captcha', {
        params: {
            address: email
        }
    });
}

export async function register(registerUser: RegisterUser) {
    return await userServiceInstance.post('/user/register', registerUser);
}

先调用发送验证码接口：

绑定点击事件。

使用 useForm 来拿到 form 的 api

javascript
async function sendCaptcha() {
    const address = form.getFieldValue('email');
    if(!address) {
        return message.error('请输入邮箱地址');
    }

    try {
        const res = await registerCaptcha(address);
        if(res.status === 201 || res.status === 200) {
            message.success('发送成功');
        }
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
}

在 sendCaptcha 里调用接口发送验证码。

测试下：

没啥问题。

然后再来调用注册接口：

javascript
const onFinish = async (values: RegisterUser) => {
    if(values.password !== values.confirmPassword) {
        return message.error('两次密码不一致');
    }
    const res = await register(values);

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

    } else {
        message.error(res.data.data || '系统繁忙，请稍后再试');
    }
}

测试下：

填入信息，点击发送验证码：

2024-08-26 10.22.17.gif

去邮箱里看一下验证码：

填入验证码，点击注册：

2024-08-26 10.23.14.gif 注册成功，数据库里也看到了这条记录：

这样，注册的前后端流程就走完了。

然后调用 useNavigate 的 navigate 方法，注册成功后导航到登录页：

javascript
const onFinish = async (values: RegisterUser) => {
    if(values.password !== values.confirmPassword) {
        return message.error('两次密码不一致');
    }
    try {
    const res = await register(values);

    if(res.status === 201 || res.status === 200) {
        message.success('注册成功');
        setTimeout(() => {
            navigate('/login');
        }, 1000);
    } 
    } catch(e: any) {
        message.error(e.response?.data?.message || '系统繁忙，请稍后再试');
    }
}

2024-08-26 10.23.14.gif

同理，login 成功也要加上跳转逻辑：

这样，登录和注册的前后端功能就都完成了。

案例代码在小册仓库：

前端代码

后端代码

总结 ​

这节我们打通了前后端，加上了登录、注册、首页等页面。

首先，引入了 React Router 来做路由，引入了 antd 来做 UI 组件库。

然后，引入了 axios 来发请求。

发送邮件验证码正常，注册之后数据库也多了记录，登录成功之后 localStorage 也有了用户信息。

这样，注册登录就实现了完整的前后端功能。