上次给大家介绍了一下页面的跳转和数据库的连接,不知道大家都记住了没有啊,今天就来接着给大家分享一下如何制作一个简单的新闻小项目吧,会用到之前给大家分享的一些知识哦,不知道大家都记住了没有,赶紧来一起动手吧。
目录
一,数据库的建立和美化包的使用
1.将准备好的美化包放进eclipseWeb中去
2.引入html文件
3.修改html文件
1.新建一个jsp文件
2.将写好的html文件复制下来
3.将复制好的内容粘贴到jsp文件里面去,但是粘贴的时候注意jsp文件里的第一行代码不能被覆盖掉,如果这一行被覆盖掉的话,就不是jsp文件了。
4.删除原本的html文件 (这一步可有可无,如果不想删掉的话也可以留着)
二,登录的制作
功能介绍:
效果图:
代码:
1.登陆界面的代码
2.dologin 登陆处理界面代码(登陆界面连接数据库的操作等)
三,主界面
效果图:
代码:
四,新建新闻功能
效果图:
代码:
1.增加界面代码
2.增加处理界面代码
五,数据库语句
一,数据库的建立和美化包的使用
1.将准备好的美化包放进eclipseWeb中去
注意位置不能乱放,如果放置的位置不对可能会导致无法运行,我们需要将准备好的美化包复制粘贴到 webapp 下
2.引入html文件
写界面的方式有很多种,大家也可以直接在eclipseWeb中写,但是在这里面是没有快捷提示的,所以大家可以直接在html里面先把需要的界面写好,然后再把它导入到eclipseWeb里面去
注意不要放错位置,这与美化包的位置并不相同,html文件需要放入WEB-INF里面去,千万不能错放到lib里面去,会导致文件无法运行
3.修改html文件
在引入html文件过后,新的问题就又来了,在eclipseWeb中,html文件是无法运行的,所以我们需要对html文件进行修改
1.新建一个jsp文件
2.将写好的html文件复制下来
3.将复制好的内容粘贴到jsp文件里面去,但是粘贴的时候注意jsp文件里的第一行代码不能被覆盖掉,如果这一行被覆盖掉的话,就不是jsp文件了。
4.删除原本的html文件 (这一步可有可无,如果不想删掉的话也可以留着)
二,登录的制作
功能介绍:
这里主要用的就是之前给大家分享到的一些知识,(比如说表单验证,以及页面跳转)密码采用了加密的形式,能够更好地保护客户隐私。点击下方登录按钮,在登陆成功过后可以跳转至新闻主界面,点击注册按钮也可以跳转至注册界面。
效果图:
代码:
1.登陆界面的代码
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><head><meta charset="UTF-8"><title>Document</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;}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><form action="doLogin.jsp" method="post" id="myForm"><h3 class="text-center">欢迎使用🐖币新闻管理</h3><div class="form-group"><input class="form-control" id="username" name="yh" placeholder="请输入您的邮箱" type="text"></div><div class="form-group"><input class="form-control" id="password" name="mm" placeholder="请输入您的密码" type="password"></div><div class="btn-group"><button class="btn btn-primary" type="submit">登录</button><button class="btn btn-danger" onclick='location=href="regiest.html"' type="button">没有账号?</button></div></form><script>$("#myForm").submit(()=>{if($("#username").val().length==0){alert("用户名不能为null")return false //不提交的}if($("#password").val().length==0){alert("密码不能为null")return false //不提交的}return true})</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 yh=request.getParameter("yh");String mm=request.getParameter("mm");//加载驱动Class.forName("oracle.jdbc.driver.OracleDriver");//定义连接字符串String url="jdbc:oracle:thin:@localhost:1521:orcl";//获得连接Connection con=DriverManager.getConnection(url,"scott","tiger");//获得执行对象PreparedStatement ps=con.prepareStatement("select * from t_user where user_name=? and user_pwd=?");ps.setString(1, yh);ps.setString(2, mm);//获得结果集ResultSet rs=ps.executeQuery();//判断结果if(rs.next()){// localhost:8080/web04/news/index.jsprequest.getRequestDispatcher("/news/index.jsp").forward(request, response);}else{//重定向 客户端/**(localhost:8080/web04/)跳转的时候:a.jsp 跳转到同级路径下的a.jsp (localhost:8080/web04/a.jsp)../a.jsp 跳转到上一级路径下的a.jsp (localhost:8080/a.jsp)/a.jsp 根目录的a.jsp (localhost:8080/a.jsp)**/response.sendRedirect("login.jsp");}//资源关闭if(con!=null&&!con.isClosed()){con.close();}if(ps!=null){ps.close();}if(rs!=null){rs.close();}%>
三,主界面
效果图:
代码:
<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%><!DOCTYPE html><head><meta charset="UTF-8"><title>bootstrap</title><meta content="width=device-width, initial-scale=1" name="viewport"><link href="/web_04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"><script src="/web_04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script><script src="/web_04/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("yh") %></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>/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>/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>/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>/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>/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.增加界面代码
<%@page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><!DOCTYPE html><head><meta charset="UTF-8"><title>bootstrap</title><meta content="width=device-width, initial-scale=1" name="viewport"><link href="/web_04/bootstrap-3.3.7-dist/css/bootstrap.css" rel="stylesheet"><script src="/web_04/bootstrap-3.3.7-dist/js/jquery-3.5.1.js"></script><script src="/web_04/bootstrap-3.3.7-dist/js/bootstrap.js"></script><style>* {outline: none !important;}body,html {background: #7f8d90;}nav,.breadcrumb {border-radius: 0 !important;margin-bottom: 0 !important;}.breadcrumb {margin-bottom: 20px !important;background: #36485c;color: white;}input,select,textarea,.panel-heading {border: none !important;border-radius: 0 !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.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="#">新闻发布</a></li><li class="divider"></li><li><a href="#">类别管理</a></li></ul></li></ul><ul class="nav navbar-nav navbar-right"><li><a>245@</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" name="title" maxlength="50" placeholder="标题控制在30个字之内哦~~~" required><div class="panel-heading">新闻类别</div><select class=" form-control" name="topic"><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" name="author" maxlength="10" placeholder="名字控制在10个字之内哦~~~" required><div class="panel-heading">发布时间</div><input class="form-control" name="publisher" required type="date"><div class="panel-heading">新闻内容</div><textarea class="form-control" name="content" placeholder="🙅达咩~~~~这是必填的" required rows="10"></textarea><div class="panel-footer"><button class="btn btn-primary">增加</button><button class="btn btn-danger">取消</button></div></div></form></body></html>
2.增加处理界面代码
<%@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","tiger");// 主键不能不填// 主键没有自增的选项(触发器+序列)//获得执行对象【数据插入之前,先把主键查询出来】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();}%>
五,数据库语句
这里是项目关于登录和增加功能的Oracle语句
create table t_topic(topic_id number primary key,topic_name varchar2(20) not null);select * from t_topic;create table t_news(news_id number primary key ,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);select * from t_news;commit;
今天就先给大家简单介绍一下项目的登录和增加功能,下一期精彩继续哦。