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

随机推荐

  1. IDEA 项目目录如何显示target、idea文件夹(获取class文件)

    网上的解决方法大致有两种,如下: 方案一 勾选 Show Excluded Files 方案二 找到需要显示的文件夹并将它删除,下图以target文件夹为例 打开Settings -> Edit ...

  2. LangChain4j如何自定义文档转换器实现数据清洗?

    LangChain4j 提供了 3 种 RAG(Retrieval-Augmented Generation,检索增强生成)实现,我们通常在原生或高级的 RAG 实现中,要对数据进行清洗,也就是将外接 ...

  3. C# 基础问题汇集

    (1)new List并不是null,可以正常的被遍历和AddRange class Program { public static void Main() { //var t = new test( ...

  4. TGCTF-misc全解

    TGCTF-misc方向wp next is the end 下载压缩包,拉出第一层文件夹,直接嵌套读取内容找flag import os def is_last_level_dir(director ...

  5. openssl头文件出现DEPRECATEDIN_1_1_0导致引入头文件时程序无法编译

    我使用的是unbuntu20.04版本中,通过apt安装的openssl,发现openssl中的多个库文件中会出现类似'DEPRECATEDIN_1_1_0(unsigned char *ASN1_S ...

  6. Kubernetes配置管理

    Kubernetes配置管理 ConfigMap 对于应用的可变配置在 Kubernetes 中是通过一个 ConfigMap 资源对象来实现的,许多应用经常会有从配置文件.命令行参数或者环境变量中读 ...

  7. ServiceMesh实验室——00之实验室搭建

    实验室搭建 Docker&&K8S 环境,这一篇(https://github.com/AliyunContainerService/k8s-for-docker-desktop)就够 ...

  8. Visual Studio 2022 中的 EF Core 反向工程和模型可视化扩展插件

    前言 在 EF 6 及其之前的版本数据库优先模式(Database First)是可以在 Visual Studio 中通过可视化界面来操作完成的,但是到了 EF Core 之后就不再支持了(因为模型 ...

  9. java基础之运算符的优先级

    运算符的优先级(从高到低) 优先 描述 运算符 1 括号 ().[] 2 正负号 +.- 3 自增自减,非 ++.--.! 4 乘除,取余 *./.% 5 加减 +.- 6 移位运算 << ...

  10. Docker + CentOS 部署 Zookeeper 集群 + Kubernetes Operator 自动化运维方案

    环境说明 主机 IP 主机名 节点角色 数据目录 Kubernetes 节点标签 192.168.10.100 zk1 Master /opt/zookeeper/data zk-cluster=tr ...