Ajax、Axios、Vue、Element与其案例

目录

一.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.mzph.cn/news/727113.shtml

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

相关文章

1909_Arm Cortex-M3编程模型

1909_Arm Cortex-M3编程模型

1909_Arm Cortex-M3编程模型 全部学习汇总&#xff1a; g_arm_cores: ARM内核的学习笔记 (gitee.com) 编程模型的部分除了单独的核心寄存器描述之外&#xff0c;它还包含有关处理器模式和软件执行和堆栈的特权级别的信息。 处理器有两种模式&#xff0c;分别是线程模式和Handle…
阅读更多...
揭秘CPU可视化：探索计算机心脏的神秘之旅

揭秘CPU可视化：探索计算机心脏的神秘之旅

在数字化飞速发展的今天&#xff0c;中央处理器&#xff08;CPU&#xff09;作为计算机的心脏&#xff0c;其复杂度和重要性不言而喻。 中央处理器&#xff0c;这个小小的芯片&#xff0c;却承载着计算机运行的所有指令和数据处理任务。它的内部构造复杂而精密&#xff0c;每一…
阅读更多...
antd-select组件样式，option下拉选中勾选样式，使用Drawer样式失效

antd-select组件样式，option下拉选中勾选样式，使用Drawer样式失效

注意&#xff1a;如果在使用抽屉Drawer组件时&#xff0c;在less写法中修改下拉样式ant-select-dropdown-menu不生效&#xff01;检查是否设置Drawer组件getContainer属性是否为false 原因&#xff1a; getContainer 属性决定了 Drawer 渲染的 HTML 节点位置&#xff0c;默认情…
阅读更多...
哪些公司在招聘GIS开发？为什么？

哪些公司在招聘GIS开发？为什么？

之前我们给大家整理汇总了WebGIS在招岗位的一些特点&#xff0c;包括行业、学历、工作经验等。WebGIS招聘原来看重这个&#xff01;整理了1300多份岗位得出来的干货&#xff01; 很多同学好奇&#xff0c;这些招GIS开发的都是哪些公司&#xff1f;主要是做什么的&#xff1f; …
阅读更多...
Java学习笔记11——内部类的继承与覆盖及总结

Java学习笔记11——内部类的继承与覆盖及总结

1、内部类的继承&#xff1a; 由于创建内部类对象的时候需要外部类的对象&#xff0c;所以在继承内部类的时候情况会比较复杂&#xff0c;需要确保内部类对象与外部类对象之间的引用正确建立&#xff0c;为了解决这个问题&#xff0c;Java提供了一种特殊的语法&#xff0c;来说…
阅读更多...
Cesium 自定义Primitive - 圆

Cesium 自定义Primitive - 圆

一、创作思路 1、创建一个自定义CustomPrimitive 2、然后根据两个点&#xff0c;生成圆 3、方便后期绘制圆 二、实现代码 1、在vue的包中加入turf. npm install turf/turf 1、创建一个CustomCirclePrimitive类,并加入更新的代码 export default class CustomCirclePrimitive …
阅读更多...
vue3 对于watch的再次理解 给响应式变量赋相同值时watch不会被触发。

vue3 对于watch的再次理解 给响应式变量赋相同值时watch不会被触发。

问题 当我给响应式变量赋相同值时watch不会被触发。 之前一直对于watch的理解是会被频繁触发&#xff0c;值变化就会被执行&#xff0c;反之computed会缓存相同值。 看官方文档也没有相关说明&#xff0c;加上赋相同值的场景占少数 结论 在 Vue 3 中&#xff0c;watch 函数默…
阅读更多...
钉钉登录前端处理

钉钉登录前端处理

可参考官网&#xff1a;扫码登录第三方网站 - 钉钉开放平台 方式一&#xff1a;网站将钉钉登录二维码内嵌到自己页面中 <script src"https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script> 在需要使用钉钉登录的地方实例以下JS对象 …
阅读更多...
【Simulink系列】——控制系统仿真基础

【Simulink系列】——控制系统仿真基础

声明&#xff1a;本系列博客参考有关专业书籍&#xff0c;截图均为自己实操&#xff0c;仅供交流学习&#xff01; 一、控制系统基本概念 这里就不再介绍类似于开环系统、闭环系统等基本概念了&#xff01; 1、数学模型 控制系统的数学模型是指动态数学模型&#xff0c;大致…
阅读更多...
车辆伤害VR安全教育培训复用性强

车辆伤害VR安全教育培训复用性强

VR工地伤害虚拟体验是一种新兴的培训方式&#xff0c;它利用虚拟现实技术为参与者提供身临其境的体验。与传统的培训方式相比&#xff0c;VR工地伤害虚拟体验具有许多优势。 首先&#xff0c;VR工地伤害虚拟体验能够模拟真实的工作环境和事故场景&#xff0c;让参与者在安全的环…
阅读更多...
基于单片机的晾衣架控制系统设计

基于单片机的晾衣架控制系统设计

目 录 摘 要 I Abstract II 引 言 1 1 系统方案设计 3 1.1 系统方案论证 3 1.2 系统工作原理 4 2 硬件设计 5 2.1 单片机 5 2.2 按键设计 7 2.3 光线检测模块 8 2.4 雨滴检测模块 9 2.5 电压比较器 10 2.6 微动步进电动机 11 2.7 硬件电路原理图 12 3 系统主要软件设计 14 3.1…
阅读更多...
Python常用语法汇总(一)：字符串、列表、字典操作

Python常用语法汇总(一)：字符串、列表、字典操作

1. 字符串处理 print(message.title()) #首字母大写print(message.uper()) #全部大写print(message.lower()) #全部小写full_name "lin" "hai" #合并字符串print("Hello, " full_name.title() "!")print("John Q. %s10s&qu…
阅读更多...
买不到的数目c++

买不到的数目c++

题目 输入样例&#xff1a; 4 7输出样例&#xff1a; 17 思路 一个字&#xff0c;猜。 一开始不知道怎么做的时候&#xff0c;想要暴力枚举对于特定的包装n, m&#xff0c;最大不能买到的数量maxValue是多少&#xff0c;然后观察性质做优化。那么怎么确定枚举结果是否正确呢…
阅读更多...
程序员的职业路径：如何选择适合自己的职业方向？

程序员的职业路径：如何选择适合自己的职业方向？

在当今数字化时代&#xff0c;作为一名程序员&#xff0c;选择正确的职业赛道至关重要。随着技术的迅速发展和市场的竞争加剧&#xff0c;程序员们需要认真思考自己的职业方向&#xff0c;并做出明智的决策。 自我评估与兴趣探索 首先&#xff0c;程序员们应该对自己进行深入…
阅读更多...
主题乐园如何让新客变熟客，让游客变“留客”？

主题乐园如何让新客变熟客，让游客变“留客”？

群硕跨越时间结识了一位爱讲故事的父亲&#xff0c;他汇集了一群幻想工程师&#xff0c;打算以故事为基础&#xff0c;建造一个梦幻的主题乐园。 这个乐园后来成为全球游客最多、收入最高的乐园之一&#xff0c;不仅在2023财年创下了近90亿&#xff08;美元&#xff09;的营收…
阅读更多...
[渗透教程]-022-内网穿透的高性能的反向代理应用

[渗透教程]-022-内网穿透的高性能的反向代理应用

frp 简介 frp 是一个专注于内网穿透的高性能的反向代理应用，支持 TCP、UDP、HTTP、HTTPS 等多种协议。可以将内网服务以安全、便捷的方式通过具有公网 IP 节点的中转暴露到公网。 项目地址 https://github.com/fatedier/frp安装 linux 配置方式见如下链接🔗 frp安装配置…
阅读更多...
Kubernetes 二进制部署 《easzlab / kubeasz项目部署》- 03-安装容器运行时

Kubernetes 二进制部署 《easzlab / kubeasz项目部署》- 03-安装容器运行时

Kubernetes 二进制部署 《easzlab / kubeasz项目部署》 03-安装容器运行时 03-安装容器运行时 项目根据k8s版本提供不同的默认容器运行时&#xff1a; k8s 版本 < 1.24 时&#xff0c;支持docker containerd 可选 k8s 版本 > 1.24 时&#xff0c;仅支持 containerd[roo…
阅读更多...
亚马逊认证考试系列 - 知识点 - EMR简介

亚马逊认证考试系列 - 知识点 - EMR简介

一、AWS EMR 简介 AWS EMR 是 Amazon Web Services 的托管 Hadoop 框架&#xff0c;它简化了在云中处理大规模数据的过程。EMR 支持基于 Hadoop、Spark、Presto 和其他大数据技术的分布式计算框架。主要特性和优势弹性伸缩&#xff1a;根据工作负载的需要自动扩展或收缩计算集…
阅读更多...
vue2实现拖拽排序效果

vue2实现拖拽排序效果

1、首先下载 vuedraggable 插件 npm i -S vuedraggable2、使用方法 <template><div><div style"display: flex; justify-content: center; align-items: center"><div style"width: 120px; height: 60px; line-height: 60px; text-align…
阅读更多...
独家揭秘：AI大模型在实践中的应用！

独家揭秘：AI大模型在实践中的应用！

在当今社会&#xff0c;人工智能技术被广泛应用于各行各业。其中&#xff0c;AI大模型作为人工智能领域的热门话题&#xff0c;正逐渐成为现实生活中的重要应用。AI大模型是一种基于深度学习和神经网络技术的计算机模型&#xff0c;能够通过大规模数据的训练和学习&#xff0c;…
阅读更多...
最新文章

Copyright @ 2022~2023