OVSolitario-io

导航

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() {
    }
}

posted on 2025-04-27 14:27  TBeauty  阅读(8)  评论(0)    收藏  举报