银财中国网
servlet和vue的增删改查
创始人
2024-02-03 11:09:00
0次

1.servlet实现步骤

Servlet->新增

servlet获取请求参数，将参数转化为对象，调用service

@WebServlet("/addService")
public class addAllService extends HttpServlet {private BrandService brandService = new BrandServiceimpl() ;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {}@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1.接收请求传递的数据BufferedReader reader = req.getReader();String param = reader.readLine();//2.将 param 转化为对象Brand brand = JSON.parseObject(param,Brand.class);//3.调用service的新增方法brandService.add(brand);//4.响应数据resp.getWriter().write("success");}
}

service调用mapper方法进行查询


public class BrandServiceimpl implements BrandService {//   1. 创建sql工程对象SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();@Overridepublic void add(Brand brand) {// 2. 获取sqlsession对象SqlSession sqlSession = sqlSessionFactory.openSession();// 3.获得mapper对象BrandMapper brandMapper = (BrandMapper)sqlSession.getMapper(BrandMapper.class);// 4.调用方法brandMapper.add(brand);// 5.提交事物 增加/删除/修改sqlSession.commit();// 6.关闭资源sqlSession.close();}
}

Vue: 将输入的数据赋值给模型，给确定按钮绑定单机事件，发送请求时，将数据发送到服务器段，接收服务器响应的数据，进行判断

        提交取消new Vue({el: "#app",methods: {addBrand(){// 添加点击确定时，调用这个方法var _this = this;axios({method:"post",url:"http://localhost:8080/brand/brand/add",data:_this.brand   //发送到服务器的数据}).then(function (response) {  //请求过去获取响应数据if (response.data == "success"){//添加成功，关闭窗口_this.dialogVisible = false//再次调用方法，查询所有的方法_this.selectAll();// 添加成功提示框_this.$message({message: '操作成功',type: 'success'});}})}}data() {// 品牌模型数据brand: {status: '',brandName: '',companyName: '',id:"",ordered:"",description:""}
}

在这里插入图片描述

servlet -> 查询

servlet 调用service的方法处理请求，将查询到的数据响应回去

@WebServlet("/selectAllService")
public class SelectAllService extends HttpServlet {private BrandService brandService = new BrandServiceimpl() ;@Overrideprotected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1.调用service方法List brands = brandService.selectAll();// 2.将方法转化为jsonString s = JSON.toJSONString(brands);// 响应浏览器数据resp.setContentType("text/json;charset=utf-8");resp.getWriter().write(s);}}

service调用mapper处理请求

public class BrandServiceimpl implements BrandService {//   1. 创建sql工程对象SqlSessionFactory sqlSessionFactory = SqlSessionFactoryUtils.getSqlSessionFactory();@Overridepublic List selectAll() {// 2. 获取sqlsession对象SqlSession sqlSession = sqlSessionFactory.openSession();// 3.获得mapper对象BrandMapper brandMapper = (BrandMapper)sqlSession.getMapper(BrandMapper.class);// 4.调用方法List brands = brandMapper.selectAll();// 5.关闭资源sqlSession.close();return brands;}}

vue：当页面完成的时候，调用方法，获取数据，将响应的数据赋值到数据模型中

   new Vue({el: "#app",mounted(){// 当页面加载完成，获取数据this.selectAll();},methods: {// 查询所有数据的方法selectAll(){var _this = this;axios({method:"get",url:"http://localhost:8080/brand/brand/selectAll",}).then(function (response) {  //请求过去获取响应数据_this.tableData = response.data; // 响应的数据，复制给表单属性})}data() {return {tableData: [{brandName: '',companyName: '',ordered: '',status: ""}]}}
表格数据：

在这里插入图片描述
利用反射的方式，自动处理请求

public class BashServiet extends HttpServlet {@Overrideprotected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1. 获取请求路径String requestURI = req.getRequestURI();// 2.获取请求最后的方法int i = requestURI.lastIndexOf('/');// 3. 获取方法名称String addBrand = requestURI.substring(i+1);// 4.获取方法，执行方法,Class aClass = this.getClass();try {Method method = aClass.getMethod(addBrand, HttpServletRequest.class, HttpServletResponse.class);// 调用方法method.invoke(this,req,resp);} catch (Exception e) {e.printStackTrace();}}}

在这里插入图片描述

批量删除

servlet将请求转化为数组，调用service处理方法

    public void  deleteByIds(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {// 1.接收请求传递的数据BufferedReader reader = req.getReader();String param = reader.readLine();// 2.Json转化为数组int[] ids = JSON.parseObject(param, int[].class);brandService.deleteByIds(ids);resp.getWriter().write("success");}

service处理方法

    @Overridepublic void deleteByIds(int[] ids) {// 2. 获取sqlsession对象SqlSession sqlSession = sqlSessionFactory.openSession();// 3.获得mapper对象BrandMapper brandMapper = (BrandMapper) sqlSession.getMapper(BrandMapper.class);brandMapper.deleteByIds(ids);// 5.提交事物 增加/删除/修改sqlSession.commit();// 6.关闭资源sqlSession.close();}

vue:

// 批量删除deleteByIds(){this.$confirm('此操作将删除该数据, 是否继续?', '提示', {confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning'}).then(() => {//用户点击确认按钮//1. 创建id数组 [1,2,3], 从 this.multipleSelection 获取即可for (let i = 0; i < this.multipleSelection.length; i++) {let selectionElement = this.multipleSelection[i];this.selectedIds[i] = selectionElement.id;}//2. 发送AJAX请求var _this = this;// 发送ajax请求，添加数据axios({method:"post",url:"http://localhost:8080/brand/brand/deleteByIds",data:_this.selectedIds}).then(function (resp) {if(resp.data == "success"){//删除成功3.// 重新查询数据_this.selectAll();// 弹出消息提示_this.$message({message: '恭喜你，删除成功',type: 'success'});}})}).catch(() => {//用户点击取消按钮this.$message({type: 'info',message: '已取消删除'});});}},data() {return {// 被选中的数组selectedIds:[]}}

在这里插入图片描述
在这里插入图片描述

查询/分页

servlet接收请求，调用sevice进行查询，将结果返回到浏览器。

  public void selectByPageAndCondition(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {//1. 接收 当前页码 和 每页展示条数    url?currentPage=1&pageSize=5String _currentPage = request.getParameter("currentPage");String _pageSize = request.getParameter("pageSize");int currentPage = Integer.parseInt(_currentPage);int pageSize = Integer.parseInt(_pageSize);// 获取查询条件对象BufferedReader br = request.getReader();String params = br.readLine();//json字符串//转为 BrandBrand brand = JSON.parseObject(params, Brand.class);//2. 调用service查询PageBean pageBean = brandService.selectByPageAndCondition(currentPage,pageSize,brand);//2. 转为JSONString jsonString = JSON.toJSONString(pageBean);//3. 写数据response.setContentType("text/json;charset=utf-8");response.getWriter().write(jsonString);}

service调用mapper接口处理请求

@Overridepublic PageBean selectByPageAndCondition(int currentPage, int pageSize, Brand brand) {//2. 获取SqlSession对象SqlSession sqlSession = factory.openSession();//3. 获取BrandMapperBrandMapper mapper = sqlSession.getMapper(BrandMapper.class);//4. 计算开始索引int begin = (currentPage - 1) * pageSize;// 计算查询条目数int size = pageSize;// 处理brand条件，模糊表达式String brandName = brand.getBrandName();if (brandName != null && brandName.length() > 0) {brand.setBrandName("%" + brandName + "%");}String companyName = brand.getCompanyName();if (companyName != null && companyName.length() > 0) {brand.setCompanyName("%" + companyName + "%");}//5. 查询当前页数据List rows = mapper.selectByPageAndCondition(begin, size, brand);//6. 查询总记录数int totalCount = mapper.selectTotalCountByCondition(brand);//7. 封装PageBean对象PageBean pageBean = new PageBean<>();pageBean.setRows(rows);pageBean.setTotalCount(totalCount);//8. 释放资源sqlSession.close();return pageBean;}

mapper处理请求

在这里插入代码片