基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志七)

中间隔了有一段时间，因为去学了一些其他东西，加上还有课程，今天专门用了大半天来写前台界面与登录注册的UI设计，网上的模板我都不太想用，我就用框架来自己搭建前台，我参考了三大音乐网站的首页设计，基本都是分为导航栏、二级导航栏、轮播图（QQ音乐没有）、下面就是歌单啥的了，就按照这个进行设计。

先进行今天写的页面展示，只写了登录注册、引导首页、网站首页：

登录注册：由于LOGO还没设计，暂时采用的bootstrap的logo，后期会设计自己的logo。

引导首页：

图一：

图二：

图三：

平台首页：

平台首页我借鉴的就是网易云，先大概做成这个样子，但当然后期做后端时，会添加一个歌单表，这些数据都会动态根据数据库来改变了。

平台首页上方为第一导航栏，实际不导航内容，后期会加搜索框，像酷狗音乐一样，第二导航栏才是真正的导航，这几个模块除了直播不会做以外，之后都会做一下。

前台暂时公共页面代码：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<nav th:fragment="cjbar"><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><meta name="description" content=""><meta name="author" content=""><link th:href="@{/bootstrap/css/bootstrap.min.css}" rel="stylesheet"><link th:href="@{/bootstrap/css/dashboard.css}" rel="stylesheet"><link th:href="@{/bootstrap/css/mystyle.css}" rel="stylesheet"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"><link rel="stylesheet" th:href="@{/layui/css/layui.css}" media="all"><script type="text/javascript" th:src="@{/layui/layui.js}"></script><script type="text/javascript" th:src="@{/bootstrap/js/jquery-3.2.1.slim.min.js}"></script><script type="text/javascript" th:src="@{/bootstrap/js/popper.min.js}"></script><script type="text/javascript" th:src="@{/bootstrap/js/bootstrap.min.js}"></script><script type="text/javascript" th:src="@{/bootstrap/js/feather.min.js}"></script><script>feather.replace()</script><script type="text/javascript" th:src="@{/bootstrap/js/Chart.min.js}"></script>
</nav>
<!--头部导航栏-->
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" style="height: 60px;" th:fragment="topbar"><a class="navbar-brand col-sm-3 col-md-2 mr-0 bg-dark" style="color:white;font-family: '黑体';font-size: 20px;"><i class="bi bi-activity"></i> Crush Music(酷心音乐)</a><ul class="navbar-nav px-3"><li></li><li class="nav-item text-nowrap"><img th:src="@{${session.LoginUser.getUser_imgUrl()}}" th:if="${session.LoginUser ne null}" style="width: 40px;height: 40px;border-radius: 50%;"><a style="color: whitesmoke" th:if="${session.LoginUser ne null}" th:text="|你好,${session.LoginUser.getUser_name()}!|"th:href="@{/user/info(user_id=${session.LoginUser.getUser_id()},infoStatus=1)}"></a><a style="color: whitesmoke" th:if="${session.LoginUser eq null}" th:text="登录" th:href="@{/user/login}"></a><a style="color: whitesmoke" th:href="@{/user/userLogout}" th:text="退出"></a></li></ul>
</nav>
<nav class="navbar navbar-dark sticky-top bg-dark flex-md-nowrap p-0" style="height: 40px;border-top: 1px gray solid;" th:fragment="topbar2"><div class="middle-width"><table style="width: 100%;border: 0"><td class="font-style2"><a th:href="@{/index}" th:text="首页"></a></td><td class="font-style2"><a th:href="@{/index}" th:text="我的音乐"></a></td><td class="font-style2"><a th:href="@{/index}" th:text="热门歌曲"></a></td><td class="font-style2"><a th:href="@{/index}" th:text="热门歌手"></a></td><td class="font-style2"><a th:href="@{/index}" th:text="热门直播"></a></td><td class="font-style2"><a th:href="@{/index}" th:text="个人中心"></a></td></table></div>
</nav>
</html>

平台首页暂时如下：还有未完善功能，除了后端以外，前端也还有很多工作：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/extras/spring-security"xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head><title>首页</title><div th:replace="~{reception/common/common::cjbar}"/>
</head><body class="myBody">
<div th:replace="~{reception/common/common::topbar}"/>
<div th:replace="~{reception/common/common::topbar2}"/>
<div class="middle-width"><div class="layui-carousel" style="width: 75%;float: left;position: relative;" id="test1" lay-filter="test1"><div carousel-item=""><div><img class="img-fix2" th:src="@{/images/background/background2.jpg}"></div><div><img class="img-fix2" th:src="@{/images/background/background3.jpg}"></div><div><img class="img-fix2" th:src="@{/images/background/background8.jpg}"></div><div><img class="img-fix2" th:src="@{/images/background/background5.jpg}"></div><div><img class="img-fix2" th:src="@{/images/background/background7.jpg}"></div></div></div><div style="width: 25%;height: 300px;position: relative;float: left;"><div><img style="width: 100%;height: 300px;" th:src="@{/images/background/background9.jpg}"></div></div><div style="width: 100%;height: 430px;float: left;"><h1>精选歌单</h1><br><div style="width: 100%;height: 100%;"><div class="img-div"><img class="img-full" th:src="@{/images/background/90后华语乐坛十年歌单.jpg}"><p>90后昨天：华语乐坛十年</p><p>播放量：3329.8w</p></div><div class="null-div"></div><div class="img-div"><img class="img-full" th:src="@{/images/background/古风歌单.jpg}"><p>入坑必听！古风一曲解千愁</p><p>播放量：1998.3w</p></div><div class="null-div"></div><div class="img-div"><img class="img-full" th:src="@{/images/background/古风清灵女声.jpg}"><p>古风清灵女声|故人泪</p><p>播放量：2488.8w</p></div><div class="null-div"></div><div class="img-div"><img class="img-full" th:src="@{/images/background/老歌忘记的歌名记住的高潮.jpg}"><p>催泪100%|不会有下次</p><p>播放量：1323.8w</p></div></div></div>
</div><div class="bottom-navigation"></div>
</body>
<script>layui.use(['carousel', 'form'], function() {var carousel = layui.carousel, form = layui.form;//常规轮播carousel.render({elem: '#test1',arrow: 'always',width: '75%',height: '300px',});});
</script>
</html>

引导首页：

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/extras/spring-security"xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head><title>用户管理</title><div th:replace="~{reception/common/common::cjbar}"/>
</head>
<body><div th:replace="~{reception/common/common::topbar}"/><div class="layui-carousel" style="position: absolute;" id="test1" lay-filter="test1"><div carousel-item=""><div><img th:src="@{/images/background/background2.jpg}"></div><div><img th:src="@{/images/background/background3.jpg}"></div><div><img th:src="@{/images/background/background8.jpg}"></div><div><img th:src="@{/images/background/background5.jpg}"></div><div><img th:src="@{/images/background/background7.jpg}"></div></div></div><div class="jumbotron" style="position: absolute;width: 70%;left: 15%;top:200px;background: rgba(255,255,255,0)"><h1 style="font-size: 100px;color: whitesmoke;">Crush Music</h1><p style="font-size: 30px;color: whitesmoke;">酷心音乐拥有超多当红歌手的歌曲，赶紧来收听吧！</p></div><div style="position:absolute;width: 20%;left: 40%;top:650px;"><br><a type="button" style="width: 100%;border-radius: 20px;font-family: '黑体';font-size: 50px;padding: 25px;height: 100px;background: rgba(100,100,100,0.9);text-decoration:none;"class="layui-btn layui-btn-lg" th:href="@{/user/login}">Try Now</a></div>
</body>
<script>layui.use(['carousel', 'form'], function() {var carousel = layui.carousel, form = layui.form;//常规轮播carousel.render({elem: '#test1',arrow: 'always',width: '100%',height: '1050px',});});
</script>
</html>

登录部分:

<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"xmlns:sec="http://www.thymeleaf.org/extras/spring-security"xmlns:shiro="http://www.pollix.at/thymeleaf/shiro" style="height: 100%;">
<head><div th:replace="~{reception/common/common::cjbar}"/><link th:href="@{/bootstrap/css/signin.css}" rel="stylesheet"><link rel="canonical" href="https://getbootstrap.com/docs/4.0/examples/sign-in/"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css"><title>前台登录</title>
</head><body class="text-center" style="background: url('/images/background/background2.jpg') no-repeat;background-size: 100%;"><form class="form-signin" th:action="@{/user/login}" method="post"><img class="mb-4" src="https://getbootstrap.com/docs/4.0/assets/brand/bootstrap-solid.svg" alt="" width="72" height="72"><h1 class="h3 mb-3 font-weight-normal">用户登录</h1><label for="inputAccount" class="sr-only">账号</label><input type="text" id="inputAccount" name="user_name" class="form-control" style="background-color: rgba(255,255,255,0.2)" placeholder="账号" required autofocus><label for="inputPassword" class="sr-only">密码</label><input type="password" id="inputPassword" name="user_password" class="form-control" style="background-color: rgba(255,255,255,0.2)" placeholder="密码" required><br><button class="btn btn-lg btn-primary btn-block" type="submit">登录</button><p class="mt-5 mb-3 text-muted"><a th:href="@{/user/register}">没有账号？点击注册</a></p></form>
</body>
</html>

注册模块与登录大同小异，可以不展示。

今天时间比较晚了，还有不得不说一句，后端人员开发前端真的要命，用框架自己做都要调整很久，虽然以后会交给前端人员做，但学的多一点也没错，说不定还能当个全栈开发哈哈。

基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志七)相关推荐

基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十三)
本次添加了鼠标移动到歌曲列表时相应位置出现播放键.添加进播放列表键.下载键.添加到歌单键,还实现了简单的评论功能,由于主要功能不是评论,所以没有写回复功能,后面也可以添加这个功能,毕竟博客系统写过. ...
基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志十四)--audio控件重写音乐播放
本次花了很大精力去完成了播放界面,虽然歌词同步这里没完成,但后续还是可以完善的,这次我重写了audio控件,让audio是自己想要的样式,先看成果图. 这个界面参考的是酷狗音乐网页版的布局,感觉自己 ...
十分钟写一个基于springboot+vue+redis+mysql的银行转账与用户后台管理系统，redis实现用户登录与缓存
界面效果用户管理界面详情页面编辑页面删除功能用户界面查询余额取出余额存款转账后端包结构 bean包下代码管理员类 package com.example.qqqundatabas ...
基于SpringBoot+Vue+Java+Mysql 的简历招聘系统【源码】
文章目录 1.效果演示 2. 前言介绍 3.主要技术 4 **系统设计** 4.1 系统体系结构 4.2开发流程设计 4.3 数据库设计原则 4.4 数据表 5 **系统详细设计** 5.1管理员功能 ...
基于 SpringBoot + Vue 的智能停车场项目。
一.开源项目简介基于 SpringBoot + Vue 的智能停车场项目. 智能停车场管理平台!科学计费多种计费方案灵活切换,商场.小区.停车场等场景均适用!无人值守云端控制实现无岗亭模式下的车 ...
【毕业设计】基于springboot + vue微信小程序商城
目录前言创新点/亮点✨ 毕设目录一.视频展示二.系统介绍三.项目地址四.运行环境五.设计模块 ①前台 ②后台六.系统功能模块结构图七. 准备阶段 ①使用真实支付 ②使用模拟支付八. ...
基于javaweb的电影院会员管理系统(java+springboot+vue+element-ui+mysql)
基于javaweb的电影院会员管理系统(java+springboot+vue+element-ui+mysql) 运行环境 Java≥8.MySQL≥5.7.Node.js≥10 开发工具后端:e ...
基于JAVA+SpringBoot+Vue+Mybatis+MYSQL的在线音乐网站
项目介绍: 基于springboot+vue实现的音乐网站,系统采用前后端分离开发模式开发,分为三个工程文件,分别是springboot后台服务端工程,主要提供API接口:vue前端用户客户端工程,主 ...
计算机毕业设计基于springboot+vue+elementUI的网吧管理系统(源码+系统+mysql数据库+Lw文档）
项目介绍随着我国的经济发展,人们的生活水平也有了一定程度的提高,对网络的要求也越来越高,很多家庭都有了自己的电脑,但是很多时候大家在家里玩电脑的时候找不到那种玩耍的气氛和氛围,这个时候大家就都选择了 ...

基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志七)

基于springboot+vue(thymeleaf)+mysql下的自创音乐网站平台--CrushMusic(开发日志七)相关推荐

最新文章

热门文章