静态变量和静态函数访问的时候是用类名来访问
类里面的get和set是因为要在别的类中访问这个类的私有变量,因为私有变量只能在本类中直接使用
构造函数是说我们想在初始化的时候给实例赋值,构造函数可以写多个
set的作用就是修改,get的作用就是查询
IDEA环境配置
BackendApplication.java
package com.kob.backend;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class BackendApplication {
public static void main(String[] args) {
SpringApplication.run(BackendApplication.class, args);
}
}
运行BackendApplication.java
如果在网页中输入localhost:8080
或者127.0.0.1:8080
出现一下结果,则表明创建成功
springboot后端作用:
用来实现一个函数,每一个链接对应一个函数,每个连接对应的函数负责给用户返回一个页面,函数一般写到controller里面
函数可以写到任意地方,可以在任意地方写一个controller,只要加一个controller的注解他就可以做映射
controller这个包用来存储所有的后端函数
前后端不分离的写法(从后端返回一个html页面)
依赖项选择 Template Enginess
下的Thymeleaf
IndexController.java
package com.kob.backend.controller.pk;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
//如果想把这个函数变成一个链接对应的函数的话,需要加上一个注解叫controller
//我们这一个类里面所有的连接都是在pk目录下,每一个模块的链接应该都在某一个对应的目录下,pk模块应该都在./pk/里面
//父目录用RequestMapping
@Controller
@RequestMapping("/pk/")
public class IndexController {
//里面对应的函数,比如我们想返回一个页面,我们需要先把这个页面创建出来
//这个页面需要创建在resources的templates里面
//每一个链接都要返回一个html页面,现在让我们的pk的index返回我们的index.html
@RequestMapping("index/")
public String index(){
//我们这里要写的是在templates里边,我们的index目录的一个路径
return "pk/index.html";
}
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Hello World</h1>
<div style="text-align: center">
<!-- 注意写路径的时候是要从static后面去写-->
<img src="/image/img.png" alt="">
</div>
</body>
</html>
前后端分离的写法(后端不再返回一个html页面了,而是返回一些数据)
BotInfoController.java
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.LinkedList;
import java.util.List;
import java.util.Map;
//如果想返回数据的话,这里就要用RestController
//我们这一个类里面所有的链接都是在pk目录下,每一个模块的链接应该都在某一个对应的目录下,pk模块应该都在/pk/里面
//父目录用RequestMapping,加上一个映射
@RestController
@RequestMapping("/pk/")
public class BotInfoController {
//前端链接对应的就是一个函数名http://localhost:8080/pk/getbotinfo/,链接对应访问那个函数,它是通过RestController一层一层找出来的
@RequestMapping("getbotinfo/")
//想返回一个字符串
// public String getBotInfo(){
// return "hhhhh";
// }
//返回一个链表
// public List<String> getBotInfo(){
// List<String> list=new LinkedList<>();
// list.add("sword");
// list.add("tiger");
// list.add("apple");
// return list;
// }
//返回一个字典
// public Map<String,String> getBotInfo(){
// Map<String,String> map=new HashMap<>();
// map.put("name","tiger");
// map.put("rating","1500");
// return map;
// }
//嵌套
public List<Map<String,String>> getBotInfo(){
List<Map<String,String>> list=new LinkedList<>();
Map<String,String> bot1=new HashMap<>();
bot1.put("name","tiger");
bot1.put("rating","1500");
Map<String,String> bot2=new HashMap<>();
bot2.put("name","apple");
bot2.put("rating","1800");
list.add(bot1);
list.add(bot2);
return list;
}
}
idea默认端口是8080,vue的端口也是8080,会产生冲突,所以将idea的端口改成3000
application.properties
server.port=3000
实现前后端通信,在前端访问getBotInfo()
App.vue
<template>
<div>
<div>Bot昵称:{{ bot_name }}</div>
<div>Bot战力:{{ bot_rating }}</div>
</div>
<router-view/>
</template>
<script>
import $ from 'jquery';
import { ref } from 'vue';
export default{
name:"App",
// setup是整个函数的入口,想在当前页面去调用一下http://localhost:3000/pk/getbotinfo/这个链接
// 然后返回这两个值,将他显示出来,用ajax来取,
// 需要定义两个变量,第一个是昵称,第二个是战力,需要先import一个ref
setup:()=>{
let bot_name=ref("");
let bot_rating=ref("");
//访问后端链接用ajax来写
//请求类型一共只有两种,一个是get是获取数据,一个是post是创建数据
//其他请求,delete是删除一个数据,put是修改一个数据
$.ajax({
url:"http://localhost:3000/pk/getbotinfo/",
type:"get",
success:resp=>{
// console.log(resp);输出的值{name: 'tiger', rating: '1500'}
bot_name.value=resp.name;
bot_rating.value=resp.rating;
}
})
return{
//return的值就可以在template里调用了
bot_name,
bot_rating
}
}
}
</script>
<style>
/* @/表示我们当前目录根目录 */
body{
background-image: url("@/assets/background.png");
/* 百分百填充 */
background-size: cover;
}
</style>
删除router/index.js
中多余的部分
import { createRouter, createWebHistory } from 'vue-router'
const routes = [
]
const router = createRouter({
history: createWebHistory(),
routes
})
export default router
棒棒的呀~