目录
预备操作：
1.导包：
将准备好的素材文件以及jar包导入到项目中
tip：不要把文件位置放错了，素材必须是在webapp目录下，而jar包则是要在WEB-INF中的lib中
2.开启Oracle数据库服务&配置监听
具体操作：https://blog.csdn.net/m0_67376124/article/details/123797159
3.创建数据库
(1)用户表
CREATE TABLE T_USER(
USER_ID NUMBER PRIMARY KEY,--用户编号
USER_NAME VARCHAR2(30) NOT NULL,--用户姓名
USER_PASSWORD VARCHAR(30) NOT NULL,--用户密码
USER_SEX VARCHAR(3) NOT NULL CHECK(USER_SEX='男'OR USER_SEX='女'),--用户性别
USER_AGE NUMBER NOT NULL--用户年龄
);(2)news表
create table t_news(
news_id number primary key ,--ID
news_title varchar2(255) not null,--标题
news_topic number not null,--类型
news_author varchar2(255) not null,--作者
news_publisher varchar2(255) not null,--发布时间
news_content long not null--内容
);一，登录
1.界面(login)
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/**
*登录界面
*/
%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
* {
outline: none !important;
}
html, body {
background:#1abe9c;
}
form {
width: 300px;
background: #ebeff2;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .5);
border-radius: 5px;
padding: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.btn-group {
width: 100%;
}
.btn-group button {
width: 50%;
}
</style>
</head>
<body>
<!-- methid的方式有两种:1.get(直接显示在状态栏上的) 2.post(不会显示在状态栏上的数据) -->
<form action="doLogin.jsp" method="post" id="myForm">
<h3 class="text-center">欢迎使用一麟新闻管理</h3>
<div class="form-group">
<input name="name" type="text" id="username" class="form-control" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<input name="password" type="password" id="password" class="form-control" placeholder="请输入您的密码">
</div>
<div class="btn-group">
<button type="submit" class="btn btn-primary">登录</button>
<button type="button" class="btn btn-danger" onclick='location=href="regiest.jsp"'>没有账号?</button>
<!-- 没有账号就跳转到注册的界面 -->
</div>
</form>
<script type="text/javascript">
//表单的提交验证
//tip:这里只是做了非空判断,这里能使用很多方式做验证,比如jQuery插件,JavaScript验证,jQuery验证
$("#myForm").submit(()=>{
if($("#username").val().lenght==0){
alert("用户名不能为空");
return false;
//return false;这个时候表单是不提交的
}if($("#password").val().lenght==0){
alert("密码不能为空");
return false;
}
})
</script>
</body>
</html>
2.登录验证(doLogin)
代码如下：
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.Connection"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/**
*登录数据库处理
*/
request.setCharacterEncoding("UTF-8");//设置编码语言,避免乱码
String name = request.getParameter("name");//从登录界面通过输入框中的name属性获取用户姓名
String pwd = request.getParameter("password");//从登录界面通过输入框中的name属性获取用户密码
//导包
//OracleDriver(alt+/)
//加载驱动
Class.forName("oracle.jdbc.driver.OracleDriver");
//定义连接字符串
String URL = "jdbc:oracle:thin:@localhost:1521:orcl";//可以封装成类
//获得连接
Connection con = DriverManager.getConnection(URL, "scott", "sa123");
//获取执行对象
PreparedStatement ps = con.prepareStatement("select * from t_user where user_name=? and user_password=?");
//占位符设值
ps.setString(1, name);
ps.setString(2, pwd);
//获得结果集
ResultSet rs = ps.executeQuery();
//判断结果
if (rs.next()) {
request.getRequestDispatcher("/news/index.jsp").forward(request, response);
/**
在下述讲解中,我们就会发现我们的/news/index.jsp路径在页面中的跳转也是能够成功的,
那么问题来了,按照理论知识来讲是不能进行跳转的,而且路径也该会变成
localhost:8080/news/index.jsp
其实原因很简单:
我们的转发是属于服务器行为,而重定向则不然,是属于客户端行为,注意两者的区别!
说到这里,我们就不难理解了,因为在此无论如何都是以项目为主的,就会跳转到我们项目的根目录,
路径应该是localhost:8080/web04/news/index.jsp
**/
} else {
//重定向
/**
跳转的时候有两种情况：
(1)a.jsp 跳转到当前路径下的a.jsp,假如当前路径是localhost:8080/web04,
那么就会跳转到localhost:8080/web04/a.jsp
(2)../a.jsp 跳转到上一级路径下的a.jsp 就上述路径而言,
就会跳转到localhost:8080/a.jsp
(3)/a.jsp 根目录的a.jsp 就上述路径而言,根目录是localhost:8080
那么就会跳转到loaclhost:8080/a.jsp
**/
response.sendRedirect("${pageContext.request.contextPath}/login.jsp");//或者路径为login.jsp,因为是同级目录
}
//关闭资源
if (con != null && !con.isClosed()) {
con.close();
}
if (ps != null) {
ps.close();
}
if (rs != null) {
rs.close();
}
%>二，注册
1 界面(regiest)
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
/**
*注册界面
*/
%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Document</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="${pageContext.request.contextPath}/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
* {
outline: none !important;
}
html,
body {
background: #1abe9c;
}
form {
width: 300px;
background: #ebeff2;
box-shadow: 0px 0px 50px rgba(0, 0, 0, .5);
border-radius: 5px;
padding: 20px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.btn-group {
width: 100%;
margin-bottom: 15px;
}
.btn-group > * {
width: 50%;
}
</style>
</head>
<body>
<form action="doRegiest.jsp" method="post" id="myForm">
<h3 class="text-center">欢迎注册</h3>
<div class="form-group">
<input name="name" type="name" required id="username" class="form-control" placeholder="请输入您的姓名">
</div>
<div class="form-group">
<input name="password" type="password" required id="userpwd" class="form-control" placeholder="请输入您的密码">
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-primary active">男<input type="radio" value="男" name="sex" checked></label>
<label class="btn btn-primary">女<input type="radio" value="女" name="sex"></label>
<!-- 性别是默认为男的 -->
</div>
<div class="form-group">
<!-- 年龄在18-150之间 -->
<input name="age" type="number" required id="age" min="18" max="150" class="form-control" placeholder="请输入您的年龄">
</div>
<div class="btn-group">
<button type="submit" class="btn btn-primary">注册</button>
<button type="button" class="btn btn-danger" onclick='location=href="login.jsp"'>已有账号?</button>
<!-- 有账号就跳转到登录界面 -->
</div>
</form>
<script type="text/javascript">
//表单的提交验证
//tip:这里只是做了非空判断,这里能使用很多方式做验证,比如jQuery插件,JavaScript验证,jQuery验证
$("#myForm").submit(()=>{
if($("#username").val().lenght==0){//用户名
alert("用户名不能为空");
return false;
//return false;这个时候表单是不提交的
}if($("#password").val().lenght==0){//密码
alert("密码不能为空");
return false;
}
//性别因为是默认的,所以不需要做判断
if($("#age").val().lenght==0){//年龄
alert("年龄不能为空");
return false;
}
})
</body>
</html>
2.注册处理(doRegiest)
代码如下：
<%@page import="java.sql.ResultSet"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.sql.Connection"%>
<%@page import="oracle.jdbc.driver.OracleDriver"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf-8");//防止乱码
//从注册界面接收用户注册的数据
//以下都是根据输入框的name属性进行取值
String name = request.getParameter("name");//姓名
String pwd = request.getParameter("password");//密码
String sex = request.getParameter("sex");//性别
String age = request.getParameter("age");//年龄
//导包
//OracleDriver
//加载驱动
Class.forName("oracle.jdbc.driver.OracleDriver");
//定义连接字符串
//jdbc:oracle:thin:@localhost:1521:orcl
String URL = "jdbc:oracle:thin:@localhost:1521:orcl";
//获得连接
Connection con = DriverManager.getConnection(URL, "scott", "sa123");
//主键不能不填
//主键没有自增的选项（触发器+序列）
//获得执行对象[数据插入之前，先把主键查询出来]
PreparedStatement ps = con.prepareStatement("select nvl(max(user_id),0) from t_user");
//获得结果集
ResultSet rs = ps.executeQuery();
int id = 0;
if (rs.next()) {
id = rs.getInt(1);//获取最大ID
}
id++; //避免主键重复
//增加用户
ps = con.prepareStatement(
"insert into t_user(user_id, user_name, user_password, user_sex, user_age) values(?,?,?,?,?)");
//赋值(注意:数据一定要一一对应)
ps.setInt(1, id);
ps.setString(2, name);
ps.setString(3, pwd);
ps.setString(4, sex);
ps.setInt(5, Integer.parseInt(age));
//执行结果
int n = ps.executeUpdate();
//判断结果
if (n > 0) {//表示注册成功了
out.print("<script>alert('注册成功');location.href='${pageContext.request.contextPath}/news/index.jsp'</script>");
} else {//增加失败
out.print("<script>alert('注册失败');location.href='${pageContext.request.contextPath}/news/index.jsp'</script>");
}
//资源的关闭
if (con != null && !con.isClosed()) {
con.close();
}
if (ps != null) {
ps.close();
}
if (rs != null) {
rs.close();
}
%>三，主页
界面(index)
代码如下：
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<meta content="width=device-width, initial-scale=1" name="viewport">
<link href="/web04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet">
<script src="/web04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="/web04/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
* {
outline: none !important;
}
body,
html {
background: #7f8d90;
}
nav,
.breadcrumb {
border-radius: 0px !important;
margin-bottom: 0px !important;
}
.breadcrumb {
margin-bottom: 20px !important;
background: #36485c;
color: white;
}
li h4 {
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb .active {
color: yellow;
}
</style>
</head>
<body>
<nav class="navbar navbar-default hidden-sm hidden-xs">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="index.html" style="font-size: 25px;">⭐</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"> 新闻管理
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="/web04/news/add.jsp">新闻发布</a></li>
<li class="divider"></li>
<li><a href="#">类别管理</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a><%=request.getParameter("name") %></a></li>
<li><a href="#">退出<span class="glyphicon glyphicon-off"></span></a></li>
</ul>
</div>
</nav>
<ol class="breadcrumb">
<li>您当前的位置是</li>
<li>新闻发布系统</li>
<li class="active">首页</li>
</ol>
<form class="form-inline" style="margin: 0px auto 20px;">
<div class="form-group" style="display: block;text-align: center;">
<div class="input-group">
<div class="input-group-addon">新闻标题</div>
<input class="form-control" placeholder="请在此输入搜索的关键字" type="text">
<span class="input-group-btn">
<button class="btn btn-primary" type="submit">搜索🔍</button>
</span>
</div>
</div>
</form>
<div class="container">
<ul class="list-group">
<li class="list-group-item">
<h4 class="list-group-item-heading">
<a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委：昨日新增确诊病例29例，其中本土病例2例">
国家卫健委：昨日新增确诊病例29例，其中本土病例2例
</a>
</h4>
<p class="list-group-item-text text-right">
<span class="glyphicon glyphicon-user"><code>毛泽东</code></span>
<span class="glyphicon glyphicon-eye-open"><code>110</code></span>
<span class="glyphicon glyphicon-tag"><code>110</code></span>
<span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">
<a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委：昨日新增确诊病例29例，其中本土病例2例">
国家卫健委：昨日新增确诊病例29例，其中本土病例2例
</a>
</h4>
<p class="list-group-item-text text-right">
<span class="glyphicon glyphicon-user"><code>毛泽东</code></span>
<span class="glyphicon glyphicon-eye-open"><code>110</code></span>
<span class="glyphicon glyphicon-tag"><code>110</code></span>
<span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">
<a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委：昨日新增确诊病例29例，其中本土病例2例">
国家卫健委：昨日新增确诊病例29例，其中本土病例2例
</a>
</h4>
<p class="list-group-item-text text-right">
<span class="glyphicon glyphicon-user"><code>毛泽东</code></span>
<span class="glyphicon glyphicon-eye-open"><code>110</code></span>
<span class="glyphicon glyphicon-tag"><code>110</code></span>
<span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">
<a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委：昨日新增确诊病例29例，其中本土病例2例">
国家卫健委：昨日新增确诊病例29例，其中本土病例2例
</a>
</h4>
<p class="list-group-item-text text-right">
<span class="glyphicon glyphicon-user"><code>毛泽东</code></span>
<span class="glyphicon glyphicon-eye-open"><code>110</code></span>
<span class="glyphicon glyphicon-tag"><code>110</code></span>
<span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
</p>
</li>
<li class="list-group-item">
<h4 class="list-group-item-heading">
<a data-placement="bottom" data-toggle="tooltip" href="" title="国家卫健委：昨日新增确诊病例29例，其中本土病例2例">
国家卫健委：昨日新增确诊病例29例，其中本土病例2例
</a>
</h4>
<p class="list-group-item-text text-right">
<span class="glyphicon glyphicon-user"><code>毛泽东</code></span>
<span class="glyphicon glyphicon-eye-open"><code>110</code></span>
<span class="glyphicon glyphicon-tag"><code>110</code></span>
<span class="glyphicon glyphicon-time"><code>2020/1/1 10:23:04</code></span>
</p>
</li>
</ul>
</div>
<div class="container text-center">
<ul class="pagination" style="margin: 20px auto;">
<li>
<a href="#"><span>«</span></a>
</li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li>
<a href="#"><span>»</span></a>
</li>
</ul>
</div>
<script>
$(function () {
$('[data-toggle="tooltip"]').tooltip({
trigger: "hover"
})
})
</script>
</body>
</html>四，增加
1.界面(add)
代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>bootstrap</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="/web04/bootstrap-3.3.7-dist/css/bootstrap.css">
<script src="/web04//bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script>
<script src="/web04/bootstrap-3.3.7-dist/js/bootstrap.js"></script>
<style>
* {
outline: none !important;
}
body, html {
background: #7f8d90;
}
nav, .breadcrumb {
border-radius: 0px !important;
margin-bottom: 0px !important;
}
.breadcrumb {
margin-bottom: 20px !important;
background: #36485c;
color: white;
}
input, select, textarea, .panel-heading {
border: none !important;
border-radius: 0px !important;
}
.breadcrumb .active {
color: yellow;
}
</style>
</head>
<body>
<nav class="navbar navbar-default hidden-sm hidden-xs">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="/web04/news/index.jsp"
style="font-size: 25px;">⭐</a>
</div>
<ul class="nav navbar-nav">
<li class="dropdown"><a class="dropdown-toggle"
data-toggle="dropdown"> 新闻管理 <span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#">新闻发布</a></li>
<li class="divider"></li>
<li><a href="#">类别管理</a></li>
</ul></li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a>245@qq.com</a></li>
<li><a href="#">退出<span class="glyphicon glyphicon-off"></span></a></li>
</ul>
</div>
</nav>
<ol class="breadcrumb">
<li>您当前的位置是</li>
<li>新闻发布系统</li>
<li class="active">新闻发布</li>
</ol>
<form action="doAdd.jsp" class="container">
<div class="panel panel-info">
<div class="panel-heading">新闻标题</div>
<input class="form-control" maxlength="50" name="title" required
placeholder="标题控制在30个字之内哦~~~">
<div class="panel-heading">新闻类别</div>
<select name="topic" class=" form-control">
<option value="1">国际性新闻</option>
<option value="2">国内性新闻</option>
<option value="3">地方性新闻</option>
<option value="4">典型新闻</option>
<option value="5">综合新闻</option>
<option value="6">文教新闻</option>
</select>
<div class="panel-heading">新闻作者</div>
<input class="form-control" maxlength="10" name="author" required
placeholder="名字控制在10个字之内哦~~~">
<div class="panel-heading">发布时间</div>
<input type="date" class="form-control" name="publisher" required
placeholder="请选择发布时间哦~~~">
<div class="panel-heading">新闻内容</div>
<textarea class="form-control" rows="10" name="content" required
placeholder="内容是必填的哦~~~"></textarea>
<div class="panel-footer">
<button class="btn btn-primary">增加</button>
<button class="btn btn-danger">取消</button>
</div>
</div>
</form>
</body>
</html>效果如下：
2.增加新闻处理(doAdd)
代码如下：
<%@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.setCharacterEncoding("utf-8");//放置乱码
//接受新闻的数据
String title = request.getParameter("title");//标题
String author = request.getParameter("author");//作者
String publisher = request.getParameter("publisher");//发布时间
String topic = request.getParameter("topic");//类型
String content = request.getParameter("content");//内容
//新闻的添加(连接数据库)
//加载驱动
Class.forName("oracle.jdbc.driver.OracleDriver");
//定义连接字符串
String URL= "jdbc:oracle:thin:@localhost:1521:orcl";
//获得连接
Connection con = DriverManager.getConnection(URL, "scott", "sa123");
//主键不能不填
//主键没有自增的选项（触发器+序列）
//获得执行对象[数据插入之前，先把主键查询出来]
PreparedStatement ps = con.prepareStatement("select nvl(max(news_id),0) from t_news");
//获得结果集
ResultSet rs = ps.executeQuery();
int id = 0;
if (rs.next()) {
id = rs.getInt(1);//获取最大ID
}
id++; //避免主键重复
//插入新闻的操作
ps = con.prepareStatement(
"insert into t_news(news_id, news_title, news_topic, news_author, news_publisher, news_content) values(?,?,?,?,?,?)");
//赋值(注意:数据一定要一一对应)
ps.setInt(1, id);//新闻的编号
ps.setString(2, title);//新闻的标题
ps.setInt(3, Integer.parseInt(topic));//新闻的类型
ps.setString(4, author);//新闻的作者
ps.setString(5, publisher);//新闻的发布时间
ps.setString(6, content);//新闻的内容
//执行结果
int n = ps.executeUpdate();
//判断结果(无论增加是否成功都跳转到新闻主页)
if (n > 0) {//增加成功
out.print("<script>alert('增加成功');location.href='/web04/news/index.jsp'</script>");
} else {//增加失败
out.print("<script>alert('增加失败');location.href='/web04/news/index.jsp'</script>");
}
//资源的关闭
if (con != null && !con.isClosed()) {
con.close();
}
if (ps != null) {
ps.close();
}
if (rs != null) {
rs.close();
}
%>
五，注意事项
1.文件的路径是否一一对应
2.数据类型是否一一对应并且顺序一致
3.设置编码（防止乱码）
4.在引进HTML文件的时候最好不要直接改文件的后缀，可能会出现乱码的情况，最好直接复制关键内容
这期的到这里就OK了，后期会完善这个新闻管理的小项目的其他功能！
扫一扫
2748
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
