行业知识
Ajax、Axios、Vue、Element与其案例
2026-11-15 05:30:31
来源：互联网转载
���录
一.Ajax
二.Axios
三.Vue
四.Element
五.增删改查案例
一.依赖：数据库，mybatis，servlet，json-对象转换器
二.资源：element+vue+axios
三.pojo
四.mapper.xml与mapper接口
五.service
六.servlet
七.html页面
建立web工程
需要的依赖：
javax.servlet javax.servlet-api 3.1.0 com.alibaba fastjson 1.2.62
一.Ajax
AJAX(Asynchronous JavaScript And XML)：异步的js和xml异步交互：与服务器交换数据并且更新部分网页的技术（局部刷新），操作无需等待服务器响应，直到数据响应回来才改变html页面本案例使用ajax请求数据与处理响应数据，发送路径需要使用全路径
01ajax.html:
Title 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); } }; @WebServlet("/ajaxServlet")public class AJAXServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write("Hello,AJAX!"); } @Override protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doGet(request, response); }}
二.Axios
Axios对原生的ajax封装，简化书写使用准备：导入js文件，放到js文件里面，在本文件中引入js本案例为使用axios用不同请求方式请求数据并处理响应数据
02axios.html:
Title 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)}) @WebServlet("/axiosServlet")public class AxiosServlet extends HttpServlet { @Override protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { response.getWriter().write(request.getMethod()); } @Override protected 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模块中使用methods3.通过输入展示不同标签 1.if else：使用v-if="条件"属性 2.展示内容与否:使用v-show标签4.遍历模型：使用v-for=""属性 在此案例中addr为局部变量名称，根据情况选择是否使用索引 Title
{{url}}
{{url}}
p1 p2 p3 p4
{{addr}}
{{i+1}}--{{addr}}
new Vue({//创建vue核心对象 el:"#app",//作用范围 methods:{//方法 show(){ alert("按钮被点击") } }, data(){//模型数据 return { url:"https://www.baidu.com", count:1, addrs:["北京","上海","西安"] } }, mounted(){//页面加载完成后的方法 alert("加载完成") } })
四.Element
1.复制粘贴element-ui文件2.引文件使用：然后去官网复制粘贴即可
Title 默认按钮 主要按钮 成功按钮 信息按钮 警告按钮 危险按钮 new Vue({ el:"#app" }) 五.增删改查案例
新建Web项目
一.依赖：数据库，mybatis，servlet，json-对象转换器
mysql mysql-connector-java 5.1.32 org.mybatis mybatis 3.5.5 javax.servlet javax.servlet-api 3.1.0 provided com.alibaba fastjson 1.2.62
二.资源：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; } @Override public String toString() { return "Brand{" + ", brandName='" + brandName + '\'' + ", companyName='" + companyName + '\'' + ", ordered=" + ordered + ", description='" + description + '\'' + ", status=" + status + '}'; }} pagebean类用于存放一页的数据与总数量
public class PageBean { private int totalCount; private List rows; public PageBean() { } public PageBean(int totalCount, List rows) { this.totalCount = totalCount; this.rows = rows; } public int getTotalCount() { return totalCount; } public void setTotalCount(int totalCount) { this.totalCount = totalCount; } public List getRows() { return rows; } public void setRows(List rows) { this.rows = rows; }} 四.mapper.xml与mapper接口
使用到了批量删除、模糊查询、分页查询
delete from tb_brand where id in #{id} ; select * from tb_brand and status=#{brand.status} and company_name like #{brand.companyName} and brand_name like #{brand.brandName} limit #{begin},#{size} select count(*) from tb_brand and status=#{status} and company_name like #{companyName} and brand_name like #{brandName} 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 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 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 pageBean=new PageBean(mapper.selectCountByCondition(brand), mapper.selectByPageAndCondition((currentPage-1)*pageSize,pageSize,brand)); sqlsession.close(); return pageBean; }} 六.servlet
服务类中使用反射判别不同的请求路径去访问不同方法
public class BaseServlet extends HttpServlet { @Override protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException { String uri=req.getRequestURI(); String methodName=uri.substring(uri.lastIndexOf('/')+1); Class
