【java web 简单例子】Model2 + Ajax(DWR) + mysql + bootstrap3 + jQuery
2018-06-08 11:32
615 查看
版权声明: https://blog.csdn.net/smileyan9/article/details/80620273
注:如果需要下载整个项目源代码,请跟我联系一下,联系方式在个人主页的关于已经给出 https://www.smileyan.cn/。
欢迎在此测试网址一下:https://www.smileyan.cn/classmate/ 比较适合手机端用户。
一、基本框架
非常简单,可以说没有用到什么框架,虽然说是Model2但是全部都采用了DWR实现ajax进行数据交互,没有用到servlet。
正如你说看到的一样,只有一个html界面……里面的动态效果是使用jQuery和bootstrap实现的。
点击添加否则删除后不会弹出你是否真的删除,因为个人性格原因,不喜欢在这个时候弹出这个东西。
二、后台介绍
一个java bean User,与数据库表单一一对应。
Dao层有增删改查接口与其实现方法。因为Dao层本身要求就是面向接口编程,因此这个接口是必不可少的。也可说是一种协议,Dao层与mysql之间打交道,需要一层协议。
Service层需要与用户需要打交道,所以也应该是面向接口编程,这里需要用到接口。
三、前端介绍
Bootstrap是一个比较简单的框架,我主要是在菜鸟教程进行这方面的学习。
所以那些弹出窗口什么的我就不多介绍了。下面直接贴主要代码吧。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <title>通讯录</title> <link rel="icon" href="./images/logo.png" type="image/x-icon"/> <link rel="stylesheet" href="./css/bootstrap.min.css"> <!--<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>--> <script src="./js/jquery-3.3.1.min.js"></script> <script src="./js/bootstrap.min.js"></script> <script type='text/javascript' src='dwr/engine.js'></script> <script type='text/javascript' src='dwr/util.js'></script> <script type='text/javascript' src='dwr/interface/DwrService.js'></script> <script> var searchbutton=0; /* search */ $(document).ready(function(){ DwrService.show(); var search_state=0; $("#head_search").hide(); /* show or hide search block */ $("#btn_search").click(function(){ if(search_state==1) { $("#head_search").hide(); search_state=0; }else{ search_state=1; $("#head_search").show(); } }); /* submit edit */ $("#submit_edit").click(function () { var order = $('#edit_order').val(); var userid = $('#edit_userid').val(); var name = $('#edit_name').val(); var pho_num = $('#edit_pho').val(); DwrService.update(order,userid,name,pho_num); }); /* submit edit */ $("#add_submit").click(function () { submit_add(); }); $("#search_submit").click(function () { searchuser(); }); $("#input_search").keypress(function (event) { if (event.keyCode == 13) { searchuser(); } }); $("#mydialog").keypress(function (event) { if (event.keyCode == 13) { $("#add_submit").click(); } }); $("#mydialog2").keypress(function (event) { if (event.keyCode == 13) { $("#submit_edit").click(); } }); }); /* show edit model */ function modeshow(date1,date2,date3,date4) { $('#edit_order').val(date1); $('#edit_userid').val(date2); $('#edit_name').val(date3); $('#edit_pho').val(date4); $('#myModal1').modal('show'); } /*show all user info*/ function showALl() { $(".class_actor").parent().show(); } /* add */ function submit_add() { var userid = $('#add_userid').val(); var name = $('#add_name').val(); var pho_num = $('#add_pho').val(); DwrService.save(userid,name,pho_num); } /*search user by userid or name*/ function searchuser() { if(searchbutton==0) { var data = $("#input_search").val(); /*search user by name */ $(".class_name").each(function () { var s = $(this).html(); if (s != data) { $(this).parent().hide(); } else { $(this).parent().show(); } }) /*search user by userid*/ $(".class_userid").each(function () { var s = $(this).html(); if (s != data) { // $(this).parent().hide(); } else { $(this).parent().show(); } }) $("#search_button").attr("class","glyphicon glyphicon-remove"); searchbutton=1; }else{ showALl(); searchbutton=0; $("#search_button").attr("class","glyphicon glyphicon-search"); } } </script> </head> <body> <div id="head_search"> <nav class="navbar navbar-default navbar-fixed-top" role="navigation" style="background: transparent;border:transparent;"> <div class="container"> <div class="row"> <div class="col-xs-12 col-sm-4"> <div class="input-group input-group-lg"> <input id="input_search" type="text" class="form-control" placeholder="请输入姓名或学号"> <span class="input-group-btn"> <button id="search_submit" class="btn btn-default" type="button"> <span id="search_button" class="glyphicon glyphicon-search"></span> </button> </span> </div> </div> </div> </div> </nav> </div> <!--table --> <div id="main" class="container" style="padding-bottom: 60px"> <table class="table table-striped"> <caption> <div> <h1 class="text-center"> <span class="glyphicon glyphicon-user"></span> 通讯录 </h1> </div> </caption> <thead> <tr> <th id="userid">学号</th> <th id="name">姓名</th> <th id="pho_num">电话</th> <th id="activity">操作</th> </tr> </thead> <tbody id="peopleTable"> <tr id="for_clone"> <td class="class_userid" id="user_id"></td> <td class="class_name" id="user_name"></td> <td class="class_num" id="user_num"></td> <td class="class_actor" id="actor"> </td> </tr> </tbody> </table> </div> <!-- 添加用户(Modal) --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id = "mydialog" class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel"> 添加用户 </h4> </div> <div class="modal-body"> <div class="input-group input-group-lg"> <span class="input-group-addon">学号</span> <input id="add_userid" type="text" name = "userid" class="form-control" placeholder="请在此输入学号"> </div> <div class="input-group input-group-lg"> <span class="input-group-addon">姓名</span> <input id="add_name" type="text" name = "name" class="form-control" placeholder="请在此输入姓名"> </div> <div class="input-group input-group-lg"> <span class="input-group-addon">电话</span> <input id="add_pho" type="text" name = "pho_num" class="form-control" placeholder="请在此输入电话"> </div> <div class="modal-footer"> <div class="text-center"> <button id="" class="pull-left" data-dismiss="modal" style="width:49%;height: 50px;"> <span class="glyphicon glyphicon-remove"></span> </button> <button id="add_submit" type="button" class="btn btn-primary pull-right" style="width:49%;height: 50px;" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-ok"></span></button> </div> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <!-- 修改用户信息(Modal) --> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div id="mydialog2" class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">× </button> <h4 class="modal-title" id="myModalLabel1"> 修改用户信息 </h4> </div> 欢迎来到smileyan <div class="modal-body"> <div class="input-group input-group-lg"> <span class="input-group-addon">序号</span> <input id="edit_order" type="text" name = "userid" disabled="disabled" class="form-control"> </div> <div class="input-group input-group-lg"> <span class="input-group-addon">学号</span> <input id="edit_userid" type="text" name = "userid" class="form-control" placeholder="请在此输入学号"> </div> <div class="input-group input-group-lg"> <span class="input-group-addon">姓名</span> <input id="edit_name" type="text" name = "name" class="form-control" placeholder="请在此输入姓名"> </div> <div class="input-group input-group-lg"> <span class="input-group-addon">电话</span> <input id="edit_pho" type="text" name = "pho_num" class="form-control" placeholder="请在此输入电话"> </div> <div class="modal-footer"> <div class="text-center"> <button class="pull-left" data-dismiss="modal" style="width:49%;height: 50px;"> <span class="glyphicon glyphicon-remove"></span> </button> <button id="submit_edit" type="button" class="btn btn-primary pull-right" style="width:49%;height: 50px;" data-toggle="modal" data-target="#myModal1"> <span class="glyphicon glyphicon-ok"></span></button> </div> </div> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <nav class="navbar navbar-default navbar-fixed-bottom" style="" role="navigation"> <div class="container"> <div class="text-center"> <button id="btn_search" class="pull-left" style="width:49%;height: 50px;"> <span class="glyphicon glyphicon-search"></span>查 询</button> <button class="btn btn-primary pull-right" style="width:49%;height: 50px;" data-toggle="modal" data-target="#myModal"> <span class="glyphicon glyphicon-plus"></span> 添 加</button> </div> </div> </nav> </body> </html>
package cn.smileyan.classmate.service; import cn.smileyan.classmate.bean.User; import cn.smileyan.classmate.domain.UserList; import org.directwebremoting.ui.dwr.Util; import java.util.HashMap; import java.util.LinkedList; import java.util.Map; /** * for dwr */ public class DwrService { // matching the order to User private Map<String,User> map=new HashMap<>(); /** * show all users info on web page */ public void show(){ int i; for(short t=0; t<UserList.getInstance().select().size(); t++){ User u = UserList.getInstance().select().get(t); i = u.getId(); map.put(i+"", u); // put into map // params for edit user's info String params = i+",\'"+u.getUserid()+"\',\'"+u.getName()+"\',\'"+u.getPho_num()+"\'"; // add row Util.cloneNode("for_clone", "", "" + i); Util.setValue("user_num"+i, u.getPho_num() ); Util.setValue("user_name"+i, u.getName()); Util.setValue("user_id"+i, u.getUserid()); Util.setValue("actor"+i, "<a onclick=\"DwrService.remove("+i+");\" >删除</a>"+ "<a onclick=\"modeshow("+params+");\" >编辑</a>",false); } } /** * remove one * @param id the id */ public void remove(String id){ int del_num = Integer.parseInt(id); UserList.getInstance().delete(map.get(id).getId()); Util.removeNode("for_clone"+id); // remove from table map.remove(id); //remove from map } /** * get all users info * @return LinkedList<User> */ public LinkedList<User> getAllUser(){ return UserList.getInstance().select(); } /** * add user * @param userid * @param name * @param pho_name */ public void save(String userid,String name,String pho_name){ User user = new User(); user.setUserid(userid); user.setName(name); user.setPho_num(pho_name); int id = UserList.getInstance().save(user); user.setId(id); map.put(id+"",user); int i=id; // params for edit user's info String params = i+",\'"+user.getUserid()+"\',\'"+user.getName()+"\',\'"+user.getPho_num()+"\'"; // add row Util.cloneNode("for_clone", "", "" + i); Util.setValue("user_num"+i, user.getPho_num() ); Util.setValue("user_name"+i, user.getName()); Util.setValue("user_id"+i, user.getUserid()); Util.setValue("actor"+i, "<a onclick=\"DwrService.remove("+i+");\" >删除</a>"+ "<a onclick=\"modeshow("+params+");\" >编辑</a>",false); } /** * update user * @param id * @param userid * @param name * @param pho_num */ public void update(int id,String userid,String name,String pho_num){ User user=new User(); user.setId(id); user.setUserid(userid); // update user, and map also has been updated user.setPho_num(pho_num); user.setName(name); UserList.getInstance().update(user);//update list and JDBC String params = id+",\'"+user.getUserid()+"\',\'"+user.getName()+"\',\'"+user.getPho_num()+"\'"; // update page Util.setValue("user_num"+id, pho_num ); Util.setValue("user_name"+id, name); Util.setValue("user_id"+id, userid); Util.setValue("actor"+id, "<a onclick=\"DwrService.remove("+id+");\" >删除</a>"+ "<a onclick=\"modeshow("+params+");\" >编辑</a>",false); } }
注:如果需要下载整个项目源代码,请跟我联系一下,联系方式在个人主页的关于已经给出 https://www.smileyan.cn/。
相关文章推荐
- jQueryAPI+Ajax技术实现的简单例子(续4)
- jsp 中用jquery 实现ajax 一个简单例子
- extjs jquery dwr ajax flex等web前端框架技术介绍
- JAVA如何插入MySql的datetime类型的简单的例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- dwr例子2调用有简单参数的java方法
- Jquery 调用asp.net ajax (web service/static page method)的示例(一)---简单参数
- JQuery.ajax——简单例子
- Jquery+ztree+json+webservice+mysql制作树形菜单+ajax列表页面
- dwr : java的简单ajax
- 一个最简单的基于PHP+jQuery的AJAX例子
- 面向 Java 开发人员的 Ajax: 结合 Direct Web Remoting 使用 Ajax----数据序列化不可能比这更简单了!
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- 使用 Perl、jQuery、Ajax、JSON 和 MySQL 实现简单的登录
- 一个简单的jquery+ajax的例子
- 一个简单的jQuery插件ajaxfileupload实现ajax上传文件例子
- Java Web : Struts2第一个简单例子 浅解
- 案例4-3 Ajax的响应处理简单实例(征服Ajax——Web 2.0快速入门与项目实践Java)
- jquery的ajax方式调用json简单例子
- 最简单jquery.ajax+php例子(对话框显示文本框输入内容),以小见大(初学手记)