从 HTML/CSS/JS 到 Vue + Axios 的一篇实战笔记

本文基于黑马Java web课程前三章整理（后端视角）

目标：看懂页面、能改管理后台、能联调接口、能和前端高效沟通

0. 后端视角：前端到底在学什么？

先建立一个整体认知：

前端技术	作用	后端类比
HTML	页面结构、内容	Thymeleaf/JSP 模板、页面骨架
CSS	页面样式、布局	主题、皮肤、样式配置
JavaScript	页面行为、交互	页面里的业务逻辑
Vue	数据驱动视图、组件化	前端 MVVM 框架
Axios	发 HTTP 请求	RestTemplate / HttpClient / OpenFeign
JSON	数据传输格式	DTO / VO 序列化
Ajax	异步请求、局部刷新	前后端分离联调基础

Web 标准主要由 W3C 制定，核心就是三件套：

HTML：负责网页结构；
CSS：负责网页表现；
JavaScript：负责网页行为。

浏览器内核负责解析和渲染代码。不同浏览器内核可能有差异，所以需要 Web 标准统一。

1. HTML：页面的骨架

HTML 是 HyperText Markup Language，超文本标记语言。它由预定义标签组成，浏览器直接解析。

最基础的 HTML 骨架：

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>页面标题</title>
</head>
<body>
  <h1>Hello HTML</h1>
  <img src="img/1.png" alt="图片">
</body>
</html>

需要记住：

<head>：给浏览器看的信息，如标题、CSS；
<body>：给用户看的内容；
HTML 标签不区分大小写，建议小写；
属性值建议用双引号；
HTML 语法松散，但写严谨点没坏处。

常用标签

标题：<h1> 到 <h6>，h1 最大，h6 最小；
超链接：<a href="..." target="_blank">央视网</a>；
- _self：当前页打开；
- _blank：新页面打开；
图片：<img src="..." alt="..." width="100%">；
视频：<video src="..." controls width="80%"></video>；
段落：<p>；
换行：<br>；
加粗：<strong>；
布局：<div> 块级，独占一行；<span> 行内，一行多个。

路径

绝对路径：磁盘路径或网络路径；
相对路径：
- ./ 当前目录，可省略；
- ../ 上一级目录。

表格

员工管理后台常用：

html 复制代码

<table>
  <thead>
    <tr>
      <th>姓名</th>
      <th>性别</th>
      <th>职位</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>令狐冲</td>
      <td>男</td>
      <td>讲师</td>
    </tr>
  </tbody>
</table>

表单

表单用于数据采集，后端最熟悉。

html 复制代码

<form action="/save" method="post">
  姓名：<input type="text" name="name">
  密码：<input type="password" name="password">
  性别：
  <input type="radio" name="gender" value="1"> 男
  <input type="radio" name="gender" value="2"> 女

  职位：
  <select name="job">
    <option value="">请选择</option>
    <option value="1">班主任</option>
    <option value="2">讲师</option>
  </select>

  描述：<textarea name="description"></textarea>

  <input type="submit" value="提交">
  <input type="reset" value="重置">
</form>

重点：

action：提交到哪个 URL；
method：GET 数据拼在 URL 后，POST 放在请求体；
表单项必须有 name，否则提交不上去；
input type 常见有：text、password、radio、checkbox、file、date、time、datetime-local、hidden、button、reset、submit。

2. CSS：页面表现与布局

CSS 是 Cascading Style Sheet，层叠样式表，负责页面样式。

三种引入方式：

行内样式：<span style="color: #b2b2b2;">...</span>；
内部样式：写在 <style> 中；
外部样式：<link rel="stylesheet" href="css/news.css">。

企业开发常用外部样式，实现 HTML 和 CSS 分离。

常见选择器：

css 复制代码

/* 标签选择器 */
a { text-decoration: none; }

/* 类选择器 */
.publish-date { color: #b2b2b2; }

/* id 选择器 */
#title { font-size: 28px; }

颜色常见写法：

关键字：gray、red；
十六进制：#b2b2b2；
RGB：rgb(178, 178, 178)。

常见样式：

css 复制代码

p {
  text-indent: 2em;   /* 首行缩进 */
  line-height: 2;     /* 行高 */
}

.news-content {
  width: 70%;
  margin: 0 auto;     /* 版心居中 */
}

盒子模型

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

text 复制代码

content + padding + border + margin

content：内容；
padding：内边距；
border：边框；
margin：外边距。

css 复制代码

div {
  width: 200px;
  height: 200px;
  box-sizing: border-box;
  padding: 20px;
  border: 10px solid red;
  margin: 30px;
}

box-sizing: border-box 很常用，让 width/height 包含 padding 和 border。

Flex 布局

后端做管理后台也经常要改布局，Flex 必须会一点。

css 复制代码

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

常用属性：

display: flex：开启弹性布局；
flex-direction：row 横向，column 纵向；
justify-content：主轴对齐，如 space-between、center；
align-items：交叉轴对齐，如 center。

3. 实战案例：央视新闻 + Tlias 管理后台

课程里有两个典型案例：

央视新闻页面：练习标题、超链接、视频、图片、段落、版心居中；
Tlias 智能学习辅助系统：练习顶栏、搜索表单、表格、页脚、Flex、版心居中。

后端视角看，Tlias 员工管理页面就是典型后台管理页：

顶栏：系统名称 + 退出登录；
搜索表单：姓名、性别、职位、查询、清空；
表格：姓名、性别、头像、职位、入职日期、最后操作时间、操作；
页脚：版权信息。

这些页面可以用 AI 辅助生成，比如通义灵码。提示词要具体：

你是一名前端开发工程师，请生成一个 HTML 页面，包含顶栏、搜索表单、表格展示区、页脚版权区。搜索表单包含姓名输入框、性别下拉、职位下拉、查询和清空按钮。表格展示员工姓名、性别、头像、职位、入职日期、最后操作时间、编辑删除按钮。

生成后再调试。注意：敏感数据不要给 AI。

4. JavaScript：页面行为

JS 是跨平台、面向对象的脚本语言，用来控制网页行为。

组成：

ECMAScript：基础语法；
BOM：浏览器对象模型；
DOM：文档对象模型。

引入方式：

html 复制代码

<!-- 内部脚本 -->
<script>
  alert('Hello JS')
</script>

<!-- 外部脚本 -->
<script src="js/demo.js"></script>

注意：外部脚本引入标签不能自闭合。

基础语法

输出：

js 复制代码

document.write("Hello JS");
window.alert("Hello JS");
console.log("Hello JS");

变量：

js 复制代码

let a = 20;
a = "Hello"; // JS 弱类型，可以改类型

const PI = 3.14;
// PI = 3.15; // 报错

数据类型：number、string、boolean、null、undefined、object。

模板字符串：

js 复制代码

let name = 'Tom';
let age = 18;
console.log(`我是${name}，今年${age}岁`);

函数：

js 复制代码

function add(a, b) {
  return a + b;
}

let add2 = function(a, b) {
  return a + b;
}

let add3 = (a, b) => {
  return a + b;
}

对象：

js 复制代码

let user = {
  name: "Tom",
  age: 10,
  sing() {
    console.log("唱歌");
  }
}

JSON：

js 复制代码

let person = { name: 'itcast', age: 18 };
let jsonStr = JSON.stringify(person);
let obj = JSON.parse(jsonStr);

后端视角：JSON 就是前后端传输数据的主要格式。

DOM 操作

js 复制代码

let h1 = document.querySelector('#title1');
h1.innerHTML = '修改后的文本内容';

let hs = document.querySelectorAll('h1');
hs[0].innerHTML = '第一个标题';

querySelector：返回第一个匹配元素；
querySelectorAll：返回 NodeList，伪数组。

事件监听

js 复制代码

document.querySelector("#btn1").addEventListener('click', () => {
  alert("按钮被点击了");
});

三要素：

事件源：哪个元素；
事件类型：click、mouseenter、mouseleave、keydown、keyup、blur、focus、input、submit；
执行函数：触发后做什么。

案例：表格鼠标移入移出换色、删除确认。

js 复制代码

const trs = document.querySelectorAll('tr');
for (let i = 1; i < trs.length; i++) {
  trs[i].addEventListener('mouseenter', function () {
    this.style.backgroundColor = '#f2e2e2';
  });
  trs[i].addEventListener('mouseleave', function () {
    this.style.backgroundColor = '#fff';
  });
}

5. Vue：数据驱动视图

Vue 是渐进式 JavaScript 框架，用于构建用户界面。

核心思想：数据驱动视图。

后端返回 JSON，Vue 把数据渲染成用户看的界面。

快速入门：

html 复制代码

<div id="app">
  {{message}}
</div>

<script type="module">
  import { createApp } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'
  createApp({
    data() {
      return {
        message: 'Hello Vue'
      }
    }
  }).mount('#app')
</script>

插值表达式：{``{message}}。

常用指令

指令	作用
`v-for`	列表渲染
`v-bind` / `:src`	动态绑定属性
`v-if` / `v-else-if` / `v-else`	条件渲染，创建或移除元素
`v-show`	控制 display 显示隐藏
`v-model`	表单双向绑定
`v-on` / `@click`	绑定事件

员工列表渲染示例：

html 复制代码

<tr v-for="(emp, index) in empList" :key="emp.id">
  <td>{{ emp.name }}</td>
  <td>{{ emp.gender === 1 ? '男' : '女' }}</td>
  <td><img :src="emp.image" class="avatar"></td>
  <td>
    <span v-if="emp.job === '1'">班主任</span>
    <span v-else-if="emp.job === '2'">讲师</span>
    <span v-else-if="emp.job === '3'">学工主管</span>
    <span v-else-if="emp.job === '4'">教研主管</span>
    <span v-else-if="emp.job === '5'">咨询师</span>
  </td>
  <td>{{ emp.entrydate }}</td>
  <td>{{ emp.updatetime }}</td>
  <td>
    <button @click="edit(emp.id)">编辑</button>
    <button @click="del(emp.id)">删除</button>
  </td>
</tr>

搜索表单双向绑定：

html 复制代码

<input v-model="searchForm.name" placeholder="姓名">
<select v-model="searchForm.gender">
  <option value="">性别</option>
  <option value="1">男</option>
  <option value="2">女</option>
</select>

Vue 实例：

js 复制代码

createApp({
  data() {
    return {
      searchForm: {
        name: '',
        gender: '',
        job: ''
      },
      empList: []
    }
  },
  methods: {
    search() {
      console.log(this.searchForm);
    },
    clear() {
      this.searchForm = { name: '', gender: '', job: '' };
    }
  }
}).mount('#container')

注意：methods 里的 this 指向 Vue 实例，可以访问 data 中的数据。

6. Ajax 与 Axios：前后端联调关键

前后端分离后，前端通过 Ajax 请求后端接口。

Ajax 特点：

与服务器交换数据；
异步交互，不刷新整个页面，只更新局部。

同步 vs 异步：

同步：请求期间页面不能做其他操作；
异步：请求期间页面还能继续操作。

原生 Ajax 繁琐，实际常用 Axios。

html 复制代码

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
  axios.get('https://web-server.itheima.net/emps/list')
    .then(res => {
      console.log(res.data);
    })
    .catch(err => {
      console.log(err);
    });
</script>

也可以：

js 复制代码

axios.post(url, "id=1").then(result => {
  console.log(result.data);
});

async / await

js 复制代码

async search() {
  const result = await axios.get(
    `https://web-server.itheima.net/emps/list?name=${this.searchForm.name}&gender=${this.searchForm.gender}&job=${this.searchForm.job}`
  );
  this.empList = result.data.data;
}

后端视角：

axios.get 就是发 GET 请求；
URL 里的查询参数对应 @RequestParam；
result.data 是后端响应体；
如果后端统一返回 Result{code, msg, data}，那么 result.data.data 才是列表；
跨域问题需要后端配置 CORS。

7. Vue 生命周期：页面初始化请求

Vue 生命周期是 Vue 对象从创建到销毁的过程。重点掌握 mounted。

mounted：挂载完成，HTML 渲染成功。一般用于页面初始化时自动请求后台数据。

js 复制代码

methods: {
  async search() {
    const result = await axios.get(`https://web-server.itheima.net/emps/list`);
    this.empList = result.data.data;
  }
},
mounted() {
  this.search();
}

这样页面一加载，就会自动查询员工列表。

8. 后端学习者总结

如果我是后端，学完这套内容，至少能达到：

看懂 HTML/CSS，能改管理后台页面；
理解 JS 事件和 DOM，能处理简单交互；
会用 Vue 指令渲染列表、绑定表单、绑定事件；
会用 Axios 调后端接口，理解前后端分离联调；
知道 JSON、GET/POST、请求参数、响应结构；
能借助 AI 生成页面，再调试修改。

建议学习顺序：

text 复制代码

HTML → CSS → JS → DOM/事件 → Vue 指令 → Axios → Vue 生命周期 → 实战管理后台

重点投入：

Vue + Axios 联调；
表单、表格、搜索、分页、增删改查；
浏览器控制台和 Network 面板；
后端统一返回结果和 CORS。

不必一开始深挖：

CSS 动画；
复杂 JS 底层；
浏览器兼容细节；
前端工程化高级配置。

作为后端，前端不是全部，但懂前端能让你：

自己写管理后台；
联调时快速定位问题；
和前端沟通不再"鸡同鸭讲"；
必要时独立完成全栈小项目。