首页 > 编程语言 >JavaWeb第一天

JavaWeb第一天

时间：2024-07-25 15:41:11浏览次数：11  
标签：依赖 JavaWeb name 第一天 参数 注解 id 请求

目录

HTML+CSS+JS学习

image-20240418143929492

选择器优先级：id > 类 > 标签

image-20240418144956909

image-20240418145751922

image-20240419055453086

image-20240419060053879

JS

image-20240419091706588

image-20240419092119953

js中定义变量有三种方式：

  1. var：相当于定义一个全局变量，可重复声明，反复赋值
  2. let：相当于定义一个局部变量，不可重复声明
  3. const：相当于常量，值不可修改
  • js中的数组
  1. js中的数组定义有两种方式

var a = new Array(1,2,3,..)

var a = [1, 2, 3, ..]

  1. js中数组是可变长，并且类型可变的
  2. 数组访问方法
image-20240419102150322

字符串对象String

image-20240419102259156

  • DOM文档对象

image-20240419120014672

  • 事件绑定和监听

image-20240419154628970

image-20240419154729552

VUE框架学习

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{message}} - {{age}} <!-- 视图层 -->
		</div>
		<script>
			const app = new Vue({	//创建一个Vue对象
				el:"#app",  //#id
				data:{	//数据模型层
					message:"Lani",
					age:10
				}			
			});
		</script>
	</body>
</html>

image-20240419174357938

image-20240420102157935

image-20240420105124764

Ajax--异步JavaScript和XML

作用

  • 数据交换：通过Ajax给服务器发送请求并获取服务器响应的数据
  • 异步交互：不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术

1, 原生Ajax

2, 封装后的Axios

Axios入门

  1. 引入Axios的js文件
  2. 使用Axios发送请求，并获取响应结果

Vue项目结构

image-20240420151938932

vue的特点：

  1. 热部署：当后台代码或数据模型变化后，页面会自动更新
  • 在Vue中使用Element UI组件

1, 首先npm安装Element至本项目中

2, 在main.js入口文件中导入相关文件

4, 新增xxx.vue文件，按照'template' 'script' 'style'的格式编写该组件代码

5, 在App.vue中导入xxx.vue文件并将其显示

Maven

Maven的作用----管理和构建Java项目的工具

  • 依赖管理：方便快捷的管理项目依赖的资源jar包，避免版本冲突问题
  • 统一项目结构：提供标准、统一的项目结构
  • 项目构建：标准化的项目构建流程

image-20240421133216459

  • Maven的配置

https://cloud.tencent.com/developer/article/2389319

IDEA配置Maven

image-20240421140948786

image-20240421142018874

Maven坐标

Maven坐标是资源的唯一标识，通过坐标来唯一定位资源的位置

使用坐标来定义项目或引入项目所需的依赖

image-20240421144442313

依赖管理

引入依赖：

  1. 在pom.xml中编写<dependencies>标签
  2. 在<dependencies>中编写<dependency>标签，创建一个依赖配置
  3. 定义坐标的groupId, artifactId, version
  4. 点击刷新依赖，引入所需的依赖

传递依赖&排除依赖

在Maven中，如果一个项目直接依赖于另一个项目，那么这个项目也会间接依赖于另一个项目的依赖，这种机制叫做传递依赖

  • 排除依赖：可以通过<exclusions>标签主动排除指定坐标的依赖，不用指明版本

依赖范围

默认下依赖的jar包可以在任何地方使用，但可以通过<scope>标签设置其作用范围

image-20240421194758144

生命周期

Maven的生命周期主要有三套：1、clean 2、default 3、site

主要的生命周期：

image-20240421200144387

在生命周期中，执行同一种生命周期中某一周期，默认都会执行前面的生命周期，可以禁止。

主要有两种执行生命周期的方式：

  1. 在cmd中打开项目，执行mvn clean等命令
  2. 在IDEA中直接点击对应生命周期的脚本，执行对应的插件

Web入门

springboot快速入门

  1. 创建springboot工程，填写模块信息，勾选Web相关依赖
  2. 新增请求处理类和方法，打上请求处理注解@RestController和请求匹配@RequestMapping("/hello")注解
  3. 运行SpringApplication.run方法，在浏览器访问localhost:8080/hello

注意：如果不在springboot项目启动的类上加入@SpringBootApplication注解，将会报以下错误：

Check your application's dependencies for a supported servlet web server. Check the configured web application type.

HTTP协议

HTTP请求数据格式

主要分为三个部分：

  1. 请求行：请求数据第一行（请求方式、资源路径、协议）
  2. 请求头：第二行开始（格式：key-value键值对）
  3. 请求体：一般是POST请求，存放请求参数

请求方式：

  1. GET：请求参数直接放在请求行，没有请求体，有长度限制
  2. POST：请求参数放在请求体

HTTP响应数据格式

  1. 响应行：响应数据的第一行（协议、状态码、描述）
  2. 响应头：第二行开始（格式：key-value键值对）
  3. 响应体：存放响应的数据

响应状态码：

image-20240421221240536

Tomcat

Tomcat是一个开源免费的轻量级Web服务器，支持少量JavaEE规范

将要部署的应用程序放在webapps/目录下，即可在浏览器中进行访问，springboot的Web依赖中已经内嵌了Tomcat

请求响应

DispatcherServrlet——前端控制器

image-20240422101645411

1、请求

  • postman

一款功能强大的网页调试与发送网页HTTP请求的插件，常用于进行接口测试

image-20240422103245668

请求参数设置

  1. 原始方式（了解）

  • Controller方法形参中声明HttpServletRequest对象

  • 通过getParameter方法获取对应参数

  1. springboot简单参数方式

  • 请求参数名与请求方法形参名一致，不一致会获取到null值

  • 当两者不一致时，可通过@RequestParam(name = "请求参数名")注解来完成映射，该注解有个required参数，表示该请求参数是否必须传递，false可表明为非必须传递参数

@RequestMapping("/simpleParam")
public String simpleParam(@RequestParam(name = "name", required = false) String uname, Integer age){
    System.out.println(uname+":"+age);
    return "OK~";
}
  1. 实体参数

当请求传递的参数较多时，可以使用一个实体对象作为请求函数的形参，然后将请求传递的参数一一对应的添加到实体对象的属性中，添加get/set方法

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

当实体对象A中又包含一个实体对象B时，浏览器请求传递的参数可写为B.param1&B.param2&...，springboot会自动接收这些参数

  1. 数组集合参数

当传递的参数为同一名字多个值的列表时，形参声明如下：

  • 数组：请求参数名与形参变量名一致
  • 列表：请求参数名与形参变量名一致，并且需加上@RequestParam注解
    @RequestMapping("/listParam")
    public String listParam(@RequestParam List<String> hobby){
        System.out.println(hobby);
        return "OK~";
    }
  1. 日期参数

请求参数名与形参变量名一致，并加入@DateTimeFormat注解格式化接收请求参数

    @RequestMapping("/dateParam")
    public String dateParam(@DateTimeFormat(pattern = "yyyy-MM-dd HH:mm:ss") LocalDateTime updateTime){
        System.out.println(updateTime);
        return "OK~";
    }
  1. JSON参数

  • 前端使用post请求方式

  • 后端使用一个POJO的类型对象即可接收JSON格式参数，JSON数据key名与形参对象的属性名相同，定义POJO对象类型形参即可接收参数，形参需使用@RequestBody注解标识

    @RequestMapping("/jsonParam")
    public String jsonParam(@RequestBody User user){
        System.out.println(user);
        return "OK~";
    }
  1. 路径参数

路径参数http://localhost:8080/path/1/herry中的部分子串也可以接收，主要涉及两处修改：

  • @RequestMapping("/path/{id}/{name}")注解：{}括住的参数为可变参数，形参变量名要与其一致
  • @PathVariable注解：在形参列表中，每个参数都要加上这个注解，表示接收一个路径变量
    @RequestMapping("/path/{id}/{name}")
    public String pathParam(@PathVariable Integer id, @PathVariable String name){
        System.out.println(id + ":" + name);
        return "OK~";
    }

2、响应

  • 响应通常用到@ResbonseBody注解，可添加与类或方法上

  • 可直接返回结果，如果返回的类型是对象/集合，则自动转换为JSON格式返回

  • @RestController注解中默认包含了该注解

  • 统一响应结果Result对象

3、案例

Springboot项目的静态资源(html, css, js等前段资源)默认存放路径为:

classpath:/static、classpath:/public、classpath:/resources. src下的resources就是一个classpath

4、分层解耦

三层架构

image-20240422175706873

分层解耦

image-20240422190210744

控制反转：Inversion Of Control，简称IOC。对象的创建控制权由程序自身转移到外部（容器），这种思想叫做控制反转

依赖注入：Dependency Injection，简称DI。容器为程序提供运行时，所依赖的资源，称为依赖注入

Bean对象：IOC容器中创建、管理的对象

步骤：

  1. Service层及Dao层的实现类，交给IOC容器管理
  2. 为Controller及Service注入运行时，依赖的对象
将对象的创建交给容器，使用@Component注解来标识一个类，代表将此类的对象创建交由容器来管理——"控制反转"
在对象声明的地方加上@Autowired注解，表明在此对象由容器动态创建，不需要自己new——"依赖注入"

在Springboot中还衍生了具体的控制反转注解，推荐使用衍生注解

image-20240422212334304

  • 声明bean时，可以通过注解的value属性指定bean的名字，默认为类名首字母小写

  • 在springboot集成web开发中，声明控制器bean只能用@Controller

  • 声明了bean后并未立刻生效，需要配置@ComponentScan扫描注解扫描后才生效，而@SpringBootApplication默认包含该注解，默认扫描当前包及子包

image-20240422220613650

MySQL

image-20240422224137431

MyBatis

image-20240425152241235

Mybatis快速入门

  1. 创建springboot工程，数据库表user和对应实体类User，其中User的属性要与表user字段相同
  2. 引入Mybatis依赖，springboot创建时勾选后会自动添加Mybatis的相关依赖。接着配置Mybatis数据库连接信息
//路径：resources/application.properties

#驱动类名称
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
#数据库连接的url
spring.datasource.url=jdbc:mysql://localhost:3306/mybatis
#连接数据库的用户名
spring.datasource.username=root
#连接数据库的密码
spring.datasource.password=1234
  1. 编写SQL语句，在mapper包中新增UserMapper接口，并添加@Mapper注解将该接口交给IOC容器管理。接着再添加对应接口方法，并在方法上添加@Select("sql语句")等注解，最后通过依赖注入通过对象调用对应方法执行相应SQL语句
@Mapper //在运行时会自动生成该接口的实现类对象（代理对象），并且将该对象交给IOC容器管理
public interface UserMapper {
    //查询全部用户信息
    @Select("select * from user")
    public List<User> list();
}

数据库连接池

就是一个容器，用于管理多个连接对象，用户在执行sql语句的时候，从连接池中获取一个连接对象，执行完后再释放该连接对象

image-20240425164153943

  • 切换数据库连接池：直接引入相应的数据库连接池坐标

lombok

lombok是一个实用的java类库，能通过注解的形式自动生成构造器，get/set方法，equals/hashcode方法，toString等方法，并可以自动生成日志变量，简化java开发，提高效率

注解 作用
@Getter/@Setter 为所有属性提供get/set方法
@ToString 给类自动生成易阅读的toString方法
@EqualsAndHashCode 根据类所拥有的非静态字段自动重写equaks和hashCode方法
@Data 提供更综合的代码生成功能(包含以上三个注解)
@NoArgsConstructor 为实体类生成无参的构造器方法
@AllArgsConstructor 生成除static修饰的字段之外带有各参数的构造器方法

CRUD

  1. 删除
//mybatis语法中，可使用'#{name}'占位符来标识函数的形参，从而动态的执行SQL语句
@Mapper
public interface EmpMapper {
    @Delete("delete from emp where id=#{id}")
    public void delete(Integer id);

}

image-20240425181714278

  1. 插入
    @Options(useGeneratedKeys = true, keyProperty = "id")
	@Insert("insert into emp(username,name,gender,image,job,dept_id,entrydate,create_time,update_time)" +
            "values(#{username},#{name},#{gender},#{image},#{job},#{deptId},#{entrydate},#{createTime},#{updateTime})")
    public void insert(Emp emp);	//新增插入方法，由于参数较多，因此形参使用实体对象封装，Mybatis会自动匹配该形参对象的属性
/*
1. 占位符#{}中的为对象的属性名
2. 使用@Options注解可以返回主键值
useGeneratedKeys = true代表要返回主键值
keyProperty = "id"代表将其封装到Emp对象的'id'属性中
*/
  1. 更新
    @Update("update emp set username=#{username},name=#{name},gender=#{gender},image=#{image},job=#{job},entrydate=#{entrydate},dept_id=#{deptId},update_time=#{updateTime} where id=#{id}")
    public void update(Emp emp);
  1. 查询
/*1、精确查询*/
	@Select("select * from emp where id=#{id}")
    public Emp select(Integer id);	//Mybatis会将查询返回的字段自动封装到方法的返回类型实体类Emp的对象的属性中，一一对应

/*模糊查询*/
//在模糊查询时，由于参数占位符#{}不能直接写在''中，因此必须得用SQL中的concat(str1,str2,...)--字符串拼接函数来拼接，若直接使用${}占位符则会有"性能和安全"问题
    @Select("select * from emp where name like concat('%',#{name},'%') " +
            "and gender=#{gender} and + entrydate between #{begin} and #{end}" +
            "order by update_time desc " +
            "limit 10;")
    public List<Emp> select(String name, Short gender, LocalDate begin, LocalDate end);

但只有字段名=属性名时，Mybatis才会将字段值封装到对应的属性
如果字段名与属性名不同，可以使用如下三种方式解决：

image-20240425224604215

总结

总的来说，Mybatis极大得简化了持久层的操作

  • 可以通过注解来指定某种类型的DAO操作，代码简洁
  • 安全性高（通过预编译防SQL注入）
  • 自动封装，可将函数的形参通过占位符#{形参名/形参对象属性名}封装为SQL语句参数中的字段值，或将SQL返回的字段值自动封装到对应的返回实体类对象的属性中

XML文件映射

在Mybatis中，除了使用注解方式执行SQL语句，还可以配置XML映射文件来执行一些比较复杂的SQL语句

  1. XML映射文件定义规范
  • XML文件的名称与Mapper接口名称一致，并且放置在相同包下（同包同名）

image-20240426115949583

  • XML文件的namespace属性为Mapper接口全限定名一致
  • XML文件中sql语句的id与Mapper接口中的方法名一致
<!-- xml文件标准头 -->
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
<!-- `<mapper>`标签绑定一个mapper接口，要求使用接口全限定名并且与对应Mapper接口名一致 -->
<mapper namespace="com.itheima.mapper.EmpMapper">
    <!-- `<select>`标签声明一个SQL查询的事务 -->
    <!-- 通过`id`绑定接口中的同名方法 `resultType`绑定返回值单个元素类型 -->
    <select id="select" resultType="com.itheima.pojo.Emp">
        <!-- 编写SQL语句 -->
        select * from emp where name like concat('%',#{name},'%') and gender=#{gender} and entrydate between #{begin} and 
        #{end} order by update_time desc limit 10
    </select>
</mapper>

Mybatis动态SQL

  1. 动态插入——<if>标签

使用<if>标签进行SQL语句拼接的控制，根据test属性封装的条件进行判断，如果test为true则拼接该SQL语句

<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "https://mybatis.org/dtd/mybatis-3-mapper.dtd">

<mapper namespace="com.itheima.mapper.EmpMapper">
    <select id="select" resultType="com.itheima.pojo.Emp">
        select * from emp where
        <if test="name != null">name like concat('%',#{name},'%')</if>
        <if test="gender != null">and gender=#{gender} </if>
        <if test="begin != null and end != null">and entrydate between #{begin} and #{end}</if>
        order by update_time desc
        limit 10
    </select>
</mapper>
  1. 条件语句——<where>标签

<where>标签表示当有条件子标签为true时，会自动生成where条件SQL语句，并且会自动去除无效的开头 and/or

<mapper namespace="com.itheima.mapper.EmpMapper">
    <select id="select" resultType="com.itheima.pojo.Emp">
        select * from emp
        <where>
            <if test="name != null">name like concat('%',#{name},'%')</if>
            <if test="gender != null">and gender=#{gender} </if>
            <if test="begin != null and end != null">and entrydate between #{begin} and #{end}</if>
        </where>
        order by update_time desc
        limit 10
    </select>
</mapper>
  1. update语句——<set>标签

<set>会动态的在行首插入SET关键字，并且会自动删除行首或行尾无效的逗号

    <update id="update">
        update emp
        <set>
            <if test="username != null">username=#{username}</if>
            <if test="name != null">,name=#{name}</if>
            <if test="gender != null">,gender=#{gender}</if>
            <if test="image != null">,image=#{image}</if>
            <if test="job != null">,job=#{job}</if>
            <if test="entrydate != null">,entrydate=#{entrydate}</if>
            <if test="deptId != null">,dept_id=#{deptId}</if>
            <if test="updateTime != null">,update_time=#{updateTime}</if>
        </set>
         where id=#{id}
    </update>
  1. 遍历列表参数——<foreach>标签

如果我们要进行批量删除delete操作，而接口函数的参数是一个集合类型时，我们可以使用foreach标签来动态拼接sql语句

<!-- 
语法格式：<foreach collection="" item="" separator="" open="" close="">

collection:要遍历的集合名
item:遍历出来的元素名
separator:元素之间使用的分割符
open:遍历开始前拼接的字段
close:遍历开始后拼接的字段
 -->
	<delete id="delete">
        delete from emp where id in
        <foreach collection="ids" item="id" separator="," open="(" close=")">
            #{id}
        </foreach>
	</delete>
  1. <sql>与<include>标签

<sql>标签用于包含可重用的SQL代码段，而<include>标签用于根据其属性id来引用并拼接<sql>代码段

    <sql id="selectAllFiled">
        select id, username, password, name, gender, image, job, entrydate, dept_id, create_time, update_time from emp
    </sql>

    <select id="select1" resultType="com.itheima.pojo.Emp">
        <include refid="selectAllFiled"/>
                where id=#{id}
    </select>

标签：依赖,JavaWeb,name,第一天,参数,注解,id,请求
From： https://www.cnblogs.com/six-years/p/18323302

相关文章

  • JavaWeb第二天
    目录tlias案例实践登录校验1,Cookie技术——存储在客户端2,Session技术——存储在服务端3,令牌Token技术JWT（JSONWebToken）令牌4,过滤器Filter定义过滤器Filter拦截路径过滤器链5、拦截器interceptor6、全局异常处理器7、Spring事务管理事务进阶——事务属性AOP——面向切面编......
  • JavaWeb Servlet
    Servlet入门Servlet是Java提供的一门动态web资源开发技术。简而言之，不同用户访问同样的资源会看到不一样的效果。Servlet是JavaEE规范之一，其实是一个接口。1快速入门1.1创建web项目，导入Servlet依赖坐标<dependency><groupId>javax.servlet</groupId>......
  • JavaWeb项目中动态拼接sql语句
    业务需求描述：图中的查询框在分条件查询用户信息列表时，前端可能会传回一个条件或多个条件，此时要对不同的条件进行sql语句的不同书写，前端传的情况有很多种，所以如果分情况写sql语句会比较死，并且不够灵活，而且书写的内容会很多，所以要想一种办法来进行不同情况的sql语句拼接。参数......
  • JavaWeb（7） DOM编程
    目录一、什么是DOM编程二、获取页面元素的API1.在整个文档范围内查找元素结点2.在具体元素节点范围内查找子节点3.查找指定子元素节点的父节点4.查找指定元素节点的兄弟节点5.整体代码演示三、操作元素属性值API1.属性操作2.内部文本操作3.整体代码演示 四、增......
  • @Slf4j注解 - javaweb日志记录
    1.引言在现代的JavaWeb开发中，日志记录是一个非常重要的组成部分。良好的日志记录可以帮助开发者快速定位问题、监控系统运行状态以及进行性能调优。@Slf4j注解是Lombok库提供的一个便捷工具，用于简化日志记录的代码编写。本文将详细讲解@Slf4j注解的相关内容，包括其概念、......
  • javaWeb_JSP
    首先要对项目的pom.xml进行添加依赖点击查看代码<dependencies><!--Servlet依赖--><dependency><groupId>javax.servlet</groupId><artifactId>servlet-api</artifactId><version>2.5</version>&l......
  • 学习vue第一天
    文章目录1.什么是Vue?2.渐进式框架3.如何新建一个vue项目1.什么是Vue?Vue(发音为/vjuː/，类似 view)是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助你高效地开发用户界面。无......
  • 计算机课程设计：JavaWeb期刊管理系统
    计算机课程设计：JavaWeb期刊管理系统项目说明 使用JavaWeb开发的数据库显示界面的课程设计，支持数据分页查询以及期刊的模糊搜索，首页采用动态二维码生成进行校验，支持上传图片，用户密码采用md5加密，支持期刊的分页显示。使用方法：这里说明一下：大致的使用方法1、getclone......
  • HTML笔记总结（Xmind格式）：第一天
    Xmind鸟瞰图：简单文字总结：笔记总结：1.常用开发工具：VScode，Hbuilder，IDEA2.常见浏览器：IE，火狐（Firefox），谷歌（chrome）,Safari3.Web标准：结构标准，表现标准，行为标准4.HTML的全称为超文本标记语言5.排版标签有：标题标签，段落标签，水平线标签，换行标签，div标签，span标签6.标题标签的特点： ......
  • JavaScript笔记总结(Xmind格式)：第一天
    Xmind鸟瞰图：简单文字总结：js使用方法：        1.行内样式（需要特定条件才可以使用）        2.内部样式（script尽量写在body最下面）        3.外部样式（在script标签中通过src引入外部的js文件）window对象的方法（window可以省略）：        1.alert......

赞助商

阅读排行

网站主页关于我们联系我们网站地图

本网站内容转载自其他媒体，侵权联系[admin##ips99.com]。

Copyright © 2020-2023 IPS99 版权所有 IPS99