需求: 简单的新闻管理系统, 要求实现简单的增删改查功能
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>
然后就是页面跟后台交互的页面
来源: http://www.bubuko.com/infodetail-2729652.html