springboot全栈

2024-01-17

/2023

字数统计: 6.4k | 阅读时长≈ 28 分钟

javaweb—-springboot

相关知识

java基础

第一个java程序

public class HelloWorld {
    /* 第一个Java程序
     * 它将输出字符串 Hello World
     */
    public static void main(String[] args) {
        System.out.println("Hello World"); // 输出 Hello World
    }
}

HelloWorld是一个类，用class标识符声明类

上述程序将打印Hello World

数据类型

关键字	数据类型
byte	整数
int	整数
float	单精度浮点数
double	双精度浮点数
boolean	布尔值
char	字符
string	字符串

变量命名规则

使用有意义的名字： 变量名应该具有清晰的含义，能够准确地反映变量的用途。避免使用单个字符或无意义的缩写。
驼峰命名法（Camel Case）： 在变量名中使用驼峰命名法，即将每个单词的首字母大写，除了第一个单词外，其余单词的首字母都采用大写形式。例如：myVariableName。
区分大小写： Java 是大小写敏感的，因此变量名中的大小写字母被视为不同的符号。例如，myVariable 和 myvariable 是两个不同的变量。
不以数字开头： 变量名不能以数字开头，但可以包含数字。

循环

//基础循环
while(){}
do{}while();
for(;;;){}
//java增强for循环，用于数组
for(声明语句 : 表达式){}
		//例
String [] names ={"James", "Larry", "Tom", "Lacy"};
for( String name : names ) {
   System.out.print( name );
   System.out.print(",");
}//遍历所有names中的元素
//控制语句
break;
continue;

条件语句

//两种情况
if(){}
else{}
//多情况
if(){}
else if(){}
else if(){}
else{}

数组

//声明数组
dataType[] arrayRefVar;   // 首选的方法
dataType arrayRefVar[];  // 效果相同，但不是首选方法
//创建数组（使用new）
arrayRefVar = new dataType[arraySize];

数组做参数传递

public static void printArray(int[] array) {
  for (int i = 0; i < array.length; i++) {
    System.out.print(array[i] + " ");
  }
}

正则表达式

java支持正则表达式

1	import java.util.regex.*

正则表达式是对字符串操作的一种逻辑公式，就是用事先定义好的一些特定字符、及这些特定字符的组合，组成一个”规则字符串”，这个”规则字符串”用来表达对字符串的一种过滤逻辑。

给定一个正则表达式和另一个字符串，我们可以达到如下的目的：

给定的字符串是否符合正则表达式的过滤逻辑（称作”匹配”）；
可以通过正则表达式，从字符串中获取我们想要的特定部分。

例

校验QQ号，要求：必须是5~15位数字，0不能开头。

没有正则表达式之前

public class regex {
    public static void main(String[] args) {
        checkQQ("0123134");
    }
    public static void checkQQ(String qq)
    {
        int len = qq.length();
        if(len>=5 && len <=15)
        {
            if(!qq.startsWith("0"))
            {
                try
                {
                    long l = Long.parseLong(qq);
                    System.out.println("qq:"+l);
                }        
                catch (NumberFormatException e)
                {
                    System.out.println("出现非法字符");
                }
            }
            else
                System.out.println("不可以0开头");
        }
        else
            System.out.println("QQ号长度错误");
        }
}

使用正则表达式之后的代码：

public class regex {
    public static void main(String[] args) {
            checkQQ2("0123134");
    }
    public static void checkQQ2(String qq) {                                                            
            String reg = "[1-9][0-9]{4,14}";                  
            System.out.println(qq.matches(reg)?"合法qq":"非法qq");                                 
    }
}

方法

方法即函数

方法重载

名称相同，但输入参数、返回类型不同的方法

重载的方法必须拥有不同的参数列表。你不能仅仅依据修饰符或者返回类型的不同来重载方法

如

public static double max(double num1, double num2) {
  if (num1 > num2)
    return num1;
  else
    return num2;
}
//重载
public static int max(int num1, int num2) {
  if (num1 > num2)
    return num1;
  else
    return num2;
}

如果你调用max方法时传递的是int型参数，则 int型参数的max方法就会被调用；

如果传递的是double型参数，则double类型的max方法体会被调用，这叫做方法重载；

构造方法

在创建对象时自动调用

finalize() 方法

在销毁对象时自动调用

面向对象

Java作为一种面向对象语言。支持以下基本概念：

多态
继承
封装
抽象
类
对象
实例
方法
重载

类与对象

类：模板，例如人，有身高，体重，性别等属性

对象：对照类，对象就是类的具体化，一个人身高1.8m，体重70kg，性别男，这些具体化的类即为对象。

实例

public class Dog {
    String breed;
    int size;
    String colour;
    int age;
 
    void eat() {
    }
 
    void run() {
    }
 
    void sleep(){
    }
 
    void name(){
    }
}

除属性外，类中也可以定义多个方法（函数）如上中run,eat

类中有一些特殊方法：

构造方法

public class Puppy{
    String name;
    public Puppy(){
    }
 
    public Puppy(String name){
        // 这个构造器仅有一个参数：name
    }
}

构造方法的特点是在创建一个对应类的对象时，会自动调用构造方法，构造函数常用于初始化对象参数。

1 2	puppy myPuppy =new Puppy("tommy"); //初始设置name为tommy

java包

用于编译器快速找到类所在地址

包创建

package net.java.util;
public class Something{
   ...
}

则它的保存路径应该是 net/java/util/Something.java

导入包

1 2	import java.io.*; //将载入java/io下的所有类

通常，一个公司使用它互联网域名的颠倒形式来作为它的包名.例如：互联网域名是 abc.com，所有的包名都以 com.abc开头

例如：有一个 com.abc.test 的包，这个包包含一个叫做 ABC.java 的源文件，那么相应的，应该有如下面的一连串子目录：

1	com\abc\test\ABC.java

继承

关键字extends implements

继承格式

class 父类 {
}
 
class 子类 extends 父类 {
}

继承的特性

子类拥有父类非 private 的属性、方法。
子类可以拥有自己的属性和方法，即子类可以对父类进行扩展。
子类可以用自己的方式实现父类的方法。
Java 的继承是单继承，但是可以多重继承，单继承就是一个子类只能继承一个父类，多重继承就是，例如 B 类继承 A 类，C 类继承 B 类，所以按照关系就是 B 类是 C 类的父类，A 类是 B 类的父类，这是 Java 继承区别于 C++ 继承的一个特性。
提高了类之间的耦合性（继承的缺点，耦合度高就会造成代码之间的联系越紧密，代码独立性越差）。

extends关键字

在 Java 中，类的继承是单一继承，也就是说，一个子类只能拥有一个父类，所以 extends 只能继承一个类。

public class Animal { 
    private String name;   
    private int id; 
    public Animal(String myName, int myid) { 
        //初始化属性值
    } 
    public void eat() {  //吃东西方法的具体实现  } 
    public void sleep() { //睡觉方法的具体实现  } 
} 
 
public class Penguin  extends  Animal{ 
}

implements关键字

使用 implements 关键字可以变相的使java具有多继承的特性，使用范围为类继承接口的情况，可以同时继承多个接口（接口跟接口之间采用逗号分隔）。

public interface A {
    public void eat();
    public void sleep();
}
 
public interface B {
    public void show();
}
 
public class C implements A,B {
}

super 与 this 关键字

super关键字：我们可以通过super关键字来实现对父类成员的访问，用来引用当前对象的父类。
this关键字：指向自己的引用。

class Animal {
  void eat() {
    System.out.println("animal : eat");
  }
}
 
class Dog extends Animal {
  void eat() {
    System.out.println("dog : eat");
  }
  void eatTest() {
    this.eat();   // this 调用自己的方法,输出‘dog : eat’
    super.eat();  // super 调用父类方法，输出‘animal : eat’
  }
}
 
public class Test {
  public static void main(String[] args) {
    Animal a = new Animal();
    a.eat();
    Dog d = new Dog();
    d.eatTest();
  }
}

final关键字

final，翻译：最终的
即不能被继承

重写（Override）或重载（Overload）

抽象类

不能实例化对象的类，抽象类必须被继承，才能被使用。

abstract class 来定义抽象类

抽象方法

只声明，不具体实现，具体实现放在子类中

public abstract class Employee
{
   private String name;
   private String address;
   private int number;
   
   public abstract double computePay();//抽象方法，具体代码块必须在子类中重新实现
   
   //其余代码
}

接口

在JAVA编程语言中是一个抽象类型，是抽象方法的集合，接口通常以interface来声明。

接口的声明语法格式如下：

[可见度] interface 接口名称 [extends 其他的接口名] {
        // 声明变量
        // 抽象方法
}

例

/* 文件名 : Animal.java */
public interface Animal {
   public void eat();
   public void travel();
}

接口必须有实现类，实现方法如下：

/* 文件名 : MammalInt.java */
public class MammalInt implements Animal{
 
   public void eat(){//实现接口中的方法
      System.out.println("Mammal eats");
   }
 
   public void travel(){
      System.out.println("Mammal travels");
   } 
 
   public static void main(String args[]){
      MammalInt m = new MammalInt();
      m.eat();
      m.travel();
   }
}

前端三件套

html部分

head部

<head>
<base hrel="全文档基础链接" target="设置网页打开方式（新建或者原页刷新）">
<title>标题</title>
<link rel="stylesheet" type="text/css" hrel="链接外部样式表"/>
<style>
	/*可以直接添加样式来渲染 HTML 文档*/
	body
	{
	width:20px;
	}
</style>

</head>

body部

	<h1>标题1</h1>
	<h2>标题2</h2>
	...
	<img src="图片地址"/><!--插入图片-->
	
	<p>段落</p>
	
	<a hrel="链接地址">链接</a>
	<img src="图片地址" width="" height="" />
	
	<br/>换行
	<button title="按钮">初始按钮</button>
	<hr/><!--分割线-->
	
	<ul><!--无序列表-->
		<li><!--定义列表项-->
		</li>
	</ul>
	<ol><!--无序列表-->
	
	</ol>
	
	
	
	<table>
			<tr><!--表格的一行-->
				<th>表头单元格(列标题)</th>
			</tr>
			<tr>
				<td>数据单元格</td>
			</tr>
			<tr>
				<td rowspan="2">单元格纵向合并</td>
				<td colspan="2">单元格横向合并</td>
			</tr>
	</table>
	
	<div><!--区块（分区）-->
		<form action="后台接收数据网址" method="get/post"><!--表单-->
		<!--
		post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。

get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以 ?作为分隔符，一般用于不敏感信息，如分页等.
-->
			<!--
			HTML 表单用于收集用户的输入信息。

HTML 表单表示文档中的一个区域，此区域包含交互控件，将用户收集到的信息发送到 Web 服务器。
-->
			<lable for="in">这是输入框的标题<!--for用于绑定另外一个元素--></lable>
			<input type="text" name="firstname" id="in"><br/><!--输入文本域（通过type确定）-->
			<input type="password" name="pwd"><!--password是独特的密码字段-->
			<!--
			除此外还有
			radio----单选按钮
			checkbox---复选框
			-->
			<input type="submit" value="按钮显示的字">
		</form>
		
	</div>

css部分,调整html格式

css格式
CSS声明以分号 ; 结束，声明总以大括号 {} 括起来:

p
{
    color:red;
    text-align:center;
}

选择器

/*id class选择器*/
#id{}
.class{}
/*也可以指定*/
p.class{}
/*属性选择*/
[target]
[target=-blank]/*选择所有target=-blank的元素*/
a[src^="https"]/*选择每一个src属性的值以"https"开头的元素*/
a[src$=".pdf"]/*选择每一个src属性的值以".pdf"结尾的元素*/
a[src*="abc"]/*选择每一个src属性的值包含子字符串"abc"的元素*/

js部分

改变 HTML 内容

1 2	x=document.getElementById("demo"); //查找元素 x.innerHTML="Hello JavaScript"; //改变内容

document.getElementById("div1").onclick=function()
        {
            this.style.backgroundColor='white';
            this.innerText="测试";
        }
		//点击变换

var a=10;//变量声明
console.log(typeof a);//控制台查看
var arr=new Array(1,2,3);//数组

var obj=new Object();
obj.phone=17633126337;
obj.name="陆文达";
for(a in obj)
{
	console.log(a);
}
function f1()//正常函数声明和调用顺序可交换
{
    console.log("123");
}
f1();
var f2=function()
{
    console.log("f2",f1);//函数也是值
}
f2();//匿名函数必须先声明，再调用
function f3()
{
console.log(arguments[0],arguments[1],arguments[2]);
}
f3('asd','asd','qwe');//无参也可以传参
function f4(a,b)
{
    console.log(a,b);
}
f4('x');//会有一个参数为undefined
f4('x',3,true);//第三个参数看不到。

var student=
{
	'id': 123,
	'name':'tet',
	action:function()
        {
            console.log('开始行为');
        }
}
console.log(student.name);
student.action();

variable=new XMLHttpRequest();
创建XMLHttpRequest 对象

向服务器发送请求
xmlhttp.open(“GET”,”ajax_info.txt”,true);
xmlhttp.send();

响应
responseText 获得字符串形式的响应数据。

document.getElementById(“myDiv”).innerHTML=xmlhttp.responseText;

responseXML 获得 XML 形式的响应数据。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table,th,td{
            border: 1px solid;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
    <button id="btn">查询</button>
    <table>
        <thead>
        <tr>
            <th>日期</th>
            <th>气温</th>
            <th>天气</th>
        </tr>
        </thead>
        <tbody id="tbMain"></tbody>
    </table>
    <script>
        request=new XMLHttpRequest();
        request.onreadystatechange=callback;
        request.open("GET","https://restapi.amap.com/v3/weather/weatherInfo?city=450323&key=506a51ad8d74c9fe798b683828368556&extensions=all");
        request.send(null);
        function callback(){
            if(request.readyState==4){
                if(request.status==200){
                    var data=request.responseText;
                    console.log(data)
                    var d=JSON.parse(data)

                    document.getElementById("btn").onclick=function(){
                        var tbody=document.getElementById("tbMain");
                        for(let i=0;i<d.forecasts[0].casts.length;i++){
                            var trow=getDataRow(d.forecasts[0].casts[i]);
                            tbody.appendChild(trow);
                        }
                    }
                    function getDataRow(h){  
                        var row = document.createElement('tr'); //创建行  
                        
                        var idCell = document.createElement('td'); //创建第一列id  
                        idCell.innerHTML = h.date; //填充数据 
                        row.appendChild(idCell); //加入行  ，下面类似  
                        
                        var nameCell = document.createElement('td');//创建第二列name  
                        nameCell.innerHTML = h.daytemp_float;  
                        row.appendChild(nameCell);  
                        
                        var jobCell = document.createElement('td');//创建第三列job  
                        jobCell.innerHTML = h.dayweather;  
                        row.appendChild(jobCell);  
                        
                        //到这里，json中的数据已经添加到表格中，下面为每行末尾添加删除按钮  
                        
                        
                        return row; //返回tr数据      
                    } 
                }
            }
        }

    </script>
</body>
</html>

maven

maven简介

一款服务于java平台的自动化构建工具

maven作用

① 将一个项目拆分成多个工程
② maven存在本地仓库，需要的时候引用就可以不用复制
③ jar包需要的时候使用统一的规范方式下载jar包，规范，可以保证版本一致
④ 自动的将依赖的jar包导入进来。

安装maven

① 当前系统是否配置JAVA_HOME的环境变量

② 下载maven，解压maven放在一个非中文无空格的路径下

③ 配置maven的相关环境变量

在环境变量增加M2_HOME，路径是maven解压后的根目录
在环境变量里的path中增加maven/bin的目录
④ 验证：maven -v 查看maven版本

pom.xml标签详解

<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.0http://maven.apache.org/maven-v4_0_0.xsd">
    <modelVersion>4.0.0</modelVersion>
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>3.1.5</version>
        <relativePath/> <!-- lookup parent from repository -->
    </parent>
    <!-- 该函数定义了一个父级XML元素，其包含了项目的groupId、artifactId、version等信息，用于继承父级的属性和配置-->
    <groupId>com.seven</groupId>
    <artifactId>webEnrollment</artifactId>
    <version>0.0.1-SNAPSHOT</version>
    <name>webEnrollment</name>
    <description>webEnrollment</description>
    <!--这段XML代码定义了一个Maven项目，其中包含了项目的groupId、artifactId、version、name和description等属性。groupId和artifactId用于唯一标识项目，version表示项目的版本号，name和description用于给项目命名和描述-->
    <properties>
        <java.version>17</java.version>
    </properties>
    <!--这段XML代码定义了一个名为"properties"的元素，其中包含一个子元素"java.version"，其值为"17"。它表示项目的Java版本为17-->
    <dependencies>
        <!-- 在这里添加jar包-->
    </dependencies>
    
    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
    <!--这个XML函数用于在Maven构建中添加Spring Boot插件，以便生成可执行的JAR文件。插件可以帮助打包、运行和测试Spring Boot应用程序-->
</project>

异步加载

ajax

发送请求

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许 JavaScript 在浏览器上执行。

XMLHttpRequest 只是实现 Ajax 的一种方式。

本项目中主要采用了jQuery(js库)中的ajax方法实现异步加载，这里只介绍jQuery中的ajax方法

$.ajax()的用法主要有两种。

1 2	$.ajax(url[, options]) $.ajax([options])

上面代码中的url，指的是服务器网址，options则是一个对象参数，设置Ajax请求的具体参数。

$.ajax({
  async: true,
  url: '/url/to/json',
  type: 'GET',
  data : { id : 123 },
  dataType: 'json',
  timeout: 30000,
  success: successCallback,
  error: errorCallback,
  complete: completeCallback,
  statusCode: {
        404: handler404,
        500: handler500
  }
})
 
function successCallback(json) {
    $('<h1/>').text(json.title).appendTo('body');
}
 
function errorCallback(xhr, status){
    console.log('出问题了！');
}
 
function completeCallback(xhr, status){
    console.log('Ajax请求已结束。');
}

ajax方法可以有多个参数，以下仅介绍较常用参数

async：该项默认为true，如果设为false，则表示发出的是同步请求。
beforeSend：指定发出请求前，所要调用的函数，通常用来对发出的数据进行修改。
cache：该项默认为true，如果设为false，则浏览器不缓存返回服务器返回的数据。注意，浏览器本身就不会缓存POST请求返回的数据，所以即使设为false，也只对HEAD和GET请求有效。
complete：指定当HTTP请求结束时（请求成功或请求失败的回调函数，此时已经运行完毕）的回调函数。不管请求成功或失败，该回调函数都会执行。它的参数为发出请求的原始对象以及返回的状态信息。
contentType：发送到服务器的数据类型。
context：指定一个对象，作为所有Ajax相关的回调函数的this对象。
crossDomain：该属性设为true，将强制向相同域名发送一个跨域请求（比如JSONP）。
data：向服务器发送的数据，如果使用GET方法，此项将转为查询字符串，附在网址的最后。
dataType：返回值类型，服务器返回的数据类型，可以设为text、html、script、json、jsonp和xml。
error：请求失败时的回调函数，函数参数为发出请求的原始对象以及返回的状态信息。
headers：指定HTTP请求的头信息。
ifModified：如果该属性设为true，则只有当服务器端的内容与上次请求不一样时，才会发出本次请求。
password：指定HTTP认证所需要的密码。
statusCode：值为一个对象，为服务器返回的状态码，指定特别的回调函数。
success：请求成功时的回调函数，函数参数为服务器传回的数据、状态信息、发出请求的原始对象。
timeout: 等待的最长毫秒数。如果过了这个时间，请求还没有返回，则自动将请求状态改为失败。
type：向服务器发送信息所使用的HTTP动词，默认为GET，其他动词有POST、PUT、DELETE。
url：服务器端网址。这是唯一必需的一个属性，其他属性都可以省略。
username：指定HTTP认证的用户名。
xhr：指定生成XMLHttpRequest对象时的回调函数。

这些参数之中，url可以独立出来，作为ajax方法的第一个参数。也就是说，上面代码还可以写成下面这样。

$.ajax('/url/to/json',{
  type: 'GET',
  dataType: 'json',
  success: successCallback,
  error: errorCallback
})

返回值

ajax方法返回的是一个deferred对象，可以用then方法为该对象指定回调函数

$.ajax({
  url: '/data/people.json',
  dataType: 'json'
}).then(function (resp){
    //对返回数据进行处理
  console.log(resp.people);
})

抛开方便的ajax方法，jQuery还提供了大量扩展，极大的简化了js编程，值得一学。

vue.js

注：由于vue是项目后期添加进项目前端，且本项目于原生html中开发，以下内容不适用于vue项目，仅在原生html开发中适用。

在html中引入vue

以cdn的方式引入

1	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

直接将vue,js下载到本地，再引入

可以采取下面方法：

（1）将CDN的路径（https://cdn.jsdelivr.net/npm/vue/dist/vue.js）复制到浏览器，并搜索；

（2）将搜索到的内容全选复制，并在项目存放静态资源的文件目录下新建vue.js文件，并将复制的内容粘贴进去，最后以引入js资源的方式引入vue.js即可。

html中使用vue

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="./vue.js"></script>
  </head>
  <body>
    <!-- 创建一个根元素 -->
    <!-- vue内容均需放于下面这个div内 -->
    <div class="home" id="home"></div>
    <script>
      // 将vue挂载到id为home的根元素上
      var vm = new Vue({
        el: "#home",
        data() {
          return {};
        },
        methods: {},
        mounted() {},
        created() {},
      });
    </script>
  </body>
</html>

项目结构

web-enrollment
- config
  - application.yaml
    
    springboot配置文件
- src
  - main
    - java
      - com.seven
        
        config
        
        配置类目录
        
        controller
        
        视图控制层
        
        encoder
        
        加密方法
        
        entity
        
        实体层
        
        handler
        
        spring security登录处理方法
        
        mapper
        
        数据库接口
        
        service
        
        服务层接口
        
        ex
        
        异常处理
        
        impl
        
        服务接口实现
        
        util
        
        工具类

      * WebEnrollmentApplication.java


  * resources
    * mybatis
      * mapper

        mybatis映射文件，sql语句

    * static

      静态资源文件，js，css

    * templates

      tymeleaf模板文件

* test

pom.xml

打赏

版权声明： 本博客所有文章除特别声明外，著作权归作者所有。转载请注明出处！