粗糙漫画网站（真的粗糙）之首页设计

最新推荐文章于 2021-07-16 23:53:48 发布

舒克舒克开飞机的舒克

最新推荐文章于 2021-07-16 23:53:48 发布

阅读量1k

点赞数

本文链接：https://blog.csdn.net/weixin_45660458/article/details/117392133

版权

*最近在写期末大作业，是一个粗糙的漫画网站，用JSP+bootstrap实现。一边写一边疯狂感叹，俺真滴好菜:(

这里是作业要求：*
在这里插入图片描述
如果有同学经过…请别全抄俺的…(希望不会有
这篇先写首页，主要是导航栏和链接，还有一个莫名其妙的轮播(其实没有存在的必要
但因为只要求有一部漫画，所以在页面设计上没法大展身手嘿嘿

①头部：引用了一些包和从菜鸟上摘来的bootstrap链接

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page language="java" import="java.sql.*" %>
<%@ page language="java" import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Comic Club</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

②body部分：
先建立数据库连接，访问存储用户数据的数据库
数据库也很简陋，只有4 5个字段，
用户编号（userID）用户名（username）密码（password）是否是会员（isvip）性别（sex）

<%
	Class.forName("com.mysql.cj.jdbc.Driver");
	String url = "jdbc:mysql://这里是选择数据库"
    	        + "user=用户名&password=密码&useUnicode=true&characterEncoding=UTF8&useSSL=false&allowPublicKeyRetrieval=true";	
    //保护隐私处理
	Connection conn =DriverManager.getConnection(url);
%>

③初步设计导航栏
从头到尾都出现的只有comic按钮与search搜索框，这里先写这俩

<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container-fluid">
    <div>
      <a class="navbar-brand" href="http://localhost:8080/cueb/Final/index.jsp">Comic Club</a>
    </div> 
   
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="http://localhost:8080/cueb/Final/comic.jsp">Comic</a>
      </li>
    </ul>
  </div>
  <div>
  <form class="navbar-form navbar-left form-inline" role="search">
  	<div class="form-group">
    	<input class="form-control" type="text" placeholder="Search">
  	</div>
    	<button class="btn btn-secondary" type="submit">Search</button>
  </form>
  </div>
  </div>
</nav>

④对于还没有登录的用户，要显示sign in和register按钮，供用户登录或注册

<%
String s1 = (String)session.getAttribute("login");	//从登录页面传过来的session，‘yes’表示登录，null是未登录
if(s1 == null){
      	%>
	      <li class="nav-item">
	        <a class="nav-link" href="http://localhost:8080/cueb/Final/signIn.jsp">Sign in</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="http://localhost:8080/cueb/Final/register.jsp">Register</a>
	      </li>

⑤如果用户已经登录，就显示game（提供给VIP用户的小游戏/ 不得不说这个插入挺莫名其妙的/ 但是这是我们这学期学过最高级的东西了）
和MyInfo（查看用户信息）和exit（退出登录）

else{
    	  if(flag == true){%>
    	  	<li class="nav-item">
        		<a class="nav-link" href="http://localhost:8080/cueb/Final/game.jsp">Game</a>
      		</li>
    	  <%
    	  }%>
    		<li class="nav-item">
        		<a class="nav-link" href="http://localhost:8080/cueb/Final/info.jsp">My Info</a>
      		</li>
      		<li class="nav-item">
        		<a class="nav-link" href="">Exit</a>
      		</li>
      <%} %>

⑥因为game只供VIP，所以在这之前，要先看看用户是不是VIP，也就是在数据库里康康isvip字段的值（‘N’表示普通用户，‘Y’表示VIP）（这段要写在else之前哦！）

String s2 = (String)session.getAttribute("username"); //也是从登录页面传过来的用户名
      
String sql = "select isvip from 045_login where username = ?";
PreparedStatement pstat = conn.prepareStatement(sql);
      
pstat.setString(1, s2);
ResultSet rs = pstat.executeQuery();
boolean flag = false;
while(rs.next()){
	  String isvip = rs.getString(1);
      if("N".equals(isvip)){
    	  flag = false;
      }
      else{
    	  flag = true;
      }
     }
      
rs.close();
pstat.close();
conn.close();

结束！
（代码顺序有点乱，凑活看看吧）（轮播就是菜鸟上拷贝来的代码，就不放辣）

作业还没交，有意见大家尽管提提! 感谢！

附上完整代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ page language="java" import="java.sql.*" %>
<%@ page language="java" import="java.util.*" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Comic Club</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

</head>

<body>
<% request.setCharacterEncoding("UTF-8"); %>
<%
	Class.forName("com.mysql.cj.jdbc.Driver");
	String url = "jdbc:mysql://*特殊处理*/studb?"
    	        + "user=*特殊处理*&password=*特殊处理*&useUnicode=true&characterEncoding=UTF8&useSSL=false&allowPublicKeyRetrieval=true";
	Connection conn =DriverManager.getConnection(url);
%>

<!-- navbar -->
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <div class="container-fluid">
    <div>
      <a class="navbar-brand" href="http://localhost:8080/cueb/Final/index.jsp">Comic Club</a>
    </div> 
   
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>
  
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="http://localhost:8080/cueb/Final/comic.jsp">Comic</a>
      </li>
      <%
      String s1 = (String)session.getAttribute("login");
      String s2 = (String)session.getAttribute("username");
      
      String sql = "select isvip from 045_login where username = ?";
      PreparedStatement pstat = conn.prepareStatement(sql);
      
      pstat.setString(1, s2);
      ResultSet rs = pstat.executeQuery();
      boolean flag = false;	//判断是不是VIP
      while(rs.next()){
    	  String isvip = rs.getString(1);
    	  if("N".equals(isvip)){
    		  flag = false;
    		  session.setAttribute("vip", "no");
    	  }
    	  else{
    		  flag = true;
    		  session.setAttribute("vip", "yes");
    	  }
      }
      
      rs.close();
      pstat.close();
      conn.close();
      if(s1 == null){
      	%>
	      <li class="nav-item">
	        <a class="nav-link" href="http://localhost:8080/cueb/Final/signIn.jsp">Sign in</a>
	      </li>
	      <li class="nav-item">
	        <a class="nav-link" href="http://localhost:8080/cueb/Final/register.jsp">Register</a>
	      </li>
      <%}
      else{
    	  if(flag == true){%>
    	  	<li class="nav-item">
        		<a class="nav-link" href="http://localhost:8080/cueb/Final/guess.jsp">Game</a>
      		</li>
    	  <%
    	  }%>
    		<li class="nav-item">
        		<a class="nav-link" href="http://localhost:8080/cueb/Final/info.jsp">My Info</a>
      		</li>
      		<li class="nav-item">
        		<a class="nav-link" href="http://localhost:8080/cueb/Final/exit.jsp">Exit</a>
      		</li>
      <%} %>
	</ul>
  </div>
  <div>
  <form class="navbar-form navbar-left form-inline" role="search">
  	<div class="form-group">
    	<input class="form-control" type="text" placeholder="Search">
  	</div>
    	<button class="btn btn-secondary" type="submit">Search</button>
  </form>
  </div>
  </div>
</nav>
<br>


<div align="center">
    <img src="http://localhost:8080/cueb/Final/cover.png" height="50%" width="80%"/>
</div>

</body>
</html>

舒克舒克开飞机的舒克

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
粗糙漫画网站（真的粗糙）之首页设计

最近在写期末大作业，是一个粗糙的漫画网站，用JSP+bootstrap实现。一边写一边疯狂感叹，俺真滴好菜:(这里是作业要求：如果有同学经过…请别全抄俺的…(希望不会有这篇先写首页，主要是导航栏和链接，还有一个莫名其妙的轮播(其实没有存在的必要但因为只要求有一部漫画，所以在页面设计上没法大展身手嘿嘿①头部：引用了一些包和从菜鸟上摘来的bootstrap链接<%@ page language="java" contentType="text/html; charset=UTF-8"
复制链接

扫一扫