0. 前端学习总路线

前端开发的本质是：

1
结构 HTML → 样式 CSS → 行为 JavaScript → 数据驱动 Vue → 组件库 ElementPlus → 网络请求 Ajax/Axios → 工程化 Vite → 项目实战

可以用一句话理解：

  • HTML 决定页面有什么。
  • CSS 决定页面长什么样。
  • JavaScript 决定页面能做什么。
  • Vue 让页面根据数据自动变化。
  • Ajax/Axios 让前端和后端通信。
  • ElementPlus 提供现成的后台管理组件。
  • Vite + Vue 工程化 让前端项目更适合真实开发。

第一模块：Web 标准与浏览器运行机制

1.1 Web 标准三件套

Web 标准由三类技术共同完成：

技术 职责 类比
HTML 页面结构和内容 房子的骨架
CSS 页面样式和布局 房子的装修
JavaScript 页面行为和交互 房子的电器和开关

一个网页从无到有的过程通常是：

1
2
3
4
5
6
7
8
9
浏览器加载 HTML
      ↓
解析标签，形成 DOM 树
      ↓
加载 CSS，计算样式
      ↓
执行 JavaScript，绑定事件、修改页面、发送请求
      ↓
用户看到可交互页面

1.2 前端页面的基本结构

一个标准 HTML 页面通常由 html、head、body 三部分组成：

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面标题</title>
</head>
<body>
  页面内容
</body>
</html>

重点理解：

  • DOCTYPE：告诉浏览器使用标准模式解析页面。
  • html：整个页面的根元素。
  • head：放页面元信息，例如编码、标题、样式引用。
  • body：放用户真正能看到的内容。

第二模块：HTML 页面结构

2.1 常用标签分类

文本与标题

标签 作用
h1 ~ h6 标题，h1 级别最高
p 段落
span 行内容器，用于包裹一小段文字
br 换行
hr 分割线

链接与图片

标签 关键属性 作用
a href、target 超链接
img src、alt 图片

示例：

1
2
<a href="https://www.cctv.com" target="_blank">央视网</a>
<img src="news.png" alt="新闻图片">

页面分区

标签 特点
div 块级容器，常用于页面布局
span 行内容器，常用于局部文字样式

后台管理页面通常会把页面分成：

1
2
3
4
顶部区域 header
侧边菜单 aside
主内容区 main
底部版权 footer

2.2 表单标签

表单用于收集用户输入，是前端和后端交互的入口。

常见表单控件：

标签/类型 作用
input type="text" 文本框
input type="password" 密码框
input type="radio" 单选框
input type="checkbox" 复选框
select + option 下拉框
textarea 多行文本
button 按钮

示例：

1
2
3
4
5
<form>
  用户名：<input type="text" name="username">
  密码：<input type="password" name="password">
  <button type="submit">登录</button>
</form>

注意：

  • name 是提交给后端时的参数名。
  • value 是提交给后端时的参数值。
  • 表单页面不仅要好看，还要考虑数据如何提交。

第三模块：CSS 样式与布局

3.1 CSS 三种引入方式

方式 写法 适用场景
行内样式 style="color:red" 临时测试，不推荐大量使用
内部样式 style 标签 单页面小案例
外部样式 link 引入 CSS 文件 真实项目推荐

外部样式示例：

1
<link rel="stylesheet" href="css/style.css">

3.2 常见 CSS 属性

属性 作用
color 文字颜色
font-size 字体大小
font-weight 字体粗细
text-decoration 文本修饰
width / height 宽高
margin 外边距
padding 内边距
border 边框
background 背景

3.3 盒子模型

每个 HTML 元素都可以看成一个盒子：

1
2
3
4
margin 外边距
  border 边框
    padding 内边距
      content 内容

重点：

  • margin 控制盒子和外部元素的距离。
  • padding 控制内容和边框之间的距离。
  • border 是盒子的边界。
  • box-sizing: border-box 可以让宽高更好计算。

3.4 Flex 布局

后台管理系统中常用 Flex 完成横向、纵向布局。

1
2
3
4
5
.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

常用属性：

属性 作用
display: flex 开启弹性布局
flex-direction 主轴方向
justify-content 主轴对齐
align-items 交叉轴对齐
flex: 1 自动占满剩余空间

第四模块：JavaScript 基础

4.1 JavaScript 的组成

JavaScript 由三部分组成：

组成 作用
ECMAScript JS 基础语法，例如变量、函数、对象
DOM 操作 HTML 文档
BOM 操作浏览器窗口、地址栏等

4.2 JS 引入方式

1
2
3
<script>
  alert("Hello JavaScript");
</script>
1
<script src="js/app.js"></script>

真实项目推荐外部脚本，便于维护。

4.3 变量与数据类型

现代 JS 常用：

1
2
let name = "Tom";
const age = 18;
关键字 特点
let 声明可变变量
const 声明常量
var 老写法，函数作用域，现代开发少用

常见数据类型：

类型 示例
string "Tom"
number 18
boolean true
null 空值
undefined 未定义
object 对象、数组

4.4 函数

函数用于封装可复用逻辑。

1
2
3
4
5
function add(a, b) {
  return a + b;
}

const result = add(1, 2);

要理解三个词：

  • 参数：函数接收的数据。
  • 返回值：函数执行后的结果。
  • 调用：让函数真正执行。

4.5 对象与 JSON

JS 对象：

1
2
3
4
const user = {
  name: "Tom",
  age: 18
};

JSON 是一种通用数据格式，常用于前后端传输数据：

1
2
3
4
{
  "name": "Tom",
  "age": 18
}

常用转换：

1
2
const json = JSON.stringify(user);
const obj = JSON.parse(json);

区别：

  • JS 对象是程序中的数据结构。
  • JSON 是字符串格式的数据表示。
  • 前后端通信时，通常传 JSON。

第五模块：DOM 与事件

5.1 DOM 是什么

DOM 是浏览器把 HTML 文档解析成的一棵对象树。

1
2
3
4
5
HTML 文档
  ↓
DOM 树
  ↓
JS 可以查询、修改、删除节点

5.2 获取元素

1
2
const title = document.querySelector("h1");
const buttons = document.querySelectorAll("button");

5.3 修改页面内容与样式

1
2
3
const title = document.querySelector("h1");
title.innerText = "新的标题";
title.style.color = "red";

5.4 事件监听

事件是用户行为，例如点击、输入、提交。

1
2
3
4
const btn = document.querySelector("button");
btn.addEventListener("click", function () {
  alert("按钮被点击了");
});

常见事件：

事件 触发时机
click 鼠标点击
input 输入框内容变化
change 表单值改变
submit 表单提交
load 页面加载完成

5.5 从 DOM 到 Vue 的思维转变

原生 DOM 思维：

1
找到元素 → 修改元素

Vue 思维：

1
修改数据 → 页面自动变化

这是前端开发非常重要的转折点。

第六模块：Ajax 与前后端通信

6.1 Ajax 解决什么问题

Ajax 可以让页面不刷新就向后端发送请求、获取数据。

1
2
3
4
5
6
7
用户点击查询
  ↓
前端发送 Ajax 请求
  ↓
后端返回 JSON
  ↓
前端渲染表格

6.2 HTTP 请求常见要素

要素 说明
URL 请求地址
Method 请求方式，如 GET、POST、PUT、DELETE
Params 查询参数
Body 请求体
Header 请求头
Response 响应数据

6.3 常见请求方式

方法 语义 后台管理案例
GET 查询 查询部门、员工列表
POST 新增 新增员工
PUT 修改 修改员工信息
DELETE 删除 删除部门、员工

6.4 Axios 基本用法

1
2
3
axios.get("/api/depts").then(res => {
  console.log(res.data);
});
1
2
3
axios.post("/api/depts", {
  name: "教研部"
});

实际项目中一般不在页面里直接写所有请求，而是封装 API 文件。

第七模块：Vue 基础

7.1 Vue 的核心思想

Vue 是数据驱动视图的框架。

1
2
3
数据 data/state 改变
      ↓
Vue 自动更新页面

与原生 JS 相比，Vue 可以减少大量 DOM 操作。

7.2 常用指令

指令 作用
v-for 列表渲染
v-bind / : 绑定属性
v-if 条件渲染，控制是否创建元素
v-show 条件显示，控制 display
v-model 表单双向绑定
v-on / @ 事件绑定

示例：

1
2
3
<li v-for="item in list" :key="item.id">{{ item.name }}</li>
<button @click="search">查询</button>
<input v-model="query.name">

7.3 v-if 和 v-show 区别

指令 本质 适合场景
v-if 创建或销毁 DOM 切换不频繁
v-show 控制 CSS 显示隐藏 切换频繁

7.4 双向绑定

v-model 常用于表单：

1
<input v-model="form.username">
1
2
3
const form = {
  username: ""
};

用户输入会改变数据，数据改变也会反映到输入框。

第八模块：Vue 工程化

8.1 为什么需要工程化

简单页面可以直接写 HTML、CSS、JS，但真实项目需要：

  • 多页面、多组件组织。
  • 自动编译和热更新。
  • 统一依赖管理。
  • 代码拆分和模块化。
  • 打包部署。

因此使用 Vite 创建 Vue 项目。

8.2 Vue 项目常见目录

1
2
3
4
5
6
7
8
src
  ├── api          请求接口封装
  ├── assets       静态资源
  ├── components   公共组件
  ├── router       路由配置
  ├── views        页面组件
  ├── App.vue      根组件
  └── main.js      入口文件

8.3 单文件组件 SFC

.vue 文件通常由三部分组成：

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
  <div>页面结构</div>
</template>

<script setup>
const msg = "Hello Vue";
</script>

<style scoped>
div {
  color: red;
}
</style>
区域 作用
template 页面结构
script setup 组件逻辑
style scoped 组件样式

8.4 组合式 API

Vue 3 推荐组合式 API：

1
2
3
4
import { ref, reactive } from "vue";

const count = ref(0);
const form = reactive({ name: "" });
API 适合数据
ref 基本类型或单个值
reactive 对象、表单数据
computed 计算属性
watch 监听数据变化

第九模块：ElementPlus 后台管理组件

9.1 ElementPlus 的价值

后台管理系统常见功能高度重复：

  • 表格
  • 分页
  • 表单
  • 弹窗
  • 按钮
  • 日期选择器
  • 下拉框
  • 消息提示

ElementPlus 提供现成组件，能快速搭建后台页面。

9.2 表格组件

1
2
3
4
<el-table :data="tableData">
  <el-table-column prop="name" label="姓名" />
  <el-table-column prop="gender" label="性别" />
</el-table>

重点：

  • data 绑定表格数据。
  • prop 对应对象字段。
  • label 是列标题。

9.3 分页组件

1
2
3
4
5
6
<el-pagination
  v-model:current-page="page"
  v-model:page-size="pageSize"
  :total="total"
  @current-change="loadData"
/>

分页查询流程：

1
2
3
4
5
6
7
切换页码
  ↓
修改 page/pageSize
  ↓
重新请求后端
  ↓
更新 tableData 和 total

9.4 对话框与表单

1
2
3
4
5
6
7
<el-dialog v-model="dialogVisible" title="新增员工">
  <el-form :model="form">
    <el-form-item label="姓名">
      <el-input v-model="form.name" />
    </el-form-item>
  </el-form>
</el-dialog>

常见逻辑：

  • 点击新增：打开弹窗，清空表单。
  • 点击编辑：打开弹窗，回显数据。
  • 点击保存：表单校验，通过后调用新增或修改接口。

9.5 表单校验

表单校验用于避免错误数据提交到后端。

1
2
3
const rules = {
  name: [{ required: true, message: "请输入姓名", trigger: "blur" }]
};

第十模块：Vue Router 路由

10.1 路由是什么

路由用于根据地址切换不同页面组件。

1
2
3
4
5
/dept     → 部门管理
/emp      → 员工管理
/clazz    → 班级管理
/student  → 学员管理
/log      → 日志管理

10.2 基本配置

1
2
3
4
5
6
7
8
9
10
11
import { createRouter, createWebHistory } from "vue-router";

const routes = [
  { path: "/dept", component: DeptView },
  { path: "/emp", component: EmpView }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

10.3 嵌套路由

后台管理系统通常有一个整体布局：

1
2
3
4
5
6
7
Layout
  ├── Header
  ├── Sidebar
  └── router-view
        ├── DeptManage
        ├── EmpManage
        └── StudentManage

router-view 是子路由组件显示的位置。

第十一模块：Axios 封装与请求代理

11.1 为什么封装 Axios

如果每个页面都直接写完整请求，会出现：

  • baseURL 重复。
  • token 处理重复。
  • 错误处理重复。
  • 响应数据拆解重复。

因此要封装统一请求工具。

11.2 request.js 封装思路

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
import axios from "axios";

const request = axios.create({
  baseURL: "/api",
  timeout: 10000
});

request.interceptors.request.use(config => {
  const token = localStorage.getItem("token");
  if (token) {
    config.headers.token = token;
  }
  return config;
});

request.interceptors.response.use(response => {
  return response.data;
});

export default request;

11.3 API 模块封装

1
2
3
4
5
import request from "@/utils/request";

export const queryDeptApi = () => request.get("/depts");
export const addDeptApi = data => request.post("/depts", data);
export const deleteDeptApi = id => request.delete(`/depts/${id}`);

页面只关心业务，不关心请求细节。

11.4 Vite 代理

开发环境中，前端端口和后端端口不同，会涉及跨域。可用代理解决：

1
2
3
4
5
6
7
8
9
server: {
  proxy: {
    "/api": {
      target: "http://localhost:8080",
      changeOrigin: true,
      rewrite: path => path.replace(/^\/api/, "")
    }
  }
}

请求流程：

1
2
3
4
5
6
7
浏览器请求 /api/depts
      ↓
Vite 开发服务器转发到 http://localhost:8080/depts
      ↓
后端返回数据
      ↓
前端页面渲染

第十二模块：Tlias 前端项目业务逻辑

12.1 后台管理系统通用页面逻辑

几乎所有管理页面都遵循相似流程：

1
2
3
4
5
6
7
8
9
10
11
页面加载
  ↓
查询列表
  ↓
渲染表格
  ↓
条件查询 / 分页
  ↓
新增 / 编辑 / 删除
  ↓
刷新列表

12.2 部门管理

核心功能：

  • 查询部门列表。
  • 新增部门。
  • 修改部门。
  • 删除部门。

关键点：

  • 删除前要确认。
  • 新增和编辑可以共用一个弹窗。
  • 保存时根据是否有 id 判断新增还是修改。

12.3 员工管理

核心功能：

  • 条件分页查询。
  • 新增员工。
  • 修改员工。
  • 删除员工。
  • 上传头像。

核心数据：

1
2
3
4
5
queryForm：查询条件
page/pageSize：分页参数
total：总记录数
tableData：表格数据
form：新增/编辑表单

12.4 班级与学员管理

班级和学员是典型的关联业务：

  • 学员属于某个班级。
  • 查询学员时可能需要展示班级名称。
  • 新增/修改学员时需要选择班级。

前端要重点处理：

  • 下拉框数据加载。
  • 日期格式处理。
  • 表单校验。
  • 分页查询。

12.5 登录与 token

登录流程：

1
2
3
4
5
6
7
8
9
10
11
输入用户名密码
  ↓
调用登录接口
  ↓
后端验证成功返回 token
  ↓
前端保存 token 到 localStorage
  ↓
后续请求在请求头中携带 token
  ↓
后端校验 token 后放行

前端需要做：

  • 登录成功保存 token。
  • 请求拦截器统一携带 token。
  • token 失效时跳转登录页。
  • 退出登录时清除 token。

第十三模块：前端高频易错点

13.1 HTML/CSS 易错点

问题 原因 解决
图片不显示 src 路径错误 检查相对路径
样式不生效 选择器写错或优先级不够 使用浏览器开发者工具检查
页面布局错乱 盒子模型和宽高计算错误 使用 box-sizing: border-box
表单提交字段为空 缺少 name 或绑定错误 检查字段名

13.2 JS 易错点

问题 原因
变量是 undefined 未赋值或字段名写错
JSON 解析失败 JSON 字符串格式不合法
事件不触发 元素没获取到或事件名写错
数组渲染异常 数据结构和页面预期不一致

13.3 Vue 易错点

问题 原因 解决
页面不更新 数据不是响应式 使用 ref 或 reactive
v-for 警告 缺少 key 添加唯一 :key
弹窗数据残留 关闭时没清空表单 新增前重置表单
分页不正确 页码或每页条数未传给后端 检查请求参数
接口 401 token 未携带或失效 检查请求拦截器

第十四模块：前端知识关系图

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
HTML/CSS
  ↓ 形成静态页面
JavaScript
  ↓ 让页面可交互
DOM/事件
  ↓ 操作页面与响应用户行为
Ajax/Axios
  ↓ 和后端接口通信
Vue
  ↓ 数据驱动视图
ElementPlus
  ↓ 快速搭建后台管理界面
Vue Router
  ↓ 多页面切换
Axios 封装 + Token
  ↓ 完成真实前后端联调
Vite 打包
  ↓ 部署到服务器或后端静态目录

第十五模块：看完应掌握的能力清单

学完前端部分，应该能做到：

  • 能看懂 HTML 页面结构。
  • 能用 CSS 完成基本布局和样式。
  • 能用 JS 操作数据、函数、对象、JSON。
  • 能理解 DOM 和事件监听。
  • 能使用 Ajax/Axios 调用后端接口。
  • 能使用 Vue 指令完成列表、条件、表单、事件绑定。
  • 能使用 ElementPlus 搭建后台管理页面。
  • 能封装请求工具和 API 模块。
  • 能理解 token 登录认证在前端的处理方式。
  • 能完成部门、员工、班级、学员等后台管理模块页面。

第十六模块：前端学习建议

建议按下面顺序复习：

1
2
3
4
5
6
7
8
9
10
1. HTML 标签和表单
2. CSS 盒子模型和 Flex 布局
3. JS 变量、函数、对象、JSON
4. DOM 查询、修改、事件监听
5. Ajax 请求和响应数据
6. Vue 指令和响应式数据
7. ElementPlus 表格、分页、表单、弹窗
8. Axios 封装、API 模块、请求拦截器
9. Vue Router 和后台管理页面结构
10. Tlias 项目前端业务流程

记忆口诀：

1
2
3
4
5
先结构，后样式；
先数据，后页面；
先接口，后渲染；
先组件，后业务；
先跑通，再优化。