Ajax、Axios、Vue、Element与其案例

news/2024/4/24 7:39:01/文章来源:https://blog.csdn.net/m0_63186780/article/details/136537695

目录

一.Ajax

二.Axios

三.Vue

四.Element 

 五.增删改查案例

一.依赖:数据库,mybatis,servlet,json-对象转换器

二.资源:element+vue+axios

三.pojo

 四.mapper.xml与mapper接口

五.service

 六.servlet

七.html页面


建立web工程

需要的依赖:

    <dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency>

一.Ajax

AJAX(Asynchronous JavaScript And XML):异步的js和xml
异步交互:与服务器交换数据并且更新部分网页的技术(局部刷新),操作无需等待服务器响应,直到数据响应回来才改变html页面
本案例使用ajax请求数据与处理响应数据,发送路径需要使用全路径

01ajax.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
</body>
<script>xhttp = new XMLHttpRequest();xhttp.open("GET", " http://localhost/web_demo5_ajax_war/ajaxServlet");xhttp.send();xhttp.onreadystatechange = function() {if (this.readyState == 4 && this.status == 200) {alert(this.responseText);}};
</script>
</html>
@WebServlet("/ajaxServlet")
public class AJAXServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.getWriter().write("Hello,AJAX!");}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}

 


二.Axios

Axios对原生的ajax封装,简化书写
使用准备:导入js文件,放到js文件里面,在本文件中引入js
本案例为使用axios用不同请求方式请求数据并处理响应数据

 02axios.html:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body></body>
<script src="js/axios-0.18.0.js"></script>
<script>axios.get("http://localhost/web_demo5_ajax_war/axiosServlet?username=zhangsan").then(resp=>{alert(resp.data)})axios.post("http://localhost/web_demo5_ajax_war/axiosServlet","username=zhangsan").then(resp=>{alert(resp.data)})
</script>
</html>
@WebServlet("/axiosServlet")
public class AxiosServlet extends HttpServlet {@Overrideprotected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {response.getWriter().write(request.getMethod());}@Overrideprotected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {this.doGet(request, response);}
}

浏览器弹窗为两种不同的请求方式

三.Vue

Vue是一套前端的框架,在js中简化Dom操作
使用需要:导入vue.js
1.改变框里面的值,对应的路径也改变1.绑定表单中的输入使用:v-model="url"2.绑定超链接跳转路径属性使用:v-bind:href="url"或:href="url"3.展示绑定模型的内容使用:{{}}}
2.点击按钮调用不同方法1.绑定事件元素使用:v-on:click="show()或者@click="show()"2.引入方法:在js的Vue模块中使用methods
3.通过输入展示不同标签1.if else:使用v-if="条件"属性2.展示内容与否:使用v-show标签
4.遍历模型:使用v-for=""属性在此案例中addr为局部变量名称,根据情况选择是否使用索引
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><input v-model="url"><br><a v-bind:href="url">{{url}}</a><br><a :href="url">{{url}}</a><br><br><br><input type="button" value="按钮1" v-on:click="show()"><br><input type="button" value="按钮2" @click="show()"><br><br><br><div v-if="count==1">div1</div><div v-else-if="count==2">div2</div><div v-else>div3</div><div v-show="count==4">div4</div><input v-model="count"><br><br><br><div v-for="addr in addrs">{{addr}}<br></div><div v-for="(addr,i) in addrs">{{i+1}}--{{addr}}<br></div>
</div>
<script src="js/vue.js"></script>
<script>new Vue({//创建vue核心对象el:"#app",//作用范围methods:{//方法show(){alert("按钮被点击")}},data(){//模型数据return {url:"https://www.baidu.com",count:1,addrs:["北京","上海","西安"]}},mounted(){//页面加载完成后的方法alert("加载完成")}})
</script>
</body>
</html>

 


四.Element 

1.复制粘贴element-ui文件
2.引文件使用:然后去官网复制粘贴即可
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title></head>
<body>
<div id="app"><el-row><el-button>默认按钮</el-button><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><el-button type="info">信息按钮</el-button><el-button type="warning">警告按钮</el-button><el-button type="danger">危险按钮</el-button></el-row>
</div>
</body>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<script>new Vue({el:"#app"})
</script>
</html>

 五.增删改查案例

新建Web项目

一.依赖:数据库,mybatis,servlet,json-对象转换器
    <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>5.1.32</version></dependency><dependency><groupId>org.mybatis</groupId><artifactId>mybatis</artifactId><version>3.5.5</version></dependency><dependency><groupId>javax.servlet</groupId><artifactId>javax.servlet-api</artifactId><version>3.1.0</version><scope>provided</scope></dependency><dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency>

二.资源:element+vue+axios

三.pojo

brand类中使用到了getStatusStr方法:由status返回字符串,交给别的类调用

public class Brand {private Integer id;private String brandName;private String companyName;private Integer ordered;private String description;private Integer status;public Brand() {}public Brand(Integer id, String brandName, String companyName, Integer ordered, String description, Integer status) {this.id = id;this.brandName = brandName;this.companyName = companyName;this.ordered = ordered;this.description = description;this.status = status;}public Integer getId() {return id;}public void setId(Integer id) {this.id = id;}public String getBrandName() {return brandName;}public void setBrandName(String brandName) {this.brandName = brandName;}public String getCompanyName() {return companyName;}public void setCompanyName(String companyName) {this.companyName = companyName;}public Integer getOrdered() {return ordered;}public void setOrdered(Integer ordered) {this.ordered = ordered;}public String getDescription() {return description;}public void setDescription(String description) {this.description = description;}public Integer getStatus() {return status;}public String getStatusStr(){if(this.status==1){ return "启用"; }return "禁用";}public void setStatus(Integer status) {this.status = status;}@Overridepublic String toString() {return "Brand{" +"id=" + id +", brandName='" + brandName + '\'' +", companyName='" + companyName + '\'' +", ordered=" + ordered +", description='" + description + '\'' +", status=" + status +'}';}
}

pagebean类用于存放一页的数据与总数量

public class PageBean<T> {private int totalCount;private List<T> rows;public PageBean() {}public PageBean(int totalCount, List<T> rows) {this.totalCount = totalCount;this.rows = rows;}public int getTotalCount() {return totalCount;}public void setTotalCount(int totalCount) {this.totalCount = totalCount;}public List<T> getRows() {return rows;}public void setRows(List<T> rows) {this.rows = rows;}
}

 四.mapper.xml与mapper接口

 使用到了批量删除、模糊查询、分页查询

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapperPUBLIC "-//mybatis.org//DTD Mapper 3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="org.example.mapper.BrandMapper"><resultMap id="brandResultMap" type="Brand"><id column="id" property="id"/><result column="brand_name" property="brandName"/><result column="company_name" property="companyName"/></resultMap><delete id="deleteByIds">delete from tb_brand where id in<foreach collection="array" item="id" separator="," open="(" close=")">#{id}</foreach>;</delete><select id="selectByPageAndCondition" resultMap="brandResultMap">select *from tb_brand<where><if test="brand.status!=null">and  status=#{brand.status}</if><if test="brand.companyName!=null and brand.companyName!=''">and company_name like #{brand.companyName}</if><if test="brand.brandName!=null and brand.brandName!=''">and brand_name like #{brand.brandName}</if></where>limit #{begin},#{size}</select><select id="selectCountByCondition" resultType="java.lang.Integer">select count(*) from tb_brand<where><if test="status!=null">and  status=#{status}</if><if test="companyName!=null and companyName!=''">and company_name like #{companyName}</if><if test="brandName!=null and brandName!=''">and brand_name like #{brandName}</if></where></select>
</mapper>
public interface BrandMapper {//添加数据@Insert("insert into tb_brand values(null,#{brandName},#{companyName},#{ordered},#{description},#{status})")void add(Brand brand);//删除数据@Delete("delete from tb_brand where id=#{id}")void deleteById(int id);//更新数据@Update("update tb_brand set brand_name=#{brandName}," +"company_name=#{companyName}," +"ordered=#{ordered}," +"description=#{description}," +"status=#{status} " +"where id=#{id}")void update(Brand brand);//删除选中数据void deleteByIds(int[] ids);//条件分页查询int selectCountByCondition(Brand brand);List<Brand> selectByPageAndCondition(@Param("begin") int begin, @Param("size") int size, @Param("brand") Brand brand);}

五.service
public class BrandService {SqlSessionFactory factory = SqlSessionFactoryUtil.getssf();public void add(Brand brand) {SqlSession sqlsession=factory.openSession(true);sqlsession.getMapper(BrandMapper.class).add(brand);sqlsession.close();}public void deleteById(int id) {SqlSession sqlsession=factory.openSession(true);sqlsession.getMapper(BrandMapper.class).deleteById(id);sqlsession.close();}public void update(Brand brand) {SqlSession sqlsession=factory.openSession(true);sqlsession.getMapper(BrandMapper.class).update(brand);sqlsession.close();}public void deleteByIds(int[] ids) {SqlSession sqlsession=factory.openSession(true);sqlsession.getMapper(BrandMapper.class).deleteByIds(ids);sqlsession.close();}public PageBean<Brand> selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {SqlSession sqlsession=factory.openSession(true);BrandMapper mapper=sqlsession.getMapper(BrandMapper.class);String brandName=brand.getBrandName();if(brandName!=null && !brandName.isEmpty()) brand.setBrandName("%"+brandName+"%");String companyName=brand.getCompanyName();if(companyName!=null && !companyName.isEmpty()) brand.setCompanyName("%"+companyName+"%");PageBean<Brand> pageBean=new PageBean<>(mapper.selectCountByCondition(brand),mapper.selectByPageAndCondition((currentPage-1)*pageSize,pageSize,brand));sqlsession.close();return pageBean;}
}

 六.servlet

服务类中使用反射判别不同的请求路径去访问不同方法

public class BaseServlet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {String uri=req.getRequestURI();String methodName=uri.substring(uri.lastIndexOf('/')+1);Class<? extends BaseServlet> cls=this.getClass();try{Method method=cls.getMethod(methodName,HttpServletRequest.class,HttpServletResponse.class);method.invoke(this,req,resp);}catch (Exception e){e.printStackTrace();}}
}

分页+模糊查询同时使用到了post+get方法

@WebServlet("/brand/*")
public class BrandServlet extends BaseServlet{private final BrandService service =new BrandService();public void add(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("add...");service.add(JSON.parseObject(request.getReader().readLine(),Brand.class));response.getWriter().write("success");}public void deleteById(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{System.out.println("deleteById...");service.deleteById(Integer.parseInt(request.getParameter("id")));response.getWriter().write("success");}public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{System.out.print("update...");service.update(JSON.parseObject(request.getReader().readLine(),Brand.class));response.getWriter().write("success");}public void deleteByIds(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{System.out.print("deleteMany...");service.deleteByIds(JSON.parseObject(request.getReader().readLine(),int[].class));response.getWriter().write("success");}//post+get方式来实现分页查询+条件查询,条件查询可有可无public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {System.out.println("brand selectByPageAndCondition...");response.setContentType("text/json;charset=UTF-8");response.getWriter().write(JSON.toJSONString(service.selectByPageAndCondition(Integer.parseInt(request.getParameter("currentPage")),Integer.parseInt(request.getParameter("pageSize")),JSON.parseObject(request.getReader().readLine(),Brand.class))));}
}

七.html页面
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<div id="app"><!--查询表单--><el-form :inline="true" :model="brandSelect" class="demo-form-inline"><el-form-item label="当前状态"><el-select v-model="brandSelect.status" placeholder="当前状态"><el-option label="启用" value="1"></el-option><el-option label="禁用" value="0"></el-option></el-select></el-form-item><el-form-item label="企业名称"><el-input v-model="brandSelect.companyName" placeholder="企业名称"></el-input></el-form-item><el-form-item label="品牌名称"><el-input v-model="brandSelect.brandName" placeholder="企业名称"></el-input></el-form-item><el-form-item><el-button type="primary" @click="selectAll">查询</el-button></el-form-item></el-form><!--新增与批量删除按钮--><el-row><el-button type="danger" plain @click="deleteByIds">批量删除</el-button><el-button type="primary" plain @click="handleAdd">新增</el-button></el-row><!--添加数据与修改数据的对话框表单--><el-dialogtitle="编辑品牌":visible.sync="dialogVisible"width="30%"><el-form ref="form" :model="brand" label-width="80px"><el-form-item label="品牌名称"><el-input v-model="brand.brandName"></el-input></el-form-item><el-form-item label="企业名称"><el-input v-model="brand.companyName"></el-input></el-form-item><el-form-item label="排序"><el-input v-model="brand.ordered"></el-input></el-form-item><el-form-item label="备注"><el-input type="textarea" v-model="brand.description"></el-input></el-form-item><el-form-item label="状态"><el-switch v-model="brand.status"active-color="#13ce66"inactive-color="#ff4949"active-value="1"inactive-value="0"></el-switch></el-form-item><!--点击事件设立一下--><el-form-item><template v-if="method=='修改'"><el-button type="primary" @click="updateBrand">提交修改</el-button></template><template v-else><el-button type="primary" @click="addBrand">提交添加</el-button></template><el-button @click=cancelUpdate>取消</el-button></el-form-item></el-form></el-dialog><!--表格--><el-table:data="tableData"style="width: 100%"stripe@selection-change="handleSelectionChange"><el-table-columntype="selection"></el-table-column><el-table-columnlabel="排序"type="index"></el-table-column><el-table-columnprop="brandName"label="品牌名称"align="center"></el-table-column><el-table-columnprop="companyName"label="企业名称"align="center"></el-table-column><el-table-columnprop="ordered"align="center"label="排序"></el-table-column><!--取值为statusStr,找到Brand里面的对应的get方法--><el-table-columnprop="statusStr"align="center"label="当前状态"></el-table-column><el-table-column label="操作" align="center"><template slot-scope="scope"><el-buttontype="primary"@click="handleEdit(scope.$index, scope.row)">编辑</el-button><el-buttontype="danger"@click="handleDelete(scope.$index, scope.row)">删除</el-button></template></el-table-column></el-table><!--分页--><el-pagination@size-change="handleSizeChange"@current-change="handleCurrentChange":current-page="currentPage":page-sizes="[5, 10, 15, 20]":page-size="100"layout="total, sizes, prev, pager, next, jumper":total="totalCount"></el-pagination>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script src="element-ui/lib/index.js"></script>
<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
<script>new Vue({el: "#app",mounted() {this.selectAll();},data() {return {//表内数据与查询的数据tableData: [],brandSelect: {status: '',brandName: '',companyName: '',description: '',id: '',ordered: '',},//add与update表单显示开关,方法选择,使用的模型dialogVisible: false,method: '',brand: {},//复选框数据,选中的要删除的数据multipleSelection: [],selectedIds: [],//分页数据pageSize: 5,totalCount: 100,currentPage: 1,}},methods: {//添加功能与修改功能handleAdd() {this.method = '添加';this.brand = {status: '',brandName: '',companyName: '',description: '',id: '',ordered: '',};this.dialogVisible = true},handleEdit(index, row) {this.method = '修改'this.brand = this.tableData[index];this.brand.status = String(this.brand.status)this.dialogVisible = true;},addBrand() {axios.post("http://localhost/web_demo6_war/brand/add", this.brand).then(resp => {if (resp.data == "success") {this.dialogVisible = false;this.$message({message: '添加成功',type: 'success'});this.selectAll();}})},updateBrand() {axios.post("http://localhost/web_demo6_war/brand/update", this.brand).then(resp => {if (resp.data == "success") {this.dialogVisible = false;this.$message({message: '修改成功',type: 'success'});this.selectAll();}})},cancelUpdate() {this.dialogVisible = falsethis.$message({message: '已取消修改',});this.selectAll()},//删除功能handleDelete(index, row) {this.$confirm('此操作将永久删除改公司信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {axios.get("http://localhost/web_demo6_war/brand/deleteById?id=" + this.tableData[index].id).then(resp => {if (resp.data == "success") {this.$message({message: '删除成功',type: 'success'});this.selectAll();}})}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},//批量删除功能handleSelectionChange(val) {this.multipleSelection = val;console.log(this.multipleSelection);},deleteByIds() {for (let i = 0; i < this.multipleSelection.length; i++) {let selectedElement = this.multipleSelection[i];this.selectedIds[i] = selectedElement.id;}this.$confirm('此操作将永久删除改公司信息, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {if (this.selectedIds.length != 0) {axios.post("http://localhost/web_demo6_war/brand/deleteByIds", this.selectedIds).then(resp => {if (resp.data == "success") {this.$message({message: '删除成功',type: 'success'});this.selectAll();}})this.selectedIds = [];} else {this.$message({message: '需要选中几个数据',type: 'warning'});}}).catch(() => {this.$message({type: 'info',message: '已取消删除'});});},//分页工具条方法handleSizeChange(val) {console.log(`每页 ${val} 条`);this.pageSize = val;this.selectAll();},handleCurrentChange(val) {console.log(`当前页: ${val}`);this.currentPage = val;this.selectAll();},//查询分页:selectAll() {axios.post("http://localhost/web_demo6_war/brand/selectByPageAndCondition?currentPage=" + this.currentPage + "&pageSize=" + this.pageSize,this.brandSelect).then(resp => {this.tableData = resp.data.rows;this.totalCount = resp.data.totalCount;console.log(this.tableData);})},}})
</script>
</body>
</html>

 

  

在本文的最后,说一些最近的感想:

学习这类技术似乎不能太认真,或许会浪费大把的时间

“作数”或许就行了!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_997294.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue3的基本使用(1)

Vue3的基本使用&#xff08;1&#xff09; 初识vue31. vue3简介2. 性能提升3. 源码升级 Vue3的创建1. vue-cli创建2. vite创建 Composition API的区别&#xff08;组合式&#xff09;setup函数响应式数据1. ref响应式2. reactive响应式 toRefs与toRef简单介绍 初识vue3 1. vue…

Easticsearch性能优化之索引优化

Easticsearch性能优化之索引优化 一、合理的索引设计二、合理的分片和副本三、合理的索引设置 对于性能优化&#xff0c;Elasticsearch&#xff08;以下简称ES&#xff09;的索引优化是提高性能的关键因素之一。合理的设计索引&#xff0c;合理的分片和副本以及合理的缓存设置等…

Matlab 机器人工具箱 例程:运动学+动力学+路径规划+可视化

文章目录 1 创建机器人2 机器人显示3 机器人示教4 机器人路径规划&#xff1a;给定关节角路径5 机器人路径规划&#xff1a;给定末端位姿&#xff0c;求关节角路径6 工作空间可视化参考链接 1 创建机器人 clc;clear;close all; deg pi/180;L1 Revolute(d, 0, a, 0, alpha, 0,…

sudo command not found

文章目录 一句话Intro其他操作 一句话 sudo 某命令 改成 sudo -i 某命令 试试。 -i 会把当前用户的环境变量带过去&#xff0c;这样在sudo的时候&#xff0c;有更高的权限&#xff0c;有本用户的环境变量(下的程序命令)。 -i, --login run login shell as the target user; a …

蓝桥杯嵌入式模板构建——RCT时钟

在CubeMX里的RTC模块启用RTC时钟和日历功能 输入到RTC的时钟要配置成1HZ,这样的话RTC每经过1s走时一次 由于RTC时钟默认配置为32Khz 所以我们需要将异步分频值与同步分频值的乘积调整为32K分频即可一秒走时一次 频率&#xff1a;32000hz / 32000hz 1hz 必须是31和999&#…

数字化转型导师坚鹏:如何制定证券公司数字化转型年度培训规划

如何制定与实施证券公司数字化转型年度培训规划 ——以推动证券公司数字化转型战略落地为核心&#xff0c;实现知行果合一 课程背景&#xff1a; 很多证券公司都在开展数字化转型培训工作&#xff0c;目前存在以下问题急需解决&#xff1a; 缺少针对性的证券公司数字化转型…

Java定时调度

在Java应用程序中&#xff0c;定时调度是一项重要的任务。它允许你安排代码执行的时间&#xff0c;以便在将来的某个时刻自动执行任务。Java提供了多种方式来实现定时调度&#xff0c;其中最常用的是Java的Timer和ScheduledExecutorService。 在本教程中&#xff0c;我们将学习…

力扣新思路:改变字符串进行返回操作

我们在对字符串进行判断操作和返回操作时&#xff0c;可以增加\0来简化返回操作 char* longestCommonPrefix(char** strs, int strsSize) {if(strsSize0){return"";}for(int i0;i<strlen(strs[0]);i){for(int j1;j<strsSize;j){if(strs[0][i]!strs[j][i]) {s…

自动化测试之web自动化(Selenium)

&#x1f525; 交流讨论&#xff1a;欢迎加入我们一起学习&#xff01; &#x1f525; 资源分享&#xff1a;耗时200小时精选的「软件测试」资料包 &#x1f525; 教程推荐&#xff1a;火遍全网的《软件测试》教程 &#x1f4e2;欢迎点赞 &#x1f44d; 收藏 ⭐留言 &#x1…

【JavaEE初阶】 JVM 运行时数据区简介

文章目录 &#x1f343;前言&#x1f332;堆&#xff08;线程共享&#xff09;&#x1f384;Java虚拟机栈&#xff08;线程私有&#xff09;&#x1f38b;本地方法栈&#xff08;线程私有&#xff09;&#x1f333;程序计数器&#xff08;线程私有&#xff09;&#x1f334;方法…

尤雨溪:Vue 未来展望新的一轮

十年&#xff0c;一个既漫长又短暂的时光跨度&#xff0c;对于技术世界来说&#xff0c;更是沧海桑田的瞬间。在这十年里&#xff0c;Vue.js 从无到有&#xff0c;从默默无闻到蜚声全球&#xff0c;不仅改变了前端开发的面貌&#xff0c;更成为了无数开发者手中的得力工具。 在…

【漏洞复现】-用友CRM 任意文件读取漏洞

免责声明&#xff1a; 本文内容为学习笔记分享&#xff0c;仅供技术学习参考&#xff0c;请勿用作违法用途&#xff0c;未授权的攻击属于非法行为&#xff01;文章中敏感信息均已做多层打马处理。任何个人和组织利用此文所提供的信息而造成的直接或间接后果和损失&#xff0c;…

MySQL面试题纯享版

基础内容 1、MySQL的架构分层 2、一条 SQL 查询语句的执行流程 3、如何查看 MySQL 服务被多少个客户端连接了&#xff1f; 4、 空闲连接会一直占用着吗&#xff1f; 5、MySQL 的连接数有限制吗&#xff1f; 6、 怎么解决长连接占用内存的问题&#xff1f; 7、执行器与存储引擎…

Java输入和输出处理

一、Java I/O 文件、内存、键盘--->程序--->文件、内存、控制台 二、文件 相关记录或放在一起的数据的集合 思考&#xff1a; Java程序如何访问文件属性&#xff1f; 解答&#xff1a; Java API:java.io.File类 三、File类 File类的常用方法 方法名称说明boole…

el-dialog封装组件

父页面 <template><div><el-button type"primary" click"visible true">展示弹窗</el-button><!-- 弹窗组件 --><PlayVideo v-if"visible" :visible.syncvisible /></div> </template><sc…

Hive的性能优化

1.调优概述 Hive 作为大数据领域常用的数据仓库组件&#xff0c;在设计和查询时要特别注意效率。影响 Hive 效率的几乎从不是数据量过大&#xff0c;而是数据倾斜、数据冗余、Job或I/O过多、MapReduce分配不合理等等。对 Hive 的调优既包含 Hive 的建表设计方面&#xff0c;对H…

12.WEB渗透测试-Linux系统管理、安全加固(下)

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 内容参考于&#xff1a; 易锦网校会员专享课 上一个内容&#xff1a;11.WEB渗透测试-Linux系统管理、安全加固&#xff08;上&#xff09;-CSDN博客 Linux任务…

安卓玩机工具推荐----高通芯片9008端口读写分区 备份分区 恢复分区 制作线刷包 工具操作解析

上期解析了下adb端口备份分区的有关操作 安卓玩机工具推荐----ADB状态读写分区 备份分区 恢复分区 查看分区号 工具操作解析 在以往的博文中对于高通芯片机型的分区读写已经分享了很多。相关类似博文 安卓备份分区----手动查询安卓系统分区信息 导出系统分区的一些基本操作 …

策略梯度网络

策略梯度网络是强化学习中的一类算法,它们直接学习一个策略,该策略可以映射从环境状态到采取的动作。与值函数方法(如Q学习和深度Q网络)不同,策略梯度方法通过优化策略本身来实现目标,即直接调整其输出动作的概率,以最大化累积奖励。这类方法的核心优势在于它们能够自然…

专治Java底子差,线程操作篇(1)

&#x1f497;推荐阅读文章&#x1f497; &#x1f338;JavaSE系列&#x1f338;&#x1f449;1️⃣《JavaSE系列教程》&#x1f33a;MySQL系列&#x1f33a;&#x1f449;2️⃣《MySQL系列教程》&#x1f340;JavaWeb系列&#x1f340;&#x1f449;3️⃣《JavaWeb系列教程》…