黑马javaWeb Brand综合案例(包括作业) 分页查询品牌名称和企业名称就查不出来

01-综合案例-环境搭建

02-查询所有-后台&前台

03-新增品牌-后台&前端

01-Servlet 代码优化

作业:修改品牌

在java目录下的 com.hailei.mapper.BrandMapper 接口中定义抽象方法，并使用 @Select 注解编写 sql 语句Dao层:BrandMapper

//修改数据
    @Update("update tb_brand set brand_name = #{brandName},company_name = #{companyName},ordered = #{ordered},description = #{description},status = #{status} where id = #{id}")
    void update(Brand brand);

Service层:

BrandService.interface:

void update(Brand brand);

BrandServiceImpl:

 @Override
    public void update(Brand brand) {
        //2.获取SqlSessionFactory对象
        SqlSession sqlSession=factory.openSession();
        //3.获取BrandMapper
        BrandMapper mapper = sqlSession.getMapper(BrandMapper.class);
        //4.调用方法
        mapper.update(brand);
        sqlSession.commit();//提交事务
        //5.释放资源
        sqlSession.close();
    }

Web层:BrandServlet

public void update(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.接受JSON格式的Brand数据
        BufferedReader br=request.getReader();
        String params=br.readLine();//JSON字符串
        //JSON转为Brand对象
        Brand brand = JSON.parseObject(params, Brand.class);

        //2.调用service添加
        brandService.update(brand);
        //3.响应成功的标识
        response.getWriter().write("success");
    }

brand.html:

<el-button type="primary" @click=startUpdate(scope.row)>修改</el-button>

靠上面这一行和 startUpdate(row)

实现怎么点击"修改" 回传id 不然我原来修改数据的表单还得填写id 才能修改;

startUpdate(row) {}//执行修改的onclick

updateBrand(){} // 修改数据

<div id="app">

    <!--搜索表单-->
    <!--按钮-->
    <el-row>
        <el-button type="danger" plain>批量删除</el-button>
        <el-button type="primary" plain @click="dialogVisible = true">新增</el-button>
    </el-row>
    <!--添加数据对话框表单-->
    <!--表格-->
    <template>
        <el-table
                :data="tableData"
                style="width: 100%"
                :row-class-name="tableRowClassName"
                @selection-change="handleSelectionChange"
        >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    type="index"
                    width="50">
            </el-table-column>

            <el-table-column
                    prop="brandName"
                    label="品牌名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="companyName"
                    label="企业名称"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="ordered"
                    align="center"
                    label="排序">
            </el-table-column>
            <el-table-column
                    prop="status"
                    align="center"
                    label="当前状态">
            </el-table-column>

            <el-table-column
                    align="center"
                    label="操作">
                <template slot-scope="scope">
                    <!--不知道有啥用,应该是匹配下面的scope.row-->
                <el-row>
                    <el-button type="primary" @click=startUpdate(scope.row)>修改</el-button>
                    <el-button type="danger">删除</el-button>
                </el-row>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <!--修改数据对话框表单-->
    <el-dialog
            title="修改品牌"
            :visible.sync="dialogVisibleupdate"
            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-value="1"
                           inactive-value="0"
                ></el-switch>
            </el-form-item>


            <el-form-item>
                <el-button type="primary" @click="updateBrand">提交</el-button>
                <el-button @click="dialogVisibleupdate = false">取消</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
    <!--分页工具条-->   
</div>
<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 src="js/axios-0.18.0.js"></script>
<script>
    new Vue({
        el: "#app",
        //页面加载完成之后发送异步请求,获取列表数据
        mounted(){//生命周期函数mounted 实现 页面加载完成
            this.selectAll();
            /*var _this=this;//this不能再axios直接使用,要把this生命周期提一下
            //发送异步请求使用axios,将axios-0.18.0.js文件引到当前页面
            axios({
                method:"get",
                url:"http://localhost:8080/brand-case/selectAllServlet"
            }).then(function (resp){//获取响应
                _this.tableData=resp.data;
            })*/
        },
        methods: {
            //查询所有数据的方法
            selectAll(){
                var _this=this;//this不能再axios直接使用,要把this生命周期提一下
                //发送异步请求使用axios,将axios-0.18.0.js文件引到当前页面
                axios({
                    method:"get",
                    url:"http://localhost:8080/brand-case/brand/selectAll"
                }).then(function (resp){//获取响应
                    _this.tableData=resp.data;
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            // 复选框选中后执行的方法
            handleSelectionChange(val) {
                this.multipleSelection = val;

                console.log(this.multipleSelection)
            },
            // 查询方法
            onSubmit() {
                console.log(this.brand);
            },
            // 添加数据
            addBrand(){
                //console.log(this.brand);

                var _this=this;
                //发送ajax请求,添加数据
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/brand/add",
                    data:_this.brand
                }).then(function(resp) {
                    if(resp.data=="success"){//返回的是success,代表添加成功

                        //关闭窗口
                        _this.dialogVisible=false;
                        //增加完要重新查询
                        _this.selectAll();
                        //弹出消息提示
                        _this.$message({
                            message:'恭喜你,添加成功',
                            type:'success'
                        })
                    }
                })
            },
            // 修改数据
            updateBrand(){
                //console.log(this.brand);可以获取完整数据
                var _this=this;
                //发送ajax请求,添加数据
                axios({
                    method:"post",
                    url:"http://localhost:8080/brand-case/brand/update",
                    data:_this.brand
                }).then(function(resp) {
                    if(resp.data=="success"){//返回的是success,代表添加成功
                        //录入成功,关闭窗口
                        _this.dialogVisibleupdate=false;
                        //增加完要重新查询
                        _this.selectAll();
                        //弹出消息提示
                        _this.$message({
                            message:'恭喜你,修改成功',
                            type:'success'
                        })
                    }
                })
            },
            //执行修改的onclick
            startUpdate(row) {
                // 获取改行已经有的数据，以供填入修改框
                // var _this = this
                this.brand = JSON.parse(JSON.stringify(row));
                // 弹出修改框
                this.dialogVisibleupdate = true;
            },
            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
            }
        },
        data() {
            return {
                // 当前页码
                currentPage: 4,
                // 添加/修改数据对话框是否展示的标记
                dialogVisible: false,
                dialogVisibleupdate: false,
                // 品牌模型数据
                brand: {
                    status: '',
                    brandName: '',
                    companyName: '',
                    id:"",
                    ordered:"",
                    description:""
                },
                // 复选框选中数据集合
                multipleSelection: [],
                // 表格数据
                tableData: [{
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }, {
                    brandName: '华为',
                    companyName: '华为科技有限公司',
                    ordered: '100',
                    status: "1"
                }]
            }
        }
    })
</script>
</body>
</html>

02-批量删除-后台&前端

03-分页查询-分析

04-分页查询-后台&前端

没加@ResultMap 后面品牌名称和企业名称就查不出来,老师也没说,困扰了我3个小时

@ResultMap("brandResultMap")

05-条件查询-后台

Ctrl+r 批量改代码

06-条件查询-前端

第一个问题:查不出来 报空指针异常

第一个sql写错了:

删selectTotalCount 的brand. 的时候把前一个SQL也删了

selectTotalCount SQL也是错的 应该是给注释删了就可以了 真tm服了 找了2h

我写的:

<where>         /*没加Param注解直接用属性不用加brand.*/
            <if test="brandName!=null and brandName!='' ">
                and brand_name like #{brandName}
            </if>
            <if test="companyName!=null and companyName!='' ">
                and company_name like #{companyName}
            </if>
            <if test="status!=null ">
                and status=#{status}
            </if>
        </where>

黑马写的:

<where>
            <if test="brandName != null and brandName != '' ">
                and  brand_name like #{brandName}
            </if>

            <if test="companyName != null and companyName != '' ">
                and  company_name like #{companyName}
            </if>

            <if test="status != null">
                and  status = #{status}
            </if>

        </where>

第三个问题: 不把_this变为this 就查询不了

    axios({
          method:"post",//既有url又有data要用post
          url:"http://localhost:8080/brand-case/brand/selectByPageAndCondition?currentPage="+this.currentPage+"&pageSize="+this.pageSize,
                    data:this.brand//为了分页条件查询获取brand

07-前端代码优化