【Spring Boot教程:从入门到精通】掌握Spring Boot开发技巧与窍门(三)-配置git环境和项目创建

主要介绍了如何创建一个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页面!!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/50098.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

数组常见的实例方法

这里写目录标题 一级目录二级目录三级目录 一、数组中map方法&#xff0c;迭代数组1.作用&#xff1a;2.语法&#xff1a;3.注意: 二、遍历数组foreach方法三、筛选数组filter1.语法2.主要使用场景3.例子 四、累计器reduce五、数组中join方法1.作用&#xff1a;2.语法:3.参数 六…

谷粒商城实战笔记-63-商品服务-API-品牌管理-OSS获取服务端签名

文章目录 一&#xff0c;创建第三方服务模块thrid-party1&#xff0c;创建一个名为gulimall-third-party的模块2&#xff0c;nacos上创建third-party命名空间&#xff0c;用来管理这个服务的所有配置3&#xff0c;配置pom文件4&#xff0c;配置文件5&#xff0c;单元测试6&…

oracle登录报“ORA-27101: shared memory realm does not exist”

oracle登录报“ORA-27101: shared memory realm does not exist” 问题&#xff1a; 1、使用ip:1521/服务名方式连库报错" ORA-27101: shared memory realm does not exist Linux-x86_64 Error: 2: No such file or directory" 2、sqlplus XX/密码 可以登录数据库 …

Gateway网关分布式微服务认证鉴权

文章目录 学习链接微服务认证方案 学习链接 实战干货&#xff01;Spring Cloud Gateway 整合 OAuth2.0 实现分布式统一认证授权&#xff01; spring-cloud-gateway-oauth2的github代码地址 - 已克隆到gitee 微服务权限终极解决方案&#xff0c;Spring Cloud Gateway Oauth2…

【Apache Doris】数据副本问题排查指南

【Apache Doris】数据副本问题排查指南 一、问题现象二、问题定位三、问题处理 本文主要分享Doris中数据副本异常的问题现象、问题定位以及如何处理此类问题。 一、问题现象 问题日志 查询报错 Failed to initialize storage reader, tablet{tablet_id}.xxx.xxx问题说明 查…

c++ 内存管理(newdeletedelete[])

因为在c里面新增了类&#xff0c;所以我们在有时候会用malloc来创建类&#xff0c;但是这种创建只是单纯的开辟空间&#xff0c;没有什么默认构造的。同时free也是free的表面&#xff0c;如果类里面带有指针指向堆区的成员变量就会free不干净。 所以我们c增加了new delete和de…

HTML常用的转义字符——怎么在网页中写“<div></div>”?

一、问题描述 如果需要在网页中写“<div></div>”怎么办呢&#xff1f; 使用转义字符 如果直接写“<div></div>”&#xff0c;编译器会把它翻译为块&#xff0c;类似的&#xff0c;其他的标签也是如此&#xff0c;所以如果要在网页中写类似于“<div…

LeetCode_122(买卖股票的最佳时机)

public int maxProfit(int[] prices) {int ans 0;//int prices[] {7,1,5,3,6,4};for(int i1;i<prices.length;i){ansMath.max(0,prices[i]-prices[i-1]);}return ans;}

Unity DOTS中的world

Unity DOTS中的world 注册销毁逻辑自定义创建逻辑创建world创建system group插入player loopReference DOTS中&#xff0c;world是一组entity的集合。entity的ID在其自身的世界中是唯一的。每个world都拥有一个EntityManager&#xff0c;可以用它来创建、销毁和修改world中的en…

[Spring] MyBatis操作数据库(基础)

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏: &#x1f9ca; Java基本语法(97平均质量分)https://blog.csdn.net/2301_80050796/category_12615970.html?spm1001.2014.3001.5482 &#x1f355; Collection与…

HTML 跨平台使用同一套 emoji (twemoji) + 实现 emoji 选择

背景: 网页需要显示和发送带 emoji 表情的文本消息(为方便理解, 以 whatsapp 为例, 实际开发中待定) 同时, 要求不同系统打开网页时, 看到的都是同一套 emoji , 避免同一个 emoji 在不同电脑上显示不同 概述: 引入 twemoji 库文件把网页版 wa 的 emoji 全部复制下来新增 emo…

Python酷库之旅-第三方库Pandas(045)

目录 一、用法精讲 156、pandas.Series.count方法 156-1、语法 156-2、参数 156-3、功能 156-4、返回值 156-5、说明 156-6、用法 156-6-1、数据准备 156-6-2、代码示例 156-6-3、结果输出 157、pandas.Series.cov方法 157-1、语法 157-2、参数 157-3、功能 15…

Spring Boot 集成 Kafka

Spring Boot 与 Kafka 集成是实现高效消息传递和数据流处理的常见方式。Spring Boot 提供了简化 Kafka 配置和使用的功能&#xff0c;使得集成过程变得更加直观和高效。以下是 Spring Boot 集成 Kafka 的详细步骤&#xff0c;包括配置、生产者和消费者的实现以及一些高级特性。…

docker配置上网代理获取镜像

一、添docker子配置档设置 1、创建目录 mkdir /etc/systemd/system/docker.service.d 2、创建http-proxy.conf文件,增加以下内容 cat > /etc/systemd/system/docker.service.d/http-proxy.conf <<EOF [Service] Environment“HTTP_PROXYhttp://192.168.0.2:8118…

分布式系统常见软件架构模式

常见的分布式软件架构 Peer-to-Peer (P2P) PatternAPI Gateway PatternPub-Sub (Publish-Subscribe)Request-Response PatternEvent Sourcing PatternETL (Extract, Transform, Load) PatternBatching PatternStreaming Processing PatternOrchestration Pattern总结 先上个图&…

.h264 .h265 压缩率的直观感受

1.资源文件 https://download.csdn.net/download/twicave/89579327 上面是.264 .265和原始的YUV420文件&#xff0c;各自的大小。 2.转换工具&#xff1a; 2.1 .h264 .h265互转 可以使用ffmpeg工具&#xff1a;Builds - CODEX FFMPEG gyan.dev 命令行参数&#xff1a; …

liteos定时器回调时间过长造成死机问题解决思路

项目需求 原代码是稳定的&#xff0c;现我实现EMQ平台断开连接的时候&#xff0c;把HSL的模拟点位数据采集到网关&#xff0c;然后存入Flash&#xff0c;当EMQ平台连接的时候&#xff0c;把Flash里面的点位数据放在消息队列里面&#xff0c;不影响实时采集。 核心1&#xff1a…

Springboot实现缓存组件(ctgcache、redis)配置动态切换

目录 一、需求背景 二、实现缓存组件的动态切换 1.第一步&#xff1a;配置文件新增切换开关 2.第二步&#xff1a;创建ctgcache 缓存条件类 3.第三步&#xff1a;创建redis 缓存条件类 4.第四步&#xff1a;创建缓存切换配置类 5.第五步&#xff1a;创建缓存服务接口 6.…

godot新建项目及设置外部编辑器为vscode

一、新建项目 初次打开界面如下所示&#xff0c;点击取消按钮先关闭掉默认弹出的框 点击①新建弹出中间的弹窗②中填入项目的名称 ③中设置项目的存储路径&#xff0c;点击箭头所指浏览按钮&#xff0c;会弹出如下所示窗口 根据图中所示可以选择或新建自己的游戏存储路径&…

鸿蒙(HarmonyOS)自定义Dialog实现时间选择控件

一、操作环境 操作系统: Windows 11 专业版、IDE:DevEco Studio 3.1.1 Release、SDK:HarmonyOS 3.1.0&#xff08;API 9&#xff09; 二、效果图 三、代码 SelectedDateDialog.ets文件/*** 时间选择*/ CustomDialog export struct SelectedDateDialog {State selectedDate:…