一、数据库字段名与实体类名不一样导致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);
});