2.16 Java基础41
今天的主要内容：
1. 简单介绍了bootstrap的样式: 使用table样式,button样式.
关于最外层div包裹
.container用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于100%宽度，占据全部视口（viewport）的容器。
对table的边框外观和鼠标悬浮变色的设置
添加.table-bordered类为表格和其中的每个单元格增加边框。
通过添加.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。
对按钮大小和颜色的设置
让按钮具有不同尺寸使用.btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮
btn btn-success Indicates a successful or positive action
相关页面代码：
<%@page import="java.util.List"%>
<%@page import="com.users.entity.User"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link type="text/css" rel="stylesheet" href="bootstrap3/css/bootstrap.css">
</head>
<body>
<!-- .container用于固定宽度并支持响应式布局的容器。 -->
<!-- .container-fluid 类用于100%宽度，占据全部视口（viewport）的容器。 -->
<div class="container">
<h4>用户列表</h4>
<!-- 添加.table-bordered类为表格和其中的每个单元格增加边框。 -->
<!-- 通过添加.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。 -->
<table class="table table-hover table-striped">
<tr>
<th><input type="checkbox" id="checkall"></th>
<th>用户名</th>
<th>电话</th>
<th>性别</th>
<th>邮箱</th>
<th>状态</th>
<th>操作</th>
</tr>
<%
//java代码 从请求范围内获取数据
//原来是List<User>Object obj=request.gerAttriubte("user");
//但是object不好取单个对象的属性，所以转成list好遍历
List<User> obj=(List<User>)request.getAttribute("user");
//页面上打印输出obj对象
//out.print(obj);
for(User u:obj){
%>
<tr>
<td><input type="checkbox" class="checkrow"></td>
<td><%=u.getUsername()%></td>
<td><%=u.getUsertel()%></td>
<td><%=u.getUsersex()%></td>
<td><%=u.getUsermail()%></td>
<td><%=u.getUserstate()==1?"启用":"禁用"%></td>
<!-- btn btn-success Indicates a successful or positive action -->
<!-- 让按钮具有不同尺寸使用.btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮-->
<td><button class="btn btn-success btn-xm">修改</button>
<button class="btn btn-success btn-xm">删除</button>
</td>
</tr>
<%
};
%>
</table>
</div>
<script>
$(function(){
//点击了id为checkall的按钮以后触发函数
$("#checkall").click(function(){
//设置每一行的那个复选框(class="checkrow")的状态和当前的checkall 一致
$(".checkrow").prop("checked",$(this).prop("checked"));
})
})
</script>
</body>
</html>
2. 表单方式提交数据给servlet;
表单submit提交
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- 通过表单提交传值给后端 -->
<form action="Demo01" method="post">
<input type="text" name="username">
<input type="submit" value="提交">
</form>
</body>
</html>
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Demo01
*/
@WebServlet("/Demo01")
public class Demo01 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1. 设置请求编码
request.setCharacterEncoding("utf-8");
//2 获取请求参数的值
String username=request.getParameter("username");
System.out.println("username："+username);
}
}
3. 非表单方式提交数据给servlet;
通过URL传值给后端与超链接传值给后端
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 这里导入的是jQueryCDN公共库 要联网才能生效 -->
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
<!-- 通过url传值给后端（2种） -->
<input type="button" id="btn1" value="url传值">
<button type="button" id="btn2">删除</button>
<!-- 地址栏用问号?连接要跳转的页面和要传的值，与号&做参数=值之间的拼接 -->
<a href="Demo02?userid=102">删除</a>
<script>
$(function(){
//按钮事件
$("#btn1").click(function(){
//地址栏跳转到servlet去. ->get请求
//location.href="Demo02?key=value&key2=value&key3=value"
location.href="Demo02?username=张三&age=18&userid=101";
})
})
</script>
</body>
</html>url地址?参数=值&参数=值2
<a href=”url地址?参数=值&参数=值2”>图片 按钮 文字等</a>
package com.users.controller;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class Demo02
*/
@WebServlet("/Demo02")
public class Demo02 extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//doGet方法下写setCharacterEncoding("utf-8")是无效的
//1.获取用户传递过来的参数
String username=request.getParameter("username");
System.out.println("username:"+username);
String age=request.getParameter("age");
System.out.println("age:"+age);
String userid=request.getParameter("userid");
System.out.println("userid:"+userid);
}
}
4. servlet传递数据给jsp页面: request.setAttribute("key",obj);
5. jsp接收servlet传递过来的数据，并展示. request.getAttribute("key");
顺序：servlet调用service，service调用dao，从而获取数据库数据，通过request请求转发到jsp页面并显示。
package com.users.controller;
import java.io.IOException;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.users.entity.User;
import com.users.service.UserService;
import com.users.service.impl.UserServiceImpl;
/**
* Servlet implementation class Demo03
*/
@WebServlet({ "/Demo03", "/D3" })
public class Demo03 extends HttpServlet {
private static final long serialVersionUID = 1L;
UserService service=new UserServiceImpl();
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// 从这里开始，获取数据库数据并将其传递给jsp页面
List<User>list=service.queryUsersByLike("");
request.setAttribute("user", list);
// 1 转发到demo03.jsp
request.getRequestDispatcher("Demo03.jsp").forward(request,response);
}
}
<%@page import="java.util.List"%>
<%@page import="com.users.entity.User"%>
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
<link type="text/css" rel="stylesheet" href="bootstrap3/css/bootstrap.css">
</head>
<body>
<!-- .container用于固定宽度并支持响应式布局的容器。 -->
<!-- .container-fluid 类用于100%宽度，占据全部视口（viewport）的容器。 -->
<div class="container">
<h4>用户列表</h4>
<!-- 添加.table-bordered类为表格和其中的每个单元格增加边框。 -->
<!-- 通过添加.table-hover 类可以让 <tbody> 中的每一行对鼠标悬停状态作出响应。 -->
<table class="table table-hover table-striped">
<tr>
<th><input type="checkbox" id="checkall"></th>
<th>用户名</th>
<th>电话</th>
<th>性别</th>
<th>邮箱</th>
<th>状态</th>
<th>操作</th>
</tr>
<%
//java代码 从请求范围内获取数据
//原来是List<User>Object obj=request.gerAttriubte("user");
//但是object不好取单个对象的属性，所以转成list好遍历
List<User> obj=(List<User>)request.getAttribute("user");
//页面上打印输出obj对象
//out.print(obj);
for(User u:obj){
%>
<tr>
<td><input type="checkbox" class="checkrow"></td>
<td><%=u.getUsername()%></td>
<td><%=u.getUsertel()%></td>
<td><%=u.getUsersex()%></td>
<td><%=u.getUsermail()%></td>
<td><%=u.getUserstate()==1?"启用":"禁用"%></td>
<!-- btn btn-success Indicates a successful or positive action -->
<!-- 让按钮具有不同尺寸使用.btn-lg、.btn-sm 或 .btn-xs 就可以获得不同尺寸的按钮-->
<td><button class="btn btn-success btn-xm">修改</button>
<button class="btn btn-success btn-xm">删除</button>
</td>
</tr>
<%
};
%>
</table>
</div>
<script>
$(function(){
//点击了id为checkall的按钮以后触发函数
$("#checkall").click(function(){
//设置每一行的那个复选框(class="checkrow")的状态和当前的checkall 一致
$(".checkrow").prop("checked",$(this).prop("checked"));
})
})
</script>
</body>
</html>
6. servlet直接打印json格式的数据在页面.->为ajax请求做准备.
package com.etc.controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.etc.entity.News;
import com.etc.service.NewsService;
import com.etc.service.impl.NewsServiceImpl;
import com.google.gson.Gson;
/**
* Servlet implementation class NewsServlet
*/
@WebServlet("/NewsServletJson")
public class NewsServletJson extends HttpServlet {
private static final long serialVersionUID = 1L;
//1 创建NewsService对象
NewsService nservice = new NewsServiceImpl();
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1 .设置response.contentType同时设置响应编码
response.setContentType("application/json;charset=utf-8");
//2 创建 PrintWriter
PrintWriter pw = response.getWriter();
//3 调用nservice
List<News> list = nservice.queryNewsByLike("");
//4-1 如何将java对象转换为json格式的字符串
Gson gson = new Gson();
//4-2 toJson
String jsonstr = gson.toJson(list);
//5 打印数据
pw.print(jsonstr);
//6 释放资源
pw.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
posted on 2022-02-16 19:53 heyiyang1312 阅读(9) 评论(0) 收藏 举报
浙公网安备 33010602011771号