前端Vue2框架笔记

目录

总的逻辑图
ChatGPT Image 2025年8月23日 11_16_06

1、项目启动逻辑顺序梳理

1.1、浏览器加载入口 HTML

用户访问项目 URL（例如 http://localhost:8080/）
浏览器默认加载项目的 public/index.html
里面的
<div id="app"></div>
是 Vue 根实例挂载点
webpack 构建会把 JS 自动注入，不需要你手动在模板里写 <script>，也就是运行到main.js

1.2、浏览器执行 main.js

main.js 是 Vue 项目的 真正入口文件：
其中的：

new Vue({
    router,  //Vue Router 配置在 src/router/index.js，里面定义了路由路径和组件映射
    render: h => h(App),
    provide: { $http: http }  // 通过 provide/inject 或直接挂载到 Vue 实例
}).$mount('#app')

首先创建 Vue 根实例，然后挂载根实例，渲染根组件 App.vue

1.3、渲染根组件 App.vue

App.vue 里

<router-view></router-view>

渲染哪个组件，是由路由配置的index.js决定的

index.js中的例如

export default new VueRouter({
  routes: [
    {
      path: '/login',
      name: 'Login',
      component: Login // 关联组件
    },
    {
        // 访问 / → 跳转到 /login → 展示 login-page.vue 作用是：访问 http://localhost:8080/ 时，自动跳转到 /login，最终还是显示登录页面。
      path: '/',
      redirect: '/login' // 设置默认跳转
    },

<router-view> 会根据 当前 URL 渲染对应组件

也就是说，在浏览器访问 http://localhost:8080/ 时，设置了默认跳转跳转到http://localhost:8080/login

也就看到了系统的登录界面，此时整个逻辑就通了，后续的调用逻辑是根据用户点击了什么来决定。

2、.vue文件的三大部分

Vue 的 .vue 文件 本质上就是一个 单文件组件（Single File Component, SFC），通常包含 三大部分：
<template> 模板部分、<script> 脚本部分和<style> 样式部分
image

2.1、<template> 模板部分

作用：定义组件的 结构和布局

比较关心的是数据和点击事件

在 Vue 里，@click 其实就是 事件绑定语法

而数据部分，例如：

<el-form
    ref="registerForm"
    :model="form"
    :rules="rules"

:model="form" → 绑定 form 对象（这个对象是写在<script> 的data部分），整个表单的数据都放这里
:rules="rules" → 绑定校验规则
ref="registerForm" → 给表单起名字，后面可以用 this.$refs.registerForm 找到它

2.2、<script> 脚本部分

作用：定义组件的 数据、逻辑和行为

image

这里的数据部分写了form对象，和上面的数据对应上去

data() {
    return {
      form: {
        uname: '',
        upass: '',
        upass2: '',
        code: '',
        email: '',
        realname: '',
        phone: '',
      },
      rules: {
        uname: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: isUname,  trigger: "blur" }
        ],

而methods是写的组件的方法，这些方法是和<template> 模板部分的@click绑定，例如：@click="sendCode"

2.3、<style> 样式部分

作用：定义组件样式

3、与Springboot后端的对应（以登录为例）

3.1、前端通过POST接口传参给后端

调用.post方法，把data数据传过去

image

3.2、后端处理前端请求

o 就是一个 FUsers 类型的 Java 对象，可以获取到对象对应的属性和方法。

@RequestMapping("/login")
→ 说明这个方法处理 /users/login 的请求（因为类上有 @RequestMapping("/users")，所以合起来就是 /users/login）
public MessUntil login(@RequestBody FUsers o)
→ 前端发来的 JSON 会自动封装成一个 FUsers 对象（包含 uname 和 upass）。
FUsers u=usersService.login(uname,upass);
→ 调用 Service 去数据库查用户。
后端返回 MessUntil.succ(u)，前端拿到 res.data.status == 1，就保存用户信息到 localStorage，然后跳转到 /dashboard

image

3.3、后端读取数据库

主要是这行代码：

FUsers u=usersService.login(uname,upass)

调用业务层 usersService 去查库验证（通常按 uname 和 加密后的 upass 查询），
找到就返回用户对象，找不到则返回 null。

点开这个函数可以发现，这个函数构造了查询条件并进行数据库查询

image

背后发生了什么

LambdaQueryWrapper：这是 MyBatis-Plus 提供的一个查询条件构造器。
.eq(FUsers::getUname, uname) 会翻译成 SQL 里的 WHERE uname = 'xxx'
.eq(FUsers::getUpass, upass) 会翻译成 SQL 里的 AND upass = 'yyy'

usersMapper.selectList(...)：调用了 MyBatis-Plus 的 Mapper，生成并执行 SQL。

表名是 f_users，那最终生成的 SQL 大概是：

SELECT * 
FROM f_users
WHERE uname = '前端传的用户名'
  AND upass = '加密后的密码';

如果数据库里有符合的用户，就把第一条结果封装成 FUsers 对象返回。
如果查不到（账号或密码不对），返回 null。

3.4、对应.sql数据库内容

此时再看下数据库的内容，发现是对应的

image

还可能存在一个疑问：f_users哪里体现啊，我看代码只有大写FUsers？

在 Java 代码里你看到的是 FUsers，这是 Java 实体类，对应数据库中的表 f_users。关系是这样的：
image
类名和表名不一定一模一样，MyBatis-Plus 默认会把 Java 类名从 驼峰转下划线小写 来映射到数据库表：FUsers → f_users。
字段名也是类似映射：upass → upass，uname → uname。
也就是说，虽然代码里都是大写 FUsers，但 MyBatis-Plus 会自动知道要操作数据库的 f_users 表。

此外，点击FUsers.java的类进去看，也是发现和f_users是对应的

image

posted @ 2025-08-23 10:58  JaxonYe  阅读(2)  评论(0)    收藏  举报