JavaWeb 大致入门

akira 发布于 1 分钟前 0 次阅读 3940 字 预计阅读时间: 18 分钟 最后更新于 1 分钟前

前言

【全网首发AI+JavaWeb开发入门，Tlias教学管理系统项目实战全套视频教程，从需求分析、设计、前后端开发、测试、程序优化到项目部署一套搞定】 https://www.bilibili.com/video/BV1yGydYEE3H/?p=23&share_source=copy_web&vd_source=dfe79a2296fc694b4f7a30c0e180690b

VS Code

推荐插件：

Java Extension Pack (Java 扩展包)

Spring Boot Extension Pack

JS

JS 引入方式

一、内部脚本

使用 <script></script> 标签包裹。

一般置于 body 元素底部，以提升加载速度。

二、外部脚本

使用 <script src="src"></script> 引用外部 JS 文件。标签不可自闭合。

JS 对象

JSON

  • JSON 英文全称 JavaScript Object Notation
  • JSON 是一种轻量级的数据交换格式。
  • JSON是独立的语言
  • JSON 易于理解。

以下 JSON 语法定义了 sites 对象: 3 条网站信息（对象）的数组：

{"sites":[
    {"name":"Runoob", "url":"www.runoob.com"}, 
    {"name":"Google", "url":"www.google.com"},
    {"name":"Taobao", "url":"www.taobao.com"}
]}

BOM

浏览器对话模型。

例如 windows、location。

DOM

文档对话模型。

通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

核心语法

① 变量&常量

let 声明变量；const 声明常量。

② 数据类型

基本数据类型：

  • number：数字(整数、小数、NaN(Not aNumber)）
  • boolean:布尔。true，false
  • null：对象为空。JavaScript是大小写敏感的，因此null、Null、NULL是完全不同的
  • undefined：当声明的变量未初始化时，该变量的默认值是undefined
  • string：字符串，单引号、双引号、反引号皆可，推荐使用单引号

使用 typeof 可以获取数据类型。

③ 函数

JS 是弱类型语言，形参、返回值都不需要指定类型。在调用函数时，实参个数与形参个数可以不一致，但是建议一致。

④自定义对象

对象名、属性、属性值：

var person = {
    firstName:"John",
    lastName:"Doe",
    age:50,
    eyeColor:"blue"
};

事件监听

JavaScript 可以在事件触发时，就立即调用一个函数做出响应，也称为事件绑定或注册事件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="button" id="btn" value="按钮">
    <script>
        document.querySelector('#btn').addEventListener('click', ()=> {
            console.log("按钮被点击了");
        });
    </script>
</body>
</html>

这里使用 addEventListener 进行事件监听。

JS 模块化

在 JS 文件中引入另一个 JS 文件可以使用 import 导包：

import ( printlog ) from "./util.js"; //从 util.js 中引入 printlog 函数

对于被引用的函数，需要加上 export 关键字：

export function PrintLog(msg){
    console.log(msg)
}

我们还需要声明其为模块化 JS，否则浏览器会报错。

<script src="demo.js" type="module"></script>

Vue

快速入门

当前十分流行的前端框架。

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

它可以帮你把数据（JS）和页面（HTML）自动绑定起来。数据变了，页面自己就变，不用手动操作 DOM。

官网地址：https://cn.vuejs.org/

Vue 示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Hello Vue</title>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="reverseMsg">反转文字</button>
  </div>

  <!-- 引入 Vue 3 -->
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    const { createApp } = Vue

    createApp({
      data() {
        return {
          message: '你好，Vue！'
        }
      },
      methods: {
        reverseMsg() {
          this.message = this.message.split('').reverse().join('')
        }
      }
    }).mount('#app')
  </script>
</body>
</html>

其中 {{ message }} 便是插值表达式，用来将数据渲染到页面中。

使用 ES 模块构建版本导入 Vue

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

<script type="module">
  import { createApp, ref } from 'https://unpkg.com/vue@3/dist/vue.esm-browser.js'

  createApp({
    setup() {
      const message = ref('Hello Vue!')
      return {
        message
      }
    }
  }).mount('#app')
</script>

这里有一个 id 为 app 的区域，.mount 表示 Vue 接管这部分区域。

我们创建了 createApp 对象，编写了 setup 方法，同时方法体内部返回值——返回 message。

最后，页面上渲染的就是字符串 Hello Vue!。

Ajax

Asynchronous JavaScript and XML。异步的 Javascirpt 与 XML。

XML：（英语：Extensible Markup Language）可扩展标记语言，本质是一种数据格式，可以用来存储复杂的数据结构。

Axios 针对 Ajax 进行了封装，简化了书写，方便开发。

Maven

Apache 旗下一款开源项目，用于管理与构建 Java 代码。

Download Apache Maven – Maven 下载。

也可以在 VS Code 中 ctrl + shift + p 快速创建一个 Spring Maven 项目。

Web 入门

Spring Web 快速入门

VS Code 创建一个 Spring Boot 项目，启动，访问 localhost:8080 即有页面返回。

这里快速入门一下：

创建 \src\main\java\com\example\demo\HelloController.java

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController // 标识该类是一个请求处理类
public class HelloController {
    @RequestMapping("/hello") // 处理 /hello 路径的请求
    public String hello(){
        System.out.println("Hello, Spring Boot !");
        return "Hello, Spring Boot !";
    }
}

启动主类。或者如果你也使用 VS Code，可以在左侧找到 Spring Boot Dashboard，然后启动你的项目。

访问 localhost:8080/hello，浏览器应当返回“Hello, Spring Boot !”。

HTTP 协议

概述

HTTP（Hypertext Transfer Protocol）是Web上客户端与服务器之间进行数据交换的基础应用层协议。

每个请求都是独立的，服务器默认不保留之前请求的上下文，这让协议简单、易扩展，但也需要 Cookie、Session 等机制来维持会话。

报文结构

HTTP 报文分为请求报文和响应报文，结构类似：

请求报文：

GET /index.html HTTP/1.1          ← 请求行（方法 路径 版本）
Host: www.example.com              ← 请求头（键值对）
User-Agent: Mozilla/5.0
Accept: text/html
                                   ← 空行（标志头部结束）
（可选的消息体，如 POST 的数据）

响应报文：

HTTP/1.1 200 OK                    ← 状态行（版本 状态码 原因短语）
Content-Type: text/html            ← 响应头
Content-Length: 1234
Set-Cookie: session=abc123
                                   ← 空行
<html> ... </html>                ← 消息体

请求方法（常见的 HTTP 动词）

  • GET：获取资源，幂等、无副作用。
  • POST：提交数据，创建资源，通常有消息体。
  • PUT：整体更新指定资源，幂等。
  • PATCH：部分更新资源。
  • DELETE：删除资源。
  • HEAD：只获取响应头，不返回主体。
  • OPTIONS：查询服务器支持的请求方法（常用于 CORS 预检）。
  • CONNECT：建立隧道（常用于 HTTPS 代理）。
  • TRACE：回显请求，用于诊断。

重要头部字段（Headers）

  • 通用/请求头：Host（必需，指明域名）、User-Agent、Accept、Authorization、Cookie
  • 响应头：Set-Cookie、Location（用于重定向）、Server
  • 内容相关：Content-Type（如 application/json）、Content-Length、Content-Encoding（gzip 等）
  • 缓存控制：Cache-Control、ETag、Last-Modified、Expires
  • CORS：Access-Control-Allow-Origin 等

HTTPS

HTTPS = HTTP over TLS/SSL，在 TCP 层之上增加加密、身份验证和完整性保护。它使用数字证书确保服务器身份，并加密通信数据，是当今 Web 安全的基础。HTTP/2 和 HTTP/3 基本都依赖加密（HTTP/2 在浏览器中强制使用 HTTPS）。

Tomcat

简介

Tomcat 是一个开源的 Servlet 容器 和轻量级 Web 服务器，由 Apache 软件基金会维护。通俗地说，它的核心工作就是接收 HTTP 请求，分发给 Java 程序处理，再把 HTTP 响应返回给客户端。

简单使用

直接在官网 Apache Tomcat® - Welcome 下载压缩包。

Windows 平台，解压后，在 /bin 目录中，使用 startup.bat 启动，shutdown.bat 关闭。

我这里运行时命令行窗口闪了一下便关闭了，可以 cd 到 tomcat 所在目录，执行 catalina.bat run 捕捉报错信息：

C:\Users\zhang\Desktop\apache-tomcat-10.1.55\bin>catalina.bat run
Using CATALINA_BASE:   "C:\Users\zhang\Desktop\apache-tomcat-10.1.55"
Using CATALINA_HOME:   "C:\Users\zhang\Desktop\apache-tomcat-10.1.55"
Using CATALINA_TMPDIR: "C:\Users\zhang\Desktop\apache-tomcat-10.1.55\temp"
Using JRE_HOME:        "C:\Program Files (x86)\Java\jdk1.8.0_481"
Using CLASSPATH:       "C:\Users\zhang\Desktop\apache-tomcat-10.1.55\bin\bootstrap.jar;C:\Users\zhang\Desktop\apache-tomcat-10.1.55\bin\tomcat-juli.jar"
Using CATALINA_OPTS:   ""
Unrecognized option: --add-opens=java.base/java.lang=ALL-UNNAMED
Error: Could not create the Java Virtual Machine.
Error: A fatal exception has occurred. Program will exit.

--add-opens 是 Java9 及以后的参数，所以无法启动 JVM 虚拟机。我们安装 Java 17，然后把 JAVA_HOME 系统变量更改为 Java 17 的安装位置。

访问 http://localhost:8080 可以看见 tomcat 的欢迎界面。

这里我又遇到了乱码问题，中文字符无法正常显示。解决起来也很简单，打开 Tomcat 的 conf/logging.properties，找到 java.util.logging.ConsoleHandler.encoding = UTF-8 的配置，改成 GBK 即可让控制台输出正常中文。改完需重启，就可以看到一切正常了。

将站点程序放置在 webapps/ 下即可部署。

请求响应

概述

Web 服务器中含有一个 Dispatcherservlet 类，它会将请求转发给对应的 Controller，称为核心控制器或前端控制器。

Dispatcherservlet 接收到请求后会将其封装为一个 Httpservletrequest 对象，也叫请求对象。响应数据被封装为 Httpservletresponse。

请求

简单参数

我们创建一个 Spring Boot 项目。

package com.example.demo;

import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import jakarta.servlet.http.HttpServletRequest;

@RestController
public class RequestController {
    @RequestMapping("/simpleParam")
    public String simpleParam(HttpServletRequest request) {
        // 依靠 request 对象获取请求参数
        String name = request.getParameter("name");
        String ageStr = request.getParameter("age");
        // 将 String 类型的 int 转换为 int 类型
        int age = Integer.parseInt(ageStr);
        // 输出 & 返回
        System.out.println(name + " : " + age);
        return "OK";
    }
}

访问后，控制台打印 name：age，返回 "OK"。

同时可以使用更加简便的写法，无需写 HttpServletRequest request 来手动取参：

@RequestMapping("/simpleParam")
public String simpleParam(@RequestParam String name, @RequestParam int age) {
    System.out.println(name + " : " + age);
    return "OK";
}

这时 Spring 内部会通过另一组参数解析器，自动从 request 中提取 name 和 age 并转好类型，连 Integer.parseInt 都省了。

又或者：

    @RequestMapping("/simpleParam")
    public String simpleParam(String name, int age) {
        System.out.println(name + " : " + age);
        return "OK";
    }

Spring MVC 做了参数的自动绑定和类型转换。我们不需要手动从 request 里取参数，只要方法参数的名字和 HTTP 参数名一致，Spring 就会自动把值注入进来，并尽可能转成我们需要的类型。所以，如果形参与请求参数名不一致，我们仍然需要使用 @RequestParam 映射参数。

启动后浏览器访问 localhost:8080/simpleParam?name=zhangsan&age=18 即可看见 OK 字样。如果参数不正确或不完整，显示 Whitelabel Error Page 页面。

实体参数

我们新建一个 Pojo 目录，书写一个标准的 JavaBean 类，拥有 age 与 name 两个属性。

然后：

    @RequestMapping("/simplePojo")
    public String simplePojo(User user) {
        System.out.println(user);
        return "OK";
    }

即可将参数传入 user 对象。

数组集合参数
    @RequestMapping("/arrayParam")
    public String arrayParam(String[] hobby) {
        System.out.println(Arrays.toString(hobby));
        return "OK";
    }
日期参数
    @RequestMapping("/dateParam")
    public String dateParam(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss")LocalDateTime updateTime) {
        System.out.println(updateTime);
        return "OK";
    }

访问 localhost:8080/dateParam?updateTime=2010-04-30 11:45:14，控制台打印 2010-04-30T11:45:14。

路径参数

例如 /path/1 与 /path/2。

    @RequestMapping("path/{id}")
    public String pathParam(@PathVariable Integer id) {
        System.out.println(id);
        return "OK";
    }

响应

可以构建一个 Result 类，return 时创建其对象并返回。方便管理与维护。

分层解耦

三层架构

数据访问层 DAO（Data Access Object | 持久层）、逻辑处理层 Service、接收/响应层 Controller。遵循单一职责原则。

分层解耦

高内聚、低耦合。

控制反转与依赖转入

控制反转（Inversion Of Control），将对象的创建控制权从自身转移到外部（容器）。该容器叫作 IOC 容器。

依赖注入（Dendency Injection），容器为应用提供运行时，所依赖的资源，称为依赖注入。

Bean 对象是 IOC 容器中创建并管理的对象。

IOC & DI - 入门

使用 @Component 注解将一个类交给 IOC 管理。

使用 @Autowired 注解找到该类型的 Bean 并完成依赖注入。

  • reward_image1
此作者没有提供个人介绍。
最后更新于 2026-06-08