SpringBoot学习笔记-项目初始化

笔记内容转载自 AcWing 的 SpringBoot 框架课讲义,课程链接:AcWing SpringBoot 框架课。

CONTENTS

  • 1. 概念与项目介绍
  • 2. 创建SpringBoot项目后端
  • 3. 前后端不分离开发方式
  • 4. 前后端分离开发方式
  • 5. 创建Vue项目前端
  • 6. 前后端通信

1. 概念与项目介绍

本次开发的项目名称为 King of Bots,在本地采用 IDEA 开发,项目前后端分离,可以部署在不同的服务器上,前端使用 Vue 开发,后端使用 SpringBoot 开发。

用户通过客户端(Client)向服务器端(Server)发送一个 URL 请求,服务器端接收到请求后会向客户端返回一个 Web 页面(本质上是返回一个 HTML 字符串,浏览器会将这个字符串解析成网页)。

前后端分离是指客户端第一次访问项目时就 Web 服务器端获取到所有静态文件,然后每次给后端发送请求时后端只返回数据,然后由前端根据数据进行渲染(动态拼接字符串)页面。

MVC,全称为 Model-View-Controller(模型-视图-控制器),是一种软件架构模式,其目标是将软件的用户界面(即前台页面)和业务逻辑分离,使代码具有更高的可扩展性、可复用性、可维护性以及灵活性。以下是对 MVC 各部分的详细解释:

  • 模型(Model):模型是应用程序中用于处理应用程序数据逻辑的部分。通常模型对象负责在数据库中存取数据。模型就是业务流程/状态的处理以及业务规则的制定。
  • 视图(View):视图是应用程序中处理数据显示的部分。通常视图是依据模型数据创建的。视图(View)代表用户交互界面,对于 Web 应用来说,可以概括为 HTML 界面,但有可能为 XHTML、XML 和 Applet。
  • 控制器(Controller):控制器是应用程序中处理用户交互的部分。通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。控制可以理解为从用户接收请求,将模型与视图匹配在一起,共同完成用户的请求。

2. 创建SpringBoot项目后端

首先我们创建项目的主目录 king_of_bots,然后可以初始化一下 Git。

然后使用 IDEA 在 king_of_bots 目录下创建项目的后端,在新建项目的界面中可以在左侧看到 Spring Initializr,里面提供了一个官方网址:Spring Initializr,但是这个网站有时候可能不稳定连不上,如果连不上可以换成 https://start.aliyun.com,但是可能版本会稍微旧一点。

项目配置内容中的组(Group)名设置为 com.kob,工件(Artifact)名设置为 backend,即表示我们项目的后端,使用 JDK 1.8 的版本。点击下一步后选择 SpringBoot 版本为 2.7.X,如果用 SpringBoot 3 需要 Java 17,依赖选上 Web 中的 Spring Web 即可,然后可以再选上 Template Engines 中的 Thymeleaf(只是用于演示前后端不分离的写法)。最后点击创建即可。

第一次创建好项目后还需要一段时间安装相关的环境,src/main/java/com.kob.backend 中即可看到我们后端项目的入口文件 BackendApplication,运行后可以看到输出显示将服务启动到了本地的8080端口,这时我们访问 http://localhost:8080/,看到 Whitelabel Error Page 页面说明启动成功了。

3. 前后端不分离开发方式

我们之前说过客户端的一个 URL 请求一般就是对应后端的一个函数调用,我们在 com.kob.backend 包下新建一个 controller 包,用来存储我们所有的后端函数。

假设我们现在要创建一个对战页面,我们就在 controller 包中继续创建一个 pk 包,然后在该包下创建 IndexController.java 文件。如果需要将函数变成 URL 对应的函数需要加上 @Controller 注解,我们这个 Controller 的所有函数应该都在 http://localhost:8080/pk/ 链接下,因此我们可以加上 @RequestMapping 注解设置父目录:

package com.kob.backend.controller.pk;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
@RequestMapping("/pk/")
public class IndexController {
}

如果我们的函数想要返回一个页面,需要把页面创建在 /src/main/resources/templates 目录下,我们先在该目录下创建 pk 目录,然后进去创建一个 index.html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h1>Hello World!</h1>
</body>
</html>

我们每个函数都可以返回一个 HTML 文件的路径,这个路径从 templates 目录后开始写,对于每个函数都可以指定 @RequestMapping 注解,例如 @RequestMapping("index/") 就表示访问 http://localhost:8080/pk/index/ 会调用这个函数,我们实现不加任何子目录的链接返回 index.html

package com.kob.backend.controller.pk;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
@RequestMapping("/pk/")
public class IndexController {@RequestMapping("")public String index() {return "pk/index.html";}
}

现在我们重启一下项目,然后访问 http://localhost:8080/pk/ 即可看到我们的页面。

假设我们有一张图片 logo.png 存放在 resources 目录下的 static/image 目录中,那么我们可以在 index.html 中使用(注意路径从 static 目录后开始写):

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><div style="text-align: center"><img src="/image/logo.png" alt=""></div>
</body>
</html>

4. 前后端分离开发方式

如果是前后端分离的开发方式,那么后端就不再是返回一个 HTML 页面了,而是返回一些数据。

pk 包下创建一个 BotInfoController 类,表示返回 Bot 信息,这时我们需要用的是 @RestController 注解:

package com.kob.backend.controller.pk;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/pk/")
public class BotInfoController {@RequestMapping("getbotinfo/")public String getBotInfo() {return "Bot 1";}
}

现在访问链接 http://localhost:8080/pk/getbotinfo/ 即可看到网页显示的字符串信息。

resources 目录下可以看到一个 application.properties 文件,如果是用 Spring 的默认网址创建的项目,这个文件内容是空的,如果是用阿里云的网址创建项目那么这个文件会自带一些内容,其中有个 server.port=8080 表示项目启动的端口号,我们可以修改这个端口号,防止和 Vue 的默认端口冲突。现在我们的该文件是空的,因此直接加一行 server.port=3000 即可。

5. 创建Vue项目前端

我们的前端使用 Vue 在 VS Code 中开发,Vue 的安装配置以及基本教程可见:Web 学习笔记-Vue3(环境配置、概念、整体布局设计)。

我们通过 Vue UI 在项目根目录下创建 Vue 前端项目,我们先创建 Web 端名为 web,创建好后记得装上插件 vue-routervuex 以及依赖 bootstrapjquery。然后再创建 AcApp 端名为 acapp,AcApp 端只需要安装一个 vuex 插件即可。

使用 VS Code 打开 web 目录,先将 src/router/index.js 中的 createWebHashHistory 改成 createWebHistory,这样网页的链接就可以不用加上 #。然后我们删去没用的代码,将 src/views 以及 src/components 目录下的文件删去,App.vue 改成以下内容:

<template><div>Hello World!</div><router-view/>
</template><style>
</style>

然后将 src/router/index.js 改成以下内容:

import { createRouter, createWebHistory } from "vue-router";const routes = [];const router = createRouter({history: createWebHistory(),routes,
});export default router;

现在运行一下 Web 端代码(在 Vue UI 中的 Tasks 选项卡中)即可成功运行。

6. 前后端通信

我们在 BotInfoController 中返回一个 Map 对象的信息:

package com.kob.backend.controller.pk;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;import java.util.HashMap;
import java.util.Map;@RestController
@RequestMapping("/pk/")
public class BotInfoController {@RequestMapping("getbotinfo/")public Map<String, String> getBotInfo() {Map<String, String> bot = new HashMap<>();bot.put("name", "tiger");bot.put("rating", "1500");return bot;}
}

然后我们在前端 App.vue 中使用 Ajax 向这个链接发起请求,获得数据后显示出来:

<template><div><div>Bot 名字:{{ bot_name }}</div><div>Bot 战斗力:{{ bot_rating }}</div></div><router-view />
</template><script>
import $ from "jquery";
import { ref } from "vue";export default {name: "App",setup() {let bot_name = ref("");let bot_rating = ref("");$.ajax({url: "http://localhost:3000/pk/getbotinfo/",type: "GET",success: (resp) => {console.log(resp);},});return {bot_name,bot_rating,};},
};
</script><style></style>

这时候我们打开浏览器的控制台,应该会看到出现了跨域问题:Access to XMLHttpRequest at 'http://localhost:3000/pk/getbotinfo/' ......,这是因为我们的前端在8080端口,而后端在3000端口,因此两个域名不一样导致跨域问题。

在后端的根包 com.kob.backend 下创建一个 config 包,然后在这个包中创建一个 CorsConfig 类,内容如下:

package com.kob.backend.config;import org.springframework.context.annotation.Configuration;import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;@Configuration
public class CorsConfig implements Filter {@Overridepublic void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {HttpServletResponse response = (HttpServletResponse) res;HttpServletRequest request = (HttpServletRequest) req;String origin = request.getHeader("Origin");if(origin!=null) {response.setHeader("Access-Control-Allow-Origin", origin);}String headers = request.getHeader("Access-Control-Request-Headers");if(headers!=null) {response.setHeader("Access-Control-Allow-Headers", headers);response.setHeader("Access-Control-Expose-Headers", headers);}response.setHeader("Access-Control-Allow-Methods", "*");response.setHeader("Access-Control-Max-Age", "3600");response.setHeader("Access-Control-Allow-Credentials", "true");chain.doFilter(request, response);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}
}

此时重启一下后端再去网页的控制台查看即可看到返回的 resp 内容。

如果添加了以上代码无法解决跨域问题可以尝试改成以下代码:

package com.kob.backend.config;import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;@Configuration
public class CorsConfig{@Beanpublic CorsFilter corsFilter() {final UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();final CorsConfiguration corsConfiguration = new CorsConfiguration();/*是否允许请求带有验证信息*/corsConfiguration.setAllowCredentials(true);/*允许访问的客户端域名*/corsConfiguration.addAllowedOriginPattern("*");/*允许服务端访问的客户端请求头*/corsConfiguration.addAllowedHeader("*");/*允许访问的方法名,GET POST等*/corsConfiguration.addAllowedMethod("*");urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);return new CorsFilter(urlBasedCorsConfigurationSource);}
}

现在我们即可在前端接收数据并在网页中显示出来:

<template><div><div>Bot 名字:{{ bot_name }}</div><div>Bot 战斗力:{{ bot_rating }}</div></div><router-view />
</template><script>
import $ from "jquery";
import { ref } from "vue";export default {name: "App",setup() {let bot_name = ref("");let bot_rating = ref("");$.ajax({url: "http://localhost:3000/pk/getbotinfo/",type: "GET",success: (resp) => {bot_name.value = resp.name;bot_rating.value = resp.rating;},});return {bot_name,bot_rating,};},
};
</script><style></style>

最后我们再理一下运行流程,首先用户访问 http://localhost:8080/ 进入前端的 Web 页面,这时候浏览器就会将 Vue 的所有前端静态文件缓存下来,然后浏览器就会执行到 Ajax 请求的代码,向后端发送一个请求,后端根据请求的地址 http://localhost:3000/pk/getbotinfo/ 去查找 Controller 所匹配的路径,找到 getBotInfo() 方法后就会返回一个 Map 对象至前端,这个对象包含 namerating 数据,浏览器接收到数据后就会将前端页面的 bot_namebot_rating 更新成传过来的值。

我们在 web/src/assets 目录下创建 images 目录,弄一个背景图片放进去,然后在 App.vue 中添加背景:

<template>...
</template><script>...
</script><style>
body {background-image: url("@/assets/images/background.png");background-size: cover;
}
</style>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/140347.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

RSA加密、解密、签名、验签(验证签名)RSA算法原理

一、加密的原因 1.加密&#xff1a;是为了防止信息泄露&#xff1b; 2.签名&#xff1a;签名为了防止信息被篡改&#xff0c;保证数据完整性和发送方角色的可靠性和不可依赖性。 二、RSA加密简介 RSA加密是一种非对称加密。可在不直接传递密钥的情况下&#xff0c;完成解密&…

如何解决Windows电脑 Create folder error,Access is denied.

如何解决 Create folder error, Error: mkdir C:\Program Files\nodejs\21.1.0/: Access is denied. Waring: Name : http://npm.taobao.org/mirrors/node/v21.1.0/win-x64/node.exe Code : -2 Error : Create folder error, Error: mkdir C:\Program Files\nodejs\\21.1.0/…

【Vue原理解析】之模版编译

引言 Vue.js是一款流行的JavaScript框架&#xff0c;它采用了基于组件的开发模式&#xff0c;使得前端开发更加简单和高效。而Vue的核心功能之一就是模版解析&#xff0c;它负责将Vue组件中的模版代码转化为可执行的JavaScript代码。本文将深入探讨Vue模版解析的作用、核心源码…

【文末送书】如何在时间循环里最优决策?

欢迎关注博主 Mindtechnist 或加入【智能科技社区】一起学习和分享Linux、C、C、Python、Matlab&#xff0c;机器人运动控制、多机器人协作&#xff0c;智能优化算法&#xff0c;滤波估计、多传感器信息融合&#xff0c;机器学习&#xff0c;人工智能等相关领域的知识和技术。关…

OpenAI调查ChatGPT故障;向量搜索的优势与局限

&#x1f989; AI新闻 &#x1f680; OpenAI调查ChatGPT故障&#xff0c;发布新AI产品GPTs和GPT-4 Turbo 摘要&#xff1a;OpenAI的ChatGPT和其他服务出现故障&#xff0c;经过调查后发现是由于DDoS攻击导致的异常流量模式。OpenAI在首届开发者大会上发布了新的AI产品GPTs&am…

CSS3 2D、3D转换

一、CSS3 2D转换&#xff1a; CSS3转换可以对元素进行移动、缩放、转动、拉长或拉伸。 2D变换的方法&#xff1a;translate()、rolate()、scale()、skew()、matrix()。 <style> div { width:200px; height:100px; background-color:red; /* Rotate div */ tran…

Linux命令(120)之tcpdump

linux命令之tcpdump 1.tcpdump介绍 linux命令tcpdump是用来将网络中传送的数据包完全截获下来以进行相关分析&#xff0c;常用的分析工具是wireshark 2.tcpdump用法 tcpdump [参数] tcpdump参数 参数说明-i指定端口-n指定协议-t在输出的每一行不打印时间戳-s抓取数据包时&a…

酷柚易汛ERP - 发货地址管理操作指南

1、应用场景 对发货地址进行管理&#xff0c;使用【物流服务】时的自动获取发货地址。 2、主要操作 打开【资料】-【发货地址管理】新增发货地址。 可以对进行地址设置及管理&#xff0c;点击【新增】可添加新的发货地址信息地址简称方便使用者在选择发货地址时&#xff0c;…

Spring集成MyBatis(自定义类和xml配置文件两种形式)

将mybatis与spring进行整合&#xff0c;主要解决的问题就是讲SqlSessionFactory对象交由spring来管理&#xff0c;所以&#xff0c;该整合&#xff0c;只需要将SqlSessionFactory的对象生成器SqlSessionFactoryBean注册在spring容器中&#xff0c;再将其注入给Dao的实现类即可完…

Lambertian模型(完美漫反射)

这里使用相乘的方式组合光照色和纹理色。根据这个模型,面朝光源的区域光照强度高,纹理色也相应增强。面背光源的区域光照弱,纹理色也被抑制。这样通过光照和纹理的结合,可以合成出具有照明效果的面部颜色,而不仅仅是固定的纹理本身的颜色。相乘方式可以近似实现不同光照方向下面…

TCP怎么实现可靠传输

链接 1&#xff0c;TCP头部的校验和保证获取正确数据&#xff0c;防篡改&#xff1b; 2&#xff0c;序列号和ACK确认机制同于管理数据包&#xff0c;对接收到的数据包进行确认&#xff0c;对没有接收到的数据包进行重传&#xff1b; 3&#xff0c;重传机制&#xff0c;包括超…

MongoDB副本集配置和创建

副本集有三类角色&#xff1a;master(primary)&#xff0c;slave(secondary)&#xff0c;仲裁服务器。 primary是主&#xff0c;只有primary能写入&#xff0c;secondary无法插入数据&#xff0c;且需要声明是slave才能查看数据 一般生产搞三个服务器做一个master和两个slave&a…

树状数组:leetcode307 区域和检索

307. 区域和检索 - 数组可修改 给你一个数组 nums &#xff0c;请你完成两类查询。 其中一类查询要求 更新 数组 nums 下标对应的值另一类查询要求返回数组 nums 中索引 left 和索引 right 之间&#xff08; 包含 &#xff09;的nums元素的 和 &#xff0c;其中 left < ri…

成都优优聚美团代运营:打造高效电商运营的利器

一、引人注目的标题 在繁杂的电商市场中&#xff0c;成都优优聚美团代运营以其专业的服务&#xff0c;为商家提供了一站式的解决方案。那么&#xff0c;这个备受瞩目的代运营平台有何特别之处呢&#xff1f;今天&#xff0c;我们就来一探究竟。 二、平台背景与优势 成都优优聚…

前端如何把图片url地址https://url转成base64

前端如何把图片url地址https://url转成base64 一、直接上代码 一、直接上代码 async getImgImg() {let url await this.base64(this.From.imageData) }&#xff0c; base64(url) {return new Promise(resolve > {const image new Image()// 先设置图片跨域属性image.cros…

JL-03小型气象站气象环境在线监测设备自动上传并保存数据

JL-03小型气象站产品概述 小型气象站用于对风速、风向、雨量、空气温度、空气湿度、太阳辐射、光照强度、土壤温度、土壤湿度、蒸发量、大气压力等气象要素进行现场监测。既可以通过无线通讯将数据传送至云平台&#xff0c;又可以通过配套的数据采集通讯线与计算机进行连接&am…

C/C++内嵌简本语言-LUA

一、LUA简介 Lua [1] 是一个小巧的脚本语言。Lua脚本可以很容易的被C/C 代码调用&#xff0c;也可以反过来调用C/C的函数&#xff0c;这使得Lua在应用程序中可以被广泛应用。不仅仅作为扩展脚本&#xff0c;也可以作为普通的配置文件&#xff0c;代替XML,ini等文件格式&#…

1. 深度学习——激活函数

机器学习面试题汇总与解析——激活函数 本章讲解知识点 什么是激活函数&#xff1f; 为什么要使用激活函数&#xff1f; 详细讲解激活函数 本专栏适合于Python已经入门的学生或人士&#xff0c;有一定的编程基础。本专栏适合于算法工程师、机器学习、图像处理求职的学生或人…

一分钟秒懂人工智能对齐

&#x1f449;博__主&#x1f448;&#xff1a;米码收割机 &#x1f449;技__能&#x1f448;&#xff1a;C/Python语言 &#x1f449;公众号&#x1f448;&#xff1a;测试开发自动化【获取源码商业合作】 &#x1f449;荣__誉&#x1f448;&#xff1a;阿里云博客专家博主、5…

C语言的部分逆置

部分逆置 pta c语言&#xff1a; #include <stdio.h>void reverse(int arr[], int start, int end) {while (start < end) {int temp arr[start];arr[start] arr[end];arr[end] temp;start;end--;} }int main() {int n, m;scanf("%d%d", &n, &m…