一.项目分析
1.前端后端功能分析
前端功能:
用户登录
用户注册
分类显示
信息显示
分页功能(首页,下一页,上一页,尾页)
历史记录功能
评论模块
后台功能:
管理员登录
主页默认显示所有新闻+分页
发布新闻
修改新闻
分类模块:增删改查模块
评论模块:增删改查
普通用户管理:增删改查
分页功能
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>