JavaWEB-04 项目案例(1)

22 篇文章 1 订阅

一.项目分析

1.前端后端功能分析

前端功能

  1. 用户登录
  2. 用户注册
  3. 分类显示
  4. 信息显示
  5. 分页功能(首页,下一页,上一页,尾页)
  6. 历史记录功能
  7. 评论模块

后台功能

  1. 管理员登录
  2. 主页默认显示所有新闻+分页
  3. 发布新闻
  4. 修改新闻
  5. 分类模块:增删改查模块
  6. 评论模块:增删改查
  7. 普通用户管理:增删改查
  8. 分页功能

2.数据表分析

从模板中分析到有以下数据表:用户表(普通用户+管理员),新闻分类标,新闻信息表,评论表

用户信息表

字段名

中文说明

数据类型

约束

备注

Userid

编号

Number

主键

Username

用户名

Varchar2

Password

密码

Varchar2

sex

性别

Varchar2

Hobby

爱好

Varchar2

address

地址

Varchar2

urole

权限

number

0管理员 1普通用户(默认)

udate

注册时间

date

分类表|主题表

字段名

中文说明

数据类型

约束

备注

Tid

分类编号

Nunber

主键

tname

分类名称

Varchar2

信息表:

字段名

中文说明

数据类型

约束

备注

Nid

新闻编号

Number

主键

nTid

新闻分类编号

Number

外键

Ntitle

标题

Varchar2

Nauthor

作者

Varchar2

nsummary

摘要

Varchar2

ncontent

内容

Varchar2

nimage

图片

Varchar2

ncount

点击量

number

ndate

发布时间

date

二.项目代码

Oracle数据代码

create table tb_news_users
(
Userid number primary key,
Username varchar2(100),
Password varchar2(100),
sex varchar2(2),
Hobby varchar2(100),
address varchar2(100),
urole number default 1,--0 管理员  1普通用户
udate date

)
insert into tb_news_users
values
(1,'admin','123','男','玩游戏','湖南长沙',0,sysdate)
commit;
select * from tb_news_users;

--主题表
create table tb_news_theme
(
       tid number(20) primary key,
       tname varchar2(20)

)

insert into tb_news_theme values(1,'国际');
insert into tb_news_theme values(2,'美女');
insert into tb_news_theme values(3,'游戏');
insert into tb_news_theme values(4,'娱乐');
insert into tb_news_theme values(5,'体育');
insert into tb_news_theme values(6,'足浴');
insert into tb_news_theme values(7,'恐怖');
insert into tb_news_theme values(8,'军事');
insert into tb_news_theme values(9,'科技');
insert into tb_news_theme values(10,'数码');
insert into tb_news_theme values(11,'动漫');
commit



create table tb_news
(
    nid number(20) primary key,
    ntid number(20) references tb_news_theme(tid),
    ntitle varchar2(100),
    nauthor   varchar2(20) ,
    nsummary varchar2(200),
    ncontent varchar2(2000)
)

insert into tb_news values
(1,2,'毒瘤爱上女总裁1','张三','这是一个怎样的故事1?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情');
insert into tb_news values
(2,2,'毒瘤爱上女总裁2','李四','这是一个怎样的故事2?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情');
insert into tb_news values
(3,2,'毒瘤爱上女总裁3','张无忌','这是一个怎样的故事3?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情');
insert into tb_news values
(4,2,'毒瘤爱上女总裁4','渣渣辉','这是一个怎样的故事4?','那是一个风雨交加的夜晚,毒瘤先生走进了一个无名山洞,做了一件难以忘记的事情');

commit;

select * from tb_news_theme
select * from tb_news

① 用户登录

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>项目发布系统-管理员登录</title>
<!-- 引入login.css -->
<link rel="stylesheet" type="text/css" href="css/login.css"/>
<!-- JavaScript 验证表单区域 -->
<script type="text/javascript">

	var code = "";//保存验证码
	//验证的需求:利用随机数  +拼接+数组存储需要随机的字符
	var arr =['a','b','c','d','e','f','g','h','i','j','k','l','0','1','2','3','4','5','6','7','8','9'];

	
	function $(id){
		return document.getElementById(id);
	}
	//加载函数
	window.onload = function(){
		//设置username的焦点事件
		$("username").onblur = function(){
			var usernameValue = this.value;
			if(!usernameValue){
				alert('用户名不能为空')
				return false;
			}
			return true;
		}
		//设置password的焦点事件
		$("password").onblur = function(){
			var passwordValue = this.value;
			if(!passwordValue){
				alert('密码不能为空')
				return false;
			}
			return true; 
		}
		
		//获取表单设置表单的阻止提交事件
		$("myForm").onsubmit = function(){
			if(!$("username").onblur() || !$("password").onblur() || !$("code").onblur()){
				return false;
			}
			return true;
		}
		
		//获取验证码进行匹配
		$("code").onblur = function(){
			//获取输入项中的验证码
			var inputCode = this.value;
			//获取span标签随机生成保留的验证码
			var spanCode = $("code_val").innerHTML;
			if(!inputCode){
				alert('验证码不能为空');
				return false;
			}else{//编写了验证码
				if(inputCode!=spanCode){
					alert('验证码输入错误');
					this.value = "";
					//重新生成
					return false;
				}
			}
			return true;
		};
		
		
		
		
		//问题:验证码的实现通过什么技术?
		//随机生成的验证码 有四个字母或者数字?    随机
		//javascript  随机器   Math.random()  0-1之间		
		
		//生成一个0-9的随机数
		/* var sj = Math.random()*10;
		// 向下取整 
		console.log(Math.floor(sj)); */
		
		
		setCode();
		
		
		
		/* 如果span中存储的验证码不清晰  需要重新修改  设置span的点击事件 */
		$("code_val").onclick = function(){
			setCode();
		}
	};
	
	//封装验证码生成
	function setCode(){
		//清空上一次保留的验证码
		code = "";
		//通过Math.random();产生一个随机数
		for(var i = 0;i<4;i++){
			/* 取范围 乘  数组的长度个数 */
			var sj = Math.floor(Math.random()*arr.length);
			//console.log(sj)
			//console.log(arr[sj]);  //根据随机数获取数组中的元素
			code+=arr[sj];
		}
		//获取存储验证码的span标签
		$("code_val").innerHTML = code;
	}



</script>	
	
</head>
	<body>
		<!-- 登录大容器 -->
		<div id="login">
			<!-- 上 -->
			<div id="top">
				<div id="top_left"><img src="images/login_03.gif" /></div>
				<div id="top_center"></div>
			</div>
			<!-- 中 -->
			<div id="center">
				<div id="center_left"></div>
				<!-- 表单区域 -->
				<div id="center_middle" style = "background:pink">
					<form id = "myForm" action = "doLogin.jsp" method = "post">
						<div id="user">用 户
							<input type="text" id= "username" name="username" />
						</div>
						<div id="pwd">密 码
							<input type="password" id = "password" name="password" />
						</div>
						<!-- 登录前需要验证码进行验证 -->
						<div id = "yzm">
							验证码 <input type ="text" name = "code" id = "code"/><span id = "code_val">SBSB</span>
						</div>
						<div id="btn">
							<input type = "submit" value = "登录"/>
							<input type = "reset" value = "清空"/>
						</div>
							
					
					</form>
				</div>
				<div id="center_right"></div>
			</div>
			<!-- 下 -->
			<div id="down">
				<div id="down_left">
					<div id="inf">
						<span class="inf_text">版本信息</span>
						<span class="copyright">管理信息系统 2008 v2.0</span>
					</div>
				</div>
				<div id="down_center"></div>
			</div>

		</div>
	</body>
</html>

② 登录中转站

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>

    <%
    	//该页面作用:根据request对象获取登录表单提交的值进行数据库交互
    	
    	//1.设置编码
    	request.setCharacterEncoding("utf-8");
    
    	//2.获取表单提交的值
    	//用户名
    	String username = request.getParameter("username");
    	//密码
    	String password = request.getParameter("password");
    	
    	//3.数据库交互
    	
    	String uname = "";
    	String pwd = "";
	    //加载驱动
		Class.forName("oracle.jdbc.driver.OracleDriver");
		//建立连接
		String url = "jdbc:oracle:thin:@localhost:1521:orcl";
		Connection conn = DriverManager.getConnection(url, "scott", "123");
    	//sql
    	String sql = "select * from tb_news_users where username = ? and password = ?";
    	PreparedStatement ps = conn.prepareStatement(sql);
    	ps.setString(1,username);
    	ps.setString(2,password);
    	ResultSet rs = ps.executeQuery();
    	if(rs.next()){//存在 就可以登录
    		uname = rs.getString(1);
    		pwd = rs.getString(2);
    	}
    	
    	if(""!=uname && ""!=pwd){
    		//转发到主页面
    		request.getRequestDispatcher("admin.jsp").forward(request, response);
    	}else{
    		//out.println(js)
			response.sendRedirect("login.jsp");
    	}
    
    
    %>
    
    

③ 项目后台主页

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>项目发布系统-后台主页</title>
		<link rel="stylesheet" type="text/css" href="css/admin.css" />
	</head>
	<body>
		<div id="header">
			<div id="welcome">欢迎使用项目管理系统!</div>
			<div id="nav">
				<div id="logo"><img src="images/logo.jpg" alt="中国" /></div>
				<div id="a_b01"><img src="images/a_b01.gif" alt="" /></div>
			</div>
		</div>
		<div id="admin_bar">
			<div id="status">管理员:<%=request.getParameter("username") %> 登录 &#160;&#160;&#160;&#160; <a href="#">login out</a></div>
			<div id="channel"> </div>
		</div>
		<div id="main">
			<div id="opt_list">
				<ul>
					<li><a href="admin.html">管&nbsp;&nbsp;理&nbsp;&nbsp;首&nbsp;&nbsp;页</a></li>
					<li><a href="add_news.jsp">新&nbsp;&nbsp;闻&nbsp;&nbsp;发&nbsp;&nbsp;布</a></li>
					<li><a href="admin_themeMaintain.html">主&nbsp;&nbsp;题&nbsp;&nbsp;维&nbsp;&nbsp;护</a></li>
					<li><a href="admin_themeMaintain.html">评&nbsp;&nbsp;论&nbsp;&nbsp;管&nbsp;&nbsp;理</a></li>
					<li><a style="color: red;" href="#">系统账号管理</a></li>
					<li><a style="color: red;" href="#">注册用户管理</a></li>
				</ul>
			</div>
			<div id="opt_area">
				<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
				<script language="javascript">
					function clickdel() {
						return confirm("删除请点击确认");
					}
				</script>
				<ul class="classlist">
					<li> <a href="admin_newsDetail.html">1
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 2
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 3
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 4
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 5
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li class='space'></li>
					<li> 6

							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 7 <span> 作者:news
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 8 <span> 作者:
							news
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 9<span> 作者:
							out
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 10 <span> 作者:
							news
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li class='space'></li>
					<li> 11 <span> 作者:
							news
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 12 <span> 作者:
							news
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 13<span> 作者:
							out
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 14 <span> 作者:
							news
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li> 15 <span> 作者:
							news
							&#160;&#160;&#160;&#160; <a href='admin_editNews.html'>修改</a> &#160;&#160;&#160;&#160; <a href='#' onclick='return clickdel()'>删除</a>
						</span> </li>
					<li class='space'></li>
					<p align="right"> 当前页数:[1/3]&nbsp; <a href="#">下一页</a> <a href="#">末页</a> </p>
				</ul>
			</div>
		</div>
		
	</body>
</html>

④ 项目后台发布管理

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新闻发布--管理后台</title>
		<link rel="stylesheet" type="text/css" href="css/admin.css" />
	</head>
	<body>
		<div id="header">
			<div id="welcome">欢迎使用新闻管理系统!</div>
			<div id="nav">
				<div id="logo"><img src="images/logo.jpg" alt="新闻中国" /></div>
				<div id="a_b01"><img src="images/a_b01.gif" alt="" /></div>
			</div>
		</div>
		<div id="admin_bar">
			<div id="status">管理员: 登录 &#160;&#160;&#160;&#160;<a href="#">退出</a></div>
			<div id="channel"> </div>
		</div>
		<div id="main">
			<div id="opt_list">
				<ul>
					<li><a href="admin.html">管&nbsp;&nbsp;理&nbsp;&nbsp;首&nbsp;&nbsp;页</a></li>
					<li><a href="admin_addNews.html">新&nbsp;&nbsp;闻&nbsp;&nbsp;发&nbsp;&nbsp;布</a></li>
					<li><a href="admin_themeMaintain.html">主&nbsp;&nbsp;题&nbsp;&nbsp;维&nbsp;&nbsp;护</a></li>
					<li><a style="color: red;" href="#">系统账号管理</a></li>
					<li><a style="color: red;" href="#">注册用户管理</a></li>
				</ul>
			</div>
			<div id="opt_area">
				<h1 id="opt_type"> 添加新闻: </h1>
				<form action="doAddNews.jsp" method="post">
					<p>
						<label> 主题 </label>
						<select name="ntid">
							<option value="1">国际</option>
							<option value="2">美女</option>
							<option value="3">游戏</option>
							<option value="4">娱乐</option>
							<option value="5">体育</option>
						</select>
					</p>
					<p>
						<label> 标题 </label>
						<input name="ntitle" type="text" class="opt_input" />
					</p>
					<p>
						<label> 作者 </label>
						<input name="nauthor" type="text" class="opt_input" />
					</p>
					<p>
						<label> 摘要 </label>
						<textarea name="nsummary" cols="40" rows="3"></textarea>
					</p>
					<p>
						<label> 内容 </label>
						<textarea name="ncontent" cols="70" rows="10"></textarea>
					</p>
					<p>
						<label> 上传图片 </label>
						<input name="file" type="file" class="opt_input" />
					</p>
					<input name="action" type="hidden" value="addnews">
					<input type="submit" value="提交" class="opt_sub" />
					<input type="reset" value="重置" class="opt_sub" />
				</form>
			</div>
		</div>
		
	</body>
</html>

⑤ 项目后台发布管理中转站

<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    
    <%
    	//作用:获取新增表单的数据进行数据库交互
    	
    	//1.编码格式
    	request.setCharacterEncoding("utf-8");
    	//2.获取表单提交的数据
    	//编号
    	int nid = 0;//定义一个变量保存最终的id
		//链接数据库查询到最大的id   最后+1
		//加载驱动
		Class.forName("oracle.jdbc.driver.OracleDriver");
		//建立连接
		String url = "jdbc:oracle:thin:@localhost:1521:orcl";
		Connection conn = DriverManager.getConnection(url, "scott", "123");
		
		String sql = "select nvl(max(nid),0) from tb_news";
		PreparedStatement ps = conn.prepareStatement(sql);
		ResultSet rs = ps.executeQuery();
		if(rs.next()){
			nid = rs.getInt(1)+1;
		}
    	//新闻分类id
    	String tid = request.getParameter("ntid");
    	int ntid = Integer.valueOf(tid);
    	//标题
    	String ntitle = request.getParameter("ntitle");
    	//作者
    	String nauthor = request.getParameter("nauthor");
    	//摘要
    	String nsummary = request.getParameter("nsummary");
    	//内容
    	String ncontent = request.getParameter("ncontent");
    	
    	//新增新闻
    	sql = "insert into tb_news(nid,ntid,ntitle,nauthor,nsummary,ncontent,ndate,ncount) values (?,?,?,?,?,?,sysdate,0)";
    	ps = conn.prepareStatement(sql);
    	ps.setInt(1, nid);
    	ps.setInt(2,ntid);
    	ps.setString(3,ntitle);
    	ps.setString(4,nauthor);
    	ps.setString(5,nsummary);
    	ps.setString(6,ncontent);
    	int n = ps.executeUpdate();
    	if(n>0){
    		out.print("<script>alert('发布成功');location.href='admin.jsp'</script>");
    	}else{
    		out.print("<script>alert('发布失败');location.href='add_news.jsp'</script>");
    	}
    
    %>
    
    

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值