粗糙漫画网站(真的粗糙)之首页设计

最近在写期末大作业,是一个粗糙的漫画网站,用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();

结束!
(代码顺序有点乱,凑活看看吧)(轮播就是菜鸟上拷贝来的代码,就不放辣)

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

上一篇:图灵 Java架构师 VIP 四期


下一篇:Linux 安装 tomcat