编程提升篇

努力打基础的博

已于 2024-05-31 22:15:27 修改

阅读量24

点赞数

文章标签： java spring

于 2022-06-28 20:04:48 首次发布

本文链接：https://blog.csdn.net/m0_52606846/article/details/125508108

版权

编程提升

一、前端Web开发
二、后端Web开发
三、数据结构

一、前端Web开发

定义：

它是运行在 Web 服务器或应用服务器上的程序，作为来自 Web 浏览器或其他 HTTP 客户端的请求和 HTTP服务器上的数据库或应用程序之间的中间层。主要功能在于收集来自网页表单的用户输入，交互式地浏览和生成数据，还可以生成动态Web内容。

前端三剑客：HTML、CSS、JavaScript
HTML：负责网页的基本结构（页面元素和内容）
CSS：负责网页的表示效果（页面元素的外观、位置等页面样式）
JavaScript：负责网页的行为（交互效果）

servlet

Servlet，全称Java Servlet。是用Java编写的服务器端程序。其主要功能在于交互式地浏览和修改数据，生成动态Web内容。人们将Servlet理解为任何实现了这个Servlet接口的类。Servlet运行于支持Java的应用服务器中，用来扩展基于HTTP协议的Web服务器。

HTML、CSS、JS

HTML

<!DOCTYPE html>		<!--声明文档类型为html -->
<meta charset="UTF-8">		<!--设置字符集为UTF-8 -->

内容标签：

图片标签：<img>
- src：指定图像的url（绝对路径/相对路径）
1.绝对路径：绝对磁盘路径/绝对网络路径(从互联网中找到并访问)
2.相对路径：（./：当前路径，可以省略；../：上一级路径）<img src="./图片存放位置 ">
- width：图片的宽度（像素/相对于父元素的百分比）
- height：图片的高度（像素/相对于父元素的百分比）

视频标签：<video>
-controls：显示播放控件（开始按钮等等）
<video src="" controls width="950px"> </video>

音频标签：<audio>
-controls：显示播放控件（开始按钮等等，不显示的话不能点击开始按钮去播放）
<audio src="" controls> </video>

标题标签：<h1> - <h6>
水平线标签：<hr>一条水平线
段落标签：<p></p>
文本加粗标签：<b >

表格标签：<table>，可包裹多个<tr>
属性：
cellspacing:规定单元格之间的空间

<tr>表格的行，一个tr是一行，可包裹多个<td>，表头单元格可替换为<th>
<td>表格单元格

eg:
<table cellspacing="0" width="600px">
	<tr>
		<th>序号</th>
		<th>名称</th>
	</tr>
	<tr>
		<td>001</td>
		<td>华为</td>
	</tr>
</table>

表单标签：<form>
属性：
action:表单提交的url，表示往何处提交数据，不指定时默认提交到当前页面
method：
-get:在url后面拼接数据，如?username=Aaron，url长度有限制
-post:在消息体（请求体）中传递，参数大小无限制

<input>：定义表单项，通过type属性控制输入形式
<select>：定义下拉列表
<textarea>：定义文本域

eg:
<form action="" method="get">
	用户名：<input type="text" name="username">
	<input type="submit" value="这是提交按钮">
</form>

布局标签：

(1)<div>：一行只显示一个；宽度默认是父元素的宽度，高度默认由内容撑开；可设置宽高
<div>正文内容</div>
div{
	background-color:;	/*背景色*/
	padding:20px 20px 20px 20px;	/*内边距，从上开始顺时针：上 右 下 左*/
	border:10px solid red;	/*边框，宽度 线条 颜色*/
	margin:0 auto;	/*外边距，从上开始顺时针：上 右 下 左*/
}
(2)<span>：一行可显示多个；宽度和高度默认由内容撑开；不可设置宽高

CSS

CSS引入方式：

内嵌样式：写在<style>标签中（通常约定写在head标签中）

<style>
	h1 { <!--这里标签选择器选了h1，表示当前页面的h1标签里的内容都被设置成这种格式-->
		color: #ff0000		<!--十六进制表示法设置颜色-->
	}
	span{<!--这里标签选择器选了span，表示当前页面的span标签里的内容都被设置成这种格式-->
	
	}
</style>

CSS选择器

它用来选取需要设置样式的标签

元素选择器

标签名称{
	color:red;
}

id选择器

<h1 id="hhh"></h1>
#hhh{
	color:red;
}

类选择器

<h1 class="hhh"></h1>
.hhh{
	color:red;
}

超链接

<a href="" target="_self">正文内容 </a>

JS

JavaScript引入方式

（1）内部脚本

JavaScript代码必须位于<script> </script>标签之间
HTML文档中可以在任意地方放置任意数量的<script>，一般放在<body>元素的底部可提高速度

eg:
<script> alert('Hello JS'); </script>

（2）外部脚本：将JS代码定义在外部JS文件中，然后引入到HTML页面

外部JS文件中写JS代码不需要<script> </script>标签

eg:
<script src="./demo.js"></script>

基础语法

代码格式

JS代码区分大小写
代码结尾的分号可有可无
单行注释//
多行注释/**/
大括号表示代码块

变量

JS中用关键字var声明变量，这个变量可以存放不同类型的值
变量名需遵守：由字母、数字、下划线和美元符$组成；数字不能开头

JS中使用typeof运算符可获取数据类型

函数

JS通过function关键字来声明函数

function add(a,b){//JS中形参和返回值都不需要定义类型
	return a+b;
}

JSON

JSON是通过JS对象标记法(大括号里通过key-value的形式来声明属性)书写的文本，它用于作为数据载体，在网络中就行数据传输

eg:
{//JSON中属性名一定要加双引号
	"name":"Aaron",
	"age":22
}

（1）定义JSON字符串：

var 变量名 = '{"name":"value1", "addr":["北京","上海"]}';

（2）将JSON字符串转换为JS对象

var 对象名 = JSON.parse(变量名);

举个综合的栗子：

var jsonstr = '{"name":"Aaron", "addr":["北京","上海"]}';
//alert(jsonstr.name);这样拿不到数据，因为点方法是对象专属的方法，var定义出来的jsonstr是字符串，点方法无效，需要先把字符串转换为对象
var obj = JSON.parse(jsonstr);
alert(obj.name);//此次拿到了Aaron

JS事件监听

事件：是指发生在HTML元素上的事件
事件监听：JS可以在事件被监测到时执行代码

onlick：鼠标点击事件
onfocus：获得焦点事件
onblur：失去焦点事件
onkeydown：某个键盘的键被按下
onmouseover：鼠标移动到元素之上
onmouseover：鼠标移出某元素
onsubmit：提交表单事件

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<script>
	function on(){
		alert('你点击了按钮');
		}
</script>

方式二：通过DOM元素属性绑定
var duixiang = document.getElementById(“id名”);

<input type="button" id="btn" value="按钮2">

<script>
	document.getElementById('btn').onclick=function(){
		alert('你点击了按钮');
		}
</script>

Ajax、Axios

Vue、Element

Vue

框架：是一个半成品软件、是一套可重用的、通用的、软件基础代码模型。
Vue是一套前端框架、可以免除原生JavaScript中的DOM操作，简化书写。

Vue快速入门

1.在HTML页面引入Vue.js文件
<script src="js/vue.js"></script>
2.在JS代码区域，创建Vue核心对象，定义数据模型
<script>
	new Vue({
		el:"#app",		//el指明要控制哪个区域，类似于CSS的id选择器
		data:{
			message:"Hello Vue"
			}
		})
</script>
3.编写视图
<div id="app">
	<input type="text" v-model="message">
	{{message}}
</div>

二、后端Web开发

Maven

maven是一款针对Java的可以自动化构建、测试、打包和发布项目的工具软件，常用功能是用来帮助构建项目的工具，不使用maven需要自己导入jar包，还要考虑兼容性问题
只需掌握其俩大基本功能：项目构建（IDEA+maven来编写项目）、依赖管理即可

1.安装配置

尚硅谷-maven的安装配置

2.创建工程

创建maven工程-pom.xml里是maven的配置信息

3.导入依赖

Spring Boot

初识

它是帮助用户快速的构建应用程序、简化开发、提高效率的框架

——>创建好spring boot文件后
pom.xml
<parent

http协议

Hyper Text Transfer Protocol 超文本传输协议，它规定了浏览器和服务器之间数据传输的规则.
它基于TCP协议（建立TCP连接需要三次握手，终止TCP连接需要四次挥手）

http请求协议及响应协议

响应协议
请求行：包括请求方式(get或post)、资源路径、协议
请求头
请求体
响应协议
响应行：包括协议、状态码、对状态的描述
响应头
响应体

请求响应

简单参数(参数很少时)
特点：请求参数名要与方法形参变量名相同，且它会自动进行类型转换

//前端请求——>http://localhost:8080/exampleParam?name=Aaron&age=22
@RequestMapping("/exampleParam")
    public String hello(String name, Integer age){
        System.out.println(username + ":" + name);
        return "OK";
    }

实体参数

//pojo层——>将请求参数封装到实体对象中
public class User {
    private String name;
    private Integer age;
    实体的get()、set()、toString()
}

//前端请求——>http://localhost:8080/examplePojo?name=Aaron&age=22
//Controler层——>形参中调用对象即可
@RequestMapping("/hello")
    public String examplePojo(User user){
        System.out.println(username + ":" + name);
        return "OK";
    }

Spring MVC

三层架构：表现层(Web层)、业务层(Service层)和持久层(DAO层)
Spring MVC覆盖的是表现层，用来简化 “前端参数接收”（形参列表）和简化 “后端数据响应” （返回值）

基于页面原型设计数据库

JDBC、Mybatis

JDBC是Java程序连接数据库的技术统称，由Java语言的规范（接口）和 jar 包组成
主要记住API会用即可

核心技术：

DriverManager
cnooection
PerparedStatement（使用预编译的statement，可有动态值语句）
Result

基本使用步骤（动态值版本）

导入驱动jar包
在项目中创建一个libs文件夹，把刚刚下载的驱动文件复制过去。记住还需要右键jar包，选择Add as Library
注册驱动
把依赖的jar包进行安装

Class.forName("com.mysql.cj.jdbc.Driver");

获取连接connection

Connection conn = DriverManager.getConnection("url", "用户名", "密码");
//url：jdbc:数据库厂商名://ip地址:port/数据库名

发送sql语句，并获取返回结果

//（1）编写sql语句
String sql = "select * from t_user where account = ? and password = ?;";
//注：动态值部分用占位符?代替

//（2）创建预编译statement并且设置SQL语句结果
PreparedStatement preparedStatement = conn.preparedStatement(sql);

//（3）单独的占位符进行赋值
preparedStatement.setObject(参数一,参数二)
//参数一：占位符的位置，从左到右用1,2表示，preparedStatement.setObject(1,account)
//参数二：要写入的值

//（4）发送sql语句并获取返回结果
ResultSet resultSet = PrepareStatement.executeQuery();//查询用executeQuery();DML语句用executeUpdate()

解析结果集

if(resultSet.next()){
System.out.println("登录成功");
}else{
System.out.println("登录失败");
}

销毁资源
砸桥：connection释放
砸车：statement释放
砸箱子：resultset释放

resultSet.close();
statement.close();
connection.close();

基于SpringBoot整合SSM

SSM是sping+springMVC+mybatis集成的框架。

框架 = jar包 + 配置文件
单一架构，项目的主要应用技术框架为：Spring、SpringMVC、Mybatis
微服务/分布式架构：一个项目拆分成多个模块，项目的主要应用技术框架为：SpringBoot（SSM）、SpringCould

会话跟踪技术

cookie

session

JSP九大内置对象之一 - session

背景：Session在网络中被称为会话。由于HTTP协议是一种无状态的协议，也就是当一个客户端发送请求，服务器端收到请求，并返回响应后，该连接就结束了，而服务器不保存任何相关的信息。为了弥补这一缺点，HTTP协议提供了session。通过session可以在应用程序的web页面间进行跳转时，保存用户的状态，使得整个用户会话一直存在下去，直到浏览器关闭。

令牌技术JWT

Filter、Interceptor

AOP

三、数据结构

1. 存储结构

栈

队列

数组

树

图

2. 查找

顺序查找

又称线性查找

优化：若查找的概率不同，可按查找的概率降序排序

折半查找

又称二分查找，仅适用于有序的顺序表。

/*
arr[]是从小到大排的
*/
while(low<=high){
	mid = (low + high)/2;
	if(arr[mid] == key)
		return mid;
	else if(arr[mid] > key)
		high = mid - 1;	//从前半部分再找
	else
		low = mid + 1;	//从后半部分再找
	}

分块查找

又称索引顺序查找。将查找表分为若干块：块内元素可以无序，但块间有序，即第一个块中的最小关键字小于第二个块中的所有关键字；再建立一个索引表：记录各块的最大关键字及其地址；

树型查找

二叉排序树BST

也叫二叉查找树。核心：左子树结点值<根结点值<右子树结点值

平衡二叉树AVL

左右子树的高度差绝对值不超过1

散列表

又称哈希表，是一种根据关键字直接进行访问的数据结构。

3. 排序

一图流：
在这里插入图片描述
稳定排序：“直冒归基 "

插入排序

直接插入排序

折半插入排序

希尔排序

又叫缩小增量排序；取增量d，让arr[ i ]和arr[ i + d ]和arr[i + d + d ]…比，怎么比？直接插入排序即可，然后缩小增量，常见的是d折半，直到d为1再比一次就结束了

交换排序

冒泡排序

for(int i = 0;i < n-1;i++){
	for(int j = n-1;j > i;j--){
		if(arr[j-1] > arr[j])
			swap(arr[j-1] , arr[j]);
			}
		}

快速排序

选择排序

简单选择排序

堆排序

归并排序和基数排序

归并排序

基数排序