Web核心技术之Element组件库学习及综合案例

2.2.2 Container 布局容器

用于布局的容器组件，方便快速搭建页面的基本结构。如下图就是布局容器效果。

如下图是官网提供的 Container 布局容器实例：

该效果代码中包含了样式、页面标签、模型数据。将里面的样式 <style> 拷贝到我们自己页面的 head 标签中；将html标签拷贝到 <div id="app"></div> 标签中，再将数据模型拷贝到 vue 对象的 data() 中。

整体页面代码如下：

导航一

分组一

选项1

选项2

选项3

选项4

选项4-1

导航二

选项1

选项1-1

导航三

分组一

选项1

选项2

选项3

选项4

选项4-1

查看

新增

删除

王小虎

2.3 案例

其他的组件我们通过完成一个页面来学习。

我们要完成如下页面效果

要完成该页面，我们需要先对这个页面进行分析，看页面由哪儿几部分组成，然后到官网进行拷贝并修改。页面总共有如下组成部分

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q3bPLoHn-1642766557864)(assets/image-20210831185505106.png)]

还有一个是当我们点击 新增 按钮，会在页面正中间弹出一个对话框，如下

2.3.1 准备基本页面

2.3.2 完成表格展示

使用 Element 整体的思路就是 拷贝 + 修改。

2.3.2.1 拷贝

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-cMgO0W94-1642766557868)(assets/image-20210831185937618.png)]

在左菜单栏找到 Table 表格并点击，右边主体就会定位到表格这一块，找到我们需要的表格效果（如上图），点击 显示代码 就可以看到这个表格的代码了。

将html标签拷贝到 <div id="app"></div> 中，如下：

将css样式拷贝到我们页面的 head 标签中，如下

将方法和模型数据拷贝到 Vue 对象指定的位置

拷贝完成后通过浏览器打开可以看到表格的效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pZRblRMg-1642766557868)(assets/image-20210831191234876.png)]

表格效果出来了，但是显示的表头和数据并不是我们想要的，所以接下来就需要对页面代码进行修改了。

2.3.2.2 修改

1. 修改表头和数据

下面是对表格代码进行分析的图解。根据下图说明修改自己的列数和列名

修改完页面后，还需要对绑定的模型数据进行修改，下图是对模型数据进行分析的图解

2. 给表格添加操作列

从之前的表格拷贝一列出来并对其进行修改。按钮是从官网的 Button 按钮 组件中拷贝并修改的

3. 给表格添加复选框列和标号列

给表格添加复选框和标号列，效果如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-jEPH4WFH-1642766557868)(assets/image-20210831193216143.png)]

此效果也是从 Element 官网进行拷贝，先找到对应的表格效果，然后将其对应代码拷贝到我们的代码中，如下是复选框列官网效果图和代码

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NwBPbLcq-1642766557869)(assets/image-20210831193601788.png)]

这里需要注意在 <el-table> 标签上有一个事件 @selection-change="handleSelectionChange" ，这里绑定的函数也需要从官网拷贝到我们自己的页面代码中，函数代码如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5gt2ey2b-1642766557870)(assets/image-20210831194013986.png)]

从该函数中又发现还需要一个模型数据 multipleSelection ，所以还需要定义出该模型数据

标号列也用同样的方式进行拷贝并修改。

2.3.3 完成搜索表单展示

在 Element 官网找到横排的表单效果，然后拷贝代码并进行修改

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-94LGGqvd-1642766557870)(assets/image-20210831194300357.png)]

点击上面的 显示代码 后，就会展示出对应的代码，下面是对这部分代码进行分析的图解

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hsgi44F3-1642766557870)(assets/image-20210831194835721.png)]

然后根据我们要的效果修改代码。

2.3.4 完成批量删除和新增按钮展示

从 Element 官网找具有着色效果的按钮，并将代码拷贝到我们自己的页面上

2.3.5 完成对话框展示

在 Element 官网找对话框，如下：

下面对官网提供的代码进行分析

上图分析出来的模型数据需要在 Vue 对象中进行定义。

2.3.6 完成分页条展示

在 Element 官网找到 Pagination 分页 ，在页面主体部分找到我们需要的效果，如下

点击 显示代码 ，找到 完整功能 对应的代码，接下来对该代码进行分析

上面代码属性说明：

• page-size ：每页显示的条目数

• page-sizes ： 每页显示个数选择器的选项设置。

:page-sizes="[100,200,300,400]" 对应的页面效果如下：

• currentPage ：当前页码。我们点击那个页码，此属性值就是几。

• total ：总记录数。用来设置总的数据条目数，该属性设置后， Element 会自动计算出需分多少页并给我们展示对应的页码。

事件说明：

• size-change ：pageSize 改变时会触发。也就是当我们改变了每页显示的条目数后，该事件会触发。

• current-change ：currentPage 改变时会触发。也就是当我们点击了其他的页码后，该事件会触发。

2.3.7 完整页面代码

<el-button type=“primary” @click=“onSubmit”>查询

批量删除

<el-button type=“primary” plain @click=“dialogVisible = true”>新增

<el-dialog

title=“编辑品牌”

:visible.sync=“dialogVisible”

width=“30%”>

<el-switch v-model=“brand.status”

active-value=“1”

inactive-value=“0”

<el-button type=“primary” @click=“addBrand”>提交

<el-button @click=“dialogVisible = false”>取消

<el-table

:data=“tableData”

style=“width: 100%”

:row-class-name=“tableRowClassName”

@selection-change=“handleSelectionChange”>

<el-table-column

type=“selection”

width=“55”>

<el-table-column

type=“index”

width=“50”>

<el-table-column

prop=“brandName”

label=“品牌名称”

align=“center”>

<el-table-column

prop=“companyName”

label=“企业名称”

align=“center”>

<el-table-column

prop=“ordered”

align=“center”

label=“排序”>

<el-table-column

prop=“status”

align=“center”

label=“当前状态”>

<el-table-column

align=“center”

label=“操作”>

修改

删除

<el-pagination

@size-change=“handleSizeChange”

@current-change=“handleCurrentChange”

:current-page=“currentPage”

:page-sizes=“[5, 10, 15, 20]”

:page-size=“5”

layout=“total, sizes, prev, pager, next, jumper”

:total=“400”>

3，综合案例

---

3.1 功能介绍

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoux3IB2-1642766557871)(./assets/image-20210825171411003.png)]

以上是我们在综合案例要实现的功能。对数据的除了对数据的增删改查功能外，还有一些复杂的功能，如 批量删除、分页查询、条件查询 等功能

• 批量删除 功能：每条数据前都有复选框，当我选中多条数据并点击 批量删除 按钮后，会发送请求到后端并删除数据库中指定的多条数据。

• 分页查询 功能：当数据库中有很多数据时，我们不可能将所有的数据展示在一页里，这个时候就需要分页展示数据。

• 条件查询 功能：数据库量大的时候，我们就需要精确的查询一些想看到的数据，这个时候就需要通过条件查询。

这里的 修改品牌 和 删除品牌 功能在课程上不做讲解，留作同学来下的练习。

3.2 环境准备

环境准备我们主要完成以下两件事即可

• 将资料的 brand-case 模块导入到 idea中

• 执行资料中提供的 tb_brand.sql脚本

3.2.1 工程准备

将 04-资料\01-初始工程 中的 brand-case 工程导入到我们自己的 idea 中。工程结构如下：

3.2.2 创建表

下面是创建表的语句

– 删除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

(‘华为’, ‘华为技术有限公司’, 100, ‘万物互联’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘格力’, ‘格力电器股份有限公司’, 30, ‘让世界爱上中国造’, 1),

(‘阿里巴巴’, ‘阿里巴巴集团控股有限公司’, 10, ‘买买买’, 1),

(‘腾讯’, ‘腾讯计算机系统有限公司’, 50, ‘玩玩玩’, 0),

(‘百度’, ‘百度在线网络技术公司’, 5, ‘搜搜搜’, 0),

(‘京东’, ‘北京京东世纪贸易有限公司’, 40, ‘就是快’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘三只松鼠’, ‘三只松鼠股份有限公司’, 5, ‘好吃不上火’, 0),

(‘华为’, ‘华为技术有限公司’, 100, ‘万物互联’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘格力’, ‘格力电器股份有限公司’, 30, ‘让世界爱上中国造’, 1),

(‘阿里巴巴’, ‘阿里巴巴集团控股有限公司’, 10, ‘买买买’, 1),

(‘腾讯’, ‘腾讯计算机系统有限公司’, 50, ‘玩玩玩’, 0),

(‘百度’, ‘百度在线网络技术公司’, 5, ‘搜搜搜’, 0),

(‘京东’, ‘北京京东世纪贸易有限公司’, 40, ‘就是快’, 1),

(‘华为’, ‘华为技术有限公司’, 100, ‘万物互联’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘格力’, ‘格力电器股份有限公司’, 30, ‘让世界爱上中国造’, 1),

(‘阿里巴巴’, ‘阿里巴巴集团控股有限公司’, 10, ‘买买买’, 1),

(‘腾讯’, ‘腾讯计算机系统有限公司’, 50, ‘玩玩玩’, 0),

(‘百度’, ‘百度在线网络技术公司’, 5, ‘搜搜搜’, 0),

(‘京东’, ‘北京京东世纪贸易有限公司’, 40, ‘就是快’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘三只松鼠’, ‘三只松鼠股份有限公司’, 5, ‘好吃不上火’, 0),

(‘华为’, ‘华为技术有限公司’, 100, ‘万物互联’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘格力’, ‘格力电器股份有限公司’, 30, ‘让世界爱上中国造’, 1),

(‘阿里巴巴’, ‘阿里巴巴集团控股有限公司’, 10, ‘买买买’, 1),

(‘腾讯’, ‘腾讯计算机系统有限公司’, 50, ‘玩玩玩’, 0),

(‘百度’, ‘百度在线网络技术公司’, 5, ‘搜搜搜’, 0),

(‘京东’, ‘北京京东世纪贸易有限公司’, 40, ‘就是快’, 1),

(‘华为’, ‘华为技术有限公司’, 100, ‘万物互联’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘格力’, ‘格力电器股份有限公司’, 30, ‘让世界爱上中国造’, 1),

(‘阿里巴巴’, ‘阿里巴巴集团控股有限公司’, 10, ‘买买买’, 1),

(‘腾讯’, ‘腾讯计算机系统有限公司’, 50, ‘玩玩玩’, 0),

(‘百度’, ‘百度在线网络技术公司’, 5, ‘搜搜搜’, 0),

(‘京东’, ‘北京京东世纪贸易有限公司’, 40, ‘就是快’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘三只松鼠’, ‘三只松鼠股份有限公司’, 5, ‘好吃不上火’, 0),

(‘华为’, ‘华为技术有限公司’, 100, ‘万物互联’, 1),

(‘小米’, ‘小米科技有限公司’, 50, ‘are you ok’, 1),

(‘格力’, ‘格力电器股份有限公司’, 30, ‘让世界爱上中国造’, 1),

(‘阿里巴巴’, ‘阿里巴巴集团控股有限公司’, 10, ‘买买买’, 1),

(‘腾讯’, ‘腾讯计算机系统有限公司’, 50, ‘玩玩玩’, 0),

(‘百度’, ‘百度在线网络技术公司’, 5, ‘搜搜搜’, 0),

(‘京东’, ‘北京京东世纪贸易有限公司’, 40, ‘就是快’, 1);

3.3 查询所有功能

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-t1yopJWN-1642766557871)(assets/image-20210825200138600.png)]

如上图所示是查询所有品牌数据在页面展示的效果。要实现这个功能，要先搞明白如下问题：

• 什么时候发送异步请求？

页面加载完毕后就需要在页面上看到所有的品牌数据。所以在 mounted() 这个构造函数中写发送异步请求的代码。

• 请求需要携带参数吗？

查询所有功能不需要携带什么参数。

• 响应的数据格式是什么样？

后端是需要将 List<Brand> 对象转换为 JSON 格式的数据并响应回给浏览器。响应数据格式如下：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5sqaxSQ5-1642766557872)(…/…/…/…/…/传智播客/2021年/web阶段文档编写/JavaWeb课程文档/day14-综合案例/assets/image-20210825201634849.png)]

整体流程如下

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-fqYIAWWz-1642766557872)(…/…/…/…/…/传智播客/2021年/web阶段文档编写/JavaWeb课程文档/day14-综合案例/assets/image-20210825200332542.png)]

我们先实现后端程序，然后再实现前端程序。

3.3.1 后端实现

3.3.1.1 dao方法实现

在 com.itheima.mapper.BrandMapper 接口中定义抽象方法，并使用 @Select 注解编写 sql 语句

/**

• 查询所有

• @return

*/

@Select(“select * from tb_brand”)

List selectAll();

由于表中有些字段名和实体类中的属性名没有对应，所以需要在 com/itheima/mapper/BrandMapper.xml 映射配置文件中定义结果映射 ，使用resultMap 标签。映射配置文件内容如下：

<?xml version="1.0" encoding="UTF-8" ?>

定义完结果映射关系后，在接口 selectAll() 方法上引用该结构映射。使用 @ResultMap("brandResultMap") 注解

完整接口的 selectAll() 方法如下：

/**

• 查询所有

• @return

*/

@Select(“select * from tb_brand”)

@ResultMap(“brandResultMap”)

List selectAll();

3.3.1.2 service方法实现

在 com.itheima.service 包下创建 BrandService 接口，在该接口中定义查询所有的抽象方法

public interface BrandService {

/**

• 查询所有

• @return

*/

List selectAll();

}

并在 com.itheima.service 下再创建 impl 包；impl 表示是放 service 层接口的实现类的包。 在该包下创建名为 BrandServiceImpl 类

public class BrandServiceImpl implements BrandService {

@Override

public List selectAll() {

}

}

此处为什么要给 service 定义接口呢？因为service定义了接口后，在 servlet 中就可以使用多态的形式创建Service实现类的对象，如下：

这里使用多态是因为方便我们后期解除 Servlet 和 service 的耦合。从上面的代码我们可以看到 SelectAllServlet 类和 BrandServiceImpl 类之间是耦合在一起的，如果后期 BrandService 有其它更好的实现类（例如叫 BrandServiceImpl），那就需要修改 SelectAllServlet 类中的代码。后面我们学习了 Spring 框架后就可以解除 SelectAllServlet 类和红色框括起来的代码耦合。而现在咱们还做不到解除耦合，在这里只需要理解为什么定义接口即可。

BrandServiceImpl 类代码如下：

public class BrandServiceImpl implements BrandService {

//1. 创建SqlSessionFactory 工厂对象

SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

@Override

public List selectAll() {

//2. 获取SqlSession对象

SqlSession sqlSession = factory.openSession();

//3. 获取BrandMapper

BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

//4. 调用方法

List brands = mapper.selectAll();

//5. 释放资源

sqlSession.close();

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

义查询所有的抽象方法

public interface BrandService {

/**

• 查询所有

• @return

*/

List selectAll();

}

并在 com.itheima.service 下再创建 impl 包；impl 表示是放 service 层接口的实现类的包。 在该包下创建名为 BrandServiceImpl 类

public class BrandServiceImpl implements BrandService {

@Override

public List selectAll() {

}

}

此处为什么要给 service 定义接口呢？因为service定义了接口后，在 servlet 中就可以使用多态的形式创建Service实现类的对象，如下：

[外链图片转存中…(img-Is9tNWkV-1714398151132)]

这里使用多态是因为方便我们后期解除 Servlet 和 service 的耦合。从上面的代码我们可以看到 SelectAllServlet 类和 BrandServiceImpl 类之间是耦合在一起的，如果后期 BrandService 有其它更好的实现类（例如叫 BrandServiceImpl），那就需要修改 SelectAllServlet 类中的代码。后面我们学习了 Spring 框架后就可以解除 SelectAllServlet 类和红色框括起来的代码耦合。而现在咱们还做不到解除耦合，在这里只需要理解为什么定义接口即可。

BrandServiceImpl 类代码如下：

public class BrandServiceImpl implements BrandService {

//1. 创建SqlSessionFactory 工厂对象

SqlSessionFactory factory = SqlSessionFactoryUtils.getSqlSessionFactory();

@Override

public List selectAll() {

//2. 获取SqlSession对象

SqlSession sqlSession = factory.openSession();

//3. 获取BrandMapper

BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);

//4. 调用方法

List brands = mapper.selectAll();

//5. 释放资源

sqlSession.close();

❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

[外链图片转存中…(img-AKsWoiwy-1714398151133)]