使用easyui实现的添加公告功能(后台管理)

来源:互联网 发布:海岛奇兵步兵升级数据 编辑:程序博客网 时间:2024/04/28 06:44

easyui用来做后台管理还是很方便的,这两天又添加了几个小功能其中一个是添加公告。可以包括前台的公告。还有后台给管理员看的公告。后端实现的还是很粗糙的。实际项目中,公告具体出现的位置还有时机都应该是固定的。所以可以事先为这些公告定义标示,创建表结构中指定主键唯一标示这些公告。到时候通过主键获取公告。但是由于我现在需求还是不清晰。并不知道需要多少公告。所以添加公告时需要管理员为公告指定主键。等项目完成,添加公告时就不能再让管理员主键了,毕竟他不是程序员。

1.公告显示

当管理员点击菜单栏中的公告管理时,右侧出现上述窗口。上一篇博客已经说明了如何使用datagrid控件从后台取数据,以及优雅的实现分页功能。这里就不多说了。现在要做的就是新增,编辑,删除功能。现在一条条来。先来新建公告吧
2.新建公告。
 2.1建立数据库表结构

其中notice就是标示公告的主键,名字,还有程序员通过这个字段查询公告。所以要设为候选键,决不能重复,我这里没设,心里明白就行了,description作为与notice同对出现的。是对notice的解释。指示这个公告的位置,功能的。
title标示公告的标题。content标示公告的内容。time作为时间,简单的一个表。暂时没有需求添加其他字段,(待添加的包括修改人,所需权限《我认为权限最好定义在表结构中,单纯依赖数据库提供的功能,还是不太好》,修改ID(关于修改的信息,到时候可以调出来这个公告的变动情况),其他暂时没想到)
2.2定义dao,service层。
关于这两层我不想多说,都快写吐了,我用的是hibernate,这段时间一直在封装。定义了BaseDao,及增删改查的标准实现。基本上每一个表的dao直接继承此类。其它功能不用填了。上代码吧
 public class BaseDao {        public  SessionFactory sessionFactory;    private   Session session=null;          /**         * @param obj         * @return         */        public   void CloseSession()    {     if(session!=null)             {                 //�ر�session                 session.close();             }    }        public BaseDao()    {        }        public BaseDao(SessionFactory sf)    {    sessionFactory = sf;    HibernateUtil.SetSessionFactory(sessionFactory);    }                  public   boolean add(Object obj)          {            Transaction tran=null;            boolean result=false;            try            {            Sessionsession= sessionFactory.openSession();                tran=session.beginTransaction();                session.save(obj);                tran.commit();                result=true;            }            catch (Exception e)            {               if(tran!=null)               {                   //����ع�                   tran.rollback();               }            }            finally            {                if(session!=null)                {                    session.close();                }            }            return result;          }                    /**         * @return �������          * ����Ϊ�޸ĵ�����id����         */        public   boolean update(Object object)          {             //   Session session=null;                Transaction tran=null;                boolean result=false;                try                {                Sessionsession= sessionFactory.openSession();                tran=session.beginTransaction();                    session.update(object);                    tran.commit();                    result=true;                }                catch (Exception e)                {                   if(tran!=null)                   {                       //����ع�                       tran.rollback();                   }                }                finally                {                    if(session!=null)                    {                        //�ر�session                       session.close();                    }                }                return result;              }                       /**         * @param c         * @param id  ��ѯһ����ݸ�������id��         * @return         */          public   Object get(Class c,int id)          {                //Session session=null;                Object object=null;                try                {                Sessionsession= sessionFactory.openSession();                object=session.get(c,id);                }                catch (Exception e)                {                }                finally                {                    if(session!=null)                    {                        //�ر�session                        session.close();                    }                }                return object;          }              /**         * @param obj         * @return ɾ�����         */        public   boolean delete(Object obj)          {               // Session session=null;                Transaction tran=null;                boolean result=false;                try                {                Sessionsession= sessionFactory.openSession();                    tran=session.beginTransaction();                    session.delete(obj);                    tran.commit();                    result=true;                }                catch (Exception e)                {                   if(tran!=null)                   {                       //����ع�                       tran.rollback();                   }                }                finally                {                    if(session!=null)                    {                        //�ر�session                        session.close();                    }                }                return result;          }                  /**         * @param <T> ��ѯ������¼         * @param sql  sql���         * @param param ��������         * @return         */         @SuppressWarnings("unchecked")       <span style="color:#ff0000;"> public   <T> List<T> query(String sql,Object[] param)</span>          {                  List<T> list=new ArrayList<T>();              //Session session=null;               try                {               Sessionsession= sessionFactory.openSession();                   Query query=session.createQuery(sql);                    if(param!=null)                    {                        for(int i= 0;i<param.length;i++)                        {                            query.setParameter(i,param[i]);                            }                    }                    list=query.list();                }                catch (Exception e)                {                e.printStackTrace();                }                finally                {                    if(session!=null)                    {                        session.close();                    }                }              return list;          }          /**
<span style="font-size:24px; white-space: pre;"></span><span style="font-size:24px;color:#ff0000;"><strong>*这个函数有问题</strong></span><span style="font-size:24px;">         * @param sql         * @param param ��ѯ������¼         * @return         */        <span style="color:#33cc00;">public   Object queryOne(String sql,Object[] param)</span>          {              Object object=null;         //    Session session=null;               try                {               Sessionsession= sessionFactory.openSession();                   Query query=session.createQuery(sql);                    if(param!=null)                    {                        for(int i=0 ;i<param.length;i++)                        {                        query.setParameter(i,param[i]);                           }                        object=query.uniqueResult();                    }                }                catch (Exception e)                {                }                finally                {                    if(session!=null)                    {                        session.close();                    }                }              return object;          }        /**         * @param <T>         * @param sql         * @param param         * @param page         * @param size         * @return ʵ�ַ�ҳ��ѯ         */        @SuppressWarnings("unchecked")       <span style="color:#ff0000;"> public   <T> List<T> queryByPage(String sql,String[] param,int page,int size)</span>          {              List<T> list=new ArrayList<T>();                             try                {               Sessionsession= sessionFactory.openSession();                   Query query=session.createQuery(sql);                    if(param!=null)                    {                        for(int i= 0;i<param.length;i++)                        {                            query.setString(i,param[i]);                            }                    }                    //ɸѡ����                    query.setFirstResult((page-1 )*size);                    query.setMaxResults(size);                    list=query.list();                }                catch (Exception e)                {                }                finally                {                    if(session!=null)                    {                        session.close();                    }                }              return list;          }        /**         * @param hql         * @param pras         * @return������ݸ���         */        <span style="color:#ff6666;">public   int getCount(String hql, String[] pras) {</span>            int resu = 0 ;         //   Session s = null;            try {            Sessionsession=sessionFactory.openSession();            Query q = session.createQuery(hql);                if (pras != null) {                    for (int i =0  ; i < pras.length; i++) {                        q.setString(i, pras[i]);                    }                }                resu = q.list().size();            } catch (Exception e) {                e.printStackTrace();            } finally {                if (session != null)                {                   session.close();                }            }            return resu;        }public   Session getSession() {return session;}public   void setSession(Session session) {this.session = session;}         public static  void main(String[] args) {        /* new BaseDao(HibernateUtil.getSessionFactory());         Category ca = (Category)  queryOne("from Category ca where ca.category_id = 3", null);         System.out.println(ca.getCategory_remark());*/         }public   void setSessionFactory(SessionFactory sessionFactory) {this.sessionFactory = sessionFactory;}        }</span>
这个类我是从网上down的,已经找不到作者,特此感谢,帮了我很大的忙,也为他头疼不已,因为一开始不会hibernate,就down了它,然后项目中大量使用这个类,包括一个util类这个类是读取xml文件初始化hibernate用的,然后后期添加spring功能时,没少改动,把所有的初始化hibernate的部分全都改了,而且需要用spring对hibernate进行事物管理,还有会话管理。这两个整的我焦头烂额。最近稍稍摸索点头绪,确实承认hibernate为我们提供的对话关系映射很强大。(很方便,以后要买一本hibernate的书,作为支持下,听说现在不行了。)

加红的是主要用到的功能,加绿的错误的函数,其他的增删改函数。基本上继承这个类,dao层不用写代码了。弱dao,强service,把所有的业务代码,查询语句都放到service中。
其中service我定义了一个BaseService抽象模板类,这个很普通,就不贴代码了
2.3控制层action,基本上就是add,update,delete,query,然后分页查询。mvc部分贴一部分代码

public void AddNotice(){noticeService.addNotice(notice, title, content,description);System.out.println("title"+title+"notice:"+notice+"content:"+content);JSONObject jsonObject = JSONUtil.NewJSonObject();msg = "改公告已经保存";jsonObject.put("msg", msg);try {JSONUtil.ResponsePrint(jsonObject);} catch (IOException e) {e.printStackTrace();}}

msg返回给前端。还有json已经在上一篇博客中解释了。
2.5 View层


具体的功能有,用户第一次点击文本框提示文字会消失,这个添加公告内容的工具是ckeditor,功能还是很强大。可以基本实现博客功能,最后会转换为html格式的文本,保存在数据库中,调用时格式不会变,如果是实际项目我觉得还是得考虑下测试的可行性,毕竟公告的位置大小都是不同的。你不能让管理员一遍遍的试吧,这么改,这么改,他们会崩溃的。这是前段美工的事,我就不操心了,说实话我写easyui的博客是因为这工具很强大,很方便,以后外边接活后台部分完全不用美工了,前端工作者了。也是过一段时间有个微网站,需要配套的后台管理的CMS系统的需求。所以在我的小网站中先试试手。

然后一点击保存就通过ajax异步送到控制层,然后保存在数据库,如果成功界面返回到公告列表,否则停在本界面。并说明失败原因,(失败原因我没写,懒得写。我想这也是自己写着玩和接活做实际的企业级项目的区别吧,动力不足,总想练技术!不想研究业务需求)
  <div id="cc"  class="easyui-layout"  style="width:100%;height:100%;">      <div id='north' data-options="region:'north',iconCls:'icon-add',title:'请输入公告标题',split:true" style="width:50%;height:78px;">     <textarea id="title" style="font-size:15pt" rows="1" maxlength="50" title="请输入公告标题,长度最大为50个字符">     </textarea>    </div>      <div id="east" data-options="region:'east',iconCls:'icon-add',title:'请添加对公告的名字和描述',split:true" style="width:300px;">    <textarea id="notice" style="font-size:15pt" maxlength="50" title="请输入公告名字">     </textarea>     <br/><br/><br/>     <textarea id="description" style="font-size:15pt" maxlength="100" title="请输入公告描述。最长100字符">     </textarea>     <div align="center">     <br/><br/><br/>     <input type="image" id="save" src="image/save.gif"></input>     </div>    </div>      <div id="center" data-options="region:'center',title:'请添加公告内容',spilt:true" style="padding:5px;background:#eee;">        <ckfinder:setupCKEditor  editor="content" basePath="ckfinder/" />   <%-- <ckeditor:editor basePath="ckeditor/" editor="content"/> --%>    <textarea class="ckeditor" style="font-size:15pt" cols="80" id="content" name="content" rows="10">    <s:property value="#session.content"></s:property>    </textarea>     

前端代码。JS代码和之前的博客不同的不多,这是验证用户第一次点击文本框时,让提示文字消失的代码
                var titleval = '请输入标题';var contentval = '请输入内容';var noticeval = '请输入公告的名字,名字用于程序员从后台通过该字段获取公告';var descriptionval = '请输入对公告的描述';$('#title').text(titleval);$('#content').text(contentval);$('#notice').text(noticeval);$('#description').text(descriptionval);$('#description').click(function(){if($('#description').val().replace(/\s+/g,"")==descriptionval){$('#description').text("");}});$('#title').click(function(){if($('#title').val().replace(/\s+/g,"")==titleval){$('#title').text("");}});/*$('#content').click(function(){});*/$('#notice').click(function(e){if($(this).val().replace(/\s+/g,"")==noticeval){$(this).text("");}});function deletetext(){if($('#content').val().replace(/\s+/g,"")==contentval){CKEDITOR.instances.content.setData('');}} CKEDITOR.instances["content"].on("instanceReady", function () {                        //set keyup event                       /*  this.document.on("keyup", deletetext); */                        //and click event                        this.document.on("click", deletetext);                        //and select event                       /*  this.document.on("select", deletetext); */                    });
这就是添加公告这块
3.更新公告
这里稍稍复杂些。编辑和新加公告在前段上区别不大,我们需要做的就是当用户点击编辑按钮时,获取相应的公告ID,将它传回后台,然后后台将程序转移到编辑公告界面,同时在session中添加公告的相应信息,在前段获取,在合适位置显示。同时sava按钮的请求应变为更新请求。传到UpdateNoticeAction中。然后更新成功后,将界面转到公告列表中。
4删除公告
获取到相应公告iD,然后删除,上一篇博客有

结束语。easyui实现后台管理可以很优雅,利用jquery强大的功能,可以把网站做的和桌面应用一样漂亮,甚至更漂亮。我该好好学设计模式了,天天这么看前端,感觉自己都想做前端了!大哭后续可能还会加一些easyui的博客


1 0