ToB企服应用市场:ToB评测及商务社交产业平台

标题: Web 项目应用开发学习心得 [打印本页]

作者: 反转基因福娃 时间: 2025-1-8 09:20
标题: Web 项目应用开发学习心得
作为一名学生，深入学习 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 应用打下了坚固根本。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)