智慧规国房

 找回密码
 立即注册
搜索
热搜: 规国房 slack
查看: 292|回复: 14

[编程培训] 【编程培训】基础增删改查训练 - 前端篇

[复制链接]

22

主题

86

帖子

360

积分

超级版主

Rank: 8Rank: 8

积分
360
发表于 2018-2-7 14:31:06 | 显示全部楼层 |阅读模式
本帖最后由 shilijun 于 2018-2-7 15:24 编辑

【编程培训】基础增删改查训练 - 后端篇 的学习中大家了解了java后端基础的增删改查开发过程,下面的内容将会对大家介绍前端jsp页面开发的过程。

1. Ajax的应用

前端调用后端restful风格的controller时建议大家使用Ajax。

首先引入jquery文件,在system-study-web目录下找到main --> webapp目录,新建文件夹js/jquery文件夹



将下面的jQuery文件下载并解压,放入jquery目录下



2. 新建初始页面index.jsp

在eclipse左上角点击file,在弹出的下拉框中选择 new --> other



在弹出框中输入jsp ,选中JSP File点击next,



在新页面中选中 system-study-web目录下的 src --> main --> webapp -->views ,并且在file name中修改文件名为index.jsp ,点击finish完成。
注:任何JSP页面均在此目录下创建,这是由框架配置决定的


3. 修改index.jsp文件内的编码规则

打开index.jsp 将其中默认的 "ISO-8859-1" 修改为 "UTF-8" ,如果不修改在传输中文的时候会出现乱码问题。



修改后





本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
回复

使用道具 举报

22

主题

86

帖子

360

积分

超级版主

Rank: 8Rank: 8

积分
360
 楼主| 发表于 2018-2-7 15:23:44 | 显示全部楼层
本帖最后由 shilijun 于 2018-2-7 15:38 编辑

4. 开发页面跳转控制器

在 system-study-java 模块下的 src --> main --> java --> com --> saiWeiSi --> controller 目录下新建 IndexController.java 类。

注:任何controller均在此目录下创建,这是由框架配置决定的

在类声明(public class IndexController )之前加入控制器的注解

  1. //Controller 指示这是一个控制器
  2. //RequestMapping 指示将这个控制器于映射到哪个URL,即访问改URL就会访问这个控制器
  3. @Controller
  4. @RequestMapping("/")
  5. public class IndexController {
复制代码

5. 加入注解之后我们开始开发跳转功能
在IndexController.java 类中新建index方法,并且加上注解。
此处需要注意三点:
一、 @RequestMapping如果不配置任何参数,访问系统根目录时会自动调用此方法
二、为防止在不同服务器环境中会出现相对路径不同而找不到文件,此处将系统根目录存入"ctx"参数中,避免出现路径不同导致找不到文件
三、返回参数"index"时,springMVC会自动访问/WEB-INF/views/下的index.jsp文件
  1. //这里的RequestMapping指示这个方法被映射到哪个URL,且指定什么方式访问
  2.     //@RequestMapping如果不配置任何参数,访问系统根目录时会自动调用此方法
  3.         @RequestMapping
  4.         public String index(Map<String, Object> map,HttpServletRequest request){
  5.                
  6.                 //为防止在不同服务器环境中会出现相对路径不同而找不到文件,此处将系统根目录存入"ctx"参数中,避免出现路径不同导致找不到文件
  7.                 map.put("ctx", request.getContextPath());
  8.                
  9.                 //返回参数"index"时,springMVC会自动访问/WEB-INF/views/下的index.jsp文件
  10.                 return "index";
  11.         }
复制代码

此时可以启动程序测试前端index.jsp页面是否能访问了




启动程序之后,在浏览器中输入http://localhost:8080/study





回复

使用道具 举报

22

主题

86

帖子

360

积分

超级版主

Rank: 8Rank: 8

积分
360
 楼主| 发表于 2018-2-7 16:16:03 | 显示全部楼层
本帖最后由 shilijun 于 2018-2-7 16:46 编辑

6. 开发表格页面

在初始页面开发完成之后,我们开始制作数据表格。
首先我们在jsp页面的body中开发表格的头部(<thead></thead>)和空的表格体(<tbody id="tbody"></tbody>

  1. <table>
  2.             <!-- 表格头 -->
  3.                 <thead>
  4.                         <tr>
  5.                                 <th>姓名</th>
  6.                                 <th>密码</th>
  7.                                 <th>全名</th>
  8.                                 <th>年龄</th>
  9.                                 <th>性别</th>
  10.                                 <th>操作</th>
  11.                         </tr>
  12.                 </thead>
  13.                 <!-- 表格体 -->
  14.                 <tbody id="tbody">

  15.                 </tbody>
  16.         </table>
复制代码

在<th></th> 中输入表格的列名,表格体中的内容将有Ajax来操作赋值

使用Ajax之前先引入jQuery的js文件,在jsp的<head></head>结构中添加引入js的语句

  1. <script type="text/javascript"src="${ctx}/js/jquery/jquery-1.9.0.min.js"></script>
复制代码


注:此处的${ctx}是后端index方法中保存的系统相对路径,此路径在上面提到过可避免出现路径不同导致找不到文件的问题。

在jsp中新建一个默认调用的方法,此方法中的"$"符号是jQuery独有的,"$"是jQuery中最常见的符号,它可以接受一个字符,也可以接受一个文档对象,亦或者一个函数,也可以调用一个函数。

  1. $(function() {
  2.                 getAll();
  3.         });
复制代码


$(function() 命名的方法,在jsp打开时会自动调用。
下面我们开发function getAll() {}方法,此方法要做两件事,

第一件事调用java后端的UserController类中的 public List<UserEntity> getAll() 方法;

第二件事将返回的json数据赋值到表格体(<tbody id="tbody"></tbody>)上

  1. function getAll() {
  2.                 //empty方法会确保表格体为空表格体
  3.                 $("tbody").empty();
  4.                 //ajax调用
  5.                 $.ajax({
  6.                         url : "${ctx}/user",//访问的路径
  7.                         type : 'GET',//访问的类型
  8.                         dateType : 'json',//传输数据类型
  9.                         contentType : 'application/json',//http处理数据的类型
  10.                         success : function(result) {//成功之后调用的方法
  11.                                 var str = "";
  12.                                 $.each(result,
  13.                                         function(i, j) {//循环将数据赋值到<td></td>中
  14.                                                 str += "<tr>";
  15.                                                 str += "<td>" + j.username+ "</td>";
  16.                                                 str += "<td>" + j.password+ "</td>";
  17.                                                 str += "<td>" + j.fullname+ "</td>";
  18.                                                 str += "<td>" + j.age + "</td>";
  19.                                                 str += "<td>" + j.sex + "</td>";
  20.                                                 str += '<td>'
  21.                                                 +'<input type="button" value="删除" onclick="deleteById('+ j.id + ');" />'//在td中加入button
  22.                                                 +'<input type="button" value="修改" onclick="update('+ j.id + ');" />'
  23.                                                 +'</td>';
  24.                                                 str += "</tr>";
  25.                                         })
  26.                                 $("tbody").append(str)//将赋值好的表格放入表格体中(<tbody>)
  27.                         }
  28.                 });
  29.         }
复制代码

注:此处的两个button暂时不要管他,留在后面使用

此时,我们可以启动程序测试一下,可以展示之前新建的数据了


回复

使用道具 举报

22

主题

86

帖子

360

积分

超级版主

Rank: 8Rank: 8

积分
360
 楼主| 发表于 2018-2-7 16:45:24 | 显示全部楼层
本帖最后由 shilijun 于 2018-2-8 09:27 编辑

7. 开发修改功能

我们完成构建表格之后接下来我们开发修改表格数据的功能。

开发修改功能,我们需要做以下几点:


一、系统跳转到新的修改页面来修改数据,


二、在新页面修改并保存数据,


三、保存数据之后,跳转回表格页面。


在表格页面开发中,我们在“操作”列放入了两个button,其中一个是“修改”,在"修改"button中的onclick事件调用了update('+ j.id + ')方法。


首先我们在index的<head></head>中加入update方法,此方法调用后端的IndexController类实现页面跳转


  1. function update(id){
  2.                 window.location.href = "${ctx}/update?id="+id;
  3.         }
复制代码

接下来在IndexController类中添加update方法,此方法实现两个功能,



一个是接收前端传入的参数“id”,


一个是控制跳转到update.jsp



  1. //这里的RequestMapping指示这个方法被映射到哪个URL,且指定什么方式访问
  2.     //@RequestMapping如果配置"update"参数,浏览器访问"/update"路径时会自动调用此方法
  3.         @RequestMapping("update")
  4.         public String update(Map<String, Object> map,HttpServletRequest request){
  5.                
  6.                 //获取参数id,此参数是将要修改的数据的主键值
  7.                 String id = request.getParameter("id");
  8.                
  9.                 //判断id是否为空,如果不为空将id值保存至map中传回前端
  10.                 if(!StringUtils.isEmpty(id)){
  11.                         map.put("id", id);
  12.                 }
  13.                
  14.                 //为防止在不同服务器环境中会出现相对路径不同而找不到文件,此处将系统根目录存入"ctx"参数中,避免出现路径不同导致找不到文件
  15.                 map.put("ctx", request.getContextPath());
  16.                
  17.                 //返回参数"update"时,springMVC会自动访问/WEB-INF/views/下的update.jsp文件
  18.                 return "update";
  19.         }
复制代码


最后在system-study-web模块中的WEB-INF --> views 目录下新建update.jsp文件。



在update.jsp文件中同样使用“UTF-8”编码,同样引入jQuery的js文件。


接下来在<body></body>结构中制作表单,可以采取很多种方式来制作,此处我们继续使用大家熟悉的表格控件。



  1. <table>
  2.                 <thead>
  3.                         <tr>
  4.                                 <th>属性名称</th>
  5.                                 <th>参数</th>
  6.                         </tr>
  7.                 </thead>
  8.                 <tbody id="tbody">
  9.                 <tr>
  10.                 <div>姓名        </div>
  11.                 <div><input type="text" id="username" value="" /></div>
  12.                 </tr>
  13.                 <tr>
  14.                 <div>密码</div>
  15.                 <div><input type="text" id="password" value="" /></div>
  16.                 </tr>
  17.                 <tr>
  18.                 <div>全名        </div>
  19.                 <div><input type="text" id="fullname" value="" /></div>
  20.                 </tr>
  21.                 <tr>
  22.                 <div>年龄        </div>
  23.                 <div><input type="text" id="age" value="" /></div>
  24.                 </tr>
  25.                 <tr>
  26.                 <div>性别        </div>
  27.                 <div>
  28.                         <select id="sex" name="sex" >
  29.                 <option value="true">男</option>
  30.                 <option value="false">女</option>
  31.             </select>
  32.                
  33.                 </div>
  34.                 </tr>
  35.                 <tr>
  36.                 <div></div>
  37.                 <div><input type="button" value="保存" onclick="update(${id});"/></div>
  38.                 </tr>
  39.                 </tbody>
  40.         </table>
复制代码


注:每个input和select标签中都加入了id属性,此属性是为了保证每一列均有唯一标识,方便查找。



构建完表单之后,我们开发赋值的方法。类似于index.jsp页面的开发,我们也加入一个自动调用的方法。



  1. $(function() {
  2.         getById();
  3. });
复制代码


方法中调用了
getById()方法,我们将通过此方法为表单赋值。



此方法实现了两个功能,


一个是调用UserController类中的 public UserEntity getById(@PathVariable("id") Long id)  方法,获取将要修改的数据;


另一个是将返回的数据赋值到表单中。



  1. function getById() {
  2.         $.ajax({
  3.                 url : "${ctx}/user/${id}",//访问的路径
  4.                 type : 'GET',//访问的类型
  5.                 dateType : 'json',//传输数据类型
  6.                 contentType : 'application/json',//http处理数据的类型
  7.                 success : function(result) {//成功之后调用的方法
  8.                         $("#username").val(result.username);
  9.                         $("#password").val(result.password);
  10.                         $("#fullname").val(result.fullname);
  11.                         $("#age").val(result.age);
  12.                         $("#sex").val(result.sex);
  13.                 }
  14.         });
  15. }
复制代码



在表单的底部,我们加入了一个“保存”的button,在button中onclick事件调用了update(${id})方法此方法调用了后端UserController中的,public UserEntity update(@RequestBody UserEntity user)方法保存数据。



保存数据成功之后触发跳转回index.jsp页面的方法。


  1. function update(id) {
  2.         $.ajax({
  3.                 url : "${ctx}/user",
  4.                 type : 'PUT',
  5.                 dateType : 'json',
  6.                 contentType : 'application/json',
  7.                 data:JSON.stringify({
  8.                         id:id,
  9.                         username:$("#username").val(),
  10.                         password:$("#password").val(),
  11.                         fullname:$("#fullname").val(),
  12.                         age:$("#age").val(),
  13.                         sex:$("#sex").val()
  14.                 }),
  15.                 success : function(result) {
  16.                         window.location.href = "${ctx}";//回到系统index.jsp
  17.                 }
  18.         });
  19. }
复制代码



此时我们可以测试修改功能是否正常了。





回复

使用道具 举报

22

主题

86

帖子

360

积分

超级版主

Rank: 8Rank: 8

积分
360
 楼主| 发表于 2018-2-7 17:46:19 | 显示全部楼层
8.最后开发新增和删除功能

在index.jsp页面中添加删除方法,在“删除”button中调用了deleteById('+ j.id + ')方法,

此方法实现了调用UserController类中的public UserEntity deleteById(@PathVariable("id") Long id)方法

  1. function deleteById(id) {
  2.                 $.ajax({
  3.                         url : "${ctx}/user/" + id,
  4.                         type : 'DELETE',
  5.                         dateType : 'json',
  6.                         contentType : 'application/json',
  7.                         success : function(result) {
  8.                                 getAll();//删除成功之后刷新表单,局部刷新
  9.                         }
  10.                 });
  11.         }
复制代码


最好开发新增功能,此功能利用“修改”页面update.jsp即可

在<body></body>结构中添加一个button

  1. <input type="button" value="新增" onclick="add();" />
复制代码


此button调用了add()方法,添加add()方法。

  1. function add(){
  2.                 window.location.href = "${ctx}/update";
  3.         }
复制代码


此方法与update方法相似,唯一不同就是没有传参数“id”

编写完成之后,我们可以测试新建和删除功能了。


回复

使用道具 举报

3

主题

6

帖子

122

积分

注册会员

Rank: 2

积分
122
发表于 2018-2-12 16:24:50 | 显示全部楼层
最后的新增功能没看懂;
我的必须要人为给它一个id才能新增数据。
回复

使用道具 举报

22

主题

86

帖子

360

积分

超级版主

Rank: 8Rank: 8

积分
360
 楼主| 发表于 2018-2-13 10:03:32 | 显示全部楼层
SongQi 发表于 2018-2-12 16:24
最后的新增功能没看懂;
我的必须要人为给它一个id才能新增数据。

你的id应该在usercontroller的add方法中赋值
回复

使用道具 举报

76

主题

144

帖子

537

积分

高级会员

Rank: 4

积分
537
发表于 2018-2-13 11:10:04 | 显示全部楼层
谢谢分享!
回复

使用道具 举报

19

主题

42

帖子

310

积分

超级版主

Rank: 8Rank: 8

积分
310
发表于 2018-2-26 10:37:35 | 显示全部楼层
add功能需要在update.jsp中写方法,这里可用if来判断id是否为空,若id不为空则type类型为PUT,否则id为空时,type类型为POST,且data中将id去掉,代码如下:
  1. function update(id) {
  2.                 if(id != null){

  3.                 $.ajax({
  4.                         url : "${ctx}/user",
  5.                         type : 'PUT',
  6.                         dateType : 'json',
  7.                         contentType : 'application/json',
  8.                         data:JSON.stringify({
  9.                                 id:id,
  10.                                 username:$("#username").val(),
  11.                                 password:$("#password").val(),
  12.                                 fullname:$("#fullname").val(),
  13.                                 age:$("#age").val(),
  14.                                 sex:$("#sex").val()
  15.                         }),
  16.                         success : function(result) {
  17.                                 window.location.href = "${ctx}";//回到系统index.jsp
  18.                         }
  19.                 });
  20.                 }
  21.                 else{

  22.             $.ajax({
  23.                     url : "${ctx}/user",
  24.                     type : 'POST',
  25.                     dateType : 'json',
  26.                     contentType : 'application/json',
  27.                     data:JSON.stringify({
  28.                             username:$("#username").val(),
  29.                             password:$("#password").val(),
  30.                             fullname:$("#fullname").val(),
  31.                             age:$("#age").val(),
  32.                             sex:$("#sex").val()
  33.                     }),
  34.                     success : function(result) {
  35.                             window.location.href = "${ctx}";//回到系统index.jsp
  36.                     }
  37.             });
  38.                 }
  39. }
复制代码
回复

使用道具 举报

19

主题

42

帖子

310

积分

超级版主

Rank: 8Rank: 8

积分
310
发表于 2018-2-26 10:43:12 | 显示全部楼层
注意教程中写的“开发修改功能”时,写table时要注意<tr></tr>标签里面要有<td></td>,否则会出现表头显示在表体下面的不正常情况。
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|bhinfocenter Inc. ( ICP备案:津ICP备13002893号-6

GMT+8, 2019-5-26 06:07 , Processed in 0.179687 second(s), 4 queries , File On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表