前言
这里是看了一点jsp的,顺便过了一下,不是特别熟悉,因为现在这种技术是比较落后了,但是作为学习的过程也就学了下。
因为技术不是现在很常用,所以我没有单独做出笔记。将前段的一些知识,后端的一些知识简单结合一下,作为这个阶段的一个简单的练习。
虽然简单但是知识还是很值得注意,因为实现的前后端涉及到原理性的东西,还有零碎的知识点,所以自己就记录下来。
简单看了下mvc和三层架构的思想。我没有研究很深,但是看的出来是一种分而治之得思想,就是各自实现各自的功能,使得功能之间的服务更加有条理,而不是混在一块。
上面的是mvn模式,下面对应的是三层架构。我们就是从数据访问层和业务逻辑层和表现层的思维去进行编程。
我们的目的是实现一个前后端结合的项目,完成一个增删改查的操作,将表单在前端页面上进行展示。
具体的可以看下面的展示。
环境准备
创建web项目结构
这里当然可以选择骨架
我选择不用骨架
这是创建好后这个pom配置文件
然后我们给它配置war打包方式。
这是我们目前的结构,然后我们需要补齐一些目录和配置
我们打开项目结构来看,然后选中Facets,然后我们看到我们新建的这个没有被认作是web模块。
那我们就添加上去,点击加号,然后选择web。
然后把你的模块添加进去
连续点击确认
然后我们点击这里。
然后下面最好选择3.0之后的版本
然后后面的确认就好。
现在我们再看项目目录,在做小的改造。这个项目结构还是不太正确
我们先把web拖到main下
然后将WEB-INF拖到web下面
这样就基本改造完成。
这里我们在说明了一遍自己创建web项目结构的过程。之前我们都说过,包括骨架。这里就再复习一遍。
导入依赖和配置文件
下面这个是我们目前项目需要使用的所有依赖。
需要注意的是,一定要注意scope的作用域,非常重要,设置不当可能会导致冲突还有就是检测不到等异常。
需要操作数据库。mysql的驱动包
要使用mybatis框架。mybaits的依赖包
web项目需要用到servlet和jsp。servlet和jsp的依赖包需要使用 jstl 进行数据展示。jstl的依赖包
<?xml version="1.0" encoding="UTF-8"?> <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd"> <modelVersion>4.0.0</modelVersion> <groupId>org.example</groupId> <artifactId>brand-demo01</artifactId> <version>1.0-SNAPSHOT</version> <packaging>war</packaging> <properties> <maven.compiler.source>8</maven.compiler.source> <maven.compiler.target>8</maven.compiler.target> </properties> <dependencies> <dependency> <groupId>org.mybatis</groupId> <artifactId>mybatis</artifactId> <version>3.5.9</version> </dependency> <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId> <version>8.0.29</version> </dependency> <dependency> <groupId>javax.servlet</groupId> <artifactId>javax.servlet-api</artifactId> <version>4.0.1</version> <scope>provided</scope> </dependency> <dependency> <groupId>javax.servlet.jsp</groupId> <artifactId>jsp-api</artifactId> <version>2.2</version> <scope>provided</scope> </dependency> <dependency> <groupId>jstl</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> <dependency> <groupId>taglibs</groupId> <artifactId>standard</artifactId> <version>1.1.2</version> </dependency> </dependencies> <build> <plugins> <plugin> <groupId>org.apache.tomcat.maven</groupId> <artifactId>tomcat7-maven-plugin</artifactId> <version>2.2</version> </plugin> </plugins> </build> </project>
需要一个mybatis核心配置文件,我们把它放到rescorces下面。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <settings> <!-- 开启自动驼峰命名规则映射 --> <setting name="mapUnderscoreToCamelCase" value="true"/> </settings> <!--起别名--> <typeAliases> <package name="com.jgdabc.pojo"/> </typeAliases> <environments default="development"> <environment id="development"> <transactionManager type="JDBC"/> <dataSource type="POOLED"> <property name="driver" value="com.mysql.cj.jdbc.Driver"/> <property name="url" value="jdbc:mysql:///mysql?serverTimezone=GMT"/> <property name="username" value="root"/> <property name="password" value="123456"/> </dataSource> </environment> </environments> <mappers> <!--扫描mapper--> <package name="com.jgdabc.mapper"/> </mappers> </configuration>
基本的两个配置,其他的配置我们还有在构建mapper的还需要一个xml文件。
创建层次模型
然后我们创建这样的层次包结构。
webapp下面存放jsp等前端页面。在java下面创建存放接口mapper的接口代码,还有一个实体pojo下存放brand类作为包装类。我们的属性在这里写。service里面就傻逼我们可以从这里调用的服务代码。util报下是将加载数据库核心配置文件单独封装。web下面就是我们的Servlet代码,具体实现后端的功能,包括增删改查等功能。
我们的web下面的Servlet和webapp下面的jsp等前端页面展示构成了表现层。像html或者jsp我们可以认为是视图,然后Servlet是控制器。我们的service包下的类提供业务逻辑的功能。mapper下面的接口类作为数据访问层。
我们的数据库的配置文件时一定要有的,因为将来我们需要去连接数据库,配置驱动等等。然后mapperMapper.xml在本次项目中没有发挥作用,因为简单的sql语句就在接口里面按照注解写好了。但是我们最好养成这样的习惯,因为将来我们的sql语句实际并没有这么简单。我们还是用到了代理。映射文件和接口文件的位置相对位置类位置一样。
实现查询
这些操作我们都需要和前后端结合,也就是需要在页面上展示,并不是仅仅在控制台输出。
创建一张数据库表。
-- 删除tb_brand表 drop table if exists tb_brand; -- 创建tb_brand表 create table tb_brand ( -- id 主键 id int primary key auto_increment, -- 品牌名称 brand_name varchar(20), -- 企业名称 company_name varchar(20), -- 排序字段 ordered int, -- 描述信息 description varchar(100), -- 状态:0:禁用 1:启用 status int ); -- 添加数据 insert into tb_brand (brand_name, company_name, ordered, description, status) values ('三只松鼠', '三只松鼠股份有限公司', 5, '好吃不上火', 0), ('华为', '华为技术有限公司', 100, '华为致力于把数字世界带入每个人、每个家庭、每个组织,构建万物互联的智能世界', 1), ('小米', '小米科技有限公司', 50, 'are you ok', 1); SELECT * FROM tb_brand;
这是之前创建表表的代码,不过填写什么并没有关系,以为之后可以自己进行增删改查,并且删除的话,虽然在数据库中会出现id断层,但是在我前端展示还是非常正常。原因往后看。
我的数据库表现在被我已经删该为这样了。
这是我多次操作的结果,但是前端展示id还是连续的。
表创建以后我们需要一个实体类
package com.jgdabc.pojo; /** * 品牌实体类 */ public class Brand { // id 主键 private Integer id; // 品牌名称 private String brandName; // 企业名称 private String companyName; // 排序字段 private Integer ordered; // 描述信息 private String description; // 状态:0:禁用 1:启用 private Integer status; public Brand() { } public Brand(Integer id, String brandName, String companyName, String description) { this.id = id; this.brandName = brandName; this.companyName = companyName; this.description = description; } public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) { this.id = id; this.brandName = brandName; this.companyName = companyName; this.ordered = ordered; this.description = description; this.status = status; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getBrandName() { return brandName; } public void setBrandName(String brandName) { this.brandName = brandName; } public String getCompanyName() { return companyName; } public void setCompanyName(String companyName) { this.companyName = companyName; } public Integer getOrdered() { return ordered; } public void setOrdered(Integer ordered) { this.ordered = ordered; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public Integer getStatus() { return status; } public void setStatus(Integer status) { this.status = status; } @Override public String toString() { return "Brand{" + "id=" + id + ", brandName='" + brandName + '\'' + ", companyName='" + companyName + '\'' + ", ordered=" + ordered + ", description='" + description + '\'' + ", status=" + status + '}'; } }
mybatis 核心配置文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <settings> <!-- 开启自动驼峰命名规则映射 --> <setting name="mapUnderscoreToCamelCase" value="true"/> </settings> <!--起别名--> <typeAliases> <package name="com.jgdabc.pojo"/> </typeAliases> <environments default="development"> <environment id="development"> <transactionManager type="JDBC"/> <dataSource type="POOLED"> <property name="driver" value="com.mysql.cj.jdbc.Driver"/> <property name="url" value="jdbc:mysql:///mysql?serverTimezone=GMT"/> <property name="username" value="root"/> <property name="password" value="123456"/> </dataSource> </environment> </environments> <mappers> <!--扫描mapper--> <package name="com.jgdabc.mapper"/> </mappers> </configuration>
映射文件,这个可有可无,只是因为我没有在这里面写sql。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.jgdabc.mapper.BrandMapper"> </mapper>
我们写BrandMapper这个接口,作为Dao层。
package com.jgdabc.mapper; import com.jgdabc.pojo.Brand; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import java.util.List; public interface BrandMapper { @Select("select * from tb_brand") List<Brand>selectAll(); }
做一个工具类
package com.jgdabc.util; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.IOException; import java.io.InputStream; public class SqlSessionFactoryUtils { private static SqlSessionFactory sqlSessionFactory; static { //静态代码块会随着类的加载而自动执行,且只执行一次 try { String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); } catch (IOException e) { e.printStackTrace(); } } public static SqlSessionFactory getSqlSessionFactory(){ return sqlSessionFactory; } }
然后service包下,我们创建一个BrandService
package com.jgdabc.service; import com.jgdabc.mapper.BrandMapper; import com.jgdabc.pojo.Brand; import com.jgdabc.util.SqlSessionFactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import java.util.List; public class BrandService { SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory(); public List<Brand>selectAll() { SqlSession sqlSession = factory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); List<Brand> brands = mapper.selectAll(); sqlSession.close(); return brands; } }
然后创建一个Servlet类
package com.jgdabc.web; import com.jgdabc.pojo.Brand; import com.jgdabc.service.BrandService; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; import java.util.List; @WebServlet("/selectAllServlet") public class SelectAllServlet extends HttpServlet { BrandService service = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Brand> brands = service.selectAll(); System.out.println(brands); // 存入request区域当中 request.setAttribute("brands",brands); // 转发到brand.jsp request.getRequestDispatcher("/brand.jsp").forward(request,response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request,response); } }
然后创建brand.jsp。
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="button" value="新增" id="add"><br> <hr> <table border="1" cellspacing="0" width="80%"> <tr> <th>序号</th> <th>品牌名称</th> <th>企业名称</th> <th>排序</th> <th>品牌介绍</th> <th>状态</th> <th>操作</th> </tr> <c:forEach items="${brands}" var="brand" varStatus="status"> <tr align="center"> <%--<td>${brand.id}</td>--%> <td>${status.count}</td> <td>${brand.brandName}</td> <td>${brand.companyName}</td> <td>${brand.ordered}</td> <td>${brand.description}</td> <c:if test="${brand.status == 1}"> <td>启用</td> </c:if> <c:if test="${brand.status != 1}"> <td>禁用</td> </c:if> <td><a href="/brand-demo01/selectByIdServlet?id=${brand.id}">修改</a> <a href="/brand-demo01/selectDeleteServlet?id=${brand.id}">删除</a></td> </tr> </c:forEach> </table> <script> document.getElementById("add").onclick = function (){ location.href = "/brand-demo01/addBrand.jsp"; } </script> </body> </html>
启动!
我们启动服务后默认会打开index.html,所以初始化我们就写在这里面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <a href="/brand-demo01/selectAllServlet">查询所有</a> </body> </html>
点击查询所有
我在核心配置文件中这样写就可以自动开启驼峰规则,这样就可以避免数据库字段和idea实体类字段不匹配导致查询不到结果的问题。
如果不这样处理的话,我们就需要在映射文件中这样写。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.itheima.mapper.BrandMapper"> <resultMap id="brandResultMap" type="brand"> <result column="brand_name" property="brandName"></result> <result column="company_name" property="companyName"></result> </resultMap> </mapper>
然后在接口中写一下返回类型(用注解)
@Select("select * from tb_brand") @ResultMap("brandResultMap") List<Brand> selectAll();
这样我们也可以将数据库字段和java驼峰命名法匹配起来。
未完续更
实现添加
我们首先在Dao层也就是mapper层写出这个接口方法。
package com.jgdabc.mapper; import com.jgdabc.pojo.Brand; import org.apache.ibatis.annotations.Delete; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Select; import org.apache.ibatis.annotations.Update; import java.util.List; public interface BrandMapper { @Select("select * from tb_brand") List<Brand>selectAll(); @Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})") void add(Brand brand); @Select("select * from tb_brand where id = #{id}") }
然后在service里面调用
public void add(Brand brand) { SqlSession sqlSession = factory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); mapper.add(brand); sqlSession.commit(); sqlSession.close(); }
记住我们的工具类封装。
package com.jgdabc.util; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.IOException; import java.io.InputStream; public class SqlSessionFactoryUtils { private static SqlSessionFactory sqlSessionFactory; static { //静态代码块会随着类的加载而自动执行,且只执行一次 try { String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); } catch (IOException e) { e.printStackTrace(); } } public static SqlSessionFactory getSqlSessionFactory(){ return sqlSessionFactory; } }
然后我们需要写出这个添加的jsp
<%-- Created by IntelliJ IDEA. User: jgdabc Date: 2022/5/11 Time: 17:33 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>添加品牌</title> </head> <body> <h3>添加品牌</h3> <form action="/brand-demo/addServlet" method="post"enctype="application/x-www-form-urlencoded"> 品牌名称:<input name="brandName"><br> 企业名称:<input name="companyName"><br> 排序:<input name="ordered"><br> 描述信息:<textarea rows="5" cols="20" name="description"></textarea><br> 状态: <input type="radio" name="status" value="0">禁用 <input type="radio" name="status" value="1">启用<br> <input type="submit" value="提交"> </form> </body> </html>
然后我们写这个Servlet。我们的Servlet从jsp前端获取到数据后我们再次回到查看全部数据的页面,这样可以查看到更新的数据。
package com.jgdabc.web; import com.jgdabc.pojo.Brand; import com.jgdabc.service.BrandService; 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 java.io.IOException; @WebServlet("/addServlet") public class AddServlet extends HttpServlet { private BrandService service = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, IOException { //接收表单提交的数据,封装为brand对象 // 处理乱码问题 request.setCharacterEncoding("utf-8"); String brandName = request.getParameter("brandName"); String companyName = request.getParameter("companyName"); String ordered = request.getParameter("ordered"); String description = request.getParameter("description"); String status = request.getParameter("status"); System.out.println("brandName"+brandName); //封装为一个Brand对象 Brand brand = new Brand(); brand.setBrandName(brandName); brand.setCompanyName(companyName); brand.setOrdered(Integer.parseInt(ordered)); brand.setDescription(description); brand.setStatus(Integer.parseInt(status)); service.add(brand); // 转发到查询所有Servlet //request.getRequestDispatcher("/selectAllServlet").forward(request, response); response.sendRedirect("selectAllServlet"); System.out.println("request"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("post"); doGet(request, response); } }
后面索性给brand.jsp加了个背景css。
属实比较丑陋
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/login.css" rel="stylesheet"> </head> <body> <input type="button" value="新增" id="add" style="margin-left: -100px;margin-top: -300px;color: #50afeb"><br> <hr> <table border="1" cellspacing="0" width="80%"> <tr> <th>序号</th> <th>品牌名称</th> <th>企业名称</th> <th>排序</th> <th>品牌介绍</th> <th>状态</th> <th>操作</th> </tr> <c:forEach items="${brands}" var="brand" varStatus="status"> <tr align="center"> <%--<td>${brand.id}</td>--%> <td>${status.count}</td> <td>${brand.brandName}</td> <td>${brand.companyName}</td> <td>${brand.ordered}</td> <td>${brand.description}</td> <c:if test="${brand.status == 1}"> <td>启用</td> </c:if> <c:if test="${brand.status != 1}"> <td>禁用</td> </c:if> <td><a href="/brand-demo01/selectByIdServlet?id=${brand.id}">修改</a> <a href="/brand-demo01/selectDeleteServlet?id=${brand.id}">删除</a></td> </tr> </c:forEach> </table> <script> document.getElementById("add").onclick = function (){ location.href = "/brand-demo01/addBrand.jsp"; } </script> </body> </html>
具体的css还是我们之前用过的css布局
* { margin: 0; padding: 0; } html { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; background: url(../imgs/Desert.jpg) no-repeat 0px 0px; background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; } body { display: flex; align-items: center; justify-content: center; height: 100%; } #loginDiv { width: 37%; display: flex; justify-content: center; align-items: center; height: 300px; background-color: rgba(75, 81, 95, 0.3); box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5); border-radius: 5px; } #name_trip { margin-left: 50px; color: red; } p { margin-top: 30px; margin-left: 20px; color: azure; } input { margin-left: 15px; border-radius: 5px; border-style: hidden; height: 30px; width: 140px; background-color: rgba(216, 191, 216, 0.5); outline: none; color: #f0edf3; padding-left: 10px; } #username{ width: 200px; } #password{ width: 202px; } .button { border-color: cornsilk; background-color: rgba(100, 149, 237, .7); color: aliceblue; border-style: hidden; border-radius: 5px; width: 100px; height: 31px; font-size: 16px; } #subDiv { text-align: center; margin-top: 30px; } #loginMsg{ text-align: center;color: aliceblue; }
然后我们启动一下。
我们进行添加的话,可以在这里添加成功。
我们对启用禁用这样进行数据回显。我在添加这个jsp页面这样做。当我点击禁用的话,就给值为0,当我点击启用给值为1。然后这样提交给Servlet进行处理,然后在brand.jsp里面根据这些数值做一些回显。
实现修改
这是我们的界面
我们现在每一行后面都有一个操作,删除,修改。我们现在想要完成修改的操作。我们的修改功能是Servlet完成的。那么我们需要传一个参数,让它根据这个参数的值完成对应的操作。
其实我们可以在传给Servlet的时候,携带参数,比如我们当然行的id。当我们点击当前行的时候,当前行的id就被传过去了。这样我们就能根据这个id来修改数据了。
当前你传入其他的参数也是一样的道理。
我们在接口文件需要用到两个方法
@Select("select * from tb_brand where id = #{id}") Brand selectById(int id); @Update("update tb_brand set brand_name=#{brandName},company_name=#{companyName},ordered=#{ordered},description=#{description},status=#{status} where id=#{id}") void update(Brand brand);
然后我们传到Servlet进行处理
package com.jgdabc.util.web; import com.jgdabc.pojo.Brand; import com.jgdabc.service.BrandService; 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 java.io.IOException; @WebServlet("/selectByIdServlet") public class SelectByIdServlet extends HttpServlet { BrandService service = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //接收id String id = request.getParameter("id"); //调用service查询 Brand brand = service.selectById(Integer.parseInt(id)); //存储到request域当中 request.setAttribute("brand",brand); //转发到update.jsp request.getRequestDispatcher("/update.jsp").forward(request,response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
存在问题:update.jsp 页面提交数据时是没有携带主键数据的,而后台修改数据需要根据主键进行修改。
针对这个问题,我们不希望页面将主键id展示给用户看,但是又希望在提交数据时能将主键id提交到后端。此时我们就想到
了在学习 HTML 时学习的隐藏域,在 页面的表单中添加如下代码:
然后需要一个update.jsp。
<%-- Created by IntelliJ IDEA. User: jgdabc Date: 2022/5/11 Time: 17:33 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>修改</title> </head> <body> <h3>修改</h3> <form action="/brand-demo01/updateServlet" method="post"enctype="application/x-www-form-urlencoded"> <input type="hidden" name="id" value="${brand.id}"> 品牌名称:<input name="brandName" value="${brand.brandName}"><br> 企业名称:<input name="companyName"value="${brand.companyName}"><br> 排序:<input name="ordered" value="${brand.ordered}"><br> 描述信息:<textarea rows="5" cols="20" name="description">${brand.description}</textarea><br> 状态: <c:if test="${brand.status==0}"> <input type="radio" name="status" value="0"checked>禁用 <input type="radio" name="status" value="1">启用<br> </c:if> <c:if test="${brand.status==1}"> <input type="radio" name="status" value="0">禁用 <input type="radio" name="status" value="1"checked>启用<br> </c:if> <input type="submit" value="提交"> </form> </body> </html>
然后转发到updateServlet。
package com.jgdabc.util.web; import com.jgdabc.pojo.Brand; import com.jgdabc.service.BrandService; 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 java.io.IOException; @WebServlet("/updateServlet") public class UpdateServlet extends HttpServlet { private BrandService service = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException, IOException { //接收表单提交的数据,封装为brand对象 // 处理乱码问题 request.setCharacterEncoding("utf-8"); String id = request.getParameter("id"); String brandName = request.getParameter("brandName"); String companyName = request.getParameter("companyName"); String ordered = request.getParameter("ordered"); String description = request.getParameter("description"); String status = request.getParameter("status"); System.out.println("brandName"+brandName); //封装为一个Brand对象 Brand brand = new Brand(); brand.setId(Integer.parseInt(id)); brand.setBrandName(brandName); brand.setCompanyName(companyName); brand.setOrdered(Integer.parseInt(ordered)); brand.setDescription(description); brand.setStatus(Integer.parseInt(status)); service.update(brand); // 转发到查询所有Servlet //request.getRequestDispatcher("/selectAllServlet").forward(request, response); response.sendRedirect("selectAllServlet"); System.out.println("request"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("post"); doGet(request, response); } }
然后再传到查询,前面已经给出了。
package com.jgdabc.util.web; import com.jgdabc.pojo.Brand; import com.jgdabc.service.BrandService; import javax.servlet.*; import javax.servlet.http.*; import javax.servlet.annotation.*; import java.io.IOException; import java.util.List; @WebServlet("/selectAllServlet") public class SelectAllServlet extends HttpServlet { BrandService service = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { List<Brand> brands = service.selectAll(); System.out.println(brands); // 存入request区域当中 request.setAttribute("brands",brands); // 转发到brand.jsp request.getRequestDispatcher("/brand.jsp").forward(request,response); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request,response); } }
然后再传给我们展示的页面
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="css/login.css" rel="stylesheet"> </head> <body> <input type="button" value="新增" id="add" style="margin-left: -100px;margin-top: -300px;color: #50afeb"><br> <hr> <table border="1" cellspacing="0" width="80%"> <tr> <th>序号</th> <th>品牌名称</th> <th>企业名称</th> <th>排序</th> <th>品牌介绍</th> <th>状态</th> <th>操作</th> </tr> <c:forEach items="${brands}" var="brand" varStatus="status"> <tr align="center"> <%--<td>${brand.id}</td>--%> <td>${status.count}</td> <td>${brand.brandName}</td> <td>${brand.companyName}</td> <td>${brand.ordered}</td> <td>${brand.description}</td> <c:if test="${brand.status == 1}"> <td>启用</td> </c:if> <c:if test="${brand.status != 1}"> <td>禁用</td> </c:if> <td><a href="/brand-demo01/selectByIdServlet?id=${brand.id}">修改</a> <a href="/brand-demo01/selectDeleteServlet?id=${brand.id}">删除</a></td> </tr> </c:forEach> </table> <script> document.getElementById("add").onclick = function (){ location.href = "/brand-demo01/addBrand.jsp"; } </script> </body> </html>
完成。
非常丝滑。
完成删除
这不是有手就行?
这个当时看的视频黑马没有说这个,于是自己补上了。
先定义一个删除的方法
@Delete("delete from tb_brand where id = #{id}") void delete(int id);
回顾一下工具类和Service层
package com.jgdabc.util; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.IOException; import java.io.InputStream; public class SqlSessionFactoryUtils { private static SqlSessionFactory sqlSessionFactory; static { //静态代码块会随着类的加载而自动执行,且只执行一次 try { String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); } catch (IOException e) { e.printStackTrace(); } } public static SqlSessionFactory getSqlSessionFactory(){ return sqlSessionFactory; } }
package com.jgdabc.service; import com.jgdabc.mapper.BrandMapper; import com.jgdabc.pojo.Brand; import com.jgdabc.util.SqlSessionFactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import java.util.List; public class BrandService { SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory(); public List<Brand>selectAll() { SqlSession sqlSession = factory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); List<Brand> brands = mapper.selectAll(); sqlSession.close(); return brands; } public void add(Brand brand) { SqlSession sqlSession = factory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); mapper.add(brand); sqlSession.commit(); sqlSession.close(); } // 根据id查询 public Brand selectById(int id) { SqlSession sqlSession = factory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); Brand brand = mapper.selectById(id); sqlSession.close(); return brand; } public void update(Brand brand) { SqlSession sqlSession = factory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); mapper.update(brand); sqlSession.commit(); sqlSession.close(); } public void delete(Integer brand) { SqlSession sqlSession = factory.openSession(); BrandMapper mapper = sqlSession.getMapper(BrandMapper.class); mapper.delete(brand); sqlSession.commit(); sqlSession.close(); } }
我们的service调用的delete方法
注意看我们展示界面的删除
好,转发到Servlet
package com.jgdabc.util.web; import com.jgdabc.service.BrandService; 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 java.io.IOException; @WebServlet("/selectDeleteServlet") public class SelectDeleteServlet extends HttpServlet { BrandService service = new BrandService(); @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { BrandService brandService = new BrandService(); String id = request.getParameter("id"); Integer id_1 = Integer.parseInt(id); brandService.delete(id_1); // request.getRequestDispatcher("/brand.jsp").forward(request,response); response.sendRedirect("selectAllServlet"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { } }
这样就可以了。
我们需要再写一个删除的jsp吗?没有必要。前面的添加修改,都需要进行传参的,然后需要根据参数进行在Servlet进行操作。删除直接调用删除方法在主界面中传参,然后传到Servlet进行处理调用方法,再次回到主界面就可以了。
这样就删除成功了。
做一个用户登录验证
假如有需要要求需要实现用户登录话,才可以查看数据库表,然后进行操作。
结合之前做过的登录注册页面
注册
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎注册</title> <link href="css/register.css" rel="stylesheet"> </head> <body> <div class="form-div"> <div class="reg-content"> <h1>欢迎注册</h1> <span>已有帐号?</span> <a href="login.html">登录</a> </div> <form id="reg-form" action="/brand-demo01/registerServlet" method="post"> <table> <tr> <td>用户名</td> <td class="inputs"> <input name="username" type="text" id="username"> <br> <span id="username_err" class="err_msg" style="display: none">用户名不太受欢迎</span> </td> </tr> <tr> <td>密码</td> <td class="inputs"> <input name="password" type="password" id="password"> <br> <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> </td> </tr> </table> <div class="buttons"> <input value="注 册" type="submit" id="reg_btn"> </div> <br class="clear"> </form> </div> </body> </html>
css(注册)
* { margin: 0; padding: 0; list-style-type: none; } .reg-content{ padding: 30px; margin: 3px; } a, img { border: 0; } body { background-image: url("../imgs/reg_bg_min.jpg") ; text-align: center; } table { border-collapse: collapse; border-spacing: 0; } td, th { padding: 0; height: 90px; } .inputs{ vertical-align: top; } .clear { clear: both; } .clear:before, .clear:after { content: ""; display: table; } .clear:after { clear: both; } .form-div { background-color: rgba(255, 255, 255, 0.27); border-radius: 10px; border: 1px solid #aaa; width: 424px; margin-top: 150px; margin-left:1050px; padding: 30px 0 20px 0px; font-size: 16px; box-shadow: inset 0px 0px 10px rgba(255, 255, 255, 0.5), 0px 0px 15px rgba(75, 75, 75, 0.3); text-align: left; } .form-div input[type="text"], .form-div input[type="password"], .form-div input[type="email"] { width: 268px; margin: 10px; line-height: 20px; font-size: 16px; } .form-div input[type="checkbox"] { margin: 20px 0 20px 10px; } .form-div input[type="button"], .form-div input[type="submit"] { margin: 10px 20px 0 0; } .form-div table { margin: 0 auto; text-align: right; color: rgba(64, 64, 64, 1.00); } .form-div table img { vertical-align: middle; margin: 0 0 5px 0; } .footer { color: rgba(64, 64, 64, 1.00); font-size: 12px; margin-top: 30px; } .form-div .buttons { float: right; } input[type="text"], input[type="password"], input[type="email"] { border-radius: 8px; box-shadow: inset 0 2px 5px #eee; padding: 10px; border: 1px solid #D4D4D4; color: #333333; margin-top: 5px; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { border: 1px solid #50afeb; outline: none; } input[type="button"], input[type="submit"] { padding: 7px 15px; background-color: #3c6db0; text-align: center; border-radius: 5px; overflow: hidden; min-width: 80px; border: none; color: #FFF; box-shadow: 1px 1px 1px rgba(75, 75, 75, 0.3); } input[type="button"]:hover, input[type="submit"]:hover { background-color: #5a88c8; } input[type="button"]:active, input[type="submit"]:active { background-color: #5a88c8; } .err_msg{ color: red; padding-right: 170px; } #password_err,#tel_err{ padding-right: 195px; } #reg_btn{ margin-right:50px; width: 285px; height: 45px; margin-top:20px; }
登录
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <link href="css/login.css" rel="stylesheet"> </head> <body> <div id="loginDiv"> <form action="/brand-demo01/loginServlet" method="post" id="form"> <h1 id="loginMsg">欢迎登录系统</h1> <p>Username:<input id="username" name="username" type="text"></p> <p>Password:<input id="password" name="password" type="password"></p> <div id="subDiv"> <input type="submit" class="button" value="login up"> <input type="reset" class="button" value="reset"> <a href="register.html">没有账号?点击注册</a> </div> </form> </div> </body> </html>
css登录
* { margin: 0; padding: 0; } html { height: 100%; width: 100%; overflow: hidden; margin: 0; padding: 0; background: url(../imgs/Desert.jpg) no-repeat 0px 0px; background-repeat: no-repeat; background-size: 100% 100%; -moz-background-size: 100% 100%; } body { display: flex; align-items: center; justify-content: center; height: 100%; } #loginDiv { width: 37%; display: flex; justify-content: center; align-items: center; height: 300px; background-color: rgba(75, 81, 95, 0.3); box-shadow: 7px 7px 17px rgba(52, 56, 66, 0.5); border-radius: 5px; } #name_trip { margin-left: 50px; color: red; } p { margin-top: 30px; margin-left: 20px; color: azure; } input { margin-left: 15px; border-radius: 5px; border-style: hidden; height: 30px; width: 140px; background-color: rgba(216, 191, 216, 0.5); outline: none; color: #f0edf3; padding-left: 10px; } #username{ width: 200px; } #password{ width: 202px; } .button { border-color: cornsilk; background-color: rgba(100, 149, 237, .7); color: aliceblue; border-style: hidden; border-radius: 5px; width: 100px; height: 31px; font-size: 16px; } #subDiv { text-align: center; margin-top: 30px; } #loginMsg{ text-align: center;color: aliceblue; }
层次结构
对登录验证的话,还是需要数据库这些以及mapper等还有包装类。
数据库字段自己去创建就好了
包装类如下
package com.jgdabc.pojo; public class User { private Integer id; private String username; private String password; public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public String getPassword() { return password; } public void setPassword(String password) { this.password = password; } @Override public String toString() { return "User{" + "id=" + id + ", username='" + username + '\'' + ", password='" + password + '\'' + '}'; } }
核心配置文件没啥变动。因为我是同一个数据库,还有就是两个表在同一个数据库下面。
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <settings> <!-- 开启自动驼峰命名规则映射 --> <setting name="mapUnderscoreToCamelCase" value="true"/> </settings> <!--起别名--> <typeAliases> <package name="com.jgdabc.pojo"/> </typeAliases> <environments default="development"> <environment id="development"> <transactionManager type="JDBC"/> <dataSource type="POOLED"> <property name="driver" value="com.mysql.cj.jdbc.Driver"/> <property name="url" value="jdbc:mysql:///mysql?serverTimezone=GMT"/> <property name="username" value="root"/> <property name="password" value="123456"/> </dataSource> </environment> </environments> <mappers> <!--扫描mapper--> <package name="com.jgdabc.mapper"/> </mappers> </configuration>
mapper文件
package com.jgdabc.mapper; import com.jgdabc.pojo.User; import org.apache.ibatis.annotations.Insert; import org.apache.ibatis.annotations.Param; import org.apache.ibatis.annotations.Select; public interface UserMapper { /** * 根据用户名和密码查询用户对象 * @param username * @param password * @return */ @Select("select * from tb_user where username = #{username} and password = #{password}") User select(@Param("username") String username,@Param("password") String password); /** * 根据用户名查询用户对象 * @param username * @return */ @Select("select * from tb_user where username = #{username}") User selectByUsername(String username); /** * 添加用户 * @param user */ @Insert("insert into tb_user values(null,#{username},#{password})") void add(User user); }
之前还没有讲这些功能调到service。读者可以按照前面的方式改进一下。
因为我们没有用到映射文件,所以我就不建立了,至于驼峰命名与数据库字段的不匹配可以在核心配置里面设置配置开启字段匹配。前面已经说明。
我们来看Servlet
注册
package com.jgdabc.util.web; import com.jgdabc.mapper.UserMapper; import com.jgdabc.pojo.User; import com.jgdabc.util.SqlSessionFactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; 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 javax.swing.*; import java.io.IOException; @WebServlet("/registerServlet") public class RegisterServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 接收用户数据 String username = request.getParameter("username"); String password = request.getParameter("password"); //封装用户对象 User user = new User(); user.setUsername(username); user.setPassword(password); //2. 调用mapper 根据用户名查询用户对象 //2.1 获取SqlSessionFactory对象 /* String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);*/ SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory(); //2.2 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //2.3 获取Mapper UserMapper userMapper = sqlSession.getMapper(UserMapper.class); //2.4 调用方法 User u = userMapper.selectByUsername(username); //3. 判断用户对象释放为null if( u == null){ // 用户名不存在,添加用户 userMapper.add(user); // 提交事务 sqlSession.commit(); // 释放资源 sqlSession.close(); response.setContentType("text/html;charset=utf-8"); response.getWriter().write("用户注册成功"); JOptionPane.showMessageDialog(null, "注册成功。返回登录"); String contextPath = request.getContextPath(); response.sendRedirect(contextPath+"/login.html"); }else { // 用户名存在,给出提示信息 response.setContentType("text/html;charset=utf-8"); response.getWriter().write("用户名已存在"); JOptionPane.showMessageDialog(null, "用户名重复,请重新注册"); String contentType = response.getContentType(); response.sendRedirect(contentType+"/register.html"); } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
登录
package com.jgdabc.util.web; import com.jgdabc.mapper.UserMapper; import com.jgdabc.pojo.User; import com.jgdabc.util.SqlSessionFactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; 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 javax.swing.*; import java.io.IOException; import java.io.PrintWriter; @WebServlet("/loginServlet") public class LoginServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 接收用户名和密码 String username = request.getParameter("username"); String password = request.getParameter("password"); //2. 调用MyBatis完成查询 //2.1 获取SqlSessionFactory对象 /* String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);*/ SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory(); //2.2 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //2.3 获取Mapper UserMapper userMapper = sqlSession.getMapper(UserMapper.class); //2.4 调用方法 User user = userMapper.select(username, password); //2.5 释放资源 sqlSession.close(); //获取字符输出流,并设置content type response.setContentType("text/html;charset=utf-8"); PrintWriter writer = response.getWriter(); //3. 判断user释放为null if(user != null){ // 登陆成功 writer.write("登陆成功"); String contextPath = request.getContextPath(); response.sendRedirect("selectAllServlet"); }else { // 登陆失败 // writer.write("登陆失败"); response.setContentType("text/html;charset=utf-8"); // PrintWriter out = response.getWriter(); // out.println ("<script language=javascript>alert('密码错误');window.location='login.jsp'</script>"); JOptionPane.showMessageDialog(null, "用户不存在,请注册"); String contextPath = request.getContextPath(); 简化方式完成重定向 // response.sendRedirect(contextPath+"/register.html"); } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
其实你还可以启动一个开始的视频动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <style> * { margin: 0px; padding: 0px; } video { position: fixed; right: 0px; bottom: 0px; min-width: 100%; min-height: 100%; height: auto; width: auto; /*加滤镜*/ /*filter: blur(15px); //背景模糊设置 */ /*-webkit-filter: grayscale(100%);*/ /*filter:grayscale(100%); //背景灰度设置*/ z-index: -11 } source { min-width: 100%; min-height: 100%; height: auto; width: auto; } p { width: 100%; text-align: center; font-size: 40px; color: white; } </style> <!--<video autoplay="autoplay" loop="loop" id="video" x-webkit-airplay="true" webkit-playsinline="true" muted="">--> <!-- <source src="D:\\KuGou\温奕心 - 一路生花.mkv" type="video/mp4">--> <!--</video>--> <!--<img src="imgs/Desert.jpg">--> <video autoplay loop muted> <source src="video/begin.mp4"/> </video> <meta http-equiv="refresh" content="10;url="> </body> <script type="text/javascript"> function jumpurl() { location.href="/brand-demo01/login.html" } setTimeout("jumpurl()",10000) </script> </html>
从这里播放视频10秒后跳转到登录界面
然后登录的操作
上边的代码在登陆注册那里有一些欠妥的地方。我进行了更改。有一个重定向的路径写的不正确,希望读者自己去发现。
我自己做了一些更改,当然你可以再优化
登录
package com.jgdabc.util.web; import com.jgdabc.mapper.UserMapper; import com.jgdabc.pojo.User; import com.jgdabc.util.SqlSessionFactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; 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 javax.swing.*; import java.io.IOException; import java.io.PrintWriter; @WebServlet("/loginServlet") public class LoginServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 接收用户名和密码 String username = request.getParameter("username"); String password = request.getParameter("password"); //2. 调用MyBatis完成查询 //2.1 获取SqlSessionFactory对象 /* String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);*/ SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory(); //2.2 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //2.3 获取Mapper UserMapper userMapper = sqlSession.getMapper(UserMapper.class); //2.4 调用方法 User user = userMapper.select(username, password); //2.5 释放资源 sqlSession.close(); // //获取字符输出流,并设置content type // response.setContentType("text/html;charset=utf-8"); // PrintWriter writer = response.getWriter(); //3. 判断user释放为null if(user != null){ // 登陆成功 // writer.write("登陆成功"); String contextPath = request.getContextPath(); response.sendRedirect("selectAllServlet"); }else { JFrame jFrame = new JFrame(); int result = JOptionPane.showConfirmDialog(jFrame,"用户不存在,请注册"); if (result==0) { response.sendRedirect("register.html"); } else { response.sendRedirect("login.html"); } // 登陆失败 // writer.write("登陆失败"); // response.setContentType("text/html;charset=utf-8"); PrintWriter out = response.getWriter(); // out.println ("<script language=javascript>alert('密码错误');window.location='login.jsp'</script>"); // JOptionPane.showMessageDialog(null, "用户不存在,请注册"); // String contextPath = request.getContextPath(); // 简化方式完成重定向 // response.sendRedirect(contextPath+"/register.html"); } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
注册
package com.jgdabc.util.web; import com.jgdabc.mapper.UserMapper; import com.jgdabc.pojo.User; import com.jgdabc.util.SqlSessionFactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; 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 javax.swing.*; import java.io.IOException; @WebServlet("/registerServlet") public class RegisterServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //1. 接收用户数据 String username = request.getParameter("username"); String password = request.getParameter("password"); //封装用户对象 User user = new User(); user.setUsername(username); user.setPassword(password); //2. 调用mapper 根据用户名查询用户对象 //2.1 获取SqlSessionFactory对象 /* String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);*/ SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory(); //2.2 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //2.3 获取Mapper UserMapper userMapper = sqlSession.getMapper(UserMapper.class); //2.4 调用方法 User u = userMapper.selectByUsername(username); //3. 判断用户对象释放为null if( u == null){ // 用户名不存在,添加用户 userMapper.add(user); // 提交事务 sqlSession.commit(); // 释放资源 sqlSession.close(); response.setContentType("text/html;charset=utf-8"); response.getWriter().write("用户注册成功"); JOptionPane.showMessageDialog(null, "注册成功。返回登录"); String contextPath = request.getContextPath(); response.sendRedirect(contextPath+"/login.html"); }else { JFrame jFrame = new JFrame(); int result = JOptionPane.showConfirmDialog(jFrame,"用户重复,请重新注册"); if (result==0) { response.sendRedirect("register.html"); } else { response.sendRedirect("login.html"); } // System.out.println(result); // // 用户名存在,给出提示信息 // response.setContentType("text/html;charset=utf-8"); // response.getWriter().write("用户名已存在"); // JOptionPane.showMessageDialog(null, "用户名重复,请重新注册"); // // String contentType = response.getContentType(); // response.sendRedirect("register.html"); } } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); } }
但是其实你可以去看这个加入图形弹窗的话其实这里没有做合适,因为有可能这个弹窗出现在不是浏览器当前的窗口,可能会被浏览器页面遮盖。我主要是通过捕捉点击按钮的返回值来进行相关的操作。目前具体试了下可能的情况。如上图的情况展示。
其它的查询什么的都可以接续起来。
会话技术
其实说白了就是cookie和session这方面。
会话:用户打开浏览器,访问web服务器的资源,会话建立,直到有一方断开连接,会话结束。在 一次会话中可以包含多次请求和响应。
从浏览器发出请求到服务端响应数据给前端之后,一次会话(在浏览器和服务器之间)就被建立 了
会话被建立后,如果浏览器或服务端都没有被关闭,则会话就会持续建立着
浏览器和服务器就可以继续使用该会话进行请求发送和响应,上述的整个过程就被称之为会 话。
像下面一共建立了三次会话。
会话跟踪:一种维护浏览器状态的方法,服务器需要识别多次请求是否来自于同一浏览器,以便在同一次会话的多次请求间共享数据。
服务器会收到多个请求,这多个请求可能来自多个浏览器,如上图中的6个请求来自3个浏览器服务器需要用来识别请求是否来自同一个浏览器
服务器用来识别浏览器的过程,这个过程就是会话跟踪
服务器识别浏览器后就可以在同一个会话中多次请求之间来共享数据
数据共享是一定被需要的,比如我们的购买商品的加入购物车然后结算,这里一定存在着数据共享。因为再结算的功能当中,我们需要看到你加入购物车的商品。
另外其实当我们登录网站,下次进入就可能不需要再次输入密码账号,这里面也存在着数据共享。
还有登录验证的功能。我们需要再一次会话进行。我们需要将自己输入的验证码和给出的验证码信息比对,那就要进行数据共享。
但是你可能想到可以将自己的浏览器的数据和服务器的数据实时共享。每次请求都可以共享数据。但是这样是不行的。
浏览器和服务器之间使用的是HTTP请求来进行数据传输
HTTP协议是无状态的,每次浏览器向服务器请求时,服务器都会将该请求视为新的请求HTTP协议设计成无状态的目的是让每次请求之间相互独立,互不影响
请求与请求之间独立后,就无法实现多次请求之间的数据共享。
但是我们有办法实现会话跟踪。
客户端会话跟踪技术:Cookie
服务端会话跟踪技术:Session
这两个技术都可以实现会话跟踪,它们之间最大的区别:Cookie是存储在浏览器端而Session是存储在服务器端
这对我们熟悉不过,我们经常遇到。
cookie
会话跟踪
Cookie:客户端会话技术,将数据保存到客户端,以后每次请求都携带Cookie数据进行访问。
服务端提供了两个Servlet,分别是ServletA和ServletB
浏览器发送HTTP请求1给服务端,服务端ServletA接收请求并进行业务处理
服务端ServletA在处理的过程中可以创建一个Cookie对象并将name=zs 的数据存入Cookie 服务端ServletA在响应数据的时候,会把Cookie对象响应给浏览器
浏览器接收到响应数据,会把Cookie对象中的数据存储在浏览器内存中,此时浏览器和服务端就建立了一次会话
在同一次会话中浏览器再次发送HTTP请求2给服务端ServletB,浏览器会携带Cookie对象中的所有数据
ServletB接收到请求和数据后,就可以获取到存储在Cookie对象中的数据,这样同一个会话中的多次请求之间就实现了数据共享。
基本使用逻辑
发送Cookie
创建Cookie对象,并设置数据
Cookie cookie = new Cookie(“key”,“value”);
发送Cookie到客户端:使用response对象
response.addCookie(cookie);
接收cookie
获取客户端携带的所有Cookie,使用request对象
Cookie[] cookies = request.getCookies();
遍历数组,获取每一个Cookie对象:for 使用Cookie对象方法获取数据
1 cookie.getName();
2 cookie.getValue();
存活时间
设置cookie存活时间
setMaxAge(int seconds)
正数:将Cookie写入浏览器所在电脑的硬盘,持久化存储。到时间自动删除
负数:默认值,Cookie在当前浏览器内存中,当浏览器关闭,则Cookie被销毁3.零:删除对应Cookie
cookie.setMaxAge(606024*7); //代表存放七天
存储中文
很容易想到 cookie 是不能直接存储中文的。再存储之前我们需要进行编码,然后存储
value = URLEncoder.encode(value, “UTF-8”);
Cookie cookie = new Cookie(“username”,value);
然后获取数据的话,我们需要解码,然后再获取到中文数据
Cookie[] cookies = request.getCookies();
String value = cookie.getValue();
value = URLDecoder.decode(value,“UTF-8”);
session
session 是一种服务都端会话跟踪技术。数据存放在服务端。
Session是存储在服务端而Cookie是存储在客户端
存储在客户端的数据容易被窃取和截获,存在很多不安全的因素存储在服务端的数据相比于客户端来说就更安全
在服务端的AServlet获取一个Session对象,把数据存入其中
在服务端的BServlet获取到相同的Session对象,从中取出数据就可以实现一次会话中多次请求之间的数据共享了
session 基本使用
获取session
HttpSession session = request.getSession();
存储数据
void setAttribute(String name, Object o)
获取键对应值
Object getAttribute(String name)
删除键值对
void removeAttribute(String name)
数据共享
还有一件事·,就是我们要再session上实现·数据共享是那么我们必须确保不同的 Servlet获取的是同一个session对象。
(1) demo1在第一次获取session对象的时候,session对象会有一个唯一的标识,假如是id:10
(2) demo1在session中存入其他数据并处理完成所有业务后,需要通过Tomcat服务器响应结果给浏览器
(3) Tomcat服务器发现业务处理中使用了session对象,就会把session的唯一标识id:10 当做一个
cookie,添加Set-Cookie:JESSIONID=10 到响应头中,并响应给浏览器
(4) 浏览器接收到响应结果后,会把响应头中的coookie数据存储到浏览器的内存中
(5) 浏览器在同一会话中访问demo2的时候,会把cookie中的数据按照cookie: JESSIONID=10 的格式添加到请求头中并发送给服务器Tomcat
(6) demo2获取到请求后,从请求头中就读取cookie中的JSESSIONID值为10,然后就会到服务器内存中寻找id:10 的session对象,如果找到了,就直接返回该对象,如果没有则新创建一个session 对象
(7) 关闭打开浏览器后,因为浏览器的cookie已被销毁,所以就没有JESSIONID的数据,服务端获取到的session就是一个全新的session对象
归结起来就是一句
只要是浏览器同一次会话保持,session就是同一对象。
钝化和活化
还有一件事
我们的服务器重启后,session的数据是否还存在。
(1) 用户把需要购买的商品添加到购物车,因为要实现同一个会话多次请求数据共享,所以假设把数据存入Session对象中
(2) 用户正要付钱的时候接到一个电话,付钱的动作就搁浅了
(3)正在用户打电话的时候,购物网站因为某些原因需要重启
(4)重启后session数据被销毁,购物车中的商品信息也就会随之而消失
(5)用户想再次发起支付,就会出为问题
所以说对于session的数据,我们应该做到就算服务器重启了,也应该能把数据保存下来才对。
但是我们的服务器可以做到服务器关闭后,还会保存session数据。
这就涉及到session活化和钝化数据。
首先钝化,服务器关闭后,tomcat会自动将session数据写入硬盘文件当中。
再次启动服务器,那么文件中的数据就会被加载到session当中。这就是活化。
Session销毁
默认情况下,无操作,30分钟自动销毁
对于这个失效时间,是可以通过配置进行修改的在项目的web.xml中配置
在web.xml里面设置
调用方法销毁
session.invalidate();
记住用户信息和信息错误提示
用户登录成功后,跳转到列表页面,并在页面上展示当前登录的用户名称用户登录失败后,跳转回登录页面,并在页面上展示对应的错误信息
逻辑如下。
(1) 前端通过表单发送请求和数据给Web层的LoginServlet
(2)在LoginServlet中接收请求和数据[用户名和密码]
(3) LoginServlet接收到请求和数据后,调用Service层完成根据用户名和密码查询用户对象
(4) 在Service层需要编写UserService类,在类中实现login方法,方法中调用Dao层的UserMapper
(5) 在UserMapper接口中,声明一个根据用户名和密码查询用户信息的方法
(6) Dao层把数据查询出来以后,将返回数据封装到User对象,将对象交给Service层(7)Service层将数据返回给Web层
(8)Web层获取到User对象后,判断User对象,如果为Null,则将错误信息响应给登录页面,如果不为Null,则跳转到列表页面,并把当前登录用户的信息存入Session携带到列表页面。
所以首先是dao层,也就是mapper层。我们需要用到这些方法
@Select("select * from tb_user where username = #{username} and password = #{password}") User select(@Param("username") String username,@Param("password") String password); @Select("select * from tb_user where username = #{username}") User selectByUsername(String username); @Insert("insert into tb_user values(null,#{username},#{password})") void add(User user)
当然我们还需要这个实体包装类
package com.jgdabc.pojo; /** * 品牌实体类 */ public class Brand { // id 主键 private Integer id; // 品牌名称 private String brandName; // 企业名称 private String companyName; // 排序字段 private Integer ordered; // 描述信息 private String description; // 状态:0:禁用 1:启用 private Integer status; public Brand() { } public Brand(Integer id, String brandName, String companyName, String description) { this.id = id; this.brandName = brandName; this.companyName = companyName; this.description = description; } public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) { this.id = id; this.brandName = brandName; this.companyName = companyName; this.ordered = ordered; this.description = description; this.status = status; } public Integer getId() { return id; } public void setId(Integer id) { this.id = id; } public String getBrandName() { return brandName; } public void setBrandName(String brandName) { this.brandName = brandName; } public String getCompanyName() { return companyName; } public void setCompanyName(String companyName) { this.companyName = companyName; } public Integer getOrdered() { return ordered; } public void setOrdered(Integer ordered) { this.ordered = ordered; } public String getDescription() { return description; } public void setDescription(String description) { this.description = description; } public Integer getStatus() { return status; } public void setStatus(Integer status) { this.status = status; } @Override public String toString() { return "Brand{" + "id=" + id + ", brandName='" + brandName + '\'' + ", companyName='" + companyName + '\'' + ", ordered=" + ordered + ", description='" + description + '\'' + ", status=" + status + '}'; } }
mapper映射的xml文件
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <mapper namespace="com.jgdabc.mapper.UserMapper"> </mapper>
我们的工具类,我们会一直用到这个
package com.jgdabc.util; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.IOException; import java.io.InputStream; public class SqlSessionFactoryUtils { private static SqlSessionFactory sqlSessionFactory; static { //静态代码块会随着类的加载而自动执行,且只执行一次 try { String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); } catch (IOException e) { e.printStackTrace(); } } public static SqlSessionFactory getSqlSessionFactory(){ return sqlSessionFactory; } }
mybatis核心配置
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE configuration PUBLIC "-//mybatis.org//DTD Config 3.0//EN" "http://mybatis.org/dtd/mybatis-3-config.dtd"> <configuration> <settings> <!-- 开启自动驼峰命名规则映射 --> <setting name="mapUnderscoreToCamelCase" value="true"/> </settings> <!--起别名--> <typeAliases> <package name="com.jgdabc.pojo"/> </typeAliases> <environments default="development"> <environment id="development"> <transactionManager type="JDBC"/> <dataSource type="POOLED"> <property name="driver" value="com.mysql.cj.jdbc.Driver"/> <property name="url" value="jdbc:mysql:///mysql?serverTimezone=GMT"/> <property name="username" value="root"/> <property name="password" value="123456"/> </dataSource> </environment> </environments> <mappers> <!--扫描mapper--> <package name="com.jgdabc.mapper"/> </mappers> </configuration>
service 服务
package com.jgdabc.service; import com.jgdabc.mapper.UserMapper; import com.jgdabc.pojo.User; import com.jgdabc.util.SqlSessionFactoryUtils; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; public class UserService { public User login(String username,String password) { SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory(); SqlSession sqlSession = factory.openSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); //调用方法 User user = mapper.select(username, password); sqlSession.close(); return user; } // service里面的注册功能 public boolean register(User user) { SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory(); SqlSession sqlSession = factory.openSession(); UserMapper mapper = sqlSession.getMapper(UserMapper.class); User u = mapper.selectByUsername(user.getUsername()); if (u==null) { mapper.add(user); sqlSession.commit(); } sqlSession.close(); return u == null; } }
web层登录
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>login</title> <link href="css/login.css" rel="stylesheet"> </head> <body> <div id="loginDiv"> <form action="/brand-demo01/loginServlet" method="post" id="form"> <h1 id="loginMsg">欢迎登录系统</h1> <div id="errorMsg" style="color: red" tex >${login_msg } ${register_msg} </div> <p>Username:<input id="username" name="username"value="${cookie.username.value}" type="text"></p> <p>Password:<input id="password" name="password" type="password"value="${cookie.password.value}"></p> <p>Remember:<input id="remember" name="remember"value="1" type="checkbox"></p> <div id="subDiv"> <input type="submit" class="button" value="login up"> <input type="reset" class="button" value="reset"> <a href="register.jsp">没有账号?点击注册</a> </div> </form> </div> </body> </html>
Servlet登录
//1. 接收用户名和密码 String username = request.getParameter("username"); String password = request.getParameter("password"); String remember = request.getParameter("remember"); //2. 调用MyBatis完成查询 //2.1 获取SqlSessionFactory对象 /* String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); SqlSessionFactory sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream);*/ SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory(); //2.2 获取SqlSession对象 SqlSession sqlSession = sqlSessionFactory.openSession(); //2.3 获取Mapper UserMapper userMapper = sqlSession.getMapper(UserMapper.class); //2.4 调用方法 User user = userMapper.select(username, password); //2.5 释放资源 sqlSession.close(); //获取字符输出流,并设置content type response.setContentType("text/html;charset=utf-8"); // PrintWriter writer = response.getWriter(); //3. 判断user释放为null if(user != null){ // 登陆成功 // writer.write("登陆成功"); if("1".equals(remember)) { Cookie c_username = new Cookie("username", username); Cookie c_password = new Cookie("password", password); //设置存活时间 c_username.setMaxAge(60*60*24*7); c_password.setMaxAge(60*60*24*7); response.addCookie(c_username); response.addCookie(c_password); } HttpSession session = request.getSession(); session.setAttribute("user",user); String contextPath = request.getContextPath(); response.sendRedirect("selectAllServlet"); }else { // //登录失败 request.setAttribute("login_msg","用户名或密码错误"); request.getRequestDispatcher("/login.jsp").forward(request,response);
web层注册,在这里我们可以去做一个验证码。
这是我们的工具类
package com.jgdabc.util; import javax.imageio.ImageIO; import java.awt.*; import java.awt.geom.AffineTransform; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileOutputStream; import java.io.IOException; import java.io.OutputStream; import java.util.Arrays; import java.util.Random; /** * 生成验证码工具类 */ public class CheckCodeUtil { public static final String VERIFY_CODES = "123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ"; private static Random random = new Random(); /** * 输出随机验证码图片流,并返回验证码值(一般传入输出流,响应response页面端,Web项目用的较多) * * @param w * @param h * @param os * @param verifySize * @return * @throws IOException */ public static String outputVerifyImage(int w, int h, OutputStream os, int verifySize) throws IOException { String verifyCode = generateVerifyCode(verifySize); outputImage(w, h, os, verifyCode); return verifyCode; } /** * 使用系统默认字符源生成验证码 * * @param verifySize 验证码长度 * @return */ public static String generateVerifyCode(int verifySize) { return generateVerifyCode(verifySize, VERIFY_CODES); } /** * 使用指定源生成验证码 * * @param verifySize 验证码长度 * @param sources 验证码字符源 * @return */ public static String generateVerifyCode(int verifySize, String sources) { // 未设定展示源的字码,赋默认值大写字母+数字 if (sources == null || sources.length() == 0) { sources = VERIFY_CODES; } int codesLen = sources.length(); Random rand = new Random(System.currentTimeMillis()); StringBuilder verifyCode = new StringBuilder(verifySize); for (int i = 0; i < verifySize; i++) { verifyCode.append(sources.charAt(rand.nextInt(codesLen - 1))); } return verifyCode.toString(); } /** * 生成随机验证码文件,并返回验证码值 (生成图片形式,用的较少) * * @param w * @param h * @param outputFile * @param verifySize * @return * @throws IOException */ public static String outputVerifyImage(int w, int h, File outputFile, int verifySize) throws IOException { String verifyCode = generateVerifyCode(verifySize); outputImage(w, h, outputFile, verifyCode); return verifyCode; } /** * 生成指定验证码图像文件 * * @param w * @param h * @param outputFile * @param code * @throws IOException */ public static void outputImage(int w, int h, File outputFile, String code) throws IOException { if (outputFile == null) { return; } File dir = outputFile.getParentFile(); //文件不存在 if (!dir.exists()) { //创建 dir.mkdirs(); } try { outputFile.createNewFile(); FileOutputStream fos = new FileOutputStream(outputFile); outputImage(w, h, fos, code); fos.close(); } catch (IOException e) { throw e; } } /** * 输出指定验证码图片流 * * @param w * @param h * @param os * @param code * @throws IOException */ public static void outputImage(int w, int h, OutputStream os, String code) throws IOException { int verifySize = code.length(); BufferedImage image = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB); Random rand = new Random(); Graphics2D g2 = image.createGraphics(); g2.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON); // 创建颜色集合,使用java.awt包下的类 Color[] colors = new Color[5]; Color[] colorSpaces = new Color[]{Color.WHITE, Color.CYAN, Color.GRAY, Color.LIGHT_GRAY, Color.MAGENTA, Color.ORANGE, Color.PINK, Color.YELLOW}; float[] fractions = new float[colors.length]; for (int i = 0; i < colors.length; i++) { colors[i] = colorSpaces[rand.nextInt(colorSpaces.length)]; fractions[i] = rand.nextFloat(); } Arrays.sort(fractions); // 设置边框色 g2.setColor(Color.GRAY); g2.fillRect(0, 0, w, h); Color c = getRandColor(200, 250); // 设置背景色 g2.setColor(c); g2.fillRect(0, 2, w, h - 4); // 绘制干扰线 Random random = new Random(); // 设置线条的颜色 g2.setColor(getRandColor(160, 200)); for (int i = 0; i < 20; i++) { int x = random.nextInt(w - 1); int y = random.nextInt(h - 1); int xl = random.nextInt(6) + 1; int yl = random.nextInt(12) + 1; g2.drawLine(x, y, x + xl + 40, y + yl + 20); } // 添加噪点 // 噪声率 float yawpRate = 0.05f; int area = (int) (yawpRate * w * h); for (int i = 0; i < area; i++) { int x = random.nextInt(w); int y = random.nextInt(h); // 获取随机颜色 int rgb = getRandomIntColor(); image.setRGB(x, y, rgb); } // 添加图片扭曲 shear(g2, w, h, c); g2.setColor(getRandColor(100, 160)); int fontSize = h - 4; Font font = new Font("Algerian", Font.ITALIC, fontSize); g2.setFont(font); char[] chars = code.toCharArray(); for (int i = 0; i < verifySize; i++) { AffineTransform affine = new AffineTransform(); affine.setToRotation(Math.PI / 4 * rand.nextDouble() * (rand.nextBoolean() ? 1 : -1), (w / verifySize) * i + fontSize / 2, h / 2); g2.setTransform(affine); g2.drawChars(chars, i, 1, ((w - 10) / verifySize) * i + 5, h / 2 + fontSize / 2 - 10); } g2.dispose(); ImageIO.write(image, "jpg", os); } /** * 随机颜色 * * @param fc * @param bc * @return */ private static Color getRandColor(int fc, int bc) { if (fc > 255) { fc = 255; } if (bc > 255) { bc = 255; } int r = fc + random.nextInt(bc - fc); int g = fc + random.nextInt(bc - fc); int b = fc + random.nextInt(bc - fc); return new Color(r, g, b); } private static int getRandomIntColor() { int[] rgb = getRandomRgb(); int color = 0; for (int c : rgb) { color = color << 8; color = color | c; } return color; } private static int[] getRandomRgb() { int[] rgb = new int[3]; for (int i = 0; i < 3; i++) { rgb[i] = random.nextInt(255); } return rgb; } private static void shear(Graphics g, int w1, int h1, Color color) { shearX(g, w1, h1, color); shearY(g, w1, h1, color); } private static void shearX(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(2); boolean borderGap = true; int frames = 1; int phase = random.nextInt(2); for (int i = 0; i < h1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(0, i, w1, 1, (int) d, 0); if (borderGap) { g.setColor(color); g.drawLine((int) d, i, 0, i); g.drawLine((int) d + w1, i, w1, i); } } } private static void shearY(Graphics g, int w1, int h1, Color color) { int period = random.nextInt(40) + 10; // 50; boolean borderGap = true; int frames = 20; int phase = 7; for (int i = 0; i < w1; i++) { double d = (double) (period >> 1) * Math.sin((double) i / (double) period + (6.2831853071795862D * (double) phase) / (double) frames); g.copyArea(i, 0, 1, h1, 0, (int) d); if (borderGap) { g.setColor(color); g.drawLine(i, (int) d, i, 0); g.drawLine(i, (int) d + h1, i, h1); } } } }
然后我们用Servlet调用这个方法
package com.jgdabc.web.servlet; import com.jgdabc.util.CheckCodeUtil; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; @WebServlet("/checkCodeServlet") public class CheckCodeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // super.doGet(req, resp); // 生成验证码 ServletOutputStream os = resp.getOutputStream(); String chexkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4); // 存入Session HttpSession session = req.getSession(); session.setAttribute("checkCodeGen",chexkCode); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doPost(req, resp); } }
package com.jgdabc.web.servlet; import com.jgdabc.util.CheckCodeUtil; import javax.servlet.ServletException; import javax.servlet.ServletOutputStream; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; import java.io.IOException; @WebServlet("/checkCodeServlet") public class CheckCodeServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { // super.doGet(req, resp); // 生成验证码 ServletOutputStream os = resp.getOutputStream(); String chexkCode = CheckCodeUtil.outputVerifyImage(100, 50, os, 4); // 存入Session HttpSession session = req.getSession(); session.setAttribute("checkCodeGen",chexkCode); } @Override protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { super.doPost(req, resp); } }
然后我们来看注册的前端
<%@ page contentType="text/html;charset=UTF-8" language="java" %> <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>欢迎注册</title> <link href="css/register.css" rel="stylesheet"> </head> <body> <div class="form-div"> <div class="reg-content"> <h1 style="text-align: center">欢迎注册</h1> <span style="padding-left: 50px" >已有帐号?</span> <a href="login.jsp">登录</a> </div> <form id="reg-form" action="/brand-demo01/registerServlet" method="post" > <table > <tr > <td width="100"style="height: 10px">用户名</td> <td class="inputs"> <input name="username" type="text" id="username" style="margin-right: 65px"> <br> <span id="username_err" class="err_msg" >${register_msg}</span> <span id="username_err_1" class = err_msg_1 style="display: none;color: red">用户名已经存在</span> </td> </tr> <tr> <td width="60"style="height:50px">密码</td> <td class="inputs"> <input name="password" type="password" id="password" style="margin-right: 65px"> <br> <span id="password_err" class="err_msg" style="display: none">密码格式有误</span> </td> </tr> <tr> <td style="padding-bottom: 70px">验证码</td> <td class="inputs"> <input name="checkCode" type="text" id="checkCode" style="margin-right: 65px"> <img id="checkCodeImg" src="/brand-demo01/checkCodeServlet" style="margin-right: 10px"> <a href="#" id="changeImg" >看不清?</a> </td> </tr> </table> <div class="buttons"> <input value="注 册" type="submit" id="reg_btn" style="margin-right: 65px;margin-top: 10px" > </div> <br class="clear"> </form> </div> <script> //给用户名输入框绑定一个失去焦点的事件 document.getElementById("username").onblur = function () { // //发送ajax请求 // var username = this.value; //创建核心对象 var xhttp; if(window.XMLHttpRequest) { xhttp = new XMLHttpRequest(); }else { xhttp = new ActiveXObject("Microsoft.XMLHTTP"); } // 发送请求 xhttp.open("GET"," http://localhost:8080/brand-demo01/selectUserServlet?username="+username) xhttp.send(); xhttp.onreadystatechange = function () { if(this.readyState == 4 && this.status == 200) { // alert(this.responseText); if(this.responseText=="false") { // alert(this.responseText) document.getElementById("username_err_1").style.display=''; }else { document.getElementById("username_err_1").style.display='none'; } } }; } </script> <script> document.getElementById("changeImg").onclick = function () { document.getElementById("checkCodeImg").src = "/brand-demo01/checkCodeServlet?"+new Date().getMilliseconds(); } </script> </body> </html>
这里涉及一个异步请求方式
servlet层 //1. 接收用户数据 String username = request.getParameter("username"); String password = request.getParameter("password"); String checkCode = request.getParameter("checkCode"); // System.out.println(checkCode); HttpSession session = request.getSession(); String checkCodeGen = (String) session.getAttribute("checkCodeGen"); System.out.println(checkCodeGen); boolean b = checkCodeGen.equalsIgnoreCase(checkCode); User user = new User(); user.setUsername(username); user.setPassword(password); // request.setAttribute("register_msg","用户已经存在"); boolean flag = service.register(user); // // System.out.println(flag); if(!b) { System.out.println("比对失败"); request.setAttribute("register_msg","验证码错误,请输入验证码"); request.getRequestDispatcher("/register.jsp").forward(request,response); return; } // //封装用户对象 // User user = new User(); // user.setUsername(username); // user.setPassword(password); // boolean flag = service.register(user); if (!flag) { // 注册功能,跳转登录界面 request.setAttribute("register_msg","注册成功,请登录"); request.getRequestDispatcher("/login.jsp").forward(request,response); } else { //注册失败,跳转到注册页面 request.setAttribute("register_msg","用户已经存在"); request.getRequestDispatcher("/register.jsp").forward(request,response); }
我们需要实现到这样的效果。
Filter 过滤器
从之前我们的项目运行中我们可以发现,只要我们开启服务器,输入资源访问路径就可以访问到对应的路径。但是这样其实是不合理的,这样可能导致的问题是,我们不需要登录密码就可以访问到数据库表,我们直接访问到资源路径,只要我们输入路径就可以。
所以我们可以用到过空滤器,让用户在只有通过某些路径或者说是验证资源路径才可以访问到资源。
针对以上项目,我们可以这样加入一个过滤器。
package com.jgdabc.web.filter; import javax.servlet.*; import javax.servlet.annotation.*; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpSession; import java.io.IOException; @WebFilter("*.jsp")//可以认为默认拦截的所有以.jsp结尾的文件 public class LoginFilter implements Filter { public void init(FilterConfig config) throws ServletException { } public void destroy() { } @Override public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws ServletException, IOException { // 1判断对应的session是否有user //判断访问的资源路径是否和登录注册相关 String[] urls = {"/video/","index.html","index.jsp","login.jsp","/imgs/","/css/","loginServlet","register.jsp","/registerServlet","/checkCodeServlet"}; HttpServletRequest req = (HttpServletRequest) request; String url = req.getRequestURI().toString(); //放行的资源文件。具体的逻辑可以查看上面流程。 for(String u:urls) { if(url.contains(u)){ chain.doFilter(request,response); return; } } HttpSession session = req.getSession(); Object user = session.getAttribute("user"); // 判断user是否为null if(user!=null) { chain.doFilter(request, response); }else { // req.setAttribute("login_msg","您尚未登录"); req.getRequestDispatcher("/login.jsp").forward(req,response); } } }
一些说明
为什么删除字段编号还会连续
其实id作为主键的话,在数据库中进行删除这样的操作,会造成id值不连续,也就是断层。
但是我们看页面展示其实是很连续的。
还是从一开始编号
为什么会这样?注意观察。
我们一般用<c:forEach> 来遍历需要的数据,为了方便使用,varStatus属性可以方便我们实现一些与行数相关的功能,varStatus 是循环索引。
如:奇数行、偶数行差异;最后一行特殊处理等等。先就varStatus属性常用参数总结下:
${status.index} 输出行号,从0开始。
${status.count} 输出行号,从1开始。
${status.current} 当前这次迭代的(集合中的)项
${status.first} 判断当前项是否为集合中的第一项,返回值为true或false
${status.last} 判断当前项是否为集合中的最后一项,返回值为true或false
begin、end、step分别表示:起始序号,结束序号,跳跃步伐。
而var 是你要循环集合的别名
这是一个知识点。
brand是我们对数据库字段封装的对象,我们不管数据库导入id是怎样的顺序,我们遍历展示的时候使用这个方法还是会从1开始排序。
后续说明
我发现有时候我前一天打开idea运行项目的时候好好的,第二天就报错了。可能的原因是什么?因为我没有保存报错截图,我大致说一下。
maven爆红的解决办法就是自己再重新加载一遍,也就是将依赖重新导入一遍。还需要观察idea的仓库配置是不是又还原到了默认,如果还原到了默认就可能在c盘去找东西去了,这样肯定会和你之前的库不一样,所以会报红,那你不想到c盘,你就调回去。
实在不行啊,就清理缓存吗,重新加载。
还有可能出现映射多次的问题,大致意思就是说你的映射url多了。你具体看信息,里面有说明的,这一点很重要。
网上大部分会说你的Servlet 的url和web.xml重复了,也就是你重复配置了。但是如果你找了发现你没有,那可能就是生命周期的问题,具体和target有关,我就不多说了,你可以尝试这样。
也就是先clean再install。我有一次就是这样解决的。
另外啊,最好在退出idea的时候你把项目服务停下。
这是我自己的见解。后面的问题遇到再说。