4.使用JSP展示后台取到的数据(增删改查)

接上一篇的工程
(1)展示所有数据
修改HelloController:
这里写图片描述
从数据库获取所有记录,并设置参数以便后台可以取到。
修改hello.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

      <a href="${pageContext.request.contextPath}/hello/save">添加</a>
      <table>
         <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td>password</td>
            <td>操作</td>
         </tr>
         <c:forEach items="${users}" var="l">
         <tr>
            <td>${l.id}</td>
            <td>${l.name}</td>
            <td>${l.age}</td>
            <td>${l.password}</td>
            <td>
            <a href="${pageContext.request.contextPath}/hello/delete/${l.id}">删除</a>
            <a href="${pageContext.request.contextPath}/hello/update/${l.id}">修改</a>
            </td>
         </tr>
         </c:forEach>
      </table>
</body>
</html>

访问http://localhost:8080/jfinal_demo02/hello/hello
这里写图片描述

(2)加入添加数据功能
在HelloController中新增一个方法:
这里写图片描述

(1) public void save(){
(2) User user= getModel(User.class,”“); //获取前端传来的数据模型
(3) String method=getRequest().getMethod();
(4) if(method.equalsIgnoreCase(“get”)){ //如果是get请求就到新增页面
(5) render(“save.jsp”);
(6) }else{
(7) if(user.get(“id”)!=null){
(8) System.out.println(user);
(9) user.save(); //如果是POST请求,插入获取到的表单数据
(10) }
(11) redirect(“/hello/hello”);
(12) }
(13)
(14) }
在hello.jsp加入新增链接,对应HelloController中的save:
这里写图片描述
新建一个save.jsp页面:
这里写图片描述

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
   <form action="" method="post">
      id:<input type="text" name="id" />
      name:<input type="text" name="name" />
      age:<input type="text" name="age" />
      password:<input type="text" name="password" />
      <input type="submit" value="submit" />
   </form>
</body>
</html>

访问http://localhost:8080/jfinal_demo02/hello/hello
这里写图片描述

点击添加按钮,此为get请求,到对应的save.jsp页面:
这里写图片描述
点击提交,此为post请求,后台新增数据后到hello.jsp
这里写图片描述
(3)添加删除功能和修改功能
修改hello.jsp,注意链接后面会传入id参数,后台获取此参数进行修改和更新

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib prefix="c"  uri="http://java.sun.com/jsp/jstl/core"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>

      <a href="${pageContext.request.contextPath}/hello/save">添加</a>
      <table>
         <tr>
            <td>id</td>
            <td>name</td>
            <td>age</td>
            <td>password</td>
            <td>操作</td>
         </tr>
         <c:forEach items="${users}" var="l">
         <tr>
            <td>${l.id}</td>
            <td>${l.name}</td>
            <td>${l.age}</td>
            <td>${l.password}</td>
            <td>
            <a href="${pageContext.request.contextPath}/hello/delete/${l.id}">删除</a>
            <a href="${pageContext.request.contextPath}/hello/update/${l.id}">修改</a>
            </td>
         </tr>
         </c:forEach>
      </table>
</body>
</html>

在HelloController中添加更新和删除方法:

 public void delete(){
         int id=getParaToInt();
         User.dao.deleteById(id);
         redirect("/hello/hello");
     }

     public void update(){

          Integer id = getParaToInt();
            String method = getRequest().getMethod();
            if (method.equalsIgnoreCase("get")) {
                setAttr("id", id);
                User user = User.dao.findById(id);
                setAttr("users", user);
                 render("update.jsp");
            } else if (method.equalsIgnoreCase("post")) {
                User user= getModel(User.class,"");
                user.update();
                redirect("/hello/hello");
            }
     }

新增一个update.jsp
这里写图片描述
Update.jsp内容如下:
这里写图片描述
访问:http://localhost:8080/jfinal_demo02/hello/hello
这里写图片描述这里写图片描述
点击3号删除:
这里写图片描述
修改2号:
这里写图片描述
提交后到展示页面:
这里写图片描述

  • 7
    点赞
  • 38
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
好的,这是一个比较常见的需求。在 JSP 中,您可以使用 JSTL 标签库来接收后端数据,并使用 ECharts 来展示数据。下面是一个简单的示例: 1. 在 JSP 页面中引入 ECharts 的 JS 文件和 CSS 文件: ```html <head> <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.css"> </head> ``` 2. 在 JSP 页面中使用 JSTL 标签库获取后端数据: ```jsp <c:set var="data" value="${yourDataFromBackend}" /> ``` 这里的 `${yourDataFromBackend}` 是从后端获取的数据,您需要将其传递到前端。 3. 在 JSP 页面中创建一个 ECharts 容器: ```html <div id="chart" style="width: 600px;height:400px;"></div> ``` 4. 使用 JavaScript 代码初始化 ECharts 并展示数据: ```javascript <script> // 获取数据 var data = ${data}; // 初始化 ECharts 容器 var chart = echarts.init(document.getElementById('chart')); // 配置 ECharts 选项 var option = { // 配置 ECharts 图表的类型和数据 // 这里是一个简单的示例,请根据自己的需求进行配置 xAxis: { type: 'category', data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'] }, yAxis: { type: 'value' }, series: [{ data: data, type: 'line' }] }; // 使用配置项展示 ECharts 图表 chart.setOption(option); </script> ``` 这里的 `data` 就是前面获取的从后端获取的数据使用 ECharts 的 `setOption` 方法将数据展示在图表中。 希望这个示例能够帮助您完成前端接收后端数据,并使用 ECharts 展示数据的需求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值