Vue+elementUI+ajax+java3层架构实现前后端分离踏坑总结+具体案例增删改查+批量删除+多条件查询+源码

目录

后台部分

过滤器

过滤器能做什么

跨域请求

统一设置字符编码

分页

在service进行异常处理

使用getParameter获取不到数据

原因

解决方案

前台部分

elementui怎么获取鼠标点击的那一行的索引

elementui分页

把提示信息整合成一个函数

总结

源码分享

---

后台部分

过滤器

过滤器能做什么

过滤器一般完成一些通用的操作。我们可以将通用操作的这些代码写在过滤器中，因为请求每一个资源都要经过过滤器。

注意请求和响应都要经过过滤器

跨域请求

所谓的跨域请求就是指 当前发起请求的域名与服务器的域名不一样。是一种安全策略（...）

个人开发在前后端分离时

//java后端解决跨域请求问题
package com.web.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
@WebFilter("/*")
public class Cores implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        response.setHeader("access-control-allow-methods","*");
        response.setHeader("Access-Control-Allow-Headers","*");
        response.setHeader("Access-Control-Allow-Origin","*");
        filterChain.doFilter(servletRequest,response);
    }
}

统一设置字符编码

后端由于历史原因大都采用GBK或GB2312进行编码，所有传送到前端的数据有时候会乱码

注意类型转换幺

//在过滤器中统一设置编码
package com.web.filter;
import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
 
@WebFilter("/*")
public class charsetsfilter implements Filter {
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
 
        response.setCharacterEncoding("utf-8");
        request.setCharacterEncoding("utf-8");
        filterChain.doFilter(request, response);
    }
}

分页

        当我们在前端传送多个字段，但这些字段，在后端已有放对象的无法满足需求的时候，我们应该，重新再构建一个对象，把我们所需要的字段全部都丢进去，以便JSON类型转换为java对象后好操作

        我们分页时就用到了这种思想

重新建立一个数据模型类

public class BrandPageVo {
    //前台当前页面所需的数据条数
    private Integer total;
    //响应给前台的数据对象
    private List brandList;
    //当前的页码
    private Integer current;
}

service层写方法（已去除trycatch块防止干扰视线） 

值得注意的是，分页的公式为

当前的页数减一乘以当前请求的页面中的所有数据数目

前端                    数据库

1 10         =>        1,10

2 10        =>        10,10

3 10        =>        20,10

public List selectAllBrandByPage(Integer cur, Integer pagSize) {
        String sql="SELECT * FROM tb_brand LIMIT ?,?";
        Connection connection = null;
        List list=new ArrayList<>();
            connection=DbUtils.getConnection();
            connection.setAutoCommit(false);
 
            PreparedStatement ps = connection.prepareStatement(sql);
            ps.setInt(1,(cur-1)*pagSize);
            ps.setInt(2,pagSize);
            ResultSet rs = ps.executeQuery();
 
            while (rs.next()){
                Brand brand = new Brand(
                        rs.getInt(1),
                        rs.getString(2),
                        rs.getString(3),
                        rs.getInt(4),
                        rs.getString(5),
                        rs.getInt(6)
                );
                list.add(brand);
            }
 
            connection.commit();
            DbUtils.close(rs,ps,null);
 
        return list;
    }

在service进行异常处理

当我们在dao，查询数据出错后，应该在service层进行异常处理，空值判断，字符串校验等等，以及返回给servlet层的值

题外话

在判断字符串是否为空时

尽量使用 .length()>0，不要使用.equals("")这样效率最低！！

servlet拿到值后就可以响应了，尽量减少servlet的逻辑代码

使用getParameter获取不到数据

原因

原因出在http传输协议身上

1、http传输协议默认的编码方式为enctype=”application/x-www-form-urlencoded”，这种方式我们只需要调用ServletRequest 类中的getParameter()方法就可以得到表单中提交的数据。

2、传输大数据量的二进制数据时，http协议将会把编码方式设置成enctype=”multipart/form-data”，当用这种方式传输数据时，用 request.getParameter()是获取不到提交的数据的（API的规定），只能使用request.getInputStream()，request.getReader()来获取提交的数据 。

解决方案

        BufferedReader reader = request.getReader();
        String s = reader.readLine();
 
//将JSON字符串转换为对象
        Brand brand = JSON.parseObject(s, Brand.class);

前台部分

elementui怎么获取鼠标点击的那一行的索引

        这个问题苦扰了很久，百度的没有什么好的方法，最后去看的官方文档才恍然大悟！！

所以有问题，一定要先去看官方文档！！养成好习惯

        方法很简单，我们在，某一行外面套一个，然后在事件中填入参数(scope.$index,scope.row)就可以获取到所点击的这一行的所有值和索引了，第一个参数返回索引和第二个参数返回字段的所有属性（包括id）

eg:

<el-table-column label="操作">
 
          <template slot-scope="scope">
 
             <el-button type="primary" round size="small" @click="editBrandShow(scope.$index,scope.row)">修改el-button>
 
             <el-button type="danger" round size="small">删除el-button>
          template>
 
el-table-column>
 
//scrpit代码
//删除事件
            //第一个是索引，row是当前所点击的标签对象啊，通过标签id属性的即可获取到id值（真实的id值，
            // 因为我们在页面初始化时，已经将id属性绑定到了table上只是不可见而已）
            removeBrand(index, row) {
                console.log("当前索引为,当前要删除的数据的Id也为", row.id);
                axios.get(`http://localhost:8080/Web/removeBrand?id=${row.id}`).then((resp) => {
                    if (resp.status===200)
                    {
                        this.messagefun("remove",1)
                    }
                    else {
                        this.messagefun("remove",0)
                    }
                })
                //刷新页面
                location.reload();
            }

elementui分页

分页使用的控件是

常用属性：

详细看官网

组件 | Element

其中total是数据库中所有的数据数量，我们为什么还要查这个那？

因为要是我们不去进行这个判断，有可能没有数据了但是前端却还可以去选择下一页

        <div class="pagination" style="padding: 10px 0px">
            <el-pagination
                    @current-change="handleCurrentChange"
                    :current-page.sync="current"
                    :page-sizes="[10, 20, 50]"
                    v-model:page-size="pageSize"
                    layout="sizes, prev, pager, next"
                    :total="total"
                    align="center"
            >
            el-pagination>
        div>
 
 
new Vue({
            el:"#app",
            data(){
                return{
                    tableFormData:[],
                    searchForm:{
                        status:1,
                        companyName:'',
                        brandName:''
                    },
                    rowId:[],
                    dialogFormVisible:false,
                    formLabelWidth:80,
                    addEditForm:{},
                    formLabelWidth2:'80',
                    current:1,
                    pageSize:10,
                    total:0,
                }
            },
            methods:{
                //分页触发
                handleCurrentChange(){
                    let _this=this;
                    axios.get(`http://localhost:8080/brandcase/brandSelect?current=${_this.current}&pageSize=${_this.pageSize}`)
                        .then(function (resp) {
                            if (resp.status===200){
                                _this.tableFormData=resp.data.brandList
                                _this.current=resp.data.current
                                _this.total=resp.data.total
                            }
                        })
                },
 
}

把提示信息整合成一个函数

这并不是最佳实践，你可以进一步简化参数，减少函数执行时间

  messagefun(deal, status) {
                if (deal == "insert") {
                    if (status === 1) {
                        this.$message(
                            {
                                message: "数据插入成功！",
                                type: 'success'
                            })
                    } else {
                        this.$message(
                            {
                                message: "数据插入失败！",
                                type: 'warning'
                            })
                    }
                } else if (deal == "remove") {
                    if (status === 1) {
                        this.$message(
                            {
                                message: "数据删除成功！",
                                type: 'success'
                            })
                    } else {
                        this.$message(
                            {
                                message: "数据删除失败！",
                                type: 'warning'
                            })
                    }
                } else if (deal == "update") {
                    if (status === 1) {
                        this.$message(
                            {
                                message: "数据更新成功！",
                                type: 'success'
                            })
                    } else {
                        this.$message(
                            {
                                message: "数据更新失败！",
                                type: 'warning'
                            })
                    }
                } else if (deal == "search") {
                    if (status === 1) {
                        this.$message(
                            {
                                message: "数据查询成功！",
                                type: 'success'
                            })
                    } else {
                        this.$message(
                            {
                                message: "数据查询失败！",
                                type: 'warning'
                            })
                    }
                }
            }

总结

调试好难，呜呜呜

源码分享

夸克网盘
链接：https://pan.quark.cn/s/282c6a8e29aa
提取码：C4BJ

百度网盘

链接：https://pan.baidu.com/s/1XYkLshGnel2GY459lt2CLg?pwd=gtt1 
提取码：gtt1