目录
前言
环境搭建
功能列表
查询所有
新增品牌
Servlet代码优化
批量删除
分页查询
条件查询
前端代码优化
前言
JavaWeb(B站黑马)学习笔记 14综合案例

环境搭建
新建项目


<dependencies>
<!--mybatis依赖-->
<dependency>
<groupId>org.mybatis</groupId>
<artifactId>mybatis</artifactId>
<version>3.5.5</version>
</dependency>
<!--mysql 驱动-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>8.0.24</version>
</dependency>
<!--servlet-->
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>javax.servlet-api</artifactId>
<version>3.1.0</version>
<scope>provided</scope>
</dependency>
<!--Fastjson-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.62</version>
</dependency>
<!-- 添加slf4j日志api -->
<dependency>
<groupId>org.slf4j</groupId>
<artifactId>slf4j-api</artifactId>
<version>1.7.20</version>
</dependency>
<!-- 添加logback-classic依赖 -->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-classic</artifactId>
<version>1.2.3</version>
</dependency>
<!-- 添加logback-core依赖 -->
<dependency>
<groupId>ch.qos.logback</groupId>
<artifactId>logback-core</artifactId>
<version>1.2.3</version>
</dependency>
</dependencies>配置mybatis-config.xml文件

项目目录结构

导入数据库 sql文件传不上来,手工建吧

功能列表
查询所有

Dao层

Service层
通过接口实现类的方式编写service解除了web层和service层的耦合性,
当有第二个实现类直接更改为BrandServiceImpl2即可,不然service层代码发送变化的话servlet层也要变
就好比接口是商店,实现类是商品,商店不用换,卖的商品可换

Web层

brand.html





新增品牌

Dao层

Service层

Web层

brand.html



Servlet代码优化


HttpServlet中的service负责方法的分发,通过自定义BaseServlet继承HttpServlet重写它的service进行方法分发 根据请求路径最后一段进行方法的分发

BaseServlet
JAVA反射机制是在运行状态中,对于任意一个类,都能够知道这个类的所有属性和方法;对于任意一个对象,都能够调用它的任意一个方法和属性;这种动态获取的信息以及动态调用对象的法的功能称为java语言的反射机制。
在运行的过程中获取这个对象执行的方法


BrandSeervlet


批量删除

Dao层

Service层

Web层

brand.html


此方法为elementui自动获取





分页查询
分析


自定义model


Dao层

Service层

Web层

brand.html







条件查询


Dao层

细节一 条件查询传递参数有三个加了@Param(),写sql语句时使用Brand brand内的字段要加"brand.",如brand.brandName。多条件查询总记录数只传递了一个 直接使用brandName即可。

Service层



Web层
细节二 post提交可以既有url参数又有请求体参数

brand.html

细节三 查询所有和分页条件查询可以一起用,因为mybatis用了判断标签,所以当页面没有参数传递时查询语句直接是select * from tb_brand limit ?,?;




前端代码优化
es6新增特性:箭头函数 这样就不用进行搭桥操作了,直接用this即可,这里的this是代表Vue对象的,箭头函数会根据上下文判断this,这样更方便
箭头函数

搭桥操作

















