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

最新推荐文章于 2024-06-20 15:06:48 发布
最新推荐文章于 2024-06-20 15:06:48 发布
阅读量328 收藏 6
点赞数 3
分类专栏： 程序员 文章标签： 前端 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84446963/article/details/138326629
版权

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(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 完整页面代码
Title

<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();

return brands;

}

}

3.3.1.3 servlet实现

在 com.itheima.web.servlet 包下定义名为 SelectAllServlet 的查询所有的 servlet。该 servlet 逻辑如下：

  • 调用service的 selectAll() 方法查询所有的品牌数据，并接口返回结果

  • 将返回的结果转换为 json 数据

  • 响应 json 数据

代码如下：

@WebServlet(“/selectAllServlet”)

public class SelectAllServlet extends HttpServlet {

private BrandService brandService = new BrandServiceImpl();

@Override

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

//1. 调用service查询

List brands = brandService.selectAll();

//2. 转为JSON

String jsonString = JSON.toJSONString(brands);

//3. 写数据

response.setContentType(“text/json;charset=utf-8”); //告知浏览器响应的数据是什么， 告知浏览器使用什么字符集进行解码

response.getWriter().write(jsonString);

}

@Override

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

this.doGet(request, response);

}

}

3.3.1.4 测试后端程序

在浏览器输入访问 servlet 的资源路径 http://localhost:8080/brand-case/selectAllServlet ，如果没有报错，并能看到如下信息表明后端程序没有问题

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

3.3.2 前端实现

前端需要在页面加载完毕后发送 ajax 请求，所以发送请求的逻辑应该放在 mounted() 钩子函数中。而响应回来的数据需要赋值给表格绑定的数据模型，从下图可以看出表格绑定的数据模型是 tableData

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

前端代码如下：

mounted(){

//当页面加载完成后，发送异步请求，获取数据

axios({

method:“get”,

url:“http://localhost:8080/brand-case/selectAllServlet”

}).then(resp=> {

this.tableData = resp.data;

})

}

3.4 添加功能

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

上图是添加数据的对话框，当点击 提交 按钮后就需要将数据提交到后端，并将数据保存到数据库中。下图是整体的流程：

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

页面发送请求时，需要将输入框输入的内容提交给后端程序，而这里是以 json 格式进行传递的。而具体的数据格式如下：

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

注意：由于是添加数据，所以上述json数据中id是没有值的。

3.4.1 后端实现
3.4.1.1 dao方法实现

在 BrandMapper 接口中定义 add() 添加方法，并使用 @Insert 注解编写sql语句

/**

  • 添加数据

  • @param brand

*/

@Insert(“insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})”)

void add(Brand brand);

3.4.1.2 service方法实现

在 BrandService 接口中定义 add() 添加数据的业务逻辑方法

/**

  • 添加数据

  • @param brand

*/

void add(Brand brand);

在 BrandServiceImpl 类中重写 add() 方法，并进行业务逻辑实现

@Override

public void add(Brand brand) {

//2. 获取SqlSession对象

SqlSession sqlSession = factory.openSession();

//3. 获取BrandMapper

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

//4. 调用方法

mapper.add(brand);

sqlSession.commit();//提交事务

//5. 释放资源

sqlSession.close();

}

注意：增删改操作一定要提交事务。

3.4.1.3 servlet实现

在 com.itheima.web.servlet 包写定义名为 AddServlet 的 Servlet。该 Servlet 的逻辑如下：

  • 接收页面提交的数据。页面到时候提交的数据是 json 格式的数据，所以此处需要使用输入流读取数据

  • 将接收到的数据转换为 Brand 对象

  • 调用 service 的 add() 方法进行添加的业务逻辑处理

  • 给浏览器响应添加成功的标识，这里直接给浏览器响应 success 字符串表示成功

servlet 代码实现如下：

@WebServlet(“/addServlet”)

public class AddServlet extends HttpServlet {

private BrandService brandService = new BrandServiceImpl();

@Override

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

//1. 接收品牌数据

BufferedReader br = request.getReader();

String params = br.readLine();//json字符串

//转为Brand对象

Brand brand = JSON.parseObject(params, Brand.class);

//2. 调用service添加

brandService.add(brand);

//3. 响应成功的标识

response.getWriter().write(“success”);

}

@Override

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

this.doGet(request, response);

}

}

3.4.2 前端实现

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

上图左边是页面效果，里面的 提交 按钮可以通过上图右边看出绑定了一个 单击事件，而该事件绑定的是 addBrand 函数，所以添加数据功能的逻辑代码应该写在 addBrand() 函数中。在此方法中需要发送异步请求并将表单中输入的数据作为参数进行传递。如下

// 添加数据

addBrand() {

// 发送ajax请求，添加数据

axios({

method:“post”,

url:“http://localhost:8080/brand-case/addServlet”,

data:this.brand

}).then(resp=> {

//响应数据的处理逻辑

})

}

在 then 函数中的匿名函数是成功后的回调函数，而 resp.data 就可以获取到响应回来的数据，如果值是 success 表示数据添加成功。成功后我们需要做一下逻辑处理：

  1. 关闭新增对话框窗口

如下图所示是添加数据的对话框代码，从代码中可以看到此对话框绑定了 dialogVisible 数据模型，只需要将该数据模型的值设置为 false，就可以关闭新增对话框窗口了。

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

  1. 重新查询数据

数据添加成功与否，用户只要能在页面上查看到数据说明添加成功。而此处需要重新发送异步请求获取所有的品牌数据，而这段代码在 查询所有 功能中已经实现，所以我们可以将此功能代码进行抽取，抽取到一个 selectAll() 函数中

// 查询所有数据

selectAll(){

axios({

method:“get”,

url:“http://localhost:8080/brand-case/selectAllServlet”

}).then(resp=> {

this.tableData = resp.data;

})

}

那么就需要将 mounted() 钩子函数中代码改进为

mounted(){

//当页面加载完成后，发送异步请求，获取数据

this.selectAll();

}

同时在新增响应的回调中调用 selectAll() 进行数据的重新查询。

  1. 弹出消息给用户提示添加成功

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

上图左边就是 elementUI 官网提供的成功提示代码，而上图右边是具体的效果。

注意：上面的this需要的是表示 VUE 对象的this。

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

用户只要能在页面上查看到数据说明添加成功。而此处需要重新发送异步请求获取所有的品牌数据，而这段代码在 查询所有 功能中已经实现，所以我们可以将此功能代码进行抽取，抽取到一个 selectAll() 函数中

// 查询所有数据

selectAll(){

axios({

method:“get”,

url:“http://localhost:8080/brand-case/selectAllServlet”

}).then(resp=> {

this.tableData = resp.data;

})

}

那么就需要将 mounted() 钩子函数中代码改进为

mounted(){

//当页面加载完成后，发送异步请求，获取数据

this.selectAll();

}

同时在新增响应的回调中调用 selectAll() 进行数据的重新查询。

  1. 弹出消息给用户提示添加成功

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

上图左边就是 elementUI 官网提供的成功提示代码，而上图右边是具体的效果。

注意：上面的this需要的是表示 VUE 对象的this。

总结

=============================================================

从转行到现在，差不多两年的时间，虽不能和大佬相比，但也是学了很多东西。我个人在学习的过程中，习惯简单做做笔记，方便自己复习的时候能够快速理解，现在将自己的笔记分享出来，和大家共同学习。

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

个人将这段时间所学的知识，分为三个阶段：

第一阶段：HTML&CSS&JavaScript基础

第二阶段:移动端开发技术

第三阶段:前端常用框架

  • 推荐学习方式：针对某个知识点，可以先简单过一下我的笔记，如果理解，那是最好，可以帮助快速解决问题；如果因为我的笔记太过简陋不理解，可以关注我以后我还会继续分享。

  • 大厂的面试难在，针对一个基础知识点，比如JS的事件循环机制，不会上来就问概念，而是换个角度，从题目入手，看你是否真正掌握。所以对于概念的理解真的很重要。

2401_84446963
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
mashup-webcomponent:Web组件使用DX API将案例类型公开为Mashup。 可在https上获得该应用程序的完整演示。
05-04
无需使文档样式与Pega Mashup应用程序保持一致-> Web组件可以作为轻型DOM运行，并且可以从顶层文档或影子DOM中获取核心组件的所有样式 改进的性能->呈现UI所需的JS文件很小（大约80Kb），并且与Pega Web Mashup所需...
vue2.0结合Element-ui实战案例
10-17
总的来说，这个实战案例将涵盖Vue 2.0的基本使用，Element-UI组件的集成，以及前后端数据交互的实现，是学习Vue 2.0与Element-UI结合开发的绝佳实践。通过这个案例，开发者不仅可以提升对Vue和Element-UI的理解，还...
技术协会Web前端部面试，Web核心技术之Element组件库学习及综合案例，精通web前端开发
2301_76225520的博客
04-05 936
外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-aoux3IB2-1642766557871)(./assets/image-20210825171411003.png)]以上是我们在综合案例要实现的功能。对数据的除了对数据的增删改查功能外，还有一些复杂的功能，如批量删除分页查询条件查询等功能批量删除功能：每条数据前都有复选框，当我选中多条数据并点击批量删除按钮后，会发送请求到后端并删除数据库中指定的多条数据。分页查询。
Web核心技术之Element组件库学习及综合案例
helpluozhao123的博客
01-21 4399
2，Element Element：是饿了么公司前端开发团队提供的一套基于 Vue 的网站组件库，用于快速构建网页。 Element 提供了很多组件（组成网页的部件）供我们使用。例如 超链接、按钮、图片、表格等等~ 如下图左边的是我们编写页面看到的按钮，上图右边的是 Element 提供的页面效果，效果一目了然。 我们学习 Element 其实就是学习怎么从官网拷贝组件到我们自己的页面并进行修改，官网网址是 https://element.eleme.cn/#/zh-CN 进入官网能看到如下页面 [外链
【Vue框架】Vue2中element-ui/mint-ui组件库——element-ui引入组件以及使用案例、mint-ui引入组件及使用案例
量化Mike
04-09 1515
借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。借助 babel-plugin-component，我们可以只引入需要的组件，以达到减小项目体积的目的。element-ui 提供了大量的组件，如：布局组件、表单组件、JS组件等等。如果你只希望引入部分组件，比如 Button 和 Cell，那么需要在。引入 Element。
【前端】Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格
karshey的博客
11-03 5561
Vue+Element UI案例：通用后台管理系统-Home组件：卡片、表格
Vue——Elementui案例实现
测试
05-04 1771
elementui
Web核心技术之Element组件库学习及综合案例(1)，这套Github上40K+star面试笔记
2401_84140409的博客
04-11 762
外链图片转存中…(img-RKJfCJ50-1712782686011)][外链图片转存中…(img-a0uWLEAl-1712782686011)][外链图片转存中…(img-MQXK44So-1712782686012)][外链图片转存中…(img-L5Hs35ux-1712782686012)][外链图片转存中…(img-pwVInddG-1712782686013)][外链图片转存中…(img-koDgK7Hd-1712782686013)]
【Java Web】003 -- Axios & Vue组件库（Element）
汤姆lazy的CSDN博客
03-30 1051
Axios & Element，内容主要包括：Ajax、前后端分离开发、前端工程化、Element、Vue路由、打包部署等。
最新版ElementUI-web-Axure组件库
03-12
最新版ElementUI web版 Axure组件库，用Axure9.0创建，带丰富的交互 包含图标、页面模版、统计图、案例、元件库 将文件解压，击+组件处的加号，选择里面的文件导入就能用了
Vue form表单动态添加组件实战案例
10-16
这个组件可以包含输入字段、选择框等元素，比如在本例中使用了Element UI库来构建。组件模板中定义了这些表单元素，使得每个模块具有独立的结构。 2. **导入并使用组件** 在父组件中，我们需要导入刚刚创建的组件...
micro-app vue2案例
01-28
micro-app借鉴了html原生WebComponent的思想，通过CustomElement结合自定义的ShadowDom，将微前端封装成一个类WebComponent组件，从而实现微前端的组件化渲染。并且由于自定义ShadowDom的隔离特性，micro-app不需要...
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 240
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
netcore 生成验证码
最新发布
qq_51172697的博客
06-20 221
提供一个生成验证码和校验的接口。
Web前端写随机抽奖：技术与创意的碰撞
yvnmth_025y的博客
06-16 334
这些创意构思不仅能够提升抽奖活动的趣味性和互动性，还能够吸引更多的用户参与。除了基本的抽奖功能和界面设计外，我们还需要关注用户的交互体验。同时，我们还要确保抽奖过程的公平性和透明度，避免出现任何作弊行为。通过构建合理的抽奖逻辑、设计美观的界面、优化交互体验以及拓展创意构思，我们可以为用户带来更加有趣和丰富的抽奖体验。在Web前端的世界里，随机抽奖功能不仅是一种常见的交互元素，更是技术与创意的完美结合。下面，我们将从四个方面、五个方面、六个方面和七个方面，深入探讨Web前端实现随机抽奖的技术要点和创意构思。
qml实现点击按钮往Columnt添加一个组件对象
海涛高软
06-17 203
FR：徐海涛(hunkxu)
【element 】修改下拉菜单＜el-dropdown样式为横向（超简单）
qq_61798306的博客
06-18 276
【element 】修改下拉菜单
element组件库 rp8
01-22
element组件库 rp8 还具有良好的文档和示例代码，方便开发者快速学习和使用。文档提供了详细的组件说明和用法示例，帮助开发者快速掌握组件的使用方法。 总之，element组件库 rp8 是一款功能强大、易于使用的前端UI...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值