Web前端项目开发基础性知识总结

最新推荐文章于 2024-10-05 09:50:31 发布

red_apple53

最新推荐文章于 2024-10-05 09:50:31 发布

阅读量1.7k 前端 web intellij-idea

本文链接：https://blog.csdn.net/red_apple53/article/details/135123894

一：Web前端项目开发基础知识概念；

HTML：超文本标记语言，用于描述网页结构和内容。
CSS：层叠样式表，用于描述网页的样式和布局。
JavaScript：一种动态编程语言，用于实现网页的交互效果和动态行为。
前端框架：例如React、Angular、Vue等，提供了一套通用的解决方案和工具，简化了开发流程。
模块化：将代码分割成多个模块，提高代码复用性和可维护性。
组件化：将页面划分成多个组件，每个组件具有独立的功能和样式，提高了页面的可复用性和可维护性。
单页面应用（SPA）：整个应用只有一个HTML页面，通过JavaScript实现页面切换和数据交互。
RESTful API：一种Web API设计风格，通过HTTP协议进行通信，实现客户端和服务器之间的数据传输和交互。
响应式设计：根据不同设备的屏幕大小和分辨率，自适应调整页面的布局和样式。
浏览器兼容性：在不同浏览器和设备上实现相同的用户体验和功能。

以上是Web前端项目开发中常用的概念，了解这些概念对于理解和实现前端项目非常重要；

要进行前端项目的开发，就需要具备这些基础知识，还包括Java语言基础（基本语法、逻辑控制、面向对象、集合），数据库（管理工具、数据库表列主键外键等概念、查询语句、导入导出、ER图等），SpringBoot相关知识（依赖管理、ORM、切面、DAO→service→controller开发流程）等等...

关于软件体系的定位

二：web前端项目开发环境的配置；

JDK安装
①也可使用idea自带jdk，可能与open jdk存在一些区别
②傻瓜式安装，完成后配置环境变量
Intellij IDEA安装
傻瓜式安装，完成后在“文件→设置→插件”中搜索①Alibaba Java Code Guidelines②Gitee并安装
克隆项目
①Fork教学项目
②在非中文目录下clone项目“git clone https://gitee.com/xxx/api-practices.git”
安装mysql-installer-community-8.0.22.0
①仅安装Server即可（Server only）
②检测安装，可能会有一些依赖安装，按提示安装即可
③安装完会有配置，其中密码验证方式，必须选择传统验证（Legacy），强密码方式navicat无法连接
④root根用户密码要牢记，开发环境建议使用123456或654321，生产环境不要使用易于猜测的密码
⑤其他配置一般按默认即可
参考：https://www.modb.pro/db/53520
安装Navicat，并打补丁
①安装完成后打开navicat，点击连接输入root用户密码并连接到mysql
②创建practices数据库。字符集utf8 -- UTF-8 Unicode，排序utf8_bin
接口测试工具
①一般的接口测试，请在Edge或Chrome上安装postwoman插件
②涉及到文件上传，需要安装和使用postman应用
③要测试接口需要提交复杂json作为参数时，可使用>>>在线json编辑器<<<

三，关于Git远程仓库的使用；

创建远程仓库：首先，在代码托管平台（如GitHub、GitLab或Bitbucket）上创建一个新的远程仓库。在创建时，会生成一个远程仓库的URL，用于后续与本地仓库进行连接。
关联远程仓库：在本地仓库所在的目录中，使用命令git remote add origin <远程仓库的URL>将本地仓库与远程仓库进行关联。"origin"是远程仓库的别名，可以根据需要自定义。
推送到远程仓库：当本地代码修改完成后，可以使用git push origin <分支名>命令将代码推送到远程仓库。这样其他团队成员就可以从远程仓库获取最新的代码。
拉取远程仓库：使用git pull origin <分支名>命令可以将远程仓库的最新代码拉取到本地仓库。这样可以确保本地仓库和远程仓库的代码保持同步。
分支管理：远程仓库可以帮助团队协作开发时更好地管理分支。可以使用git branch -r命令查看远程仓库的分支列表，使用git checkout <远程分支名>命令切换到远程分支进行开发。
解决冲突：在团队协作开发中，可能会出现代码冲突的情况。当多人修改同一文件的同一行代码时，Git无法自动解决冲突，需要手动合并代码。在解决冲突后，再次提交和推送代码。

四：搭建项目框架；

（1）：RESTful API项目开发流程：

需求分析和设计：明确API的功能和需求，定义API的资源、路由和数据结构。这一阶段需要与项目团队以及相关利益相关者进行沟通和讨论，确保对API的需求有一个清晰的理解。
选择合适的技术栈：选择适合项目需求的开发框架和工具，例如Node.js、Express.js、Django等。考虑到性能、安全性、可扩展性等方面的因素。
数据库设计和建模：根据API的需求，设计和规划数据库结构，包括表、字段、关系等。选择适合项目的数据库类型和存储方案，如MySQL、MongoDB等。
项目初始化和配置：创建项目目录结构，配置开发环境，安装所需的依赖包和库。设置数据库连接、身份验证等相关配置。
编写API路由和控制器：根据设计的API路由，编写相应的路由处理程序，负责处理请求、验证参数、调用逻辑处理等。在控制器中实现业务逻辑，并返回响应结果。
编写单元测试：为API编写单元测试，覆盖各种场景和边界情况。检查API的功能和性能，确保代码的质量和可靠性。
身份验证和授权：根据需求，实现用户身份验证和授权机制，保护API的安全性。常见的方式包括使用JSON Web Token（JWT）、OAuth等。
异常处理和错误处理：处理API请求中的异常和错误情况，返回合适的错误码和错误信息。确保API的健壮性和用户友好性。
文档编写和API测试：编写详细的API文档，描述API的使用方法、参数、请求和响应格式等。进行API的测试，验证API的正确性和可用性。
部署和发布：将API部署到生产环境中，配置服务器环境和域名。确保API的稳定性和高可用性。
监控和优化：监控API的运行状态和性能指标，及时发现和解决潜在问题。根据需求进行API的性能优化和调整，提升API的响应速度和吞吐量。

（2）：创建项目；

①使用Spring Initializer创建项目，建议使用IDE创建
//若官网start.sprint.io无法链接，可切换到阿里云镜像start.aliyun.com，但spring boot的版本可能存在差异
//可在官网页面创建，并无本质区别，IDE可检测jdk
②构建工具：Maven
//对于构建Java程序，Maven出现时间早，支持范围更广，使用xml编码更易阅读；Gradle支持增量构建，性能更强，使用groovy或kotlin语言，对于初学者有一定的要求
③JDK版本，根据个人安装的情况选择，本项目使用jdk1.8，Java语言版本8
//高级的语言版本具有更多的语言特性，尤其是集合API上，更方便易用，但新版本对于反射增加了限制，本项目的自定义授权机制因为要使用反射，因此选择8具备更高的灵活性
④打包方式Jar（官方推荐）
//spring boot内置了web容器，jar包直接运行；若已存在外部web容器可使用war打包
⑤spring boot版本（2.7.6），在官网当时提供的版本中选择，尽量选择发行版本
⑥选择依赖

（3）：相关配置文件；

src/main/resources/application.properties 或 application.yml：这是 Spring Boot 应用程序的主要配置文件。你可以在这里配置应用程序的各种属性，包括服务器端口、数据库连接、日志级别、国际化设置等。你既可以使用经典的 .properties 格式，也可以使用更加灵活的 .yml 格式进行配置。
src/main/resources/bootstrap.properties 或 bootstrap.yml：类似于 application.properties，bootstrap.properties 文件用于在应用程序启动时加载的外部配置信息，通常用于 Spring Cloud 应用程序的配置中心相关配置。
src/main/resources/application-{profile}.properties 或 application-{profile}.yml：针对不同的环境（如开发、测试、生产等）可以创建不同的配置文件，使用特定的 profile 来加载相应的配置。例如，application-dev.properties 用于开发环境的配置。
logback-spring.xml 或 log4j2-spring.xml：用于配置应用程序的日志记录框架，可以指定日志格式、输出目标、日志级别等。Spring Boot 支持 Logback 和 Log4j2 两种常用的日志记录框架。
application-.properties 或 application-.yml：除了常见的 application.properties 或 application.yml 外，Spring Boot 还支持根据不同的 Spring Profile 来创建不同的配置文件，例如 application-test.properties 用于测试环境的配置。

以下是一些配置文件的相关代码：

application.properties:

# 服务器端口配置
server.port=8080

# 数据库连接配置
spring.datasource.url=jdbc:mysql://localhost:3306/mydatabase
spring.datasource.username=root
spring.datasource.password=123456
spring.datasource.driver-class-name=com.mysql.jdbc.Driver

# 日志级别配置
logging.level.root=INFO

application.yml:

# 服务器端口配置
server:
  port: 8080

# 数据库连接配置
spring:
  datasource:
    url: jdbc:mysql://localhost:3306/mydatabase
    username: root
    password: 123456
    driver-class-name: com.mysql.jdbc.Driver

# 日志级别配置
logging:
  level:
    root: INFO

五：关于异常信息的处理；

处理Spring Boot项目异常报错的方法有很多种，具体的处理方式取决于异常的类型和出现的场景。一般来说，可以采取以下几种常见的处理方式：

日志记录：在Spring Boot项目中，可以使用日志框架（如Logback、Log4j2等）记录异常信息。通过合适的日志级别和详细的异常描述，有助于排查和定位异常产生的原因。
异常处理器：Spring Boot提供了@ControllerAdvice和@ExceptionHandler注解，可以用于全局异常处理。通过定义异常处理器，可以捕获并处理项目中抛出的各种异常，返回合适的错误信息给客户端或者记录到日志中。
自定义异常：针对业务逻辑中的特定异常情况，可以自定义异常类，并结合异常处理器进行统一处理。这样可以提高代码的可读性和可维护性。
异常页面展示：对于用户界面交互的异常，可以配置自定义的错误页面，将异常信息友好地展示给用户，提高用户体验。
单元测试：编写单元测试用例，覆盖可能会引发异常的场景，以便在开发过程中及时发现并修复潜在的问题。
监控和告警：结合监控系统，及时发现和响应生产环境中的异常情况，可以采取相应的补救措施，确保系统的稳定性和可靠性。

总之，Spring Boot项目异常报错的处理需要综合考虑项目的实际情况和需求，灵活运用日志记录、异常处理器、自定义异常等手段，以及结合测试和监控等措施，全面提升项目的异常处理能力和稳定性。

以下是具体的示例：

import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.ControllerAdvice;
import org.springframework.web.bind.annotation.ExceptionHandler;

@ControllerAdvice
public class GlobalExceptionHandler {

    @ExceptionHandler(Exception.class)
    public ResponseEntity<String> handleException(Exception ex) {
        // 记录异常信息到日志中
        // logger.error("发生异常：", ex);

        // 返回友好的错误信息给客户端
        return new ResponseEntity<>("发生异常：" + ex.getMessage(), HttpStatus.INTERNAL_SERVER_ERROR);
    }

    @ExceptionHandler(ResourceNotFoundException.class)
    public ResponseEntity<String> handleResourceNotFoundException(ResourceNotFoundException ex) {
        // 记录异常信息到日志中
        // logger.error("资源未找到异常：", ex);

        // 返回自定义的错误信息给客户端
        return new ResponseEntity<>("资源未找到：" + ex.getMessage(), HttpStatus.NOT_FOUND);
    }
}

在上面的代码中，我们创建了一个GlobalExceptionHandler类，并使用@ControllerAdvice注解标记为全局异常处理器。然后，我们定义了两个异常处理方法，分别处理Exception和ResourceNotFoundException类型的异常。在这些方法中，我们可以记录异常信息到日志中，并返回适当的HTTP响应给客户端。

需要注意的是，ResourceNotFoundException是一个自定义的异常类，你需要根据项目需求自行定义。在实际项目中，你可能会根据具体的业务需求和异常类型来编写更复杂的异常处理逻辑，以确保对异常情况的全面覆盖和合理处理。

希望这个简单的示例能够帮助你更好地理解Spring Boot项目中异常处理的实现方式。

六：关于web项目需要注意的点；

安全性：Web应用程序是一个公共网络应用程序，涉及到用户隐私和重要数据，必须保证安全。开发者需要采取一系列措施，如加密传输、输入验证、身份认证、防止SQL注入攻击等，确保应用程序的安全性。
响应式设计：现代化的Web应用程序必须能够在不同设备上正常运行并提供良好的用户体验。因此，响应式设计至关重要。开发者需要使用响应式技术来实现自适应布局，以确保应用程序可以适应各种设备屏幕尺寸。
性能优化：Web应用程序的性能对用户体验至关重要。开发者需要使用缓存技术来减少服务器响应时间、使用压缩技术来减少页面大小等，从而提高应用程序的响应速度和性能。
可扩展性：Web应用程序可能会面临大量的访问流量，因此需要保证其可扩展性。开发者应该使用分布式架构、负载均衡等技术来实现系统的伸缩性。
测试与调试：测试和调试是保证Web应用程序质量的必要步骤。开发者需要编写单元测试、集成测试和端到端测试，并使用调试工具来进行错误排查。
文档和版本控制：文档和版本控制是Web项目开发的重要组成部分。开发者应该编写清晰且易于理解的文档，包括架构设计文档、API文档等，并使用版本控制工具来管理代码。
用户体验：Web应用程序的用户界面设计对用户体验至关重要。开发者需要设计直观、易用、美观的界面，并提供良好的交互效果，以提高用户满意度。