1. 新建Maven项目
(1)打开IDEA2021
(2)新建项目-新建Maven-下一步
(3)如下配置-点击完成
(4)会自动打开pom.xml,如下添加配置(会报红也没有关系)
<parent> <artifactId>spring-boot-starter-parent</artifactId> <groupId>org.springframework.boot</groupId> <version>2.3.1.RELEASE</version> </parent> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.3.1.RELEASE</version> </dependency> </dependencies>
<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.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<groupId>org.example</groupId>
<artifactId>epilepsy2024</artifactId>
<version>1.0-SNAPSHOT</version>
<parent>
<artifactId>spring-boot-starter-parent</artifactId>
<groupId>org.springframework.boot</groupId>
<version>2.3.1.RELEASE</version>
</parent>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
<version>2.3.1.RELEASE</version>
</dependency>
</dependencies>
<properties>
<maven.compiler.source>8</maven.compiler.source>
<maven.compiler.target>8</maven.compiler.target>
</properties>
</project>
(5)点击右侧Maven项,重新加载依赖
如果有问题可以查询:Maven Central ,搜索:
spring-boot-starter-parent
如果是配置问题,考虑更换其他镜像方法,重新去设置中配置项目,具体参考其他文章,这里不详细说明。
<mirrors>
<mirror>
<id>alimaven</id>
<name>aliyun maven</name>
<url>http://maven.aliyun.com/nexus/content/groups/public/</url>
<mirrorOf>central</mirrorOf>
</mirror>
</mirrors>
(6)选中java文件夹-右键新建类
(7)打开MainApp,如下输入:
import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplication public class MainApp { public static void main(String[] args) { SpringApplication.run(MainApp.class); } }
(8)点击运行
(9)打开浏览器,输入:localhost:8080,如下显示
问题:
1. 端口出现占用,解决方法:
Springboot设置配置
(1)application.properties
# 修改端口号
server.port = 8081
在resources中新建文件application.properties
输入:“server.port = 8081”,修改端口号
(2)application.yml
或者使用这个修改端口号,会更好 ;可以右键重构-重命名application.properties为application.yml
Server: port: 8081
2. 编写Maven项目
2.1 新建登录项目
(1)在org.test右键新建controller.UserLogin项目
(2)输入
import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.GetMapping; import org.springframework.web.bind.annotation.RequestMapping; @Controller @RequestMapping("/user") public class UserLogin { @GetMapping("/login") public void login(){ System.out.println("进入了该控制器登陆的方法"); } }
(3)运行测试
在浏览器中输入:
在浏览器http://localhost:8081/user/login
控制台中输出:
2.2 传参
(1)添加依赖
dependency是一个依赖,dependencies是一个组可以存放多个依赖
<dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> <version>2.3.1.RELEASE</version> </dependency> <dependency> <groupId>org.projectlombok</groupId> <artifactId>lombok</artifactId> </dependency> </dependencies>
然后点击Maven,重新加载依赖
(2)新建pojo.Userlogindoto
(3)输入
import lombok.Data; @Data public class Userlogindto { private String tel; private String pwd; }
(4)回到UserLogin,测试传参
@Controller @RequestMapping("/user") public class UserLogin { @GetMapping("/login") public void login(Userlogindto user){ System.out.println("进入了该控制器登陆的方法"); System.out.println(user.toString()); } }
这里注意导入类,如果代码报红,可以把鼠标放在上面,根据操作导入类;
然后我们去浏览器,访问http://localhost:8081/user/login ,回车查看控制台:
再去浏览器传递参数测试,输入http://localhost:8081/user/login?tel=123456&&pwd=123456 ,控制台显示:
这里将前端的数据封装到了user里面。项目中target目录是java编译后的程序目录 。
@Controller的作用:
1、标识其为控制器
2、创建控制器对象(为了去调用)
@RequestMapping的作用和@GetMapping的作用:
建立请求与控制器的映射关系
两者之间的区别:
1、表单有get和post两种请求方式,而GetMapping只能处理get方式的请求,PostMapping只能处理post方式的请求,但是RequestMapping可以处理post、get两种方式的请求。
3.日志分析
日志来自于一个使用Spring Boot框架的Java应用程序,主要记录了应用程序启动和Tomcat服务器初始化的过程。
(1) org.test.MainApp : Starting MainApp on LAPTOP-EQSRET2K with PID 8692 (D:\java\target\classes started by xxx in D:\java)
意思:MainApp应用程序在名为LAPTOP-EQSRET2K的机器上启动,进程ID为8692。该应用程序的类文件位于D:\java\target\classes目录下,由用户xxx在D:\java目录下启动。
作用:提供了程序启动的基本信息,包括在哪台机器上启动、进程ID、程序的位置以及启动者。
(2) org.test.MainApp : No active profile set, falling back to default profiles: default
意思:没有设置活动的配置文件(profile),因此回退到默认的配置文件default。
作用:说明了Spring Boot的配置文件情况,帮助了解程序将使用哪些配置属性。
(3) o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 8081 (http)
意思:内嵌的Tomcat服务器已初始化,并配置为监听HTTP协议的8081端口。
作用:表明Tomcat服务器已经配置好并准备接收HTTP请求。
(4) o.apache.catalina.core.StandardService : Starting service [Tomcat]
意思:开始启动Tomcat服务。
作用:这是Tomcat服务启动过程中的一个步骤,表示Tomcat服务即将开始运行。
(5) org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.36]
意思:启动Servlet引擎,使用的Tomcat版本是9.0.36。
作用:表明Servlet引擎(即Tomcat的核心部分)正在启动,是处理Web请求的关键组件。(6) o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext
意思:正在初始化Spring嵌入式的Web应用程序上下文。
作用:这是Spring Boot应用启动过程中的一个重要步骤,表示Spring的Web应用程序上下文正在被创建和初始化。
(7) w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 606 ms
意思:根Web应用程序上下文初始化完成,耗时606毫秒。
作用:提供了Web应用程序上下文初始化的耗时信息,有助于性能调优和诊断。
(8) o.s.s.concurrent.ThreadPoolTaskExecutor : Initializing ExecutorService 'applicationTaskExecutor'
意思:正在初始化名为applicationTaskExecutor的线程池执行器。
作用:表示Spring Boot正在为应用程序配置一个线程池,用于异步任务执行。
(9) o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port(s): 8081 (http) with context path ''
意思:Tomcat服务器已在8081端口上启动,上下文路径为空。
作用:表明Tomcat服务器已经成功启动并监听在指定的端口上,准备接收HTTP请求。
(10) org.ntsc.MainApp : Started MainApp in 1.112 seconds (JVM running for 2.203)
意思:MainApp应用程序在1.112秒内启动完成,JVM已运行2.203秒。
作用:提供了应用程序启动的总耗时以及JVM的运行时间,有助于性能分析和问题排查。
(11) o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet'
意思:正在初始化Spring的DispatcherServlet,名为dispatcherServlet。
作用:DispatcherServlet是Spring MVC的核心组件,负责将HTTP请求分发给相应的处理器(Controller)。
(12) o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet'
意思:正在初始化名为dispatcherServlet的Servlet。
作用:这是DispatcherServlet初始化过程的直接反馈,表明Spring MVC的前端控制器正在被配置。
4. AI插件下载
打开设置-插件-这里使用通义灵码
5. 前后端连接
(1)前端
前端接口:
this.axios.post('/user/login',
{
'username': this.form.username,
'password': this.form.password
})
注意两点:
1、‘/user/login’
2、请求是post
onSubmit(EleFromRef) {
this.$refs[EleFromRef].validate((valid) => {
if (valid) {
console.log(this.form.password);
//前后端的参数名要一致!
this.axios.post('/user/login',
{
'username': this.form.username,
'password': this.form.password
})
.then((res) => { //res=>response
// console.log(res); // res=>{data: {code, data,msg}}
if (res.data.code === 200) {
this.$message.success(res.data.msg);
sessionStorage.setItem("user", JSON.stringify(res.data.data));
this.$store.dispatch("setUser", res.data.data);
this.$router.push("/home"); //编程式导航
} else {
this.$message.error(res.data.msg);
}
})
.catch(err => {
console.log(err);
this.$message.error('登录失败');
})
} else {
this.$message.error('请输入用户名或者密码');
}
});
},
main.js中修改配置信息:
Axios.defaults.baseURL = "http://localhost:8081/";
Vue.prototype.axios = Axios; // 方便再VUE实例中,通过this拿到axios对象
Vue.prototype.staticUrl = "http://localhost:8081/";
import Vue from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import Axios from "axios";
import store from "./store";
// 所有的import,都写在js文件的最上面;
// 配置axios:
Axios.defaults.baseURL = "http://localhost:8081/";
Vue.prototype.axios = Axios; // 方便再VUE实例中,通过this拿到axios对象
Vue.prototype.staticUrl = "http://localhost:8081/";
Vue.use(ElementUI); // this.$message.success('恭喜你,这是一条成功消息');
Vue.config.productionTip = false;
new Vue({
router,
store, // 注入store对象 => 在组建实例对象
render: (h) => h(App),
}).$mount("#app");
(2)后端
打开UserLogin.java
package org.ntsc.controller;
import org.ntsc.pojo.Userlogindto;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;
@Controller
@RequestMapping("/user")
@CrossOrigin(origins = "http://192.168.227.148:8080") //这里是你的前端地址,主要通过该地址实现跨域请求,
public void UserLogin {
@PostMapping("/login") //这里注意,如果前端用的post这里就是post;如果是get也就修改为@GetMapping;当然如果避免出错和修改麻烦,直接用@RequestMapping
public ResponseDto login(@RequestBody Userlogindto user){
String username = "admin";
String password= "123456";
if(username.equals(user.getUsername())&&password.equals(user.getPassword())){
System.out.println("登录成功");
}else{
System.out.println("登录失败");
}
}
}
这样点击登录后,控制台会显示
(3)登录成功
为了与前端代码相匹配,后端代码需要做一些修改,以便能够返回相应的数据给前端,并且确保前后端之间的数据交换是有效的。下面是对后端UserLogin类中的login方法的修改建议:
修改返回类型为某个自定义的响应类(例如ResponseEntity或者自定义的响应类),以便能够包含状态码、信息和数据。
根据验证结果,设置相应的状态码和信息,并返回给前端。
首先,定义一个简单的响应类ResponseDto(你可以根据需要自定义字段和构造函数):
public class ResponseDto {
private int code;
private String msg;
private Object data;
// 构造函数、getter 和 setter 省略...
}
然后,修改UserLogin类中的login方法如下:
@Controller
@RequestMapping("/user")
@CrossOrigin(origins = "http://192.168.227.148:8080")
public class UserLogin {
@PostMapping("/login")
@ResponseBody // 表明该方法的返回值直接写入HTTP响应体中
public ResponseDto login(@RequestBody Userlogindto user) {
String correctUsername = "admin";
String correctPassword = "123456";
if (correctUsername.equals(user.getUsername()) && correctPassword.equals(user.getPassword())) {
System.out.println("登录成功");
// 登录成功,返回成功信息和用户数据(如果有需要)
ResponseDto response = new ResponseDto();
response.setCode(200);
response.setMsg("登录成功");
// 假设你有一个User类来表示用户信息,并且你想将这些信息返回给前端
// User userInfo = new User(...);
// response.setData(userInfo);
return response;
} else {
System.out.println("登录失败");
// 登录失败,返回失败信息
ResponseDto response = new ResponseDto();
response.setCode(500); // 或者其他适当的错误码
response.setMsg("用户名或密码错误");
return response;
}
}
}
注意:使用了@ResponseBody注解来表明该方法的返回值应该被直接写入HTTP响应体中,而不是被视为视图名称。
可以根据需要自定义状态码和信息。
如果登录成功,并且想返回一些用户数据给前端,可以将数据设置在ResponseDto的data字段中。在上面的示例中,我注释掉了这部分代码,但你可以根据需要取消注释并填充用户数据。
这样后端代码就能够根据登录验证的结果返回相应的数据给前端了。