实训笔记_基础强化02

6、 HTML

6.1 概述

　　 html（hypertext markup language），超文本标记语言。（标记==标签）

　　　　纯文本中只能保存文本内容，图片、音频、视频等格式化的内容，都不能设置

　　它负责网页的三个要素之中的结构（结构、表现和行为）

　　html使用标签的形式来标识网页中的不同组成部分

　　所谓的超文本指的是超链接，使用超链接可以让我们从一个页面跳转到另一个页面

6.2 表格标签

　　表格在日常生活中使用的非常多，比如Excel就是用来专门创建表格的工具；

　　表格就是用来表示一些格式化的数据的，比如：课程表、工资表等等；

　　在网页中也可以创建出不同的表格。

　　　　在html中使用table标签来创建一个表格

　　　　在table标签中使用tr来创建一行，有几个tr就有几行

　　　　在tr标签中使用td来创建一个单元格，有几个td就有几个单元格

　　　　在td中使用rowspan来纵向合并单元格

　　　　在td中使用colspan来横向合并单元格

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

6.3 表单标签

　　现实生活中的表单是用来提交信息的，比如：办理银行卡填写的申请表、找工作填写的简历、入学时填写的个人信息表，这些都是表单的一种

　　网页中的表单是用来向服务器提交信息的，我们最长用到的表单就是baidu的搜索开框

姓名：<input type="text" name="name"><br>

性别：<input type="radio" name="sex" value="男">男

年龄：<input type="text" name="age"><br>

地址：<input type="text" name="address"><br>

生日：<input type="date" name="birthday"><br>

爱好：<input type="checkbox" name="interest" value="篮球">篮球

<input type="checkbox" name="interest" value="足球">足球

</form>

6.4 表单项

　　表单项指的就是form表单中可以写哪些内容。

　　根据type属性的值不同，可以写不同的输入框内容。

　　比如type的值是：

　　　　text：表示文本框

　　　　radio：单选按钮框

　　　　checkbox：复选框

　　　　date：日期框

　　　　submit：提交表单按钮

7、 CSS

7.1 概述

　　层叠样式表（Cascading Style Sheets）

　　CSS可以用来为网页创建样式表，通过样式表可以对网页进行装饰

　　所谓层叠，可以将整个网页想象成是一层一层的结构，层次高的将会覆盖层次低的

　　而css就可以分别为网页的各个层次设置样式

7.2 表格的样式

　　表格默认的样式比较丑，我们可以给它添加样式，使用css。

　　　　表格是一个块元素

　　　　使用th标签可以表示表头，该标签有些默认样式

　　　　设置表格的宽度：width:xxxpx;

　　　　设置表格居中：margin:0 auto;

　　　　设置表格的边框：border:1px solid red;

　　　　设置表格背景颜色：background-color:#bfa;

　　　　设置表格字体居中：text-align:center;

　　　　设置单元格的边框：border:1px solid black

　　　　表格边框和单元格边框之间有点距离，这个距离不是外边距，通过border-spacing属性可以设置这个距离的大小

　　　　表格边框和单元格边框可以合并成一个边框：border-collapse:collapse;合并之后border-spacing就自动失效了

　　　　设置隔行变色：tr:nth-child(even){background-color:#bfa;}

　　　　设置鼠标移入某行后变色：tr:hover{background-color:red;}

8、 Servlet

8.1 概述

　　Servlet是JavaEE规范之一，规范就是接口

　　Servlet是JavaWeb三大组件之一，三大组件分别是：Servlet程序，Filter过滤器，Listener监听器

　　Servlet是运行在服务器上的一个Java小程序，它可以接收客户端发送过来的请求，并响应数据给客户端

8.2 Eclipse集成Tomcat服务器

　　Tomcat服务器是一个开源的免费的服务器。可以用来运行我们开发好的web程序！

8.3 编写Servlet的步骤

　　在编写Servlet之前要在eclipse中配置好Tomcat服务器！

　　　　1. 编写一个类去继承HttpServlet类

　　　　2. 实现service方法，处理请求，并响应数据

　　　　3. 在web.xml中配置Servlet程序的访问地址

@WebServlet("/test")

public class TestServlet extends HttpServlet{

@Override

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

System.out.println("Servlet被访问！！！");

response.getWriter().write("hello world!");

}

8.4 HttpServletRequest类的介绍

　　　每次只要有请求进入Tomcat服务器，Tomcat服务器就会把请求过来的http协议信息解析好封装到Request对象中，然后传递到service方法（doGet和doPost）中给我们使用。我们可以通过HttpServletRequest对象获取到所有请求的信息。

　　　常用方法：

　　　　getParameter() 获取请求的参数

　　　　setAttribute(key, value) 设置域数据 (HttpServletRequest也是一个域对象)

8.5 演示获取参数

@WebServlet("/test")

public class TestServlet extends HttpServlet{

@Override

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

String name = request.getParameter("name");

System.out.println("name:" + name);

System.out.println("Servlet被访问！！！");

response.getWriter().write("hello world!");

}

9、 Servlet

9.1 概述

　　jsp的全名是：java server pages，java服务器页面。

　　jsp的主要作用是代替Servlet程序回传HTML页面的数据。

　　因为Servlet程序回传HTML页面数据是一件非常繁琐的事情，开发成本和维护成本都很高。

　　在jsp中可以编写HTML、css、js、java等代码

　　我们使用jsp的目的就是为了方便的去展示后端传递过来的数据

10、综合案例

10.1 概述

　　使用目前学习的技术完成商品信息的增删改查！

10.1 创建数据库表

10.3 创建工程

10.4 导入jar包

10.5 编写配置文件

driver=com.mysql.cj.jdbc.Driver

url=jdbc:mysql:///test?serverTimezone=Asia/Shanghai

user=root

password=root3306

10.6 编写数据库工具类

public class JDBCUtils {

private static String driver;

private static String url;

private static String user;

private static String password;

static{

try {

Properties prop = new Properties();

prop.load(JDBCUtils.class.getClassLoader().getResourceAsStream("jdbc.properties"));

driver = prop.getProperty("driver");

url = prop.getProperty("url");

user = prop.getProperty("user");

password = prop.getProperty("password");

} catch (Exception e) {

e.printStackTrace();

}

public static Connection getConn() throws Exception{

return DriverManager.getConnection(url, user, password);

}

public static void closeConn(ResultSet rs, Statement st, Connection conn){

if(rs != null){

try {

rs.close();

} catch (SQLException e) {

e.printStackTrace();

}

if(st != null){

try {

st.close();

} catch (SQLException e) {

e.printStackTrace();

}

if(conn != null){

try {

conn.close();

} catch (SQLException e) {

e.printStackTrace();

}

10.7 编写pojo层

/**

* 商品实体类

public class Goods {

private Integer id;

private String name;

private Double price;

private Integer num;

private Date createDate;

private Integer status; //0-下架 1-上架

public Goods() {

super();

}

public Goods(Integer id, String name, Double price, Integer num, Date createDate, Integer status) {

super();

this.id = id;

this.name = name;

this.price = price;

this.num = num;

this.createDate = createDate;

this.status = status;

}

public Integer getId() {

return id;

}

public void setId(Integer id) {

this.id = id;

}

public String getName() {

return name;

}

public void setName(String name) {

this.name = name;

}

public Double getPrice() {

return price;

}

public void setPrice(Double price) {

this.price = price;

}

public Integer getNum() {

return num;

}

public void setNum(Integer num) {

this.num = num;

}

public Date getCreateDate() {

return createDate;

}

public void setCreateDate(Date createDate) {

this.createDate = createDate;

}

public Integer getStatus() {

return status;

}

public void setStatus(Integer status) {

this.status = status;

}

@Override

public int hashCode() {

final int prime = 31;

int result = 1;

result = prime * result + ((createDate == null) ? 0 : createDate.hashCode());

result = prime * result + ((id == null) ? 0 : id.hashCode());

result = prime * result + ((name == null) ? 0 : name.hashCode());

result = prime * result + ((num == null) ? 0 : num.hashCode());

result = prime * result + ((price == null) ? 0 : price.hashCode());

result = prime * result + ((status == null) ? 0 : status.hashCode());

return result;

}

@Override

public boolean equals(Object obj) {

if (this == obj)

return true;

if (obj == null)

return false;

if (getClass() != obj.getClass())

return false;

Goods other = (Goods) obj;

if (createDate == null) {

if (other.createDate != null)

return false;

} else if (!createDate.equals(other.createDate))

return false;

if (id == null) {

if (other.id != null)

return false;

} else if (!id.equals(other.id))

return false;

if (name == null) {

if (other.name != null)

return false;

} else if (!name.equals(other.name))

return false;

if (num == null) {

if (other.num != null)

return false;

} else if (!num.equals(other.num))

return false;

if (price == null) {

if (other.price != null)

return false;

} else if (!price.equals(other.price))

return false;

if (status == null) {

if (other.status != null)

return false;

} else if (!status.equals(other.status))

return false;

return true;

}

@Override

public String toString() {

return id+"\t"+name+"\t\t"+price+"\t"+num+"\t"+createDate+"\t"+status;

}

10.8 编写dao层

public interface GoodsDao {

List<Goods> getGoodsList(Connection conn) throws Exception;

public class GoodsDaoImpl implements GoodsDao{

@Override

public List<Goods> getGoodsList(Connection conn) throws Exception {

PreparedStatement ps = null;

ResultSet rs = null;

List<Goods> list = new ArrayList<Goods>();

try {

String sql = "select * from goods";

ps = conn.prepareStatement(sql);

rs = ps.executeQuery();

while (rs.next()) {

int id = rs.getInt("id");

String name = rs.getString("name");

double price = rs.getDouble("price");

int num = rs.getInt("num");

Date createDate = rs.getDate("create_date");

int status = rs.getInt("status");

Goods goods = new Goods(id, name, price, num, createDate, status);

list.add(goods);

}

} finally {

JDBCUtils.closeConn(rs, ps, null);

}

return list;

10.9 编写service层

public interface GoodsService {

List<Goods> getGoodsList();

public class GoodsServiceImpl implements GoodsService{

GoodsDao goodsDao = new GoodsDaoImpl();

@Override

public List<Goods> getGoodsList() {

Connection conn = null;

List<Goods> list = null;

try {

conn = JDBCUtils.getConn();

list = goodsDao.getGoodsList(conn);

} catch (Exception e) {

e.printStackTrace();

} finally{

JDBCUtils.closeConn(null, null, conn);

}

return list;

10.10 编写controller层

@WebServlet("/goods")

public class GoodsServlet extends HttpServlet{

@Override

protected void service(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

request.setCharacterEncoding("utf-8");

response.setCharacterEncoding("utf-8");

response.setContentType("text/html;charset=utf-8");

GoodsService goodsService = new GoodsServiceImpl();

String function = request.getParameter("function");

if("getGoodsList".equals(function)){

List<Goods> list = goodsService.getGoodsList();

request.setAttribute("list", list);

request.getRequestDispatcher("/list.jsp").forward(request, response);

}

10.11 编写list.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>

<title>Insert title here</title>

</head>

<body>

<table>

<tr>

</tr>

<c:forEach items="${list}" var="g">

<tr>

<td>${g.price}</td>

<td>${g.createDate}</td>

<td>${g.status==0?"下架":"上架"}</td>

</tr>

</c:forEach>

</table>

</body>

</html>

posted @ 2022-01-19 19:05 Space-guan 阅读(45) 评论(0) 收藏举报

刷新页面返回顶部

Space-guan

实训笔记_基础强化02

6、 HTML

6.1 概述

6.2 表格标签

6.3 表单标签

6.4 表单项

7、 CSS

7.1 概述

7.2 表格的样式

8、 Servlet

8.1 概述

8.2 Eclipse集成Tomcat服务器

8.3 编写Servlet的步骤

8.4 HttpServletRequest类的介绍

8.5 演示获取参数

9、 Servlet

9.1 概述

10、 综合案例

10.1 概述

10.1 创建数据库表

10.3 创建工程

10.4 导入jar包

10.5 编写配置文件

10.6 编写数据库工具类

10.7 编写pojo层

10.8 编写dao层

10.9 编写service层

10.10 编写controller层

10.11 编写list.jsp页面

公告

10、综合案例