需求:简单的新闻管理系统,要求实现简单的增删改查功能
4.jsp页面有:新闻添加(NewsaAdd.jsp),新闻查询(NewsQuery.jsp),新闻查询结果(NewsQueryResult.jsp),新闻修改(NewsUpdate.jsp),新闻详细信息(NewsDetail.jsp)
(前两个页面有菜单,跟后面三个页面在struts里的配置是不一样的)
NewsAdd.jsp
<%@ page language="java" pageEncoding="UTF-8" %> <%@ include file="../include/header.jsp" %> //里面定义了许多jquery的功能 <html> <head> <script type="text/javascript"> $(function(){ /*表单与字段的验证,若你没填,他会显示你此项为必填*/ $("#newsNo").addClass("validate[required]"); $("#summary").addClass("validate[required]"); $("#title").addClass("validate[required]"); $("#content").addClass("validate[required]"); $("#imgUrl").addClass("validate[required]"); $("#author").addClass("validate[required]"); $("#form1").validationEngine(); }); /* 定义你所要的功能(AJAX) */ function add_comfirm() { //确认添加 var c = confirm("确认添加吗?"); if(c == true){ $.ajax({ //如果c为true,则会通过ajax从后台得到一个数据result,方法在newsAdd.action里面 type:"post", //类型 url:"newsAdd.action", //请求的地址 data:$("#form1").serialize(), success: function(result){ //返回数据成功之后的操作 alert(result); //打印数据 window.location.href = window.location.href; //跳转页面,等于它本身的话就相当于刷新页面; } }); } } function val_check(){ //检查数据是否为空,若不为空,再判断是否存在,若是存在,便不能使用相同编号 var newsNo = $("#newsNo").val(); //从后台取出value值,并赋给 newsNo(自己定义的名字); if(newsNo == "" || newsNo == null){ alert("编号为空"); return; } $.ajax({ //如果不为空,将拿到的数据与后台进行对比,判断它在数据库中是否存在,判断方法在action中的newsCheck里定义; type:"post", //传出 url:"newsCheck.action", data:{newsNo:newsNo}, success:function(data){ alert(data); //打印数据 } }); } </script> <style> .workdiv{background-color:#efefef;margin:20px 0px;border:1px solid #efefef} //样式 </style> </head> <body> <div class=block-border> <div class=block-header> <h2>提交新闻</h2> <span></span> </div> <div class=block-content> //样式 <div id="table-example_wrapper" class="dataTables_wrapper"> <form id="form1" onsubmit="return false" action="newsAdd.action" method="post"> //这个action里面定义的这个页面所要的newsAdd方法; <table class="table_input" style="background-color:#efefef"> <tr> //加起来等于100% <th width="20%">新闻编号：</th> <td width="80%" > <input type="text" id="newsNo" name="news.newsNo" onblur="val_check()"/> </td> </tr> <tr> <th width="20%">摘要：</th> <td width="80%" > <input type="text" id="summary" name="news.summary" /> </td> </tr> <tr> <th width="20%">题目：</th> <td width="80%" > <input type="text" id="title" name="news.title" /> </td> </tr> <tr> <th width="20%">内容：</th> <td width="80%" > <input type="text" id="content" name="news.content" /> </td> </tr> <tr> <th width="20%">图片路径：</th> <td width="80%" > <input type="text" id="imgUrl" name="news.imgUrl" /> </td> </tr> <tr> <th width="20%">作者：</th> <td width="80%" > <input type="text" id="author" name="news.author" /> </td> </tr> <tr> <th width="20%">新闻类别：</th> <!-- 枚举，最好使用选择 --> <td width="80%" > <select name="news.newsCategory" class="inp width80%"> <option value="ENTERTAINMENT">娱乐</option> <option value="TECHNOLOGY">科技</option> <option value="POLITICAL">时政</option> </select> </td> </tr> </table> <div class=block-actions> <center> <input class="button" value="添加" onclick="add_comfirm()"/> <input type="reset" class="button_red" value="重 置"/> </center> </div> </form> </div> </div> </div> </body> </html>
NewsQuery.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="../include/header.jsp"%> <html> <head> //可以不用写js,即head部分可以为空 </head> <body> <div id=main-content> <div class=block-border> <div class=block-header><h2>新闻查询</h2><span></span></div> <div class=block-content> <form action="newsQuery.action" method="post" target="queryResult"> <table class="table_input" cellpadding="0" cellspacing="0"> <tr> <th width="13%">新闻编号：</th> <td width="20%"> <input id="names" name="name" type="text" class="inp width100%" value="${news.newsNo}"/> //${news.newsNo}表示从后台取数据 <input type="button" value="清空" onclick="javascript:$('#names').val('')" />//这也是从后台取数据 </td> <th width="13%">新闻状态：</th> <td width="20%"> <dict:select name="status" dictTypeId="NewsStatus" nullOption="true" styleClass="width150"></dict:select>//枚举类要在数据库的dict和dictType中有定义, </td> <th width="13%">新闻类别：</th> <td width="20%"> <dict:select name="newsCategory" dictTypeId="NewsCategory" nullOption="true" styleClass="width80"></dict:select> </td> </tr> </table> <div class=block-actions> <center> <input type="submit" class="button value="查询" /> <input type="reset" class="button_red" value="重置" /> </<center> </div> </form> </div> </div> </div> <iframe name="queryResult" src="" width="100%" height="520px" scrolling="no" frameborder="0" noresize ></iframe> //表示接下来的页面可以直接在本页面的下面空白部分出来,而不需要再跳转 </body> </html>
NewsQueryResult.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <%@ include file="../include/header.jsp"%> <html> <head> //定义了这页面的两个功能(通过按钮实现),1是显示详细信息,2是修改 <script type="text/javascript"> function detail(id) { //详细信息 var url = "${pageContext.request.contextPath}/jsp/news/newsDetail.action?news.id=" + id; window.top.showDialog1("Option Window", 1000, 740, url); } function update(id) { //修改 var url = "${pageContext.request.contextPath}/toNewsUpdate.action?news.id=" + id; window.top.showDialog1("Option Window", 1000, 860, url); console.log("xxx"); } </script> </head> <body> <div class=block-border> <div class=block-header> <h2>新闻查询信息</h2> <span></span> </div> <div class=block-content> <div class="dataTables_wrapper"> <s:if test="#attr['newsList'].list.size()>0"> //newsList是在spring-valueList定义的一些sql语句,下面的property必须与这里面的字段相同 <vlh:root value="newsList" url="?" includeParameters="*" configName="defaultlook"> <table cellpadding="0" cellspacing="1" class="table"> <vlh:row bean="newsList"> <s:set name="newsList" value="#attr['newsList']" /> <vlh:column title="编号" property="news_no" attributes="width='8%'"/> <vlh:column title="作者" property="author" attributes="width='8%'"/> <vlh:column title="题目" property="title" attributes="width='8%'"/> <vlh:column title="新闻类别" attributes="width='7%'"> <dict:write dictId="${newsList.news_category}" dictTypeId="NewsCategory"></dict:write> </vlh:column> <vlh:column title="新闻状态" attributes="width='7%'"> <dict:write dictId="${newsList.status}" dictTypeId="NewsStatus"></dict:write> </vlh:column> <vlh:column title="创建时间" attributes="width='12%'"> <s:date name="#newsList.create_time" format="yyyy-MM-dd HH:mm:ss" /> </vlh:column> <vlh:column title="操作" attributes="width='12%'"> <a href="javascript:detail(${newsList.id})">详细信息</a> //跳转的两个功能 <a href="javascript:update(${newsList.id})">修改</a> </vlh:column> </vlh:row> </table> <div class="block-actions"> <div class="dataTables_info"></div> <div class="dataTables_paginate paging_full_numbers"> <vlh:paging showSummary="true" pages="5" attributes="width='600'" /> </div> </div> </vlh:root> </s:if> <s:if test="#attr['newsList'].list.size()==0"> <div class="top"> <div id="table-example_length" class="dataTables_length"> <label>无符合条件的查询结果</label> </div> <div class="clear"></div> </div> </s:if> </div> </div> </div> </body> </html>
NewsDetail.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../include/header.jsp" %>
<html>
<head>
<script type="text/javascript"></script>
<style></style>
</head>
<body>
<s:set name="news" value="#attr['newsList'].list[0]" />
<div class=block-border>//详细信息就是显示全部信息,毕竟查询并不好查询所有信息(当然也可以)
<div class=block-header><h2>新闻详细信息</h2><span></span></div>
<div class=block-content>
<div id="table-example_wrapper" class="dataTables_wrapper">
<table id=table-example class=table_detail>
<tr>
<th width="25%">新闻编号：</th>
<td width="75%">
${news.newsNo} //后台的数据,需跟实体里面的字段名字相同;
</td >
</tr>
<tr>
<th>摘要：</th>
<td>
${news.summary}
</td>
</tr>
<tr>
<th>题目：</th>
<td>
${news.title}
</td>
</tr>
<tr>
<th>内容：</th>
<td>
${news.content}
</td>
</tr>
<tr>
<th>图片路径：</th>
<td>
${news.imgUrl}
</td>
</tr>
<tr>
<th>作者：</th>
<td>
${news.author}
</td>
</tr>
<tr>
<th>新闻类别：</th>
<td>
<dict:write dictId="${news.newsCategory}" dictTypeId="NewsCategory"></dict:write>//跟数据库的dictType相同
</td>
</tr>
<tr>
<th>新闻状态：</th>
<td>
<dict:write dictId="${news.status}" dictTypeId="NewsStatus"></dict:write>
</td>
</tr>
<tr>
<th>创建时间：</th>
<td>
<s:date name="news.createTime" format="yyyy-MM-dd HH:mm:ss"/>//日期格式
</td>
</tr>
<tr>
<th>修改时间：</th>
<td>
<s:date name="news.updateTime" format="yyyy-MM-dd HH:mm:ss"/>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>
NewsUpdate.jsp
<%@ page language="java" pageEncoding="UTF-8"%>
<%@ include file="../include/header.jsp"%>
<html>
<head>
</head>
<body>
<div class=block-border>
<div class=block-header>
<h2>新闻修改</h2>
<span></span>
</div>
<div class=block-content>
<div id="table-example_wrapper" class="dataTables_wrapper">
<form id="form1" action="newsUpdate.action" method="post">
<input type="text" name="news.id" value="${news.id}" style="display:none" class="inp"/>
<table class="table_input" cellpadding="0" cellspacing="0">
<tr>
<th width="30%">新闻编号：</th>
<td width="70%"> <!-- disabled="true"表示只读，不能修改 -->
<input type="text" id="newsNo" name="news.newsNo" class="inp" value="${news.newsNo}" disabled="true"/>
</td>
</tr>
<tr>
<th>新标题：</th>
<td>
<input type="text" id="title" name="news.title" class="inp" value="${news.title}"/> <!-- 获取数据,又叫回显 -->
</td>
</tr>
<tr>
<th>新摘要：</th>
<td>
<input class="inp" type="text" id="summary" name="news.summary" value="${news.summary}"/>
</td>
</tr>
<tr>
<th>新内容：</th>
<td>
<input class="inp" type="text" id="content" name="news.content" value="${news.content}"/>
</td>
</tr>
<tr>
<th>新图片路径：</th>
<td>
<input class="inp" type="text" id="imgUrl" name="news.imgUrl" value="${news.imgUrl}"/>
</td>
</tr>
<tr>
<th>新作者：</th>
<td>
<input class="inp" type="text" id="author" name="news.author" value="${news.author}"/>
</td>
</tr>
<tr>
<th width="20%">新闻类别：</th> <!-- 枚举，最好使用选择 -->
<td width="80%" >
<dict:select dictTypeId="NewsCategory" styleClass="width150" name="news.newsCategory" value="${news.newsCategory}"></dict:select>
</td>
</tr>
<tr>
<th width="20%">新闻状态：</th>
<td width="80%" >
<dict:select dictTypeId="NewsStatus" styleClass="width150" name="news.status" value="${news.status}"></dict:select>
</td>
</tr>
<tr>
<th> </th>
<td>
<s:actionerror/>
<s:fielderror />
</td>
</tr>
</table>
<div class=block-actions>
<center>
<input type="submit" class="button" value="修改"/>
<input type="reset" class="button_red" value="重置" />
</center>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
然后就是页面跟后台交互的页面