简单的动漫网站（HTML+SprintBoot网页项目）
登录注册界面，查询功能2、分类筛选功能，实现动漫的分类筛选，更加有目的性的查看动漫类型。3、动漫详情功能，对点击的动漫进行后台搜索，展现动漫的详细信息。1、通过数据库中动漫的播放量数据进行动漫推荐。4、搜索功能，可以实现模糊搜索。
·
功能：
1、通过数据库中动漫的播放量数据进行动漫推荐
2、分类筛选功能，实现动漫的分类筛选，更加有目的性的查看动漫类型
3、动漫详情功能，对点击的动漫进行后台搜索，展现动漫的详细信息
4、搜索功能，可以实现模糊搜索
登录/注册
前端代码 实现（login.html）：
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户登录</title>
<link rel="stylesheet" href="../css/login.css">
<script src="../js/jQuery-3.6.4.js"></script>
<script src="../js/login.js"></script>
</head>
<body>
<div id="loginDiv">
<!-- onsubmit="return false" 关闭form表单提交，使用ajxa提交-->
<form action="" id="form" onsubmit="return false">
<h1 >登  录</h1>
用户名:<input id="userName" type="text"><br>
密 码:<input id="userPassword" type="password">
<div>
<input type="button" id="loginClick" class="button" value="登陆" onclick="login1();">
<a href="./register.html"><input type="button" style="margin-left:50px;" class="button" value="注册"></a>
</div>
</form>
</div>
</body>
</html>注册前端代码（regester.html）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册界面</title>
<link rel="stylesheet" href="../css/register.css">
<script src="../js/jQuery-3.6.4.js"></script>
<script src="../js/register.js"></script>
</head>
<body>
<div class="box"> <!--表单信息-->
<form action="" method="post"><!-- onsubmit=" return YanZheng();" 表单验证-->
<div class="inputs">
<div><h1>用户注册</h1></div>
<br>
账  号:
<input type="text" name="" id="userName" onblur= "userName1();">
<br>
<span id = "userNameTip"></span>
<br>
联系电话:
<input type="text" id="userPhone" onblur = "userPhone1();">
<br>
<span id = "userPhoneTip"></span>
<br>
密  码:
<input type="password" name="" id="userPassword" onblur = "userPassword1();">
<br>
<span id = "userPasswordTip"></span>
<br>
确定密码:
<input type="password" name="" id="userPassword2" onblur = "userTruePassword();">
<br>
<span id = "userPassword2Tip"></span>
<br>
</div>
<div class="selects">
性  别:
<input type="radio" name="sex" id="" onblur = "userSex1();" value="男">男
<input type="radio" name="sex" id="" onblur = "userSex1();" value="女">女
<br>
<span id = "sexTip"></span>
<br>
爱  好:
<input type="checkbox" name="favor" id="" value="运动">运动
<input type="checkbox" name="favor" id="" value="读书">读书
<input type="checkbox" name="favor" id="" value="娱乐游戏">娱乐游戏
<br>
<span id = "checkboxTip"></span>
<br>
省  份:
<select id="userProvince">
<option value="贵州省">贵州省</option>
<option value="广东省">广东省</option>
<option value="云南省">云南省</option>
<option value="浙江省">浙江省</option>
<option value="广西省">广西省</option>
</select>
<br>
<span id = "userProvinceTip"></span>
<br>
市区 / 县:
<select id="userMarket">
<option value="凯里">凯里</option>
<option value="贵阳">贵阳</option>
<option value="黔西南">黔西南</option>
<option value="遵义">遵义</option>
<option value="昆明">昆明</option>
</select>
<br>
<span id = "userMarketTip"></span>
</div>
<div class="buttons">
<!-- onclick="YanZheng()" -->
<input type="button" value="提交" class = "button" id="sbt" onclick="register();">
<input type="reset" value="重置">
</div>
</form>
</div>
</body>
</html>网站主页：
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>动漫之家</title>
<link rel="stylesheet" href="../css/index.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../bootstrap-icons-1.10.5/font/bootstrap-icons.css">
<script src="../js/jQuery-3.6.4.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/index.js"></script>
</head>
<body>
<div class="box">
<div class="heard">
<div class="left">
<!-- 左边导航栏 -->
<ul class="left_ul">
<li class="left_li">
<img src="../img/logou.png" alt="">
</li>
<li class="left_li" id="zhuti">
<a class="left_a" href="#">哔哩哔哩漫画</a>
</li>
<li class="left_li">
<a class="left_a" href="#">主站</a>
</li>
<li class="left_li">
<a class="left_a" href="#" style="color: rgb(10, 208, 243);">首页</a>
</li>
<li class="left_li">
<a class="left_a" onclick="fanlei(this)">分类</a>
</li>
<li class="left_li">
<a class="left_a" href="#">更新</a>
</li>
<li class="left_li">
<a class="left_a" href="#">排行榜</a>
</li>
</ul>
</div>
<!-- 搜索框 -->
<div class="center">
<input type="text" id="sousuo" onsubmit ="sousuo()">
<i class="bi bi-search" onclick="sousuo()"></i>
</div>
<div class="right">
<!-- <a href="login.html">登入</a>
<a href="register.html">注册</a> -->
<div class="gerenzhongxing">
<div>个人中心</div>
<div class="gerenzhongxing_list">
<ul>
<li>账户管理</li>
<li>观看历史</li>
<li>修改密码</li>
<li>退出登录</li>
</ul>
</div>
</div>
</div>
<!-- 轮播 -->
<div id="demo" class="carousel slide" data-bs-ride="carousel">
<!-- 指示符 -->
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="3"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="4"></button>
</div>
<!-- 轮播图片 -->
<div class="lunbo">
<div class="carousel-inner" style="height: 400px;">
<div class="carousel-item active">
<img src="../img/lunbo4.avif" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="../img/lunbo2.avif" class="d-block" style="width:100%">
</div>
<div class="carousel-item">
<img src="../img/lunbo3.avif" class="d-block" style="width:100%">
</div> <div class="carousel-item">
<img src="../img/lunbo5.avif" class="d-block" style="width:100%">
</div>
</div> <div class="carousel-item">
<img src="../img/lunbo6.avif" class="d-block" style="width:100%">
</div>
</div>
<!-- 左右切换按钮 -->
<button class="carousel-control-prev" type="button" data-bs-target="#demo" data-bs-slide="prev">
<span class="carousel-control-prev-icon"></span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#demo" data-bs-slide="next">
<span class="carousel-control-next-icon"></span>
</button>
</div>
</div>
<!-- 中部内容 -->
<div class="body">
<!-- 导航栏 -->
<div class="heard">
<ul>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">漫画改</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">热血</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">战斗</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">搞笑</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">奇幻</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">校园</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">冒险</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">小说改</a>
</li>
<li>
<a class = "fenlei" href="#" onclick="fanlei(this)">穿越</a>
</li>
<li>
<a class = "fenlei" onclick="fanlei(this)">日常</a>
</li>
</ul>
<div class="right">
<span onclick="fanlei(this)">查看全部</span>
<i style="font-size: 14px;" class="bi bi-chevron-right"></i>
</div>
<!-- <div class="tuiJian">
<i class="bi bi-balloon-heart"></i>
<h1>为你推荐</h1>
</div>
<div class="dongMan">
<ul id ="neiRong">
<li>
<img id = 'tuPian' src="../img/测试.png" alt="">
<span><i>9.5</i></span>
<br>
<p> 鬼灭之刃</p>
<span class="jianjie">鬼其利剑</span>
<li>
</ul>
</div> -->
<div class="tuijian">
<div class="left">
<i class="bi bi-balloon-heart"></i>
<h1>为你推荐</h1>
</div>
<div class="dongMan">
<ul id ="tuijian">
<!-- <li>
<img id = 'tuPian' src="../img/测试.png" alt="">
<span><i>9.5</i></span>
<br>
<p> 鬼灭之刃</p>
<span class="jianjie">鬼其利剑</span>
<li> -->
</ul>
</div>
</div>
<div class="rexie">
<div class="left">
<i class="bi bi-caret-right-square-fill"></i>
<h1>热血</h1>
</div>
<div class="right">
<span onclick="fanlei(this)">查看更多</span>
<i style="font-size: 14px;" class="bi bi-chevron-right"></i>
</div>
<div class="dongMan">
<ul id ="rexie">
<!-- <li>
<img id = 'tuPian' src="../img/测试.png" alt="">
<span><i>9.5</i></span>
<br>
<p> 鬼灭之刃</p>
<span class="jianjie">鬼其利剑</span>
<li> -->
</ul>
</div>
</div>
<div class="xiaoyuan">
<div class="left">
<i class="bi bi-google-play"></i>
<h1>校园</h1>
</div>
<div class="right">
<span onclick="fanlei(this)">查看更多</span>
<i style="font-size: 14px;" class="bi bi-chevron-right"></i>
</div>
<div class="dongMan">
<ul id ="xiaoyuan">
<!-- <li>
<img id = 'tuPian' src="../img/测试.png" alt="">
<span><i>9.5</i></span>
<br>
<p> 鬼灭之刃</p>
<span class="jianjie">鬼其利剑</span>
<li> -->
</ul>
</div>
</div>
<div class="dibu">
<p style="margin-top:50px;">刀剑神域 日本动漫 新妹魔王的契约者 进击的巨人 学园默示录 新番动漫 亲吻姐姐 电锯人动漫</p>
<p>本网站提供的最新动漫资源均系收集于各大视频网站，本网站只提供web页面服务，并不提供影片资源存储，也不参与录制、上传</p>
<p> 若本站收录的链接无意侵犯了贵司版权，请邮箱联系我们，我们会及时处理相关内容，谢谢！邮箱：mddmlianxi#hotmail.com</p>
<p>Copyright ©2020-2022 www.mandao.tv All Rights Reserved · 百度地图 · 谷哥地图</p>
<p> 湘ICP备20225100号</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>分类功能：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<link rel="stylesheet" href="../css/fenlei.css">
<link rel="stylesheet" href="../css/bootstrap.css">
<link rel="stylesheet" href="../bootstrap-icons-1.10.5/font/bootstrap-icons.css">
<script src="../js/jQuery-3.6.4.js"></script>
<script src="../js/bootstrap.bundle.min.js"></script>
<script src="../js/fenlei.js"></script>
<title>分类</title>
</head>
<body>
<div class="box">
<div class="heard">
<div class="left">
<!-- 左边导航栏 -->
<ul class="left_ul">
<li class="left_li">
<img src="../img/logou.png" alt="">
</li>
<li class="left_li" id="zhuti">
<a class="left_a" href="#">哔哩哔哩漫画</a>
</li>
<li class="left_li">
<a class="left_a" href="#">主站</a>
</li>
<li class="left_li">
<a class="left_a" href="./index.html">首页</a>
</li>
<li class="left_li">
<a class="left_a" style="color: rgb(10, 208, 243);" href="#">分类</a>
</li>
<li class="left_li">
<a class="left_a" href="#">更新</a>
</li>
<li class="left_li">
<a class="left_a" href="#">排行榜</a>
</li>
</ul>
</div>
<!-- 搜索框 -->
<!-- <div class="center">
<input type="text">
<i class="bi bi-search"></i>
</div> -->
<div class="center">
<input type="text" id="sousuo" onsubmit ="sousuo()">
<i class="bi bi-search" onclick="sousuo()"></i>
</div>
<div class="right">
<a href="login.html">登入</a>
<a href="register.html">注册</a>
</div>
<!-- 分类标题 -->
<div class="fenlei">
<div class="ticai">
<ul>
<li >
<span class="ticaiHeard">题材</span>
</li>
<li>
<a href="#" id="quanbu">全部</a>
</li>
<li>
<a href="#" id = "manhua" onclick="fenlei2(this)">漫画改</a>
</li>
<li>
<a href="#" id = "rexie" onclick="fenlei2(this)">热血</a>
</li>
<li>
<a href="#" id="zhandou" onclick="fenlei2(this)">战斗</a>
</li>
<li>
<a href="#" id="gaoxiao" onclick="fenlei2(this)">搞笑</a>
</li>
<li>
<a href="#" id="qihuan" onclick="fenlei2(this)">奇幻</a>
</li>
<li>
<a href="#" id="xiaoyuan" onclick="fenlei2(this)">校园</a>
</li>
<li>
<a href="#" id="maoxian" onclick="fenlei2(this)">冒险</a>
</li>
<li>
<a href="#" id="xiaoshuo" onclick="fenlei2(this)">小说改</a>
</li>
<li>
<a href="#" id="chuanyue" onclick="fenlei2(this)">穿越</a>
</li>
<li>
<a href="#" id = "rechang" onclick="fenlei2(this)">日常</a>
</li>
</ul>
</div>
<div class="diqu">
<ul>
<li >
<span class="ticaiHeard">地区</span>
</li>
<li>
<a style="color: rgb(10, 208, 243);" href="#" >全部</a>
</li>
<li>
<a href="#" >中国</a>
</li>
<li>
<a href="#" >韩国</a>
</li>
<li>
<a href="#" >日本</a>
</li>
<li>
<a href="#" >其他</a>
</li>
</ul>
</div>
<div class="jingdu">
<ul>
<li >
<span class="ticaiHeard">进度</span>
</li>
<li>
<a style="color: rgb(10, 208, 243);" href="#" >全部</a>
</li>
<li>
<a href="#" >连载</a>
</li>
<li>
<a href="#" >完结</a>
</li>
</ul>
</div>
<div class="paixu">
<ul>
<li >
<span class="ticaiHeard">排序</span>
</li>
<li>
<span style="color: rgb(10, 208, 243);" >人气推荐</span>
</li>
<li>
<a href="#" >更新时间</a>
</li>
<li>
<a href="#" >上架时间</a>
</li>
</ul>
</div>
<!-- 动漫 -->
<div class="dongMan">
<ul id ="list">
<!-- <li>
<img id = 'tuPian' src="../img/测试.png" alt="">
<span><i>9.5</i></span>
<br>
<p> 鬼灭之刃</p>
<span class="jianjie">鬼其利剑</span>
<li> -->
</ul>
</div>
</div>
</div>
</body>
</html>搜索功能：
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="../css/sousuo.css">
<script src="../js/jQuery-3.6.4.js"></script>
<script src="../js/sousuo.js"></script>
</head>
<body>
<div class="box">
<div class="heard">
<div class="left1">
<img src="../img/bilibili.png" alt="">
</div>
<div class="conter">
<ul>
<li>
<a chref="#" >主站</a>
</li>
<li>
<a href="./index.html" >首页</a>
</li>
<li>
<a href="#" onclick="fanlei(this)">分类</a>
</li>
<li>
<a href="#" >排行榜</a>
</li>
<li>
<a href="#" >更新</a>
</li>
<li>
<a href="#" >漫画</a>
</li>
<li>
<a href="#" >赛事</a>
</li>
</ul>
</div>
<div class="right">
<ul>
<li>举报</li>
<li>收藏</li>
<li>观看历史</li>
</ul>
</div>
</div>
</div>
<div class="center">
<div class="inputs">
<input type="text" >
<button>搜索</button>
</div>
<div class="input_list">
<ul>
<li style="color: red;">综合</li>
<li>视频</li>
<li>番剧</li>
<li>影视</li>
<li>直播</li>
<li>专栏</li>
<li>用户</li>
</ul>
</div>
<div class="dongman">
<div class="faxian">
<p>搜索发现</p>
<ul class="faxian_list">
<li>1.鬼灭之刃</li>
<li>2.因为害怕痛所以全点防御</li>
<li>3.咒术回战</li>
<li>4.Re：从零开始的异世界生活 第二季 前半</li>
<li>5.OVERLORD</li>
<li>6.在下坂本，有何贵干？</li>
<li>7.四月是你的谎言</li>
<li>8.刀剑神域 爱丽丝篇 异界战争</li>
<li>9.世界顶尖的暗杀者,转生为异世界贵族</li>
<li>10.异度侵入 ID:INVADED</li>
</ul>
</div>
<ul id="domman_list">
<!-- <li id="">
<img src = "../img/测试.png">
<span id="title">鬼灭之刃 <span style="color: rgb(15, 235, 70);font-size: 16px;">[可播放]</span></span>
<p style="margin-left: 90px;color: rgb(174, 177, 180);">——鬼灭之带</p>
<i id="pinlun">9.8</i>
<p >播放量：9047</p>
<p>评论量：67342789853</p>
<p>动漫类型：动漫改&热血&奇幻</p>
<p id="jianjie">剧情简介：还能是滴哦飞机囧圣诞节佛山的看氛围和多福及饿哦山东黄金覅和划分iOS的何炅是电话费hi欧等级划分iOS的Hi好hi府文化的覅货架上低耦合剂佛未激活iOS等哈就hi介绍费his火箭还是发his大好人覅搜地方佛经看妇女几米宽的近几年覅哦都是就oops的风景</p>
</li> -->
</ul>
</div>
</div>
<div class="dibu">
<p >刀剑神域 日本动漫 新妹魔王的契约者 进击的巨人 学园默示录 新番动漫 亲吻姐姐 电锯人动漫</p>
<p>本网站提供的最新动漫资源均系收集于各大视频网站，本网站只提供web页面服务，并不提供影片资源存储，也不参与录制、上传</p>
<p> 若本站收录的链接无意侵犯了贵司版权，请邮箱联系我们，我们会及时处理相关内容，谢谢！邮箱：mddmlianxi#hotmail.com</p>
<p>Copyright ©2020-2022 www.mandao.tv All Rights Reserved · 百度地图 · 谷哥地图</p>
<p> 湘ICP备20225100号</p>
</div>
</div>
</body>
</html>后端部分代码：
package com.Web.controller;
import com.Web.dao.FanjuDao;
import com.Web.entity.Fanju;
import com.baomidou.mybatisplus.core.conditions.query.QueryWrapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import static jdk.nashorn.internal.objects.NativeDebug.map;
//前后端交互
@RestController
@RequestMapping("/fanju")//请求父路径
public class FanjuController {
@Autowired//将FanjuDao注入文本中
FanjuDao fanjuDao;
//传输fanju数据库数据给前端的方法
@GetMapping("/index") //localhost:8086/Fanju/index
public HashMap<String,Object> list(){
HashMap<String,Object> map = new HashMap<>();
//查看所有数据
List<Fanju> list = fanjuDao.selectList(null);
map.put("data",list);
map.put("code",200);
return map;
}
//读取数据，进行判断，传输数据返回给前端
@GetMapping("/info")
public HashMap<String,Object> setInfo(Fanju fanju){
//声明一个hashMop,用于存储响应给前端数据
HashMap<String, Object> map = new HashMap<>();
//钩造查询条件
QueryWrapper<Fanju> wrapper = new QueryWrapper<>();
wrapper.eq("id",fanju.getId());//查询id
List<Fanju> list = fanjuDao.selectList(wrapper);
map.put("data",list);
map.put("code",200);
return map;
}
//接受传入数据，查询数据，返回给前端
@GetMapping("/fenlei") //localhost:8086/fanju/fenlei
public HashMap<String,Object> Fenlei(String str){ //如： 热血 传入String类型
HashMap<String, Object> map = new HashMap<>();
//查询所有数据
List<Fanju> list = fanjuDao.selectList(null);
//定义变量存储返回值
List<Fanju> data = new ArrayList<>();
//判断前两百条数据
for (int i = 0; i < 200; i++) {
//分割字符串
String[] split = list.get(i).getFanjuType1().split("&");
for (String s : split) {
//如果字段相等，追加到data泛型，返回给前端
if(s.equals(str)){
//添加数据
data.add(list.get(i));
}
}
}
map.put("data",data);
map.put("code",200);
return map;
}
//接受传入数据，查询搜索数据，返回给前端
@GetMapping("/sousuo")
public HashMap<String,Object> select(String str){
HashMap<String, Object> map = new HashMap<>();
String str1 = "%"+str+"%"; //周围添加一个或者多个字符
//构造查询条件
QueryWrapper<Fanju> wrapper = new QueryWrapper<>();
//正则表达式,进行模糊搜索
wrapper.like("fanju_title",str1);
//查询所有数据
List<Fanju> list = fanjuDao.selectList(wrapper);
if (list !=null){
map.put("data",list);
map.put("code",200);
return map;
}else {
map.put("map", "数据为空");
map.put("code", 500);
return map;
}
}
}
完成代码可以去到我的git上面下载使用：动漫网站: 建议模仿哔哩哔哩动漫实现动漫网站，练习html，css，Java等代码
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)