概念
Vue是一款用于构建用户界面的渐进式的JavaScript框架
框架：一套完整的项目解决方案，用于快速构建项目
优点：大大提升前端项目的开发效率
缺点：需要记忆框架的使用规则
准备
引入Vue模块
创建Vue程序的应用实例，控制视图的元素
准备元素，被Vue控制
数据驱动视图
准备数据
通过插值表达式渲染页面
Vue常用指令
指令：HTML标签上带有v-前缀的特殊属性，不同的指令具有不同的含义，可以实现不同的功能
v-for
作用：列表渲染，遍历容器的元素或者对象的属性
语法：
<tr v-for="(item,index) in items":key="item.id">{{item}}</tr>
items:要遍历的数组
item:为遍历出来的元素
index:索引/下标，从0开始；
key:
作用：为元素添加唯一标识，便于vue进行列表项的正确排序复用，提升渲染性能
推荐使用id作为key(唯一)
v-bind
作用：动态为HTML标签绑定属性值，如设置href,src,style样式等
语法：v-bind:属性名=”属性值”
简化：：属性名=“属性值”
v-if &v-show
作用：这两类指令，都是用来控制元素的显示与隐藏的
v-if
- 语法v-if=”表达式”，表达式的值为true，显示：false，隐藏
- 原理：基于条件判断，来控制创建或移除元素节点
- 场景：要么显示，要么不显示， 不频繁切换的场景
v-show
- 语法：v-show=”表达式”,表达式的值为true，显示：false，隐藏
- 原理：基于CSS样式display来控制显示与隐藏
- 场景：频繁切换显示隐藏的场景
v-on
作用：为html标签绑定事件（添加事件监听）
语法：
v-on：事件名=“方法名”
简写为 @事件名=”…”
v-model
- v-model指令可以在表单 input、textarea以及select元素上创建双向数据绑定；
- 它会根据控件类型自动选取正确的方法来更新元素；
- 尽管如此， v-model 本质上是语法糖，它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理；
Ajax
作用：
数据交换：通过Ajax可以给服务器发送请求，并获取服务器响应的数据
异步交互：可以在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页的技术，如：搜索联想，用户名是否可用的校验等等
同步与异步
同步：客户端发起请求服务器，服务器处理，客户端等待，处理后返回客户端，客户端解除等待
异步：客户端发出请求后可以执行其他操作，服务器处理后返回
Axios
对原生的Ajax进行了封装，简化书写，快速开发
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax</title>
</head>
<body>
<input type="button" value="获取数据CET" id="btnGet">
<input type="button" value="操作数据POST" id="btnPost">
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
<script>
//发送GET请求
document.querySelector('#btnGet').addEventListener('click',()=>{
//axios发布异步请求
axios({
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/list',
method:'GET'
}).then((result)=>{//成功回调函数
console.log(result);
}).catch((err)=>{//失败回调函数
console.log(err);
})
})
//发送POST请求
document.querySelector('#btnPost').addEventListener('click',()=>{
axios({
url:'https://mock.apifox.cn/m1/3083103-0-default/emps/upda',
method:'POST',
data:{id:1}//Post请求方式
}).then((result)=>{//成功回调函数
console.log(result);
}).catch((err)=>{//失败回调函数
console.log(err);
})
})
</script>
</body>
</html>
Maven
是一款用于管理和构建java的工具
作用
依赖管理：方便快捷的管理项目依赖的资源（jar包）
项目构建：标准化的跨平台的自动化项目构建方式
统一项目结构：提供标准、统一的项目结构，降低开发，构建，维护的成本
坐标
是资源（jar）的唯一标识，通过坐标可以唯一定位资源位置
使用坐标定义项目或引入项目中需要的依赖
主要组成
groupid:定义当前Maven项目隶属组织名称
artifactId:定义当前Maven项目名称（模块名称）
version：定义当前项目版本号
SNAPSHOT:功能不稳定，尚处于开发中的版本
RELEASE：功能趋于稳定，可以用于发行的版本
依赖管理
依赖：项目在运行过程中需要的jar包，一个项目中可以引入多个依赖
配置：
在pom.xml中编写标签
在标签中用引入坐标
定义坐标的groupId,artifactId,version
点击刷新按钮，引入最新加入的坐标
排除依赖
指的是主动断开依赖的资源，被排除的资源无需指定版本
<dependencies>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>6.1.4</version>
<exclusions>
<exclusion>
<groupId>io.micrometer</groupId>
<artifactId>micrometer-observation</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
生命周期
- clean:清理工作
- default:核心工作，如：编译、测试、打包、安装、部署等
- site:生成报告、发布站点等
单元测试
测试：鉴定软件的完整性、安全性和质量的过程
阶段划分：单元测试、集成测试、系统测试、验收测试
测试方法：白盒测试、黑盒测试及灰盒测试
- 白盒：清楚知道代码内部结构、代码逻辑
- 黑盒：不清楚代码内部结构、用于验证软件的功能、兼容性等方面
- 灰盒：即关注软件内部表现也关注外部功能
使用junit单元测试框架
@DisplayName("用户信息测试类")
public class UserServiceTest {
@Test
public void testgetage(){
UserService us=new UserService();
Integer age=us.getAge("14010820060823001X");
System.out.println(age);
}
@Test
public void testGetgender(){
UserService us=new UserService();
String gender=us.getGender("14010820060823001X");
System.out.println(gender);
}
@Test
public void testGenderWithAssert(){
UserService us=new UserService();
String gender=us.getGender("14010820060823001X");
Assertions.assertEquals("男",gender,"性别获取错误有问题");
}
@Test
public void testGenderWithAssert2(){
UserService us=new UserService();
Assertions.assertThrows(IllegalArgumentException.class,()->{
us.getGender(null);
});
}
@DisplayName("测试用户性别"
)
@ParameterizedTest
@ValueSource(strings={"14010820060823001X","140108200608230020"})
public void testGetgender2(String idCard){
UserService us=new UserService();
String gender=us.getGender(idCard);
//断言
Assertions.assertThrows(IllegalArgumentException.class,()->{
us.getGender(null);
});
}
}
单元测试-企业开发规范
Web基础
Spring
SpringBoot
入门程序
基于SpringBoot开发一个Web应用，浏览器发送请求/Hello之后，浏览器返回一个“hello world”
@RestController//当前类是一个请求处理类
public class HelloControl {
@RequestMapping("/hello")
public String hello(String name){
System.out.println("name:"+name);
return "Hello"+name+"~";
}
}
启动
@SpringBootApplication
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
HTTP协议
概念：规定了浏览器与服务器之间数据传输的规则
特点：
基于TCP协议：面向连接，安全
基于请求-响应模型的：一次请求对应以此响应
HTTP协议是无状态的协议：对于事物处理没有记忆能力，每次请求-响应都是独立的
- 缺点：多次请求间不能共享数据
- 优点：速度快
请求数据格式
Host：请求的主机名
User-Agent:浏览器版本，例如Chrome浏览器的标识类似Mozilla/5.0….
Accept-Language:表示浏览器的偏好语言，服务器可以据此返回不同语言的网页
Accept-Encoding:表示浏览器可以支持的压缩类型，例如gzip,deflate等
Content-Type:请求主体的数据类型
Content-Length:请求主体的大小
请求行指的是请求数据格式的第一行，由三个部分组成：
- 请求方式
- 请求资源路径
- 协议及版本
请求头指的就是从第二行开始一直到后面的部分数据。请求头的格式是键值对形式，中间用冒号分隔。前面是请求头的名字，后面是对应的值。
请求体是 POST 请求特有的组成部分，用来存放请求参数。请求体和请求头之间有一个空行存在，通过一个空行将这两部分分离开来。
在 POST 请求里面，请求参数是携带在请求体这个位置。
Web服务器对HTTP协议请求进行了解析，并进行封装，在调用Controller方法的时候传递给了该方法
@RestController
public class Request {
@RequestMapping("/request")
public String request(HttpServletRequest request){
//1.获取请求方式
String method=request.getMethod();
System.out.println("method:"+method);
//2.获取请求url地址
String url=request.getRequestURL().toString();
System.out.println("url:"+url);
//3.获取请求协议
String protocol=request.getProtocol();
System.out.println("protocol:"+protocol);
//4.获取请求参数
String queryString=request.getParameter("name");
System.out.println("name:"+queryString);
//5.获取请求头 --Accept
String accept=request.getHeader("Accept");
System.out.println("Accept:"+accept);
return "请求成功";
}
}
响应数据格式
重定向：底层涉及到两次请求，浏览器请求服务器A响应数据，但是A服务器中没有它需要的数据，于是返回一个响应头（LocationB）,指向服务器B的地址，浏览器获取到地址后向服务器B响应数据，服务器返回数据
响应数据设置
@RestController
public class ResponseController {
@RequestMapping("/response")
public void response(HttpServletResponse response) throws IOException {
//设置响应状态码
response.setStatus(401);
//设置响应头
response.setHeader("name","itheima");
//设置响应体
response.getWriter().write("<h1>hello response</h1>");
}
@RequestMapping("/response2")
public ResponseEntity<String> response2(){
//设置响应状态码
return ResponseEntity.status(401).header("name","javaweb-ai").body("<h1>hello response</h1>");
}
}
两种方式
Web案例
服务端
@RestController//@ResponseBody ->将controller返回值直接作为响应体的数据直接响应；返回值是对象/集合->json
public class UserController {
@RequestMapping("/list")
public List<User> list() throws FileNotFoundException {
//读取user.txt文件获取用户数据
InputStream in=this.getClass().getClassLoader().getResourceAsStream("user.txt");
//读取文件封装到List集合中
ArrayList<String> as=IoUtil.readLines(in, StandardCharsets.UTF_8,new ArrayList<>());
//解析用户信息，封装为User对象->List集合
List<User> userList=as.stream().map(line->{
String[] parts=line.split(",");
Integer id=Integer.parseInt(parts[0]);
String username=parts[1];
String password=parts[2];
String name=parts[3];
Integer age=Integer.parseInt(parts[4]);
LocalDateTime ld=LocalDateTime.parse(parts[5], DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
return new User(id,username,password,name,age,ld);
}).toList();
//返回数据
return userList;
}
}
使用IO流获取字节输入流，再通过行读取数据封装到ArrayList数组当中
map函数可以将以逗号分隔开的用户信息封装到新对象User中，并封装到List数组当中
前端
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户列表数据</title>
<style>
/*定义css，美化表格*/
table{
border-collapse: collapse;
width: 100%;
margin-top: 20px;
border: 1px solid #ccc;
text-align: center;
font-size: 14px;
}
tr {
height: 40px;
}
th,td{
border: 1px solid #ccc;
}
thead{
background-color: #e8e8e8;
}
h1{
text-align: center;
font-family: 楷体;
}
</style>
</head>
<body>
<div id="app">
<h1>用户列表数据</h1>
<!--定义一个表格,包括6列,分别是: ID, 用户名, 密码, 姓名, 年龄, 更新时间-->
<table>
<thead>
<tr>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>姓名</th>
<th>年龄</th>
<th>更新时间</th>
</tr>
</thead>
<tbody>
<tr v-for="user in userList">
<td>{{user.id}}</td>
<td>{{user.username}}</td>
<td>{{user.password}}</td>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.updateTime}}</td>
</tr>
</tbody>
</table>
</div>
<!--引入axios-->
<script src="js/axios.min.js"></script>
<script type="module">
import { createApp } from './js/vue.esm-browser.js'
createApp({
data() {
return {
userList: []
}
},
methods: {
async search(){
const result = await axios.get('/list');
this.userList = result.data;
}
},
mounted() {
this.search();
}
}).mount('#app')
</script>
</body>
</html>
分层解耦
三层架构
Controller:控制层，接收前端发送的请求，对请求进行处理，并响应数据
@RestController//@ResponseBody ->将controller返回值直接作为响应体的数据直接响应；返回值是对象/集合->json
public class UserController {
private UserService us=new UserServiceimpl();
@RequestMapping("/list")
public List<User> list() throws FileNotFoundException {
//调用service获取数据
List<User> userList=us.findAll();
//返回数据
return userList;
}
}
service:业务逻辑层，处理具体的业务逻辑
public class UserServiceimpl implements UserService {
private UserDao userDao=new UserDaoimpl();
@Override
public List<User> findAll() {
List<String>as=userDao.findAll();
//调用Dao
//解析用户信息，封装为User对象->List集合
List<User> userList=as.stream().map(line->{
String[] parts=line.split(",");
Integer id=Integer.parseInt(parts[0]);
String username=parts[1];
String password=parts[2];
String name=parts[3];
Integer age=Integer.parseInt(parts[4]);
LocalDateTime ld=LocalDateTime.parse(parts[5], DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss"));
return new User(id,username,password,name,age,ld);
}).toList();
return userList;
}
}
dao:数据访问层（持久层），负责数据访问操作，包括数据的增删改查
public class UserDaoimpl implements UserDao {
@Override
public List<String> findAll() {
//读取user.txt文件获取用户数据
InputStream in=this.getClass().getClassLoader().getResourceAsStream("user.txt");
//读取文件封装到List集合中
ArrayList<String> as= IoUtil.readLines(in, StandardCharsets.UTF_8,new ArrayList<>());
return as;
}
}
可读性强，复用性强，方便维护
耦合：衡量软件中各个层/各个模块的依赖关联程度
内聚：软件中各个功能模块内部的联系
软件设计原则：高内聚低耦合
IOC与DI
控制反转：简称IOC，对象的创建控制权由自身转变为外部容器，需要使用时从容器中取出
依赖注入：简称DI，容器为应用程序提供运行时，所依赖的资源，称之为依赖注入
Bean对象：IOC容器中创建管理的对象
步骤：
将Dao和Service层的实现类交给IOC容器管理
在实现类上方添加@Component
为Controller及service注入运行时所依赖的对象
在创建对象时上方添加@Autowired
IOC详解
声明的注解，想要生效，需要被组件扫描注解@ComponentScan扫描，默认扫描范围是启动类所在的包及其子包
DI详解
//构造器注入
private final UserService userService;
@Autowired
public UserController(UserService userService){
this.userService=userService;
}
优点：清晰看到类的依赖关系，提高了代码的安全性
缺点：代码繁琐，如果构造参数过多，可能会导致构造函数臃肿
setter注入
缺点：需要额外编写setter方法，增加了代码量
如果存在多个相同类型的bean，将会报错
@Primary:优先注入
@Qualifier():注入哪个bean
@Resource(name=””)：注入bean的名称
MyBatis
JDBC
操作关系型数据库的一种API
操作数据库的步骤
public class JdbcTest {
@Test
public void testUpdate() throws ClassNotFoundException, SQLException {
//注册驱动
Class.forName("com.mysql.cj.jdbc.Driver");
//获取数据库的链接
String url="jdbc:mysql://localhost:3306/web01";
String username="root";
String password="qwer1234";
Connection connection=DriverManager.getConnection(url,username,password);
//获取SQL语句的执行对象
Statement statement=connection.createStatement();
//执行SQL
int i=statement.executeUpdate("update user set age=25 where id = 1");
System.out.println("sql语句执行完影响的记录数为："+i);
//释放资源
statement.close();
connection.close();
}
}
执行DQL语句
@Test
public void testSelect(){
String URL = "jdbc:mysql://localhost:3306/web01";
String USER = "root";
String PASSWORD = "qwer1234";
Connection conn = null;
PreparedStatement stmt = null;
ResultSet rs = null; //封装查询返回的结果
try {
// 1. 注册 JDBC 驱动
Class.forName("com.mysql.cj.jdbc.Driver");
// 2. 打开链接
conn = DriverManager.getConnection(URL, USER, PASSWORD);
// 3. 执行查询
String sql = "SELECT id, username, password, name, age FROM user WHERE username = ? AND password = ?"; //预编译SQL
stmt = conn.prepareStatement(sql);
stmt.setString(1, "daqiao");
stmt.setString(2, "123456");
rs = stmt.executeQuery();
// 4. 处理结果集
while (rs.next()) {
User user = new User(
rs.getInt("id"),
rs.getString("username"),
rs.getString("password"),
rs.getString("name"),
rs.getInt("age")
);
System.out.println(user); // 使用 Lombok 的 @Data 自动生成的 toString 方法
}
} catch (SQLException se) {
// Handle errors for JDBC
se.printStackTrace();
} catch (Exception e) {
// Handle errors for Class.forName
e.printStackTrace();
} finally {
// 5. 关闭资源
try {
if (rs != null) rs.close();
if (stmt != null) stmt.close();
if (conn != null) conn.close();
} catch (SQLException se) {
se.printStackTrace();
}
}
}
预编译SQL
优势一：防止SQL注入，更安全
通过控制输入一些代码或字符传递到服务器，对服务器进行攻击
如果使用静态SQL，会被进行修改，改变判断条件
优势二：性能更高
如果缓存中有输入的SQL语句，则直接从缓存中拿出
MyBatis
创建工程，引入依赖
spring.datasource.url=jdbc:mysql://localhost:3306/web01
spring.datasource.driver-class-name=com.mysql.cj.jdbc.Driver
spring.datasource.username=root
spring.datasource.password=qwer1234
准备数据库表、实体类
application.properties中配置数据库连接信息
定义mapper接口，编写SQL
@Mapper //应用程序运行时，自动为接口创建一个实现类对象（代理对象），并且自动将实现类对象存入IOC容器
public interface UserMapper {
@Select("select * from user")
public List<User> findAll();
}
测试类运行
@SpringBootTest //单元测试的注解-当前测试类中的测试方法运行时，会启动SpringBoot项目
class SpringbootMybatisApplicationTests {
@Autowired
private UserMapper userMapper;
@Test
public void testFindAll(){
List<User> userList=userMapper.findAll();
userList.forEach(System.out::println);
}
}
删除用户-delete
{}:占位符，执行时替换为？，生成预编译SQL
@Delete("delete from user where id=#{id}")
public Integer delete(Integer id);
添加用户
@Insert("insert into user(username,password,name,age) values(#{username},#{password},#{name},#{age})")
public void insert(User user);
修改用户
@Update("update user set username=#{username},password=#{password},name=#{name},age=#{age} where id=#{id}")
public void update(User user);
查询操作
@Select("select * from user where password=#{password} and username=#{username}")
public User findUsernameAndPassword(String username,String password);
数据库连接池
数据库连接池是个容器，负责分配、管理数据库连接
它允许应用程序重复使用一个现有的数据库连接，而不是在重新建立一个
避免因为没有释放连接而引起的数据库连接遗漏
XML映射配置
默认规则：
- XML映射文件的名称与Mapper接口名称一致，并且将XML映射文件和Mapper接口放置在相同包下
- XML映射文件的namespace属性与Mapper接口全限定名一致
- XML映射文件中sql语句的id与Mapper接口中的方法名一致，并保持返回类型一致
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.example.springbootmybatis.mapper.UserMapper">
<select id="findAll" resultType="org.example.springbootmybatis.pojo.User">
select id,username,password,name,age from user
</select>
</mapper>
#指定XML映射配置文件的位置
mybatis.mapper-locations=classpath:mapper/*.xml
SpringBoot项目配置文件
yml配置文件
格式：
数值前加空格
相同元素左侧对齐
#定义对象/Map集合
user:
name: JACK
age: 18
gender: 男
#定义数组/List/Set集合
hobby:
-Java
-python
-c
Logback入门程序
通过配置文件控制程序是否输出日志
<?xml version="1.0" encoding="UTF-8"?>
<configuration>
<!-- 控制台输出 -->
<appender name="STDOUT" class="ch.qos.logback.core.ConsoleAppender">
<encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder">
<!--格式化输出：%d 表示日期，%thread 表示线程名，%-5level表示级别从左显示5个字符宽度，%logger显示日志记录器的名称， %msg表示日志消息，%n表示换行符 -->
<pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50}-%msg%n</pattern>
</encoder>
</appender>
<!-- 系统文件输出 -->
<appender name="FILE" class="ch.qos.logback.core.rolling.RollingFileAppender">
<rollingPolicy class="ch.qos.logback.core.rolling.SizeAndTimeBasedRollingPolicy">
<!-- 日志文件输出的文件名, %i表示序号 -->
<FileNamePattern>D:/tlias-%d{yyyy-MM-dd}-%i.log</FileNamePattern>
<!-- 最多保留的历史日志文件数量 -->
<MaxHistory>30</MaxHistory>
<!-- 最大文件大小，超过这个大小会触发滚动到新文件，默认为 10MB -->
<maxFileSize>10MB</maxFileSize>
</rollingPolicy>
<encoder class="ch.qos.logback.classic.encoder.PatternLayoutEncoder">
<!--格式化输出：%d 表示日期，%thread 表示线程名，%-5level表示级别从左显示5个字符宽度，%msg表示日志消息，%n表示换行符 -->
<pattern>%d{yyyy-MM-dd HH:mm:ss.SSS} [%thread] %-5level %logger{50}-%msg%n</pattern>
</encoder>
</appender>
<!-- 日志输出级别 -->
<root level="ALL">
<appender-ref ref="STDOUT" />
<appender-ref ref="FILE" />
</root>
</configuration>
常见日志级别
