简单的一个月之设计实现内容2

Posted erwei

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了简单的一个月之设计实现内容2相关的知识,希望对你有一定的参考价值。

需求:简单的新闻管理系统,要求实现简单的增删改查功能

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}表示从后台取数据
                            &nbsp;
                            <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>&nbsp;&nbsp;   //跳转的两个功能
                                    <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>&nbsp;</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>

然后就是页面跟后台交互的页面

以上是关于简单的一个月之设计实现内容2的主要内容,如果未能解决你的问题,请参考以下文章

关于侧边导航菜单和片段的一般设计问题

炫酷 CSS 背景效果的 10 个代码片段

201671010432词频统计软件项目报告

使用 BottomAppBar 材料设计组件的片段过渡

小兔子3个月之后生小兔子的问题

HDU 2502 [月之数] 分析