JavaWEB-04 项目案例(1)

最新推荐文章于 2022-08-31 22:18:26 发布

Charon༒

最新推荐文章于 2022-08-31 22:18:26 发布

阅读量133

点赞数

文章标签： java

本文链接：https://blog.csdn.net/m0_67793408/article/details/124069130

版权

一.项目分析
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>

<link rel="stylesheet" type="text/css" href="css/login.css"/>

<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>

Charon༒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWEB-04 项目案例(1)

一.项目分析1.前端后端功能分析前端功能：用户登录用户注册分类显示信息显示分页功能（首页，下一页，上一页，尾页）历史记录功能评论模块后台功能：管理员登录主页默认显示所有新闻+分页发布新闻修改新闻分类模块：增删改查模块评论模块：增删改查普通用户管理：增删改查分页功能2.数据表分析从模板中分析到有以下数据表：用户表（普通用户+管理员），新闻分类标，新闻信息表，评论表用户信息表：字段名中文说明数据类型约束备注Userid编号Numbe
复制链接

扫一扫