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() {
}
}
随机推荐
- 时间工具类之“LocalDateTime方案转换地域性时差问题->本地时间 转 UTC时间
一.使用方法 1.这里有使用LocalDateTime,Date, 2.直接使用LocalDateTime来将输入时间转为UTC还是没有摸索到,看了下源码发现根据偏移量去处理的,但是没有测试成功所以换 ...
- Python 常用魔法方法(下)
Python 常用魔法方法(下) 回顾 魔法方法是 Python 内置方法, 不需要我们手动调用, 它存在的目的是给 解释器 调用的. 比如我们在写 "1 + 1 " 的时候, 这 ...
- 记录一次maven依赖冲突的解决
现象 项目依赖selenium-java的4.32版本,但是未发现org.openqa.selenium.devtools.DevTools类.如下所示: 问题排查 定位问题 第一反应肯定是依赖冲突了 ...
- AtCoder Beginner Contest 382-E
Problem 有无数包牌,每包有 \(N\) 张牌.在每一包牌中, 第 \(i\) 张牌是稀有牌,概率为 \(P_i\%\).每张牌是否稀有与其他牌是否稀有无关. 逐一打开包装,并获得每包中的所有卡 ...
- Java中的静态块（static{}）
静态块(static{}) (1) static关键字还有一个比较关键的作用,用来形成静态代码块(static{} 即static块 )以优化程序性能. (2) static块可以置于类中的任何地方, ...
- ArrayList与LinkedList性能比较
ArrayList 1 package com.lv.study.pm.first; 2 3 import java.util.ArrayList; 4 import java.util.Linked ...
- MybatisPlus实现插入或更新数据时自动生成时间戳
MybatisPlus实现插入或更新数据时,自动生成时间戳功能 数据库表对应字段的类型应该是 DateTime 或者 timestamp 我需要在插入或更新数据时,为create_time字段自动生成 ...
- 阿里微服务解决方案-Alibaba Cloud之服务提供方搭建（二）
一.新建服务提供方模块 1.1 右键父工程 New-> Module 1.2 选择 Maven项目,然后 Next 1.3 指定父工程,并且子模块以端口号结尾,方便调试 1.4 因为父工程已经添 ...
- 详细剖析｜袋鼠云数栈前端框架Antd 3.x 升级 4.x 的踩坑之路
袋鼠云数栈从2016年发布第⼀个版本开始,就始终坚持着以技术为核⼼.安全为底线.提效为⽬标.中台为战略的思想,坚定不移地⾛国产化信创路线,不断推进产品功能迭代.技术创新.服务细化和性能升级. 在数栈过 ...
- [CF1508D] Swap Pass
D - Swap Pass 先将所有\(a_i==i\)的点都直接去掉 考虑将\(i\)向\(a_i\)连边,那么就会形成一个个的环 考虑只有一个环的情况,那么我们任意固定一个点\(x\),一直交换\ ...