主要介绍了如何创建一个Springboot项目以及运行Springboot项目访问内部的html页面!!!
文章目录
前言
配置git环境
创建项目
编辑
在SpringBoot中解决跨域问题
配置Vue
安装Nodejs
安装@vue/cli
启动vue自带的图形化项目管理界面
总结
前言
主要介绍了如何创建一个Springboot项目以及运行Springboot项目访问内部的html页面!!!
提示:以下是本篇文章正文内容,下面案例可供参考
配置git环境
1.安装Git Bash
git安装教程
2.进入家目录生成秘钥:执行命令ssh-keygen
3.将.ssh/中的id_rsa.pub的内容复制到gitee上
一些基本命令,在gitee上创建项目后出现!!!
创建项目
创建项目后端
https://start.spring.io/加载慢的话,可以换成:https://start.aliyun.com
(注:最新版的idea抛弃了jdk8,URL换成上面的阿里云的idea的java选项就有jdk8)
此时项目就创建完毕了。
项目的启动类
当我们访问初始页面只需要在浏览器中输入
http://localhost:8080/
我们可以采取一下方法来访问一个html页面。
我们在controller包下面创建一个控制器类。
package org.example.backend.controller.pk;import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;@Controller
@RequestMapping("/pk")
public class IndexController {@RequestMapping(value = "/index")public String index(){return "pk/index";}
}
@Controller
- 用于标识控制器类,负责处理用户请求并返回视图。
- 方法通常使用
@GetMapping
,@PostMapping
等注解来映射HTTP请求到具体的处理方法。 - 方法返回一个字符串,代表视图名,Spring Boot会自动查找匹配的模板文件并渲染。
注:注解一定要用@Controller,如果用@RestController那么方法返回的是json字符串,不会解析视图!!页面报404说明路径错误!!
application.properties文件中一定要配置这两个值,自动给函数的返回值加上项目的上下文路径,一个是对所有的页面加上后缀名.html。
spring.thymeleaf.prefix=classpath:/templates/spring.thymeleaf.suffix=.html
当我们要在项目中添加图片,往往是在图片放在static文件夹下面
<html>
<body>
<div style="text-align: center"><img src="/images/img.png">
</div>
</body>
</html>
当我们想直接返回页面信息的时候我们需要采用@RestController注解
- 用于标识控制器类,负责处理用户请求并直接返回数据对象。
- 方法通常使用
@GetMapping
,@PostMapping
等注解来映射HTTP请求到具体的处理方法。 - 方法返回一个数据对象,Spring Boot会将该对象序列化为JSON或XML并返回给客户端。
package org.example.backend.controller.pk;import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;@RestController
@RequestMapping("/pk")
public class BotInfoController {@RequestMapping("/getbotinfo")public String getBotInfo(){return "hahahahah";}
}
方法也可以返回列表。
@RequestMapping("/getbotinfo")public List<String> getBotInfo(){ArrayList<String> list = new ArrayList<>();list.add("Bot");list.add("tiger");list.add("cat");return list;}
当然也可以返回map集合、对象等等!!!
如何想修改项目的端口号,可以在application.properties中修改server.port
server.port=3000
此时项目的端口号就修改为了3000
在SpringBoot中解决跨域问题
添加配置类:CorsConfig
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 {@Overridepublic 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);}@Overridepublic void init(FilterConfig filterConfig) {}@Overridepublic void destroy() {}
}
配置Vue
安装Nodejs
安装地址
(注:下载LTS版本,长期支持版)
安装@vue/cli
打开Git Bash,执行:
npm i -g @vue/cli
如果执行后面的操作有bug,可能是最新版有问题,可以尝试安装早期版本,比如:npm i -g @vue/cli@4
启动vue自带的图形化项目管理界面
vue ui
常见问题1:Windows上运行vue,提示无法加载文件,表示用户权限不足。
解决方案:用管理员身份打开终端,输入set-ExecutionPolicy RemoteSigned,然后输入y
之后就可以在图形化工具里面创建vue项目。
总结
主要介绍了如何创建一个Springboot项目以及运行Springboot项目访问内部的html页面!!!