【前端学java】SpringBootWeb极速入门-实现一个简单的web页面01

简介: 【8月更文挑战第12天】SpringBootWeb极速入门-实现一个简单的web页面01

Spring简介

Spring是一个开源的Java开发框架,其官网是 https://spring.io/
GIF 2023-11-8 14-27-13.gif
Spring提供了一系列的模块和功能,包括Spring MVCSpring BootSpring DataSpring FrameWork等,这些模块和功能可以帮助开发者快速构建高质量的、可扩展的应用程序。

在Spring的这些模块中,Spring FrameWork是所有spring的核心底层框架,所有模块几乎都依赖于此。

Spring Boot依赖于Spring FrameWork,其可以帮助我们非常快速的构建应用程序、简化开发、提高效率。
在Spring的官网中,构建一个java应用程序,官方首先推荐的就是使用Spring Boot
GIF 2023-11-8 14-27-13.gif

Spring Boot快速入门

需求案例

我们实现一个如下需求:
使用 SpringBoot 开发一个web应用,浏览器发起请求/hello后,给浏览器返回字符“Hello World~"

创建项目

打开编译器,点击File->New->Project->Spring Initializr,然后进行项目的一些基本配置:
Language选择java,Type选择Maven,Group组织名一般是项目的域名反写,Artifact模块名就起Spring_Boot_Web吧,java版本我们选择和JDK对应的版本,如稳定的8版本,填写完毕我们点击Next
GIF 2023-11-8 15-50-40.gif
接下来,我们需要选择Spring Web开发相关的依赖,Spring Boot版本我们选择2.7.17,防止版本太高出现一些问题。
GIF 2023-11-8 15-52-28.gif
最后点击CREATE等待项目联网创建(大约2min)

项目结构简析

项目的依赖下载完毕后,其项目结构如图image.png
我们先删除.mvn、.gitignore、HELP.md、mvnm及mvnm.cmd这些没有用的文件,让项目结构清爽一些。
GIF 2023-11-8 15-08-37.gif

启动类

spring项目中的main文件夹内的SpringBootWebApplication是启动类,用于启动springg工程。image.png

resources文件夹

resources文件夹用于存放项目的静态资源文件,例如HTML、CSS、JavaScript、图片等。默认情况下,Spring Boot会自动加载该文件夹下的静态资源文件。

pom文件

pom.xml文件是一个重要的配置文件,用于管理项目的依赖项和构建配置。它基于Maven构建工具,可以帮助我们自动化构建和管理项目。

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
    <!--    <modelVersion>:指定了POM的版本,这里为4.0.0-->
    <modelVersion>4.0.0</modelVersion>
    <!--    <parent>:定义了该项目的父项目。这里,父项目的groupId是org.springframework.boot,artifactId是spring-boot-starter-parent,version是2.7.17-->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.7.17</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <!--    定义了项目的信息-->
    <groupId>com.shixiaoshi</groupId>
    <artifactId>Spring_Boot_Web</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>Spring_Boot_Web</name>
    <description>Spring_Boot_Web</description>
    <!--    项目的Java版本为Java 8-->
    <properties>
        <java.version>1.8</java.version>
    </properties>
    <!--    定义了项目的依赖项-->
    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
    </dependencies>
    <!--    定义了项目的构建配置。在这里,项目使用了一个名为spring-boot-maven-plugin的插件。-->
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
                <version>2.3.0.RELEASE</version>
            </plugin>
        </plugins>
    </build>

</project>

异常处理:
如果spring-boot-maven-plugin飘红
image.png
添加如下代码刷新pom即可

<plugins>
  <plugin>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-maven-plugin</artifactId>
  + <version>2.3.0.RELEASE</version>
  </plugin>
</plugins>

使用代码实现需求

我们在启动类的平级目录下创建一个Hello类,键入如下代码

package com.shixiaoshi.spring_boot_web;

//这两行代码导入了Spring框架的注解,用于映射HTTP请求和定义REST控制器。
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

//这是一个注解,用于标识类作为REST控制器。在Spring Boot中,REST控制器类用于处理HTTP请求并返回HTTP响应。
@RestController
public class Hello {
   
   
    // 这是一个注解,用于映射HTTP请求到特定的方法。在这种情况下,它将映射到路径/hello的HTTP请求。
    @RequestMapping("/hello")
    // 路径/hello的HTTP请求到达时,这个方法将被调用。
    public String hello(){
   
   
        return "Hello World~";
    }
}

上述定义了一个Spring Boot Web应用程序,该应用程序有一个REST控制器类(Hello),当接收到路径为/hello的HTTP GET请求时,将返回"Hello World~"的字符串作为响应。

然后运行启动类SpringBootWebApplication
GIF 2023-11-8 16-18-37.gif
控制台出现打印的日志时,我们打开浏览器访问http://localhost:8080/hello
image.png
可见,我们的第一个Spring Web项目已经成功运行!

至此,我们就成功的使用Spring Boot创建了一个Spring Web的项目!

相关文章
|
10天前
|
安全 Java API
Java Web 在线商城项目最新技术实操指南帮助开发者高效完成商城项目开发
本项目基于Spring Boot 3.2与Vue 3构建现代化在线商城,涵盖技术选型、核心功能实现、安全控制与容器化部署,助开发者掌握最新Java Web全栈开发实践。
125 1
|
9天前
|
存储 前端开发 Java
【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
本文介绍基于Java Web的在线商城技术方案与实现,涵盖三层架构设计、MySQL数据库建模及核心功能开发。通过Spring MVC + MyBatis + Thymeleaf实现商品展示、购物车等模块,提供完整代码示例,助力掌握Java Web项目实战技能。(238字)
96 0
|
1月前
|
JavaScript Java 微服务
现代化 Java Web 在线商城项目技术方案与实战开发流程及核心功能实现详解
本项目基于Spring Boot 3与Vue 3构建现代化在线商城系统,采用微服务架构,整合Spring Cloud、Redis、MySQL等技术,涵盖用户认证、商品管理、购物车功能,并支持Docker容器化部署与Kubernetes编排。提供完整CI/CD流程,助力高效开发与扩展。
312 63
|
1月前
|
前端开发 Java 数据库
Java 项目实战从入门到精通 :Java Web 在线商城项目开发指南
本文介绍了一个基于Java Web的在线商城项目,涵盖技术方案与应用实例。项目采用Spring、Spring MVC和MyBatis框架,结合MySQL数据库,实现商品展示、购物车、用户注册登录等核心功能。通过Spring Boot快速搭建项目结构,使用JPA进行数据持久化,并通过Thymeleaf模板展示页面。项目结构清晰,适合Java Web初学者学习与拓展。
176 1
|
2月前
|
缓存 NoSQL Java
Java Web 从入门到精通之苍穹外卖项目实战技巧
本项目为JavaWeb综合实战案例——苍穹外卖系统,涵盖Spring Boot 3、Spring Cloud Alibaba、Vue 3等主流技术栈,涉及用户认证、订单处理、Redis缓存、分布式事务、系统监控及Docker部署等核心功能,助你掌握企业级项目开发全流程。
300 0
|
2月前
|
安全 JavaScript Java
java Web 项目完整案例实操指南包含从搭建到部署的详细步骤及热门长尾关键词解析的实操指南
本项目为一个完整的JavaWeb应用案例,采用Spring Boot 3、Vue 3、MySQL、Redis等最新技术栈,涵盖前后端分离架构设计、RESTful API开发、JWT安全认证、Docker容器化部署等内容,适合掌握企业级Web项目全流程开发与部署。
146 0
|
5月前
|
前端开发 Java 物联网
智慧班牌源码,采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署
智慧班牌系统是一款基于信息化与物联网技术的校园管理工具,集成电子屏显示、人脸识别及数据交互功能,实现班级信息展示、智能考勤与家校互通。系统采用Java + Spring Boot后端框架,搭配Vue2前端技术,支持SaaS云部署与私有化定制。核心功能涵盖信息发布、考勤管理、教务处理及数据分析,助力校园文化建设与教学优化。其综合性和可扩展性有效打破数据孤岛,提升交互体验并降低管理成本,适用于日常教学、考试管理和应急场景,为智慧校园建设提供全面解决方案。
386 70
|
3月前
|
IDE 前端开发 开发工具
用通义灵码IDE做产品高保真原型和前端页面
通义灵码IDE助力高效开发,告别传统Axure原型图的繁琐沟通。通过该工具可直接生成高保真产品原型与前端页面,大幅提升客户确认效率及满意度。现已将相关演示发布至B站(https://www.bilibili.com/video/BV18qT7ziEb7/?vd_source=dc6a6864c895818db6ce4170d50b3557),欢迎体验!用直观操作代替反复说明,让交付更流畅。
|
11月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
866 14
|
11月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
219 0