您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生
02-批量删除-后台&前端(element plus的cdn方式安装与使用servlet接收json的int数组处理)、IntelliJ IDEA 2020.3.3 x64激活至2099年
发布时间：2024-12-13 19:30:29编辑：雪饮阅读（）
-
在此之前需要先破解下IntelliJ IDEA，当然这个与版本密切相关。
我这里是
IntelliJ IDEA 2020.3.3 x64
那么具体的激活方法：
首先下载激活插件
通过网盘分享的文件：IntelliJ IDEA 2020.3.3 x64激活到2099年补丁.rar
链接: https://pan.baidu.com/s/1tRgecOjGpOPpUnmu_wMGwg?pwd=x25q 提取码: x25q
本插件可以激活到2099年
如果是首次安装IntelliJ IDEA 2020.3.3 x64,一般可以从试用进去后将本插件BetterIntelliJ.zip于
Settings=>Plugins右上角齿轮图标里面以Install Plugin from Disk进行安装。
如果首次IntelliJ IDEA 2020.3.3 x64或许以试用进去后默认的欢迎页面直接拖拽本插件也可以。
那么我是用到真正到期时候才用本插件的。
我将reset_script还有BetterIntelliJ.zip都放置于IntelliJ IDEA 2020.3.3 x64的安装目录里面的bin目录中。
然后才去Install Plugin from Disk选择bin目录中的BetterIntelliJ.zip的。
因为有种说法是这样的。不过现在看来好像也未必。
上面操作执行完成后重启idea，然后输入“激活补丁key.txt”中的key进行激活。
那么接下来是今天的任务，继上篇完成了servlet整合后的新增品牌数据，这次主要完成以下任务：
批量删除于前番完成的ajax品牌列表中新增该功能，删除完后局部刷新品牌列表，提示（如删除成功提示）尝试用element plus的cdn方式。
至于为什么是element plus,因为element都过时了的东西，本人虽然都还没有用过，但是本人用了有1年左右的element plus，总体体验感觉还是不错的。
那么我们这种情况属于原生html中使用element plus，就是走cdn的方式，基于我们已经加载过vu3，所以在这里的安装方式其中head部分则如
<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>
但有个小tip：
由于原生的 HTML 解析行为的限制，单个闭合标签可能会导致一些例外情况，所以请使用双封闭标签
这里说的肯定是element中的组件的标签书写建议 。
当然，之前creatApp后面还要use下elementPlus了
.use(ElementPlus).mount('#app');
那么我们的完整前端可如：
<%--
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>
window.onload=function(){
const { createApp, ref } = Vue
createApp({
setup() {
const brands = ref([])
const ids=ref([]);
const msg=ref("");
const ServletQueryAllAjax=()=>{
axios.get('/zeroEightUserLoginCaseModule/ServletQueryAllAjax')
.then(function (response) {
console.log(response);
brands.value=response.data;
})
.catch(function (error) {
console.log(error);
});
}
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="";
ServletQueryAllAjax();
},2000);
}
})
.catch(function (error) {
console.log(error);
});
}
ServletQueryAllAjax();
return {
brands,
ids,
msg,
deleteInBatches
}
}
}).use(ElementPlus).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 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>
</body>
</html>
而对于批量删除来说java后端则之前的mapper中就需要定义动态的mysql in查询语句如：
<delete id="delByIds">
delete from tb_brand where id in
<foreach collection="ids" item="id" separator="," open="(" close=")">
#{id}
</foreach>
</delete>
然后对应的mapper抽象接口（之前的BrandMapper
）定义对应的批量删除方法
void delByIds(@Param("ids") int[] ids);
那么之前的brandService层也需要这个批量删除的方法
public void delByIds(int[] ids){
SqlSession sqlSession=sqlSessionFactory.openSession(true);
BrandMapper brandMapper=sqlSession.getMapper(BrandMapper.class);
brandMapper.delByIds(ids);
sqlSession.close();
}
然后就是基于之前的一个servlet同时支持多种业务请求的情况下，则这里再次新增一个批量删除方法
public void delByIds(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String JsonString=req.getReader().readLine();
int[] ids= JSON.parseObject(JsonString,int[].class);
System.out.println("javaObject:"+ids);
brandService.delByIds(ids);
resp.getWriter().write("success");
}
关键字词：element,plus,cdn,servlet,int,批量
相关文章
- 01-Servlet 代码优化(利用映射实现同一servlet实现多
- 01-JSP概述&快速入门&原理(jsp-servlet的继承与实现流
- 11-案例-用户登录-准备环境&代码实现(mybatis+servlet
- 07-Request请求转发(servlet转发及webapp目录下的资源
- 04-Idea模板创建Servlet(快速创建servlet及快速创建se
- 03-Request通用方式获取请求参数(servlet在get请求与p
- 16-XML配置Servlet(路由)
- 15-urlPattern配置(WebServlet注解配置各种url访问路
- 14-Servlet方法介绍
- 13-Servlet方法介绍&体系结构(HttpServlet的使用)