作为一名学生，深入学习 Web 开发的这段时间，犹如开启了一场精彩纷呈的冒险之旅，一路上收获满满，也感慨万千。
一、初窥门径：从好奇到困惑
最初接触 Web 开发，是被那些炫酷多彩、交互丰富的网页所吸引，怀揣着满心好奇一头扎了进去。从学习 HTML 开始，我发现原来网页的骨架是由一个个标签搭建起来的，<html> 包裹着整个页面，<head> 里藏着页面的配置信息，而 <body> 才是真正展示内容的舞台。这时候一切都看似简单直白，只需按部就班地堆砌标签就能做出一个静态网页，成就感油然而生。
但好景不长，当学到 CSS 时，样式的优先级、盒子模型等概念一股脑涌来，我陷入了困惑。为什么设置的样式没有生效？为什么元素之间的间距如此难以掌控？看着屏幕上错乱的布局，我意识到 Web 开发远不止表面的标签拼接那么简单。
二、渐入佳境：攻克难题，感受成就
不服输的劲头促使我反复钻研 CSS，通过在线教程、论坛求助，我渐渐摸清了门道。学会用 flexbox 和 grid 来灵活布局，像是掌握了神奇的拼图技巧，能随心所欲地把网页元素排列得井井有条。紧接着，JavaScript 粉墨登场，它赋予网页灵动的生命力。从简单的事件监听，像是点击按钮弹出提示框，到复杂的 DOM 操作，动态更新网页内容，每一次代码运行成功，都让我兴奋不已。
在这个阶段，我开始做一些小型项目练手，比如仿造一个简易的待办事项清单应用。从构思页面布局，到编写交互逻辑，再到一点点调试错误，这个过程虽然艰辛，但当最终看到自己亲手打造的应用能流畅运行时，那种满足感无与伦比，也真切感受到知识融会贯通的魅力。
三、拓展深化：框架时代的冲击与成长
随着学习的深入，原生 JavaScript 开发项目的效率短板愈发明显，这时候前端框架如 Vue、React 映入眼帘。初次接触 Vue 框架，它的响应式原理、组件化开发方式又给我带来全新的挑战。习惯了直接操作 DOM 的我，一时难以理解数据驱动视图的理念。然而，咬牙坚持学习官方文档、跟着开源项目模仿实践后，我发现框架带来的开发效率提升是巨大的。利用 Vue 的脚手架工具，可以迅速搭建项目雏形，组件复用让代码更加简洁优雅，开发大型项目时也不再手忙脚乱。
后端开发同样精彩，学习 Node.js 让我打破了前端只能做界面的局限，得以涉足服务器端编程。搭配 Express 框架，轻松搭建起 RESTful API，实现前后端的数据交互。数据库方面，MySQL 的学习让我懂得如何持久化存储数据，设计合理的表结构，执行 SQL 查询来检索、更新信息。
四、团队协作与实战演练：全新挑战
真正的蜕变发生在参与小组项目的时候。与同学们一起分工协作，有人负责前端页面设计，有人专注后端接口开发，还有人管理数据库。这时候，沟通成本、代码风格差异、接口对接等问题纷至沓来。一开始，因为前端传参格式与后端接收预期不符，导致联调时频繁出错，大家心情都有些沮丧。但正是在一次次的磨合中，我们学会如何撰写清晰规范的接口文档，如何通过 Git 进行高效的代码版本控制与合并，如何站在他人角度思考问题，确保整个项目协同推进。
五、Postman 测试接口使用教程
- 安装与启动：访问 Postman 官网，下载对应操作系统的安装包并完成安装。启动后，映入眼帘的是简洁直观的界面，左侧是请求历史与集合管理区，右侧则是请求构建区域。
- 创建请求：点击 “+” 号新建请求，在顶部输入框填写接口的 URL。例如，测试本地启动的一个简单的用户登录接口 “http://localhost:8080/api/login” 。接着，根据接口定义选择请求方法，常见的有
GET、POST、PUT、DELETE。对于GET请求，参数可直接拼接在 URL 后；而POST请求，需切换到 “Body” 标签。
- 设置请求体：当使用
POST这类需要传递数据的请求方式时，在 “Body” 标签下，我们可以选择数据格式。如果是 JSON 格式的数据传输，就选择 “application/json”，随后在下方文本区按照 JSON 语法填写数据，比如{"username": "test", "password": "123456"}。 - 发送请求与查看结果：点击 “Send” 按钮，Postman 会迅速向目标 URL 发起请求。下方的响应区域会即时展示响应状态码，如常见的 200 代表成功，400 系列是客户端错误，500 系列为服务器端错误。同时，还能查看响应头与响应体内容，方便排查接口返回数据是否正确、格式是否符合预期。
六、前后端分离博客系统部分内容教程
- 项目初始化：前端选用 Vue.js，通过 Vue CLI 脚手架工具，执行命令
vue create blog-frontend快速搭建项目骨架，它会自动安装好基础依赖与项目结构。后端采用 Spring Boot，在 IDEA 里利用 Spring Initializr 创建新项目，勾选如 Web、MySQL Driver 等必要依赖。 - 前端页面搭建：在 Vue 项目里，利用组件化思想，创建
ArticleList.vue、ArticleDetail.vue等组件。在ArticleList组件中，使用axios库发起获取文章列表的请求，示例代码如下：
import axios from 'axios';
export default {
data() {
return {
articleList: []
};
},
mounted() {
axios.get('/api/articles')
.then(response => {
this.articleList = response.data;
});
}
};
- 后端接口开发：在 Spring Boot 项目里，创建
ArticleController，使用@RestController注解将其标识为 RESTful 风格的控制器。提供获取文章列表的接口：
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.List;
@RestController
public class ArticleController {
@GetMapping("/api/articles")
public List<Article> getArticleList() {
List<Article> articles = new ArrayList<>();
// 模拟从数据库查询数据填充articles
return articles;
}
}
七、统一请求响应代码及实现过程
- 定义统一响应实体类：在后端项目中，创建一个通用的响应实体类，例如
Result.java：
public class Result<T> {
private int code;
private String message;
private T data;
public Result(int code, String message, T data) {
this.code = code;
this.message = message;
this.data = data;
}
// 省略Getter、Setter方法
public static <T> Result<T> success(T data) {
return new Result<>(200, "成功", data);
}
public static <T> Result<T> error(int code, String message) {
return new Result<>(code, message, null);
}
}
- 实现统一响应处理：借助 Spring 的
ResponseBodyAdvice接口，创建一个切面类，实现对所有 Controller 方法返回值的统一包装。示例代码如下：
import org.springframework.core.MethodParameter;
import org.springframework.http.MediaType;
import org.springframework.http.server.ServerHttpRequest;
import org.springframework.http.server.ServerHttpResponse;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.servlet.mvc.method.annotation.ResponseBodyAdvice;
@ControllerAdvice
public class ResponseAdvice implements ResponseBodyAdvice {
@Override
public boolean supports(MethodParameter returnType, Class converterType) {
return true;
}
@Override
public Object beforeBodyWrite(Object body, MethodParameter returnType, MediaType selectedMediaType,
ServerHttpRequest request, ServerHttpResponse response) {
if (body instanceof Result) {
return body;
}
return Result.success(body);
}
}
- 效果展示：当 Controller 返回一个普通的文章列表时，前端接收到的实际是被包装后的
Result对象，形式如{"code": 200, "message": "成功", "data": [文章数据数组]}，使得前端可以统一处理响应，依据状态码与消息进行不同的 UI 展示逻辑，增强了系统的稳定性与可维护性。
八、使用 JWT 的带 Token 的登录方式
- JWT 原理入门：JWT 由头部、载荷、签名三部分组成。头部定义加密算法等元信息，载荷携带诸如用户 ID、用户名这类身份信息，签名用于保证数据完整性。这一结构让它成为一个自包含的身份令牌。
- 登录流程实践：前端发起登录请求，后端验证用户名和密码成功后，使用 JJWT 库生成 Token。在 Java 的 Spring Boot 项目中：
import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;
import java.util.Date;
public class JwtUtil {
private static final String SECRET_KEY = "your_secret_key";
private static final long EXPIRATION_TIME = 10 * 60 * 1000; // 10分钟
public static String generateToken(String username) {
Date now = new Date();
Date expiration = new Date(now.getTime() + EXPIRATION_TIME);
return Jwts.builder()
.setSubject(username)
.setIssuedAt(now)
.setExpiration(expiration)
.signWith(SignatureAlgorithm.HS256, SECRET_KEY)
.compact();
}
}
- 验证与授权：前端保存 Token（常放于 Local Storage），后续请求带上它。后端收到请求时，验证 Token 有效性：
public static boolean validateToken(String token) {
try {
Jwts.parser().setSigningKey(SECRET_KEY).parseClaimsJws(token);
return true;
} catch (Exception e) {
return false;
}
}
只有验证通过，用户才能访问受限资源，实现安全登录与授权。
Web 项目应用开发是一个持续学习与实践的过程，掌握这些关键技能点，为打造功能完备、交互流畅的 web 应用打下了坚实基础。
扫一扫
1196
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
