大事件开发 - 前端学习笔记

1. 环境准备

1.1 创建 Vue 项目

• 使用 vite 创建 Vue 3 工程。
• 目录结构调整，确保清晰的项目结构。

1.2 安装依赖

npm install axios element-plus sass

• Element-Plus：UI 组件库
• Axios：HTTP 请求库
• Sass：CSS 预处理器

2. 前后端连接（以注册功能为例）

2.1 搭建注册页面

• 使用 Element-Plus 组件搭建注册表单。

（就是前端一些样式和组件的代码可以从Element-Plus中获取）

• 绑定数据 registerData，用于存储用户输入的信息。

（数据的名称最好和后端相同，可以从接口文档中查看）

• 通过 rules 定义表单校验规则。

表单校验（Form Validation）是为了保证用户输入的数据符合预期，提高系统的安全性和稳定性，主要目的是：

            提高数据的正确性

            防止用户输入不符合格式的数据（如手机号、邮箱格式错误）。
            确保数据在存入数据库之前符合业务逻辑要求（如用户名不能为空，密码长度必须符合要求）。
            增强用户体验

            在用户输入错误时，及时给予友好的提示，而不是提交后才发现错误。
            让用户能更快速地完成表单填写，减少错误提交的可能性。
            提高安全性

            防止恶意输入，如 XSS（跨站脚本攻击）、SQL 注入等攻击。
            过滤非法数据，避免影响数据库或服务器的正常运行。
            表单校验的类型：
            前端校验（客户端校验）：在用户提交表单前，用 JavaScript 或 HTML5 的 required、pattern 等属性进行校验，减少服务器压力，但容易被绕过。
            后端校验（服务器校验）：无论前端是否做了校验，后端必须再进行校验，确保数据的安全性和正确性，通常用 Java（Spring Boot 的 @Valid、@Validated）、Python、Node.js 等后端框架来完成。

2.2 定义前端 API 请求

当用户输入完注册信息点击注册按钮后，会调用注册接口

在 src/api/user.js 中封装注册接口请求：

import request from '@/utils/request.js';

export const userRegisterService = (registerData) => {
    const params = new URLSearchParams();
    for (let key in registerData) {
        params.append(key, registerData[key]);
    }
    return request.post('/user/register', params);
};

2.3 配置 Axios 请求拦截

在 src/utils/request.js 中创建 Axios 实例：

import axios from 'axios';

const baseURL = '/api';
const instance = axios.create({ baseURL });

instance.interceptors.response.use(
    response => response.data,
    error => {
        alert('服务异常');
        return Promise.reject(error);
    }
);

export default instance;

2.4 调用注册接口

在 Register.vue 组件中：

import { userRegisterService } from '@/api/user.js';

const register = async () => {
    let result = await userRegisterService(registerData.value);
    if (result.code === 0) {
        alert(result.msg || '注册成功');
    } else {
        alert('注册失败');
    }
};

---

---

2.5 以上内容配置好后

让我自己更理解的内容

当用户点击登录就会触发一系列连锁反应，连接到后端数据库，完成注册

注册按钮的前端界面展示与点击事件处理、注册功能的实现（调用后端接口），以及后端接口的调用逻辑。它们共同实现了前端向后端传输注册信息并处理注册过程的功能。下面逐段分析它们之间的关系：

1. 注册按钮 (Vue 页面部分)

    
        注册
    

• 功能：这是 Vue 页面中的注册按钮，它使用了 Element UI 的 el-button 组件，点击时会触发 @click="register"，即调用组件内的 register 方法。
• 作用：用户点击该按钮时，会执行注册操作（调用后端接口）。这个按钮在用户界面上提供了交互入口。

2. 注册功能实现 (Vue 逻辑部分)

import {userRegisterService} from '@/api/user.js'

const register = async () => {
    // registerData是一个响应式数据，如果要获取值，需要.value
    let result = await userRegisterService(registerData.value);
    if (result.code === 0) {
        // 成功
        alert(result.msg ? result.msg : '注册成功');
    } else {
        alert('注册失败');
    }
}

• 功能：当用户点击注册按钮时，register 方法会被触发。在该方法内：
  • 使用 userRegisterService 调用后端的注册接口，并传递 registerData（注册信息）。
  • userRegisterService 返回一个 Promise，因此使用 await 等待接口响应。
  • 根据接口返回的 code 值判断注册是否成功：
    • 如果 code === 0，表示成功，弹出成功提示。
    • 否则，弹出注册失败提示。
• 作用：这个方法是前端控制器，负责将数据发送到后端，处理注册结果，并根据结果显示相应的提示信息。

3. 调用后端接口 (API 请求部分)

• 功能：userRegisterService 是一个调用后端注册接口的函数。它做了以下几件事：
  • 接受 registerData 作为参数，registerData 包含用户的注册信息（如用户名、密码等）。
  • 使用 URLSearchParams 将注册数据转换为 URL 编码的格式，以便通过 HTTP POST 请求发送给后端。
  • 调用封装的 request.post 方法，发送注册数据到 /user/register 后端接口。
  • 返回一个 Promise，表示注册请求的异步操作。
• 作用：这是实现与后端通信的核心逻辑，将前端数据传送给后端接口，并获得注册结果。

这三段代码之间的关系：

1. 前端页面：
   • 用户点击注册按钮后，触发 register 方法。
2. Vue 组件的逻辑部分：
   • register 方法会调用 userRegisterService 函数，将用户填写的注册数据传递给该函数。
3. API 请求部分：
   • userRegisterService 通过 request.post 向后端发送注册数据，后端会处理并返回结果。

整个流程是：前端按钮 -> Vue 方法调用后端 API -> API 请求发送数据并返回结果，前端根据返回结果做出提示，完成注册操作。

---

---

3. 解决跨域问题

3.1 Vite 代理配置

在 vite.config.js 中配置代理，使前端请求 /api 时自动转发到 http://localhost:8080。

server: {
    proxy: {
        '/api': {
            target: 'http://localhost:8080', // 指向后端服务
            changeOrigin: true, // 允许跨域
            rewrite: path => path.replace(/^\/api/, '') // 替换 /api 前缀
        }
    }
}

解释：

• target: 'http://localhost:8080'：所有 /api 开头的请求都会被代理到 http://localhost:8080。
• changeOrigin: true：修改请求头中的 origin，避免跨域问题。
• rewrite: path => path.replace(/^\/api/, '')：将 /api/user/register 变为 /user/register，避免后端路径不匹配。

4. 总结

• 前端步骤：定义 API 请求 → 创建表单 → 绑定数据 → 调用 API。
• 后端步骤：提供 /user/register 接口 → 解析数据 → 处理逻辑 → 返回结果。
• 前端代理：解决跨域问题，使前端可以访问后端。