20210226_一个简单的小网页(内网穿透)
一个简单的小网页(内网穿透)
今天是元宵节,给异地的朋友做一个小网页,让她开心一下下(虽然是迟到的礼物),哈哈哈哈哈哈哈哈啊哈哈哈
创建项目
1、添加初始依赖
2、设置热部署Thymeleaf(可略过)
2.1 配置application.properties
# 设置热部署
spring.thymeleaf.cache = false
2.2 添加依赖
<!-- 设置热部署 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-devtools</artifactId>
<optional>true</optional>
</dependency>
2.3 修改idea配置
file> settings> compiler==> build project automatically
2.4 修改registry
help> find action>registry ==> 勾选
3、导入资源
3.1 导入静态资源
3.2 创建MainController
@Controller
public class MainController {
@RequestMapping("/love")
public String love(){
return "love.html";
}
3.3 在页面中引入CSS与JS
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>love</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="../static/css/all.min.css">
</head>
<body>
<!-- 引入js -->
<script src="../static/js/all.min.js"></script>
<script src="../static/js/jQuery.js"></script>
</body>
</html>
3.4 页面简单理解
<div class="flowtime">
<div class="ft-section">
<!-- 一张图片-->
<div class="ft-page">
<p>dflalalal</p>
</div>
<!-- 一张图片-->
<div class="ft-page">
<p>xiao</p>
</div>
<!-- 一张图片-->
<div class="ft-page">
<p>mei</p>
</div>
</div>
</div>
静态资源放行 ,配置端口
#配置静态资源
spring.mvc.static-path-pattern=/static/**
server.port=80
访问项目
3.5 导入页面
div说明
预览
3.6 修改图片
4、添加BGM
4.1 修改love.html
<audio src="/upload/wecanstop.mp3" autoplay="autoplay"></audio>
4.2 添加config
@Configuration
public class SpringMVCConfig implements WebMvcConfigurer {
@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
registry.addResourceHandler("/upload/**").addResourceLocations("file:E:/project/javaProject/mylove/src/main/resources/static/music/");
}
}
音频可以直接使用 http://localhost/upload/wecanstop.mp3 访问
使用SakuraFRP内网穿透
- 创建隧道
查看隧道列表的节点
- 添加映射
记录类型为 cname
记录值为 隧道列表的节点
- 下载启动器并安装启动
- 访问
注意: dns解析可能需要十分钟左右才能访问到
- 修改的最终页面
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>love</title>
<!-- 引入css样式 -->
<link rel="stylesheet" href="../static/css/all.min.css">
<audio src="/upload/wecanstop.mp3" autoplay="autoplay"></audio>
</head>
<body>
<div class="flowtime">
<div class="ft-section section-1" data-id="section-1">
<div id="/section-1/page-1" class="ft-page page-1" data-id="page-1">
<p class="text1"><span id="text-75" contenteditable="true">最聪明最美丽最温柔最善良最贤惠最可❤</span> <br> の
<br>
<span id="text-76" contenteditable="true">你</span>
<br>
<span id="text-77" contenteditable="true">元宵快乐</span></p><br>
<p class="text2">Press keyboard "↓" <span id="text-78" contenteditable="true">开始倾听我的祝福</span></p>
</div>
<div id="/section-1/page-2" class="ft-page page-2" data-id="page-2">
<p class="top-text" id="text-1" contenteditable="true">预约上九价</p>
<img src='../static/img/iali63.jpg' alt="预约上九价。"/>
</div>
<div id="/section-1/page-3" class="ft-page page-3 left-img" data-id="page-3">
<h2 class="text" id="text-2" contenteditable="true">买相机</h2>
<img src='../static/img/iali35.jpg' alt="买相机"/>
</div>
<div id="/section-1/page-4" class="ft-page page-4 full-img" data-id="page-4">
<h2 class="center-text" id="text-3" contenteditable="true">注会两门</h2>
<img src='../static/img/iali6.jpg' alt="注会两门"/>
</div>
</div>
<div class="ft-section section-2" data-id="section-2">
<div id="/section-2/page-1" class="ft-page page-5 full-img" data-id="page-1">
<h2 class="center-text" id="text-4" contenteditable="true">学习舞蹈</h2>
<img src='../static/img/iali19.jpg' alt="学习舞蹈"/>
</div>
<div id="/section-2/page-2" class="ft-page page-6" data-id="page-2">
<h2 class="center-text" id="text-5" contenteditable="true">坚持练字</h2>
<img src='../static/img/iali29.jpg' alt="坚持练字"/>
</div>
<div id="/section-2/page-3" class="ft-page page-7" data-id="page-3">
<h3 id="text-6" contenteditable="true">坚持睡前阅读</h3>
<img src='../static/img/iali60.jpg' alt="坚持睡前阅读"/>
</div>
<div id="/section-2/page-4" class="ft-page page-8 full-img" data-id="page-4">
<h3 id="text-7" contenteditable="true">存款6万</h3>
<img src='../static/img/iali51.jpg' alt="存款6万"/>
</div>
<div id="/section-2/page-5" class="ft-page page-9" data-id="page-5">
<h3 id="text-8" contenteditable="true">迁深户</h3>
<img src='../static/img/iali5.jpg'/>
</div>
<div id="/section-2/page-6" class="ft-page page-10" data-id="page-6">
<h3 id="text-9" contenteditable="true">去一趟迪士尼</h3>
<img src='../static/img/iali22.jpg'/>
</div>
</div>
<div class="ft-section section-3" data-id="section-3">
<div id="/section-3/page-1" class="ft-page page-11 full-img" data-id="page-1">
<h3 id="text-10" contenteditable="true">养成好习惯</h3>
<img src='../static/img/iali24.jpg'/>
</div>
<div id="/section-3/page-2" class="ft-page page-12" data-id="page-2">
<h3><span id="text-11" contenteditable="true">对生活</span><br/><span id="text-12"
contenteditable="true">一直保持好奇与热爱</span>
</h3>
<img src='../static/img/iali25.jpg'/>
</div>
<div id="/section-3/page-3" class="ft-page page-13" data-id="page-3">
<img src='../static/img/iali64.jpg' alt='2021小flag全完成'/>
<h3 id="text-13" contenteditable="true">2021小flag全完成</h3>
</div>
<div id="/section-3/page-4" class="ft-page page-14 left-img" data-id="page-4">
<h3 id="text-14" contenteditable="true">想要的全拥有</h3>
<img src='../static/img/iali46.jpg'/>
</div>
<div id="/section-3/page-5" class="ft-page page-15 left-img" data-id="page-5">
<h3><span id="text-15" contenteditable="true">万事顺心</span><br/><span id="text-16"
contenteditable="true">多赚美金</span>
</h3>
<img src='../static/img/iali45.jpg'/>
</div>
<div id="/section-3/page-6" class="ft-page page-16 left-img" data-id="page-6">
<h3><span id="text-17" contenteditable="true">万事兴旺</span><br/><span id="text-18"
contenteditable="true">多赚英镑</span>
</h3>
<img src='../static/img/iali66.jpg'/>
</div>
<div id="/section-3/page-7" class="ft-page page-17 top-text" data-id="page-7">
<h3 id="text-19" contenteditable="true">万事如意，多赚人民币</h3>
<img src='../static/img/iali16.jpg'/>
</div>
</div>
<div class="ft-section section-4" data-id="section-4">
<div id="/section-4/page-1" class="ft-page page-18 full-img" data-id="page-1">
<p class="text" id="text-20" contenteditable="true">总之就是一句话</p>
<img src='../static/img/iali11.jpg'/>
</div>
<div id="/section-4/page-2" class="ft-page page-19" data-id="page-2">
<h3 id="text-21" contenteditable="true">多赚钱</h3>
<img src="../static/img/iali75.jpg"/>
</div>
<div id="/section-4/page-3" class="ft-page page-20" data-id="page-3">
<img src='../static/img/iali59.png'/>
<h3 id="text-22" contenteditable="true">少生气</h3>
<img src='../static/img/iali9.jpg'/>
</div>
<div id="/section-4/page-4" class="ft-page page-21" data-id="page-4">
<h3 id="text-23" contenteditable="true">心想事成</h3>
<img src='../static/img/iali59.png'/>
</div>
<div id="/section-4/page-5" class="ft-page page-22 left-img" data-id="page-5">
<h3 id="text-24" contenteditable="true">万事如意</h3>
<img src='../static/img/iali4.jpg'/>
</div>
<div id="/section-4/page-6" class="ft-page page-23 left-img" data-id="page-6">
<h3 id="text-25" contenteditable="true">嘻嘻嘻嘻嘻嘻嘻</h3>
<img src='../static/img/iali44.jpg'/>
</div>
<div id="/section-4/page-7" class="ft-page page-24 full-img" data-id="page-7">
<h3 id="text-26" contenteditable="true">永远相信美好的事前即将发生</h3>
<img src='../static/img/iali32.jpg'/>
</div>
</div>
<div class="ft-section section-5" data-id="section-5">
<div id="/section-5/page-1" class="ft-page page-25 left-img" data-id="page-1">
<h3><span id="text-27" contenteditable="true">且</span><br/><span id="text-28" contenteditable="true">美好的事情正在发生</span>
</h3>
<img src='../static/img/iali37.jpg'/>
</div>
<div id="/section-5/page-2" class="ft-page page-26 top-text" data-id="page-2">
<h3 id="text-29" contenteditable="true">哈哈哈哈哈哈哈哈啊哈哈哈</h3>
<img src='../static/img/iali10.gif'/>
</div>
<div id="/section-5/page-3" class="ft-page page-27" data-id="page-3">
<h3 id="text-30" contenteditable="true">你最美丽</h3>
<img src='../static/img/iali67.jpg'/>
</div>
<div id="/section-5/page-4" class="ft-page page-28" data-id="page-4">
<h3 id="text-31" contenteditable="true">你最动人</h3>
<img src='../static/img/iali40.jpg'/>
</div>
<div id="/section-5/page-5" class="ft-page page-29" data-id="page-5">
<h3 id="text-32" contenteditable="true">你最贤惠</h3>
<img src='../static/img/iali12.jpg'/>
</div>
<div id="/section-5/page-6" class="ft-page page-30" data-id="page-6">
<h3 id="text-33" contenteditable="true">你最可爱</h3>
<img src='../static/img/iali76.gif'/>
</div>
<div id="/section-5/page-7" class="ft-page page-31" data-id="page-7">
<h3 id="text-34" contenteditable="true">你最漂亮</h3>
<img src='../static/img/iali77.jpg'/>
</div>
</div>
<div class="ft-section section-6" data-id="section-6">
<div id="/section-6/page-1" class="ft-page page-32" data-id="page-1">
<h3 id="text-35" contenteditable="true">你最优雅</h3>
<img src='../static/img/iali62.jpg'/>
</div>
<div id="/section-6/page-2" class="ft-page page-33 top-text" data-id="page-2">
<h3 id="text-36" contenteditable="true">你最美丽</h3>
<img src='../static/img/iali3.jpg'/>
</div>
<div id="/section-6/page-3" class="ft-page page-34 left-img" data-id="page-3">
<h3 id="text-37" contenteditable="true">你最聪明</h3>
</div>
<div id="/section-6/page-4" class="ft-page page-35" data-id="page-4">
<h3><span id="text-38" contenteditable="true">你</span><br/><span id="text-39"
contenteditable="true">最</span><br/><span
id="text-40" contenteditable="true">温柔</span></h3>
<img src='../static/img/iali8.gif'/>
</div>
<div id="/section-6/page-5" class="ft-page page-36 full-img" data-id="page-5">
<h3 id="text-41" contenteditable="true">你最体贴</h3>
<img src='../static/img/iali31.jpg'/>
</div>
<div id="/section-6/page-6" class="ft-page page-37 left-img" data-id="page-6">
<h3 id="text-42" contenteditable="true">你最善良</h3>
<img src='../static/img/iali49.jpg'/>
</div>
<div id="/section-6/page-7" class="ft-page page-38 bottom-text" data-id="page-7">
<img src='../static/img/iali21.jpg'/>
<h3 id="text-43" contenteditable="true">你最......（以下省略几万万万万万字）</h3>
</div>
</div>
<div class="ft-section section-7" data-id="section-7">
<div id="/section-7/page-1" class="ft-page page-39 left-img" data-id="page-1">
<h3 id="text-44" contenteditable="true"></h3>
<img src='../static/img/iali2.jpg'/>
</div>
<div id="/section-7/page-2" class="ft-page page-40" data-id="page-2">
<h3 id="text-45" contenteditable="true">哈哈哈哈哈哈哈哈啊哈哈哈</h3>
<img src='../static/img/iali14.jpg'/>
</div>
<div id="/section-7/page-3" class="ft-page page-41" data-id="page-3">
<img src='../static/img/iali30_1.jpg' class='img1'/>
<img src='../static/img/iali30_2.jpg' class='img2'/>
<h3 id="text-46" contenteditable="true"> 世上有两种女孩最可爱</h3>
</div>
<div id="/section-7/page-4" class="ft-page page-42" data-id="page-4">
<h3><span id="text-47" contenteditable="true">一种是漂亮</span><br/><span id="text-48"
contenteditable="true">一种是聪慧</span>
</h3>
<img src='../static/img/iali69.jpg'/>
</div>
<div id="/section-7/page-5" class="ft-page page-43" data-id="page-5">
<img src='../static/img/iali42.jpg'/>
<h3 id="text-49" contenteditable="true">而你是聪明的漂亮女孩</h3>
</div>
<div id="/section-7/page-6" class="ft-page page-44 left-img" data-id="page-6">
<h3><span id="text-50" contenteditable="true">不对</span><br/><span id="text-51" contenteditable="true">你是聪明的漂亮仙女</span>
</h3>
<img src='../static/img/iali0.jpg'/>
</div>
<div id="/section-7/page-7" class="ft-page page-45 left-img" data-id="page-7">
<h3><span id="text-52" contenteditable="true">仙女</span><br/><span id="text-53"
contenteditable="true">马上要过生日了</span>
</h3>
<img src='../static/img/iali18.jpg'/>
</div>
</div>
<div class="ft-section section-8" data-id="section-8">
<div id="/section-8/page-1" class="ft-page page-46" data-id="page-1">
<img src='../static/img/iali57.gif'/>
<h3>
<span id="text-54" contenteditable="true">要</span>
<span id="text-55" contenteditable="true">好好</span>
<span id="text-56" contenteditable="true">为仙女</span>
<span id="text-57" contenteditable="true">准备礼物</span>
</h3>
</div>
<div id="/section-8/page-2" class="ft-page page-47 top-text" data-id="page-2">
<img src='../static/img/iali58.jpg'/>
<h3>
<span id="text-58" contenteditable="true">要</span>
<span id="text-59" contenteditable="true">和仙女</span>
<span id="text-60" contenteditable="true">去全世界</span>
<span id="text-61" contenteditable="true">好多地方玩</span></h3>
</div>
<div id="/section-8/page-3" class="ft-page page-48 left-img" data-id="page-3">
<p><span id="text-62" contenteditable="true">嘻嘻嘻</span><br/><span id="text-63" contenteditable="true">嘻嘻嘻嘻</span>
</p>
<img src='../static/img/iali65.jpg'/>
</div>
<div id="/section-8/page-4" class="ft-page page-49 full-img" data-id="page-4">
<img src='../static/img/iali71.jpg'/>
<p class="text">
<span class='text' id="text-64" contenteditable="true"></span><br/>
<span class='text' id="text-65" contenteditable="true"></span>
</p>
</div>
<div id="/section-8/page-5" class="ft-page page-50" data-id="page-5">
<p class='text' id="text-66" contenteditable="true">
嘻嘻嘻嘻嘻嘻嘻嘻嘻</p>
<img src='../static/img/iali50_1.jpg' class='img1'/>
<img src='../static/img/iali50_2.jpg' class='img2'/>
</div>
<div id="/section-8/page-6" class="ft-page page-51" data-id="page-6">
<p>
<span id="text-67" contenteditable="true">永远有多远？</span><br/>
<span id="text-68" contenteditable="true">比时间多一秒就是永远</span><br/>
<span id="text-69" contenteditable="true">世界有多大？</span><br/>
<span id="text-70" contenteditable="true">你走到哪里，世界就有多大</span>
</p>
</div>
</div>
<div class="ft-section section-9" data-id="section-9">
<div id="/section-9/page-1" class="ft-page page-52 full-img" data-id="page-1">
<h3 id="text-71" contenteditable="true"></h3>
<img src='../static/img/iali20.jpg'/>
</div>
<div id="/section-9/page-2" class="ft-page page-53" data-id="page-2">
<img src='../static/img/iali68.jpg' alt='happy birthday'/>
<h3 id="text-72" contenteditable="true">元宵节快乐</h3>
</div>
<div id="/section-9/page-3" class="ft-page page-54 center-img" data-id="page-3">
<div class="center-img">深圳见</div>
</div>
<div id="/section-9/page-4" class="ft-page page-55 right-img" data-id="page-4">
<img src='../static/img/14915.jpg'/>
<p class="text">
<span id="text-73" contenteditable="true">2021年2月26日</span><br/>
<span id="text-74" contenteditable="true">20:13:14</span><br/>
<br/>
<br/>
<span> -- 按“Esc"键有惊喜</span>
</p>
</div>
</div>
</div>
<!-- 引入js -->
<script src="../static/js/all.min.js"></script>
<script src="../static/js/jQuery.js"></script>
</body>
</html>
素材来源: siki学院
每天一篇随笔记，开启学习新姿势！
浙公网安备 33010602011771号