网站开发公司所需投入资源,在线优化网站建设,苏州园区网站建设,c2c的网站笔记内容转载自 AcWing 的 SpringBoot 框架课讲义#xff0c;课程链接#xff1a;AcWing SpringBoot 框架课。 CONTENTS 1. 概念与项目介绍2. 创建SpringBoot项目后端3. 前后端不分离开发方式4. 前后端分离开发方式5. 创建Vue项目前端6. 前后端通信 1. 概念与项目介绍
本次开…笔记内容转载自 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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodyh1Hello 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 langen
headmeta charsetUTF-8titleTitle/title
/head
bodydiv styletext-align: centerimg src/image/logo.png alt/div
/body
/html4. 前后端分离开发方式
如果是前后端分离的开发方式那么后端就不再是返回一个 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.port8080 表示项目启动的端口号我们可以修改这个端口号防止和 Vue 的默认端口冲突。现在我们的该文件是空的因此直接加一行 server.port3000 即可。
5. 创建Vue项目前端
我们的前端使用 Vue 在 VS Code 中开发Vue 的安装配置以及基本教程可见Web 学习笔记-Vue3环境配置、概念、整体布局设计。
我们通过 Vue UI 在项目根目录下创建 Vue 前端项目我们先创建 Web 端名为 web创建好后记得装上插件 vue-router 和 vuex 以及依赖 bootstrap 和 jquery。然后再创建 AcApp 端名为 acappAcApp 端只需要安装一个 vuex 插件即可。
使用 VS Code 打开 web 目录先将 src/router/index.js 中的 createWebHashHistory 改成 createWebHistory这样网页的链接就可以不用加上 #。然后我们删去没用的代码将 src/views 以及 src/components 目录下的文件删去App.vue 改成以下内容
templatedivHello World!/divrouter-view/
/templatestyle
/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 MapString, String getBotInfo() {MapString, String bot new HashMap();bot.put(name, tiger);bot.put(rating, 1500);return bot;}
}然后我们在前端 App.vue 中使用 Ajax 向这个链接发起请求获得数据后显示出来
templatedivdivBot 名字{{ bot_name }}/divdivBot 战斗力{{ bot_rating }}/div/divrouter-view /
/templatescript
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,};},
};
/scriptstyle/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);}
}现在我们即可在前端接收数据并在网页中显示出来
templatedivdivBot 名字{{ bot_name }}/divdivBot 战斗力{{ bot_rating }}/div/divrouter-view /
/templatescript
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,};},
};
/scriptstyle/style最后我们再理一下运行流程首先用户访问 http://localhost:8080/ 进入前端的 Web 页面这时候浏览器就会将 Vue 的所有前端静态文件缓存下来然后浏览器就会执行到 Ajax 请求的代码向后端发送一个请求后端根据请求的地址 http://localhost:3000/pk/getbotinfo/ 去查找 Controller 所匹配的路径找到 getBotInfo() 方法后就会返回一个 Map 对象至前端这个对象包含 name 和 rating 数据浏览器接收到数据后就会将前端页面的 bot_name 和 bot_rating 更新成传过来的值。
我们在 web/src/assets 目录下创建 images 目录弄一个背景图片放进去然后在 App.vue 中添加背景
template...
/templatescript...
/scriptstyle
body {background-image: url(/assets/images/background.png);background-size: cover;
}
/style
