javaWeb学习十五天------jsp入门,el表达式,jstl,练习:使用el,jstl 实现修改操作

jsp

运行在服务器的页面其实就是一个Servlet,用来替换servlet 的页面展示,让servlet就用于来处理请求与响应,jsp 就是一个特殊的servlet,主要是做页面展示

jsp 的组成

java(动态的web资源) + html(用于来实现一个静态页面展示)=jsp

jsp运行过程:

会被编译成 —>index_jsp HttpJspBase—>HttpServlet的子类 _jspService() —>就是service的方法
jsp流程图==>

在这里插入图片描述

jsp 中的脚本

  1. <%中间去编写java代码,这里是局部代码%>

  2. <%! 1.变量是成员变量 2. 编写方法 %>

  3. <%=i%> ==>输出 类似于out.print()

  4. 小脚本不能写标签,只能写java代码,可以混合使用

jsp 中的注释

<%-- -%> ==》特点网页不会显示注释

jsp 中的三大指令

1.page 指令

 <%@ page contentType="text/html;charset=UTF-8" language="java" %>
 常用属性
 contentType  表示页面的类型 一局编码格式 默认就是UTF-8    
 language 表示语言  
 import  表示导包
 errorPage="error.jsp" 界面发生异常所跳转的界面  
 pageEncoding="UTF-8" 设置编码格式  
 autoFlush="true"  是否自动来刷新这个界面

2.include指令

<%@include file=""%>  ==>一般用于引入公共的界面   file 的值就是文件的路径

3.taglib指令

<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>  
引入第三方的标签库 prefix 设置的名字  uri 表示引入标签可以的地址

el 表达式

作用就是减少页面的java代码

1.使用el表达可以获取到作用域下的值
2.可以做一些基本上都运算
3.避免一一些错误的产生

语法

1.获取简单的键值对 ==>${msg}

2.对象的获取  =>  ${user.uname}  ==>1.这个对象必须给其set get方法

3.获取数组: ${str[0]}

4.获取map对象的值==> ${map.key2}  ==>1.前后的泛型都必须给一致 

5.获取集合  --${list.get(0)}   ${list[0]}

6.获取集合对象的语法: ${userList[0].uname}

常见的基本运算

算数运算符 + - * / div==》除 mod 取余

关系运算符 >= == != < >

逻辑运算符 && 并且 || 或者 ! 非

jstl 表达式

一般是与el表达式来进行搭配

使用jstl表达式的步骤

1.导入相关的jar

2.在jsp头部引入其标签库

<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> prefix 表示取的名字  uri 表示引入标签库的地址

常用语句:

<c:foreach>  
属性:
//2.将list存入request域
如:request.setAttribute("users",users);//键:值

items="${userList}"  ==>需要遍历的作用域下的集合的键名 ==>通过el表达式来获取
var="user"    ==>每次遍历产生对象的别名
varStatus="index"  ==>遍历的索引
begin="1"   起始位置
step="2"  ==>波长
end="4"   结束位置

<c:if test="${userList !=null}"> 
属性:
==> test 里是条件表达式

实现修改操作和显示所有数据功能

实现修改信息的操作:
1.前端界面点击修改按钮—>servlet接收到前端页面传过来的请求方式标记和查询单条记录需要使用的id,servlet 判断完请求后交给service去数据查询到要修改的一条记录,查询结果又交给servlet然后再次交给作用域然后使用getRequestDispatcher到修改界面显示要修改的信息
2.在修改界面,修改完信息,点击修改按钮---->servlet 接收修改界面的数据,根据传递过来的请求标记和id,交给service去修改id指定的一条记录,service会返回是否成功修改数据,给servlet,然后servlet根据结果是重定向给自己实现index界面的数据的更新或重新转发到修改界面,重新修改数据

index界面显示所有信息操作:

在请求index界面时,会先加载界面,在jsp界面里使用java代码对作用域进行非空判断(第一次都是没有进行servlet请求的所以第一次都是空),如果为空就需要去servlet请求给作用域填充数据,servlet会让service去执行查询操作,然后service返回查询的结果给servlet,servlet再把数据嫁给作用域对象进行数据传递,index此时可以获取到要显示的数据
实现代码:
index界面

<%@ page import="com.offcn.selectallshow.entity.User" %>
<%@ page import="java.util.List" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>$Title$</title>
</head>
<body>
<%

    if (request.getAttribute("users") == null) {//防治第一次没有请求返回空指针异常
        request.getRequestDispatcher("userServlet").forward(request, response);
        return;
    }

%>
<table border="1px" cellspacing="0" cellpadding="0" width="80%">
    <c:if test="${users!=null}">
        <c:forEach items="${users}" var="user">
            <tr>
                <td>${user.uid}
                </td>
                <td>${user.uname}
                </td>
                <td>${user.upwd}
                </td>
                <td><c:if test="${user.usex==0}"></c:if>
                    <c:if test="${user.usex==1}"></c:if>
                </td>
                <td>${user.uhobbey}
                </td>
                <td>${user.utext}
                </td>
                <td>${user.ufile}
                </td>
<%--   万能地址:${pageContext.request.contextPath}获取到根目录,取出部署的应用程序名或者是当前的项目名称
--%>
                <td><a href="${pageContext.request.contextPath}/userServlet?flag=byUpdate&uid=${user.uid}">修改</a></td>
            </tr>
        </c:forEach>
    </c:if>


</table>
</body>
</html>

修改界面

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<form action="userServlet" method="get">

    <%--    传递到后端的 标记和id--%>
    <input type="hidden" name="uid" value="${byuser.uid}">
    <input type="hidden" name="flag" value="update2">


    <p>用户名: <input type="text" name="username" value="${byuser.uname}"></p>
    <p>密码<input type="text" name="password" value="${byuser.upwd}"></p>

    <p>性别: <input type="radio" name="sex" value="1"
                  <c:if test="${byuser.usex==1}">checked</c:if> ><input type="radio" name="sex" value="0" <c:if test="${byuser.usex==0}">checked</c:if>></p>
    <p> 爱好:<input type="checkbox" name="hobbey" value="篮球">篮球
        <input type="checkbox" name="hobbey" value="羽毛球">羽毛球
        <input type="checkbox" name="hobbey" value="足球">足球</p>

    <p>学历<select name="u_text">

        <option value="小学" <c:if test="${byuser.utext=='小学'}">selected</c:if>>小学</option>
        <option value="中学"
                <c:if test="${byuser.utext=='中学'}">selected</c:if> >中学
        </option>
        <option value="大学"
                <c:if test="${byuser.utext=='大学'}">selected</c:if> >大学
        </option>
    </select></p>
    <%-- <p>你的头像:<input type="file" name="fileName"></p>--%>
    <input type="submit" value="提交">
</form>
<script>
    //当页面加载完成的时候,自动调用该方法
    window.onload = function () {
        var boxObj = document.getElementsByName("hobbey");  //获取所有的复选框
        var payment = '${byuser.uhobbey}'; //用el表达式获取在控制层存放的复选框的值为字符串类型
        var pay = payment.split(',');    //去掉它们之间的分割符“,”
        for (i = 0; i < boxObj.length; i++) {
            for (j = 0; j < pay.length; j++) {
                if (boxObj[i].value == pay[j])  //如果值与修改前的值相等
                {
                    boxObj[i].checked = true;
                    break;
                }
            }
        }
    };
</script>
</body>
</html>

Userservlet层

@WebServlet(name = "userServlet", urlPatterns = "/userServlet")
public class UserServlet extends HttpServlet {
    private UserService userService;

    @Override
    public void init() throws ServletException {
        userService = new UserServiceImpl();
    }

    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        String flag = req.getParameter("flag");
        if ("byUpdate".equals(flag)) {//根据标记,判断是要去数据库查询单条数据
            String uid = req.getParameter("uid");
            User user = userService.bySelectId(Integer.parseInt(uid));
            req.setAttribute("byuser", user);
            req.getRequestDispatcher("byUpdate.jsp").forward(req, resp);
        } else if ("update2".equals(flag)) {//判断是修改操作发送的请求
            String uid = req.getParameter("uid");

            String username = req.getParameter("username");
            String password = req.getParameter("password");
            String usex = req.getParameter("sex");
            String hob = "";//拼接字符串
            String[] hobbeys = req.getParameterValues("hobbey");
            if (hobbeys != null && hobbeys.length > 0) {
                for (int i = 0; i < hobbeys.length; i++) {
                    if (i == hobbeys.length - 1) {//防止末尾出现追加的符号
                        hob += hobbeys[i];
                        continue;
                    }
                    hob += hobbeys[i] + ",";
                }
            }
            String u_text = req.getParameter("u_text");
            User user = new User(Integer.parseInt(uid), username, password, usex, hob, u_text, "未写");
            boolean b = userService.updateById(user);
            if (b) {
                resp.sendRedirect("userServlet");
            } else {
                req.getRequestDispatcher("byUpdate.jsp").forward(req, resp);
            }


        } else {
            List<User> users = userService.selectAll();
            req.setAttribute("users", users);
            req.getRequestDispatcher("index.jsp").forward(req, resp);

        }


    }
}

service层

public class UserServiceImpl implements UserService {
    private UserDao userDao=new UserDaoImpl();
    @Override
    public List<User> selectAll() {
        List<User> users = userDao.selectAll();
        return users;
    }

    @Override
    public User bySelectId(int uid) {
        User user = userDao.bySelectId(uid);
        return user;
    }

    @Override
    public boolean updateById(User user) {
        int i = userDao.updateById(user);
        if (i>0){
            return true;
        }
        return false;
    }
}

dao层

public class UserDaoImpl implements UserDao {
    private DataSource ds=new ComboPooledDataSource();
    private QueryRunner qr=new QueryRunner(ds);
    @Override
    public List<User> selectAll() {
        String sql="select * from user";
        try {
            List<User> userList = qr.query(sql, new BeanListHandler<User>(User.class));
            return userList;
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return null;
    }

    @Override
    public User bySelectId(int uid) {
        String sql="select * from user where uid=? ";
        Object []object={uid};
        User query = null;
        try {
            query = qr.query(sql, new BeanHandler<User>(User.class), object);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return query;
    }

    @Override
    public int updateById(User user) {
        String sql="update user set uname=?,upwd=?,usex=?,uhobbey=?,utext=?,ufile=? where uid=? ";
        Object[] objects={user.getUname(),user.getUpwd(),user.getUsex(),user.getUhobbey(),user.getUtext(),user.getUfile(),user.getUid()};
        int update = 0;
        try {
            update = qr.update(sql, objects);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        return update;
    }
}

实体类User

public class User implements Serializable {
    private int uid;
    private String uname;
    private String upwd;
    private String usex;
    private String uhobbey;
    private String utext;
    private  String ufile;

    public User() {
    }

    public User(int uid, String uname, String upwd, String usex, String uhobbey, String utext, String ufile) {
        this.uid = uid;
        this.uname = uname;
        this.upwd = upwd;
        this.usex = usex;
        this.uhobbey = uhobbey;
        this.utext = utext;
        this.ufile = ufile;
    }

    public User(String uname, String upwd, String usex, String uhobbey, String utext, String ufile) {
        this.uname = uname;
        this.upwd = upwd;
        this.usex = usex;
        this.uhobbey = uhobbey;
        this.utext = utext;
        this.ufile = ufile;
    }

    public String getUfile() {
        return ufile;
    }

    public void setUfile(String ufile) {
        this.ufile = ufile;
    }

    public int getUid() {
        return uid;
    }

    public void setUid(int uid) {
        this.uid = uid;
    }

    public String getUname() {
        return uname;
    }

    public void setUname(String uname) {
        this.uname = uname;
    }

    public String getUpwd() {
        return upwd;
    }

    public void setUpwd(String upwd) {
        this.upwd = upwd;
    }

    public String getUsex() {
        return usex;
    }

    public void setUsex(String usex) {
        this.usex = usex;
    }

    public String getUhobbey() {
        return uhobbey;
    }

    public void setUhobbey(String uhobbey) {
        this.uhobbey = uhobbey;
    }

    public String getUtext() {
        return utext;
    }

    public void setUtext(String utext) {
        this.utext = utext;
    }

    @Override
    public String toString() {
        return "User{" +
                "uid=" + uid +
                ", uname='" + uname + '\'' +
                ", upwd='" + upwd + '\'' +
                ", usex='" + usex + '\'' +
                ", uhobbey='" + uhobbey + '\'' +
                ", utext='" + utext + '\'' +
                ", ufile='" + ufile + '\'' +
                '}';
    }
}

实现效果
在这里插入图片描述
在这里插入图片描述

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值