麦当劳点餐结账页面

 功能

• 传数据 父组件的参数传给子组件 得到 渲染 
• 分页
• 复选框的是否选中 element-ui的事件和属性
• 动态数据响应 vuex 

实现：

使用element-plus的Tabs标签页        

用到的Tabs的事件：

事件名	说明	回调参数
tab-click	tab 被选中时触发	(pane: TabsPaneContext, ev: Event)

用到的Tabs属性

属性名	说明	类型	可选值	默认值
model-value / v-model	绑定值，选中选项卡的 name	string / number	—	第一个选项卡的 name

设置点击事件  将id赋值作为给name属性

 <el-tabs type="border-card" @tab-click="handleClick" >
        <div v-for="item in typelist" :key="item.id" >
        <el-tab-pane :label="item.content" :name="item.id" >            
            
        </el-tab-pane>
        </div>

 handleClick(tab, event) {
            this.type = tab.props.name;
            console.log(this.type);
            console.log(event);
            this.queryByTypeByPage();
            
        },

方法参数为tab,event 

通过tab.props.name得到属性name的值item.id

使用data里的type发送请求获取响应分类的商品

方法2：父组件传递动态参数给子组件——用props

  methods: {
        showByType() {
            var that = this;
          
            that.$axios.get("food/querybytype?type="+that.type)
                .then(function (resp) {
                    that.foods = resp.data;
                    console.log(that.foods)
                })
                .catch(function (error) {
                    //处理错误情况
                    console.log(error);
                    alert("服务器出错..")
                })
        },

分页

使用element-plus的Pagination 分页

        <el-pagination :current-page="currentPage" :page-size="pageSize" :total="total" background @current-change="handleCurrentChange" layout="prev, pager, next" />

使用的属性 

属性名	说明	类型	可选值	默认值
total	总条目数	number	—	—
page-sizes	每页显示个数选择器的选项设置	number[]	—	[10, 20, 30, 40, 50, 100]
current-page	当前页数，支持 v-model 双向绑定	number	—	1
layout	组件布局，子组件名用逗号分隔	string	sizes / prev / pager / next / jumper / -> / total / slot	'prev, pager, next, jumper, ->, total'

使用的事件

事件名	说明	参数
current-change	current-page 改变时触发	新当前页

初始数据

   data() {
        return {
            typelist: [],
            Foods: [],
            type: 1,
            fit: 'fill',
            //分页          
            //页码
            currentPage: 1,
            //页容量
            pageSize: 3,
            total:0
        };
    },

切换页事件

  handleCurrentChange(newPage) {
            this.currentPage = newPage;
            this.queryByTypeByPage();

        },

发送请求 将 分页条件：type类别 当前页页数：currentPage  页容量：pageSize 发送给后端

返回total 总记录数 和 总记录recodes 

queryByTypeByPage() {
            var that = this;
            that.$axios.get("food/querybytypepage?type=" + that.type + "&currentPage=" + that.currentPage +"&pageSize="+that.pageSize)
                .then(function (resp) {
                    that.Foods = resp.data.recodes;
                    that.total = resp.data.totalPages;
                    console.log(that.Foods)
                })
                .catch(function (error) {
                    //处理错误情况
                    console.log(error);
                    alert("服务器出错..")
                })
        },

分页——后端

controller层

    private void queryByTypeAndPage(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.编码处理
        request.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=UTF-8");

        //获取请求参数
        //页码
        int currentPageInt =1;//默认第一页
        String currentPage = request.getParameter("currentPage");
        if (currentPage != null && !currentPage.isEmpty()){
            //转换int类型
            currentPageInt = Integer.parseInt(currentPage);
        }
        int pageSizeInt = 3; //默认页容量
        String pageSize = request.getParameter("pageSize");
        if (pageSize != null && !pageSize.isEmpty()){
            //转换int类型
            pageSizeInt = Integer.parseInt(pageSize);
        }

        int type = Integer.parseInt(request.getParameter("type"));
        IFoodService iFoodService= BeanFactory.createBean(IFoodService.class);
        Page<Food> foods = iFoodService.queryByConditionByPage(currentPageInt, pageSizeInt, type);



        ResponseData<Page<Food>> r = null;
        if (foods !=null){
            r = ResponseDataUtil.buildOk(foods);
        }else {
            r = ResponseDataUtil.buildOk(ResultEnums.NOT_FOUND);
        }
        ResponseJSONUtil.responseJSON(r,response);
    }

 service层

@Override
    public Page<Food> queryByConditionByPage(int currentPageInt, int pageSizeInt, int type) {
        Page<Food> page = new Page<>(currentPageInt,pageSizeInt);
        page.setCount(foodDao.count(type));//总记录数 带条件的记录数查询
        page.setRecodes(foodDao.selectByPage(currentPageInt,pageSizeInt,type));
        return page;

    }

通过总记录数count和pageSizeInt页容量 可得到 总页数 

分页的vo类

package com.fs.food.vo;


import java.util.ArrayList;
import java.util.List;

public class Page<T> {
    private int currentPage;//当前页码
    private int pageSize;//页容量
    private int count;//总记录数
    private int totalPages;//总页数
    private List<T> recodes = new ArrayList<>();//当前页记录

    public Page() {
    }

    public Page(int currentPage, int pageSize) {
        this.currentPage = currentPage;
        this.pageSize = pageSize;
    }

    public int getCurrentPage() {
        return currentPage;
    }

    public void setCurrentPage(int currentPage) {
        this.currentPage = currentPage;
    }

    public int getPageSize() {
        return pageSize;
    }

    public void setPageSize(int pageSize) {
        this.pageSize = pageSize;
    }

    public int getCount() {
        return count;
    }

    public void setCount(int count) {
        this.count = count;
    }

    public int getTotalPages() {
        int page = this.count/this.pageSize;
        //有余数 下一页
        return this.count % this.pageSize == 0 ? page : page+1;
    }
//总页数  = 总记录数 % 页容量  向上取整
//    public void setTotalPages(int totalPages) {
//        this.totalPages = totalPages;
//    }

    public List<T> getRecodes() {
        return recodes;
    }

    public void setRecodes(List<T> recodes) {
        this.recodes = recodes;
    }
}

dao层的实现类

@Override
    public int count(int type) {

        StringBuffer sql = new StringBuffer(" SELECT COUNT(1) FROM tb_food WHERE 1=1 ");
        //给？ 赋值 值的顺序与？顺序一致 list集合 不可重复 有序
        List<Object> paramList = new ArrayList<>();
        //封装拼接sql
        appendSql(sql,type,paramList);
        Connection conn = null;
        PreparedStatement psmt = null;
        ResultSet rs = null;
        try {
            conn = JDBCUtil.getConnection();
            psmt = conn.prepareStatement(sql.toString());
            //给?赋值
            for (int i = 0; i < paramList.size(); i++) {
                psmt.setObject(i+1,paramList.get(i));
            }
            rs = psmt.executeQuery();
            rs.next();
            return rs.getInt(1);

        } catch (SQLException throwables) {
            throwables.printStackTrace();
        }finally {
            JDBCUtil.close(rs,psmt,conn);
        }
        return 0;
    }



 @Override
    public List<Food> selectByPage(int currentPageInt, int pageSizeInt, int type) {
        StringBuffer  sql =new StringBuffer("SELECT id,name,price,type,img_path as imgPath,hot FROM tb_food WHERE 1=1 ");
        List<Object> paramList = new ArrayList<>();
        appendSql(sql,type,paramList);
        //拼接limit
        sql.append("limit ?,?");
        paramList.add((currentPageInt-1)*pageSizeInt);
        paramList.add(pageSizeInt);

        List<Food> foods =JDBCUtil.executeQuery(sql.toString(),Food.class,paramList.toArray());
        return foods;
    }
    private void appendSql(StringBuffer sql, int type, List<Object> paramList) {
        if (type != 0){
             sql.append(" AND type = ? ");
             paramList.add(type);
        }
    }