9.16总结

一、数据库字段名与实体类名不一样导致vue前端接受不到数据

1.通过别名解决属性名和表字段不一致的情况

@Select("select id,title,price,old_price oldPrice,sale_count saleCount,url from product") List<Product> select();

2.通过Result注解解决属性名和表字段不一致的情况

@Select("select *from product")
@Result(column = "old_price",property = "oldPrice")
@Result(column = "sale_count",property = "saleCount")
List<Product> select();

3.配置自动识别命名规范的差异

         mybatis.configuration.map-underscore-to-camel-case=true

二、vue判断是否包含

//判断在地址栏中是否包含

wd if (location.search.indexOf("wd") != -1)  //-1 表示不包含。

三、菜单栏

         @select="handleSelect" 下拉列表点击时调用方法handleSuessass

<el-menu style="width: 1200px;margin: 0 auto"
                         :default-active="activeIndex" class="el-menu-demo"
                         background-color="#82c8ec"
                         text-color="#fff"
                         active-text-color="#fff"
                         mode="horizontal" @select="handleSelect">
                    <el-menu-item v-for="c in categoryArr" :index="c.id">{{c.name}}</el-menu-item>
</el-menu>

 @select="handleSelect"

四、split("=")[1] 对接受地址栏的信息截取

let id = location.search.split("=")[1];

split()方法将String分为有序的子字符串列表，将这些子字符串放入数组中，然后返回数组。[ x ]通过寻找下标，调用参数。

//created方法是Vue对象初始化过程中调用的方法,也就是在此方法中Vue对象，还没有创建完成, 所以不能通过v访问(实例化的Vue对象还没有赋值给v变量)  对象初始化完成之前想访问Vue对象 可以通过this来访问： this.activeIndex = id;

五、页面不做处理跳转至其他页面处理

        当点击事件发生时，不做处理，而是获取id传到其他页面 location.href="/result.html?id=" + key;

methods: {
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                //跳转到显示结果的页面 key代表分类id
                location.href="/result.html?id=" + key;
            },
            search() {
                //跳转到显示结果的页面 wd代表搜索内容名称
                location.href="/result.html?wd="+v.wd;
            }
        },

         跳转到此页面时，自动处理，获取地址栏的内容，判断是wd还是id,分别调用不同请求方法。

 let url;
            //判断在地址栏中是否包含wd
            if (location.search.indexOf("wd") != -1) {
                url = "/product/selectByWd" + location.search;
            } else {
                //分类列表
                url = "/product/selectByCid" + location.search;
            }

            axios.get(url).then(function (response) {
                v.productArr = response.data;
            })

六 、通过session对浏览量进行控制

@RequestMapping("/product/updatecount")
    public void updatecount(int id, HttpSession session) {
        //从会话中获取当前id相关信息
        String info = (String) session.getAttribute("view" + id);
        //如果没有获取到,代表没有浏览过
        if (info == null) {
            //让浏览加1
            mapper.updatecount(id);
            //把当前商品的id保存到会话对象中
            session.setAttribute("view" + id, "isVisible");
        }
    }

七、element-ui中的自带的参数和方法最好在控制台输出看看里面有什么

eg:

categoryDelete(scope.$index, scope.row)

index是数组第几行的下标，而 scope.row是一个对象里装载着许多关于生成该列表对象的属性

 categoryDelete(i, category) {
                console.log(i);
                console.log(category);
                axios.get("/category/delete?id=" + category.id);
            },

 scope.row=category,里面有对象id。

八、精髓

/删除数组数据页面会跟着改变 v.categoryArr.splice(i, 1); index是数组第几行的下标，对加载进来的数组做更改，不用再次请求，只是对页面绑定的数据更改。很棒！！

    axios.get("/category/delete?id=" + category.id).then(function () {
                    //删除数组数据页面会跟着改变
                    v.categoryArr.splice(i, 1);
                });