您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
05-条件查询-后台（cdn方式使用element plus的icon用法）
发布时间：2024-12-14 19:19:00编辑：雪饮阅读（）
-
如果说要条件查询，我们这里用品牌名称，品牌状态，企业名称进行条件查询并结合之前的分页。
那么首先重要的就是在品牌列表前端新增这三个查询的界面元素。
这里可以使用element plus，但cdn使用element plus，尤其是icon比如你的搜索按钮的搜索图标可能会显示异常。
那么cdn的方式时候你除了element plus本体外，你还得加载icon资源，可以这样加载
<script src="//unpkg.com/@element-plus/icons-vue"></script>
然后你需要在你的setup里面定义图标名称的对应要return出去的属性如这里要用到的search则如
const Search=ElementPlusIconsVue.Search;
然后return的时候连这个Search也return出去。
那么接下来搜索方法就是基于之前的分页方法中规中矩的加入额外这三个参数即可，那么完整的前端实现如：
<%--
Created by IntelliJ IDEA.
User: 1
Date: 2024/12/2
Time: 15:15
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" %>
<html>
<head>
<title>Title</title>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />
<script src="//unpkg.com/element-plus"></script>
<script src="//unpkg.com/element-plus/dist/locale/zh-cn"></script>
<script src="//unpkg.com/@element-plus/icons-vue"></script>
<script>
window.onload=function(){
const { createApp, ref,watch } = Vue
console.log("ElementPlus",ElementPlus);
var app=createApp({
setup() {
const brands = ref([])
const ids=ref([]);
const msg=ref("");
const page=ref(1);
const oldPage=ref(1);
const pageSize=ref(10);
const total=ref(0);
const selectOptions = [
{
value: '-1',
label: '不限',
},
{
value: '0',
label: '禁用',
},
{
value: '1',
label: '启用',
}
]
const search_company_name=ref("");
const search_brand_name=ref("");
const selectValue = ref(selectOptions[0].value);
const Search=ElementPlusIconsVue.Search;
const ServletQueryAllAjax=()=>{
axios.get('/zeroEightUserLoginCaseModule/ServletQueryAllAjax')
.then(function (response) {
console.log(response);
brands.value=response.data;
})
.catch(function (error) {
console.log(error);
});
}
const PagingBean=(p_page,p_pageSize)=>{
console.log("PagingBean page",p_page);
console.log("PagingBean pageSize",p_pageSize);
axios({
method:'GET',
url:'/zeroEightUserLoginCaseModule/Brand/ServletQueryAllPaging',
params:{
page:p_page,
pageSize:p_pageSize,
status:selectValue.value,
company_name:search_company_name.value,
brand_name:search_brand_name.value
}
}) .then(function (response) {
console.log("分页数据",response);
brands.value=response.data.list;
total.value=response.data.total;
if(response.data.list.length>0){
page.value=p_page;
}
})
.catch(function (error) {
console.log(error);
});
}
const searchFunc=()=>{
PagingBean(1,pageSize.value);
}
const deleteInBatches=()=>{
console.log("deleteInBatches ids:",ids.value);
if(ids.value.length==0){
return;
}
axios({
method:'post',
url:'/zeroEightUserLoginCaseModule/Brand/delByIds',
data:ids.value
}) .then(function (response) {
console.log(response);
if(response.data=="success"){
//alert("删除成功");
msg.value="success";
setTimeout(function(){
msg.value="";
PagingBean(page.value,pageSize.value);
},2000);
}
})
.catch(function (error) {
console.log(error);
});
}
const currentChange=(newPage)=>{
//这个不用实现也行，只是为了迎合element plus的分页组件的要求
}
const pageSizeChange=(pageSize)=>{
//这个不用实现也行，只是为了迎合element plus的分页组件的要求
}
PagingBean(page.value,pageSize.value);
watch(page,(newPage,oldPage)=>{
console.log("newPage",newPage);
console.log("oldPage",oldPage);
oldPage.value=oldPage;
PagingBean(newPage,pageSize.value);
});
return {
brands,
ids,
msg,
page,
pageSize,
total,
selectValue,
selectOptions,
search_company_name,
search_brand_name,
Search,
deleteInBatches,
currentChange,
pageSizeChange,
searchFunc
}
}
});
app.use(ElementPlus, {
locale: ElementPlusLocaleZhCn
})
app.mount('#app');
}
</script>
<style>
.el-alert {
margin: 20px 0 0;
}
.el-alert:first-child {
margin: 0;
}
</style>
</head>
<body>
<div id="app">
<p>欢迎你,${pageContext.request.getSession().getAttribute("user").username}</p>
<div style="display: flex;gap:1rem;">
<div>
<label>当前状态：</label>
<el-select
v-model="selectValue"
size="small"
style="width: 120px"
>
<el-option
v-for="item in selectOptions"
:key="item.value"
:label="item.label"
:value="item.value"
></el-option>
</el-select>
</div>
<div>
<label>企业名称：</label>
<el-input v-model="search_company_name" style="width: 120px" placeholder="Please input"></el-input>
</div>
<div>
<label>品牌名称：</label>
<el-input v-model="search_brand_name" style="width: 120px" placeholder="Please input"></el-input>
</div>
<el-button :icon="Search" circle @click="searchFunc()"></el-button>
</div>
<div class="buttons" style="display: flex;gap:1rem;">
<button @click="deleteInBatches()">批量删除</button>
<a href="addBrand.jsp">添加品牌</a>
</div>
<template v-if="msg=='success'">
<el-alert title="Success alert" type="success"></el-alert>
</template>
<table border="1" cellspacing="0" width="800">
<tr>
<th>ID</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<template v-for="(brand, index) in brands">
<tr>
<th>
<input type="checkbox" name="ids" :value="brand.id" v-model="ids" />
{{brand.id}}
</th>
<th>{{brand.brandName}}</th>
<th>{{brand.companyName}}</th>
<th>{{brand.ordered}}</th>
<th>{{brand.description}}</th>
<th>
<template v-if="brand.status == 1">启用</template>
<template v-if="brand.status == 0">禁用</template>
</th>
<th>
<a :href="'/threeTierArchitectureModule/BrandUpdateById?id='+brand.id">修改</a>
</th>
</tr>
</template>
</table>
<div class="example-pagination-block">
<el-pagination layout="total,prev, pager,next,jumper" :total="total" v-model:current-page="page" ></el-pagination>
</div>
</div>
</body>
</html>
那么接下来我们就要说到后端了，由于后端的查询不仅仅是分页了，所以直接在mapper接口中写sql就不是很方便了，分离sql到mapper配置文件中并由于我们的条件是动态的，有可能一个条件有可能多个条件以及考虑多条件顺序下中间出现一个条件，第一个条件为空，则多出一个and的情况，也就是要考虑where标签处理该边界情况，所以这里mapper实现则如：
<select id="selectByPaging" resultType="Brand" resultMap="brandResultMap">
select * from tb_brand
<where>
<if test="brand.brandName !=null and brand.brandName != '' ">
brand_name like #{brand.brandName}
</if>
<if test="brand.companyName !=null and brand.companyName != '' ">
and company_name like #{brand.companyName}
</if>
<if test="brand.status !=null ">
and status = #{brand.status}
</if>
</where>
limit #{start},#{limit}
</select>
然后对应的mapper接口中的对应分页方法改造为
@ResultMap("brandResultMap")
List<Brand> selectByPaging(@Param("start") int start,@Param("limit") int limit,@Param("brand") Brand brand);
然后BrandService中的分页方法也需要改造
public PagingBean<Brand> selectByPaging(int start,int limit,Brand brand){
SqlSession sqlSession=sqlSessionFactory.openSession();
BrandMapper brandMapper=sqlSession.getMapper(BrandMapper.class);
int total=brandMapper.total();
List<Brand> brands=brandMapper.selectByPaging(start,limit,brand);
PagingBean<Brand> pagingBean=new PagingBean<Brand>();
pagingBean.setTotal(total);
pagingBean.setList(brands);
sqlSession.close();
return pagingBean;
}
然后servlet中整理下参数及参数编码问题（之前的一个工具类里面包含了）
public void ServletQueryAllPaging(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
int page= Integer.parseInt(request.getParameter("page"));
int pageSize= Integer.parseInt(request.getParameter("pageSize"));
int start=(page-1)*pageSize;
int status= Integer.parseInt(request.getParameter("status"));
Brand brand=new Brand();
if(status>=0){
brand.setStatus(status);
}
String company_name= SessionFactoryUtil.getParameter(request,"company_name");
String brand_name=SessionFactoryUtil.getParameter(request,"brand_name");
if(company_name != null & company_name.length()>0){
brand.setCompanyName("%"+company_name+"%");
}
if(brand_name!=null & brand_name.length()>0){
brand.setBrandName("%"+brand_name+"%");
}
PagingBean<Brand> pagingBean=brandService.selectByPaging(start,pageSize,brand);
String brandsJson= JSON.toJSONString(pagingBean, SerializerFeature.WriteMapNullValue);
response.setContentType("application/json;charset=utf-8");
response.getWriter().write(brandsJson);
}
关键字词：cdn,element,plus,icon
相关文章
- 07-前端代码优化(element plus的table组件的多选api)
- 06-条件查询-前端（用element plus美好表格并用switch组
- 04-分页查询-后台&前端(element plus的cdn方式实现cdn
- 03-分页查询-分析(自定义泛型实现分页查询及element p
- 02-批量删除-后台&前端(element plus的cdn方式安装与
- 下一步的学习建议(laravel11+inertia使用ElementPlus
- 虚拟数据填充及同一页面多个分页问题(laravel11+inert
- 14336 - 使用Elementor来自定义网站设计
- elementUi按需引入_转(两种按需引入方式)
- elementUi完整_转(按钮,图标,评分)