SpringBoot0x00
Git版本控制
点击查看代码
git status//查看all文件
git add .//加入all文件
git commit -m "xxxxx"//命名本次迭代
git push
本机端口:
127.0.0.1:8080 / localhost:8080
函数访问路径 : 通过@RequestMapping寻址
概念:
前后端(不分离) : 向后端发送链接, 后端解析链接(识别controller中函数)
前后端(分离) : 将返回数据, 而非页面
不分离(SpringBoot实现函数链接对应)
函数注解通过: @Controller 进行映射, 创建副目录如: @RequestMapping("/pk/")
函数返回页面需在resources创建
点击查看代码
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("index/")
public String index() {
return "pk/index.html";
}
}
即controller子目录下pk/index/ 也就是index()函数即返回字符串中html页面路径
status创建css, js, image
index对应修改图片
点击查看代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="text-align: center"> <!--设置居中-->
<img src="/image/Basic0.jpeg" alt=""> <!--image路径从image开始-->
</div>
</body>
</html>
分离 : application.properties中sever.port=改掉(防止前后端端口冲突)
相应为@RestController, @RequestMapping(路径)
点击查看代码
@RestController
@RequestMapping("/pk/")
public class BotInfoController {
@RequestMapping("getbotinfo/")
public String getBotInfo() {
return "hhhh";
}
}
0x0乱入: 列表, 字典, 以及它们的嵌套使用
点击查看代码
@RestController
@RequestMapping("/pk/")
public class BotInfoController {
@RequestMapping("getbotinfo/")
public List<String> getBotInfo() {
List<String> list = new LinkedList<>();
list.add("sword");
list.add("tiger");
list.add("apple");
return list;
}
}
点击查看代码
@RestController
@RequestMapping("/pk/")
public class BotInfoController {
@RequestMapping("getbotinfo/")
public Map<String, String> getBotInfo() {
Map<String, String> map = new HashMap<>();
map.put("name", "tiger");
map.put("rating", "1500");
return map;
}
点击查看代码
@RestController
@RequestMapping("/pk/")
public class BotInfoController {
@RequestMapping("getbotinfo/")
public List<Map<String, String>> getBotInfo() {
List<Map<String, String>> list = new LinkedList<>();
Map<String, String> bot1 = new HashMap<>();
bot1.put("name", "tiger1");
bot1.put("rating", "1500");
Map<String, String> bot2 = new HashMap<>();
bot2.put("name", "tiger2");
bot2.put("rating", "1800");
list.add(bot1);
list.add(bot2);
return list;
}
}
Vue : powershell
点击查看代码
vue ui//启动Vue
ctrl+c//推出Vue
前端Vue访问函数
Vue浏览器执行Code, 右键查看All源码app.js中 : 用户下载code依次执行向服务器请求调用@RequestMapping路径下函数
app.vue
点击查看代码
<template>
<div>
<div>Botname: {{ bot_name }}</div><!--划分区域, 用双括号引入-->
<div>Botpower: {{ bot_rating }}</div>
</div>
<router-view/>
</template>
<script>
import $ from 'jquery';
import { ref } from 'vue';//Vue定义变量定义ref
export default {
name: "App",//对象
setup: () => { //函数入口
let bot_name = ref("");
let bot_rating = ref("");
$.ajax({ //ajax取后端内容
url:"http://127.0.0.1:3000/pk/getbotinfo/", //函数地址
type : "get",//get获取数据, post创建数据
success : resp => {//Vue定义变量
bot_name.value = resp.name;
bot_rating.value = resp.rating
}
});
return {
bot_name,
bot_rating
}
}
}
</script>
<style>
body {
background-image: url("@/assets/Basic1.jpg");
background-size: cover;
/* 设置背景并100%填充 */
}
</style>
解决域不同问题
根目录添加参数
点击查看代码
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 {
@Override
public 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);
}
@Override
public void init(FilterConfig filterConfig) {
}
@Override
public void destroy() {
}
}
随机推荐
- 【TensorRT 10 C++ inference example】最新版本TensorRT c++ api的推理部署教程
TensorRT是英伟达推出的部署框架,我的工作经常需要封装我的AI算法和模型给到桌面软件使用,那么tensorRT对我来说就是不二之选.TensorRT和cuda深度绑定,在c++版本的推理教程 ...
- WPF在Visual studio中打包，发布注意事项
右键项目,发布的时候,需要选择独立,否则依赖库的话,有可能客户端没有.net core或.net framework,那么就会报错,提醒对方下载. 今天发现,VS 2022,直接Debug运行后,Re ...
- C#之线程基础
创建线程 using System; using System.Threading; using System.Threading.Tasks; namespace threadDemo { clas ...
- 玩转代码：深入GitHub，高效管理我们的“shou学”平台源代码
玩转代码:深入GitHub,高效管理我们的"shou学"平台源代码 在当今快节奏的开发世界中,有效地管理代码不仅仅是一种良好实践,更是一种必需.无论您是独立开发者还是大型团队的一员 ...
- 树形DP和状压DP
P1352 没有上司的舞会 作为一道经典例题,几乎学树形 \(DP\) 就得先做它. 设 \(f[i][j]\) ,当 \(j\) 为 \(0\) 时表示第 \(i\) 个人不来,当 \(j\) 为 ...
- 使用 Leangoo 看板工具高效管理直播筹备活动
在组织一场成功的直播活动中,筹备工作通常涉及多个环节,包括选题策划.嘉宾邀请.物料准备.技术支持等.为了更高效地管理这些活动,我们选择使用 Leangoo 看板工具 来规划和跟踪直播的各项筹备任务.以 ...
- 【2020.11.20提高组模拟】祖先(ancestor) 题解
[2020.11.20提高组模拟]祖先(ancestor) 题解 题目描述 对于每个\(i\),它都要往前面拜访它的祖先.对于\(i\)之前的编号为\(j\)的节点,如果要拜访的话需要满足对于\(\f ...
- Hyperledger Fabric中的系统链码——VSCC, ESCC, LSCC, ESCC, QSCC
系统链码也与用户链码相同.这些链码内置于peer节点中. Hyperledger Fabric 中提供了以下系统链代码: LSCC ESCC VSCC CSCC QSCC 1.LSCC: Lifecy ...
- GDAL 2.X升级3.X需要注意的问题总结
1 引言 最近终于将使用的GDAL 2.X升级到成了3.X版本,总结一下遇到的各种问题. 2 详论 2.1 数据路径 GDAL 3.X以后深度依赖PROJ库,以前只是可选构建项,现在已经是必须构建项了 ...
- 数栈产品分享：基于StreamWorks构建实时大数据处理平台
数栈是云原生-站式数据中台PaaS,我们在github和gitee上有一个有趣的开源项目:FlinkX,FlinkX是一个基于Flink的批流统一的数据同步工具,既可以采集静态的数据,也可以采集实时变 ...