web全站开发——音乐红茶馆

最新推荐文章于 2025-12-26 15:01:48 发布

原创最新推荐文章于 2025-12-26 15:01:48 发布 · 1k 阅读

21 ·

CC 4.0 BY-SA版权

文章标签：

#前端

一、实验目的

掌握JSP中固定模板元素以及各种JSP标签使用，掌握网站的基本架构设计，熟悉JSP内置对象Request、Response的使用以及网页多媒体技术的应用，理解JSP的页面显示功能的作用。

二、实验内容与设计思想

设计一个基于JSP的音乐红茶馆网站，合理设计首页面布局，运用边框为0的表格进行页面排版。创新设计合适的主题素材图片，网站背景音乐素材，动画。整个网站的设计要体现首页、导航以及文章内容的三级页面结构。导航栏包括音乐主题、音乐品鉴、乐迷建议，其中乐迷建议页面要采用表单技术实现，须编写后台服务器端的JSP页面专门收集和处理乐迷建议，并将收到乐迷建议的信息反馈到客户端。注：后台JSP页面可基于Request收集客户端反馈信息。

三、 实验使用环境

操作系统： Microsoft Windows 11

编程环境：JDK1.8、TOMCAT9.0 、Eclipse for JavaEE Developer

四、代码及效果演示

首页

index.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<head>

<title>音乐红茶馆 - 首页</title>

<style>

body {

background-color: #f9fafb;

font-family: 'Inter', sans-serif;

}

.nav-link {

transition: color 0.3s ease;

}

.nav-link:hover {

color: #3b82f6;

}

.audio-control {

position: fixed;

bottom: 20px;

right: 20px;

z-index: 100;

}

</style>

</head>

<body>

<h1 class="text-4xl font-bold mb-4">音乐红茶馆</h1>

<p class="text-lg">沉浸在音乐与茶香的世界</p>

</div>

</ul>

</div>

</nav>

<h2 class="text-2xl font-bold mb-4">欢迎来到音乐红茶馆</h2>

<p class="text-gray-700 leading-relaxed">在这里，您可以享受美妙的音乐，分享您的音乐感悟。每周我们都会更新不同的音乐主题，为您带来全新的音乐体验。无论是舒缓的古典音乐，还是激情的摇滚音乐，都能在这里找到属于您的旋律。</p>

</div>

<div>

</div>

</audio>

</button>

</div>

const audio = document.getElementById('bg-music');

const audioToggle = document.getElementById('audio-toggle');

audioToggle.addEventListener('click', function () {

if (audio.muted) {

audio.muted = false;

this.innerHTML = '<i class="fa-solid fa-volume-high"></i>';

} else {

audio.muted = true;

this.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>';

}

});

</script>

</body>

</html>

音乐主题

music_theme.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<head>

<title>音乐红茶馆 - 音乐主题</title>

<style>

body {

font-family: 'Inter', sans-serif;

background-color: #f9fafb;

}

.music-item {

border: 1px solid #e5e7eb;

border-radius: 0.375rem;

padding: 1rem;

margin-bottom: 1rem;

transition: box-shadow 0.3s ease;

}

.music-item:hover {

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

}

.music-title {

font-size: 1.25rem;

font-weight: 600;

margin-bottom: 0.5rem;

}

.music-details {

font-size: 0.875rem;

color: #6b7280;

margin-bottom: 0.5rem;

}

.play-button {

background-color: #3b82f6;

color: white;

padding: 0.5rem 1rem;

border-radius: 0.375rem;

text-decoration: none;

transition: background-color 0.3s ease;

}

.play-button:hover {

background-color: #2563eb;

}

</style>

</head>

<body>

</ul>

</div>

</nav>

<h1 class="text-3xl font-bold mb-4">本周音乐主题：节奏蓝调</h1>

<p class="text-gray-700 mb-8">节奏布鲁斯（简称R&B），又称节奏怨曲，发源于非裔美国人艺术家，是一种融合爵士乐、福音音乐和电子布鲁斯音乐为一体的音乐风格。</p>

<p class="text-gray-700 mb-4">《Love Song》是方大同演唱的歌曲，由方大同创作词曲，收录于方大同2007年发行的音乐专辑《未来》。2008年，该曲获得第8届全球华语歌曲排行榜颁奖礼最受欢迎20大金曲奖</p>

</div>

<p class="text-gray-700 mb-4">《花田错》是王力宏演唱的一首rnb歌曲，在《花田错》这首歌中，王力宏找到京剧与西洋流行乐的不谋而合之处，来自西洋乐风R&B的自由转音Free的唱法正与京剧里特别将唱词中单个字拉长转音的戏剧性相似，《花田错》的精彩之处正是王力宏巧妙的融合了R&B与京剧唱腔，让聆听者心中有古典耳中有新意。</p>

</div>

<p class="text-gray-700 mb-4">《黑色柳丁》是由陶喆、娃娃填词，陶喆作曲、编曲、制作并演唱的一首歌曲，收录于陶喆2002年8月9日发行的同名专辑《黑色柳丁》中。2002年，该曲获年度TVB8金曲榜颁奖礼金曲金奖。</p>

</div>

</audio>

function playMusic(file) {

const player = document.getElementById('music-player');

// 移除所有已有的 <source> 元素

while (player.firstChild) {

player.removeChild(player.firstChild);

}

// 添加新的 <source> 元素

const sourceMp3 = document.createElement('source');

sourceMp3.src = file;

sourceMp3.type = 'audio/mpeg';

player.appendChild(sourceMp3);

const sourceOgg = document.createElement('source');

sourceOgg.src = file.replace('.mp3', '.ogg');

sourceOgg.type = 'audio/ogg';

player.appendChild(sourceOgg);

const sourceWav = document.createElement('source');

sourceWav.src = file.replace('.mp3', '.wav');

sourceWav.type = 'audio/wav';

player.appendChild(sourceWav);

player.style.display = 'block';

player.load(); // 重新加载音频

try {

player.play();

} catch (error) {

console.error('播放音乐时出错:', error);

// 可以在这里添加提示信息，让用户手动点击播放按钮

}

</script>

</body>

</html>

音乐品鉴

music_taste.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<head>

<title>音乐红茶馆 - 首页</title>

<style>

/* 自定义样式，可根据需要调整 */

body {

background-color: #f9fafb;

font-family: 'Inter', sans-serif;

}

.nav-link {

transition: color 0.3s ease;

}

.nav-link:hover {

color: #3b82f6;

}

.audio-control {

position: fixed;

bottom: 20px;

right: 20px;

z-index: 100;

}

</style>

</head>

<body>

<h1 class="text-4xl font-bold mb-4">音乐红茶馆</h1>

<p class="text-lg">沉浸在音乐与茶香的世界</p>

</div>

</ul>

</div>

</nav>

<h2 class="text-2xl font-bold mb-4">欢迎来到音乐红茶馆</h2>

</div>

<div>

</div>

</audio>

</button>

</div>

const audio = document.getElementById('bg-music');

const audioToggle = document.getElementById('audio-toggle');

audioToggle.addEventListener('click', function () {

if (audio.muted) {

audio.muted = false;

this.innerHTML = '<i class="fa-solid fa-volume-high"></i>';

} else {

audio.muted = true;

this.innerHTML = '<i class="fa-solid fa-volume-xmark"></i>';

}

});

</script>

</body>

</html>

乐迷建议

fan_suggestion.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<!DOCTYPE html>

<head>

<title>音乐红茶馆 - 乐迷建议</title>

<style>

body {

font-family: 'Inter', sans-serif;

background-color: #f9fafb;

}

.form-container {

background-color: #fff;

border-radius: 0.375rem;

box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

padding: 2rem;

margin-top: 2rem;

}

.form-group {

margin-bottom: 1.5rem;

}

.form-label {

display: block;

font-size: 0.875rem;

font-weight: 600;

margin-bottom: 0.5rem;

}

.form-input {

width: 100%;

padding: 0.75rem;

border: 1px solid #e5e7eb;

border-radius: 0.375rem;

transition: border-color 0.3s ease;

}

.form-input:focus {

outline: none;

border-color: #3b82f6;

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);

}

.form-textarea {

width: 100%;

padding: 0.75rem;

border: 1px solid #e5e7eb;

border-radius: 0.375rem;

transition: border-color 0.3s ease;

resize: vertical;

}

.form-textarea:focus {

outline: none;

border-color: #3b82f6;

box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);

}

.submit-button {

background-color: #3b82f6;

color: white;

padding: 0.75rem 1.5rem;

border-radius: 0.375rem;

cursor: pointer;

transition: background-color 0.3s ease;

}

.submit-button:hover {

background-color: #2563eb;

}

</style>

function validateForm() {

const name = document.getElementById('name').value;

const email = document.getElementById('email').value;

const suggestion = document.getElementById('suggestion').value;

if (name === '') {

alert('请输入您的姓名');

return false;

}

if (email === '') {

alert('请输入您的邮箱');

return false;

}

const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;

if (!emailRegex.test(email)) {

alert('请输入有效的邮箱地址');

return false;

}

if (suggestion === '') {

alert('请输入您的建议内容');

return false;

}

return true;

}

</script>

</head>

<body>

</ul>

</div>

</nav>

<p class="text-gray-700 mb-8">我们非常重视您的意见和建议，请您填写以下表单，让我们为您打造更好的音乐体验。</p>

</div>

</div>

</div>

</form>

</div>

</body>

</html>