记录一下，以便复习
这里写自定义目录标题
一.分类列表
分类列表静态页面
<div class="menu-item menu-in top">
<div class="area-in">
<div class="area-bg">
<div class="menu-srot">
<div class="sort-side">
<dl class="dl-sort" v-for="c2 in c1.categories">
<dt><span title="蛋糕">{{c2.categoryName}}</span></dt>
<dd v-for="c3 in c2.categories"><a title="蒸蛋糕" href="search.html"><span>{{c3.categoryName}}</span></a></dd>
</dl>
</div>
<div class="brand-side">
<dl class="dl-sort"><dt><span>实力商家</span></dt>
<dd><a rel="nofollow" title="呵官方旗舰店" target="_blank" href="#" rel="nofollow"><span class="red" >呵官方旗舰店</span></a></dd>
<dd><a rel="nofollow" title="格瑞旗舰店" target="_blank" href="#" rel="nofollow"><span >格瑞旗舰店</span></a></dd>
<dd><a rel="nofollow" title="飞彦大厂直供" target="_blank" href="#" rel="nofollow"><span class="red" >飞彦大厂直供</span></a></dd>
<dd><a rel="nofollow" title="红e·艾菲妮" target="_blank" href="#" rel="nofollow"><span >红e·艾菲妮</span></a></dd>
<dd><a rel="nofollow" title="本真旗舰店" target="_blank" href="#" rel="nofollow"><span class="red" >本真旗舰店</span></a></dd>
<dd><a rel="nofollow" title="杭派女装批发网" target="_blank" href="#" rel="nofollow"><span class="red" >杭派女装批发网</span></a></dd>
</dl>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="static/js/quick_links.js "></script>
<script type="text/javascript" src="static/js/cookie_utils.js"></script>
<script type="text/javascript" src="static/js/vue.js"></script>
<script type="text/javascript" src="static/js/axios.min.js"></script>
<script type="text/javascript">
var baseUrl = "http://localhost:8080/";
var vm = new Vue({
el: "#container",
data: {
username: "",
userimg: "",
isLogin: false,
indeximgs: [],
categories: []
},
created: function () {
var token = getCookieValue("token");
if (token != null) {
this.isLogin = true;
this.username = getCookieValue("username");
this.userimg = getCookieValue("userimg");
console.log(this.username);
}
var url = baseUrl + "index/indeximg";
axios.get(url).then((res) => {
var vo = res.data;
this.indeximgs = vo.data;
console.log(this.indeximgs);
setTimeout(function () {
$('.am-slider').flexslider();
}, 100);
});
var url1 = baseUrl + "index/category-list";
axios.get(url1).then((res) => {
console.log(res.data.data);
this.categories = res.data.data;
console.log(JSON.stringify(this.categories[0].categoryName))
//初始化分类列表的动画效果
setTimeout(function () {
$("li").hover(function () {
$(".category-content .category-list li.first .menu-in").css(
"display", "none");
$(".category-content .category-list li.first").removeClass(
"hover");
$(this).addClass("hover");
$(this).children("div.menu-in").css("display", "block")
}, function () {
$(this).removeClass("hover")
$(this).children("div.menu-in").css("display", "none")
});
}, 100);
});
}
})
</script>
CategoryMapper
import com.qfedu.fmmall.entity.Category;
import com.qfedu.fmmall.entity.CategoryVO;
import com.qfedu.fmmall.general.GeneralDAO;
import org.springframework.stereotype.Repository;
import java.util.List;
@Repository
public interface CategoryMapper extends GeneralDAO<Category> {
public List<CategoryVO> selectAllCategories();
//2.子查询：根据parentId查询子分类
public List<CategoryVO> selectAllCategories2(int parentId);
//3.查询一级类别
public List<CategoryVO> selectFirstLevelCategories();
}
CategoryMapper.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.qfedu.fmmall.dao.CategoryMapper">
<resultMap id="BaseResultMap" type="com.qfedu.fmmall.entity.Category">
<!--
WARNING - @mbg.generated
-->
<id column="category_id" jdbcType="INTEGER" property="categoryId" />
<result column="category_name" jdbcType="VARCHAR" property="categoryName" />
<result column="category_level" jdbcType="INTEGER" property="categoryLevel" />
<result column="parent_id" jdbcType="INTEGER" property="parentId" />
<result column="category_icon" jdbcType="VARCHAR" property="categoryIcon" />
<result column="category_slogan" jdbcType="VARCHAR" property="categorySlogan" />
<result column="category_pic" jdbcType="VARCHAR" property="categoryPic" />
<result column="category_bg_color" jdbcType="VARCHAR" property="categoryBgColor" />
</resultMap>
<resultMap id="categoryVOMap" type="com.qfedu.fmmall.entity.CategoryVO">
<id column="category_id1" jdbcType="INTEGER" property="categoryId"/>
<result column="category_name1" jdbcType="VARCHAR" property="categoryName"/>
<result column="category_level1" jdbcType="INTEGER" property="categoryLevel"/>
<result column="parent_id1" jdbcType="INTEGER" property="parentId"/>
<result column="category_icon1" jdbcType="VARCHAR" property="categoryIcon"/>
<result column="category_slogan1" jdbcType="VARCHAR" property="categorySlogan"/>
<result column="category_pic1" jdbcType="VARCHAR" property="categoryPic"/>
<result column="category_bg_color1" jdbcType="VARCHAR" property="categoryBgColor"/>
<collection property="categories" ofType="com.qfedu.fmmall.entity.CategoryVO">
<id column="category_id2" jdbcType="INTEGER" property="categoryId"/>
<result column="category_name2" jdbcType="VARCHAR" property="categoryName"/>
<result column="category_level2" jdbcType="INTEGER" property="categoryLevel"/>
<result column="parent_id2" jdbcType="INTEGER" property="parentId"/>
<collection property="categories" ofType="com.qfedu.fmmall.entity.CategoryVO">
<id column="category_id3" jdbcType="INTEGER" property="categoryId"/>
<result column="category_name3" jdbcType="VARCHAR" property="categoryName"/>
<result column="category_level3" jdbcType="INTEGER" property="categoryLevel"/>
<result column="parent_id3" jdbcType="INTEGER" property="parentId"/>
</collection>
</collection>
</resultMap>
<select id="selectAllCategories" resultMap="categoryVOMap">
select c1.category_id 'category_id1',
c1.category_name 'category_name1',
c1.category_level 'category_level1',
c1.parent_id 'parent_id1',
c1.category_icon 'category_icon1',
c1.category_slogan 'category_slogan1',
c1.category_pic 'category_pic1',
c1.category_bg_color 'category_bg_color1',
c2.category_id 'category_id2',
c2.category_name 'category_name2',
c2.category_level 'category_level2',
c2.parent_id 'parent_id2',
c3.category_id 'category_id3',
c3.category_name 'category_name3',
c3.category_level 'category_level3',
c3.parent_id 'parent_id3'
from category c1
inner join category c2
on c2.parent_id = c1.category_id
left join category c3
on c3.parent_id = c2.category_id
where c1.category_level = 1
</select>
</mapper>
CategoryService
package com.qfedu.fmmall.service;
import com.qfedu.fmmall.vo.ResultVO;
public interface CategoryService {
public ResultVO listCategories();
}
CategoryServiceImpl
package com.qfedu.fmmall.service.impl;
import com.qfedu.fmmall.dao.CategoryMapper;
import com.qfedu.fmmall.entity.CategoryVO;
import com.qfedu.fmmall.vo.ResStatus;
import com.qfedu.fmmall.vo.ResultVO;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public class CategoryServiceImpl implements com.qfedu.fmmall.service.CategoryService {
@Autowired
private CategoryMapper categoryMapper;
@Override
public ResultVO listCategories() {
List<CategoryVO> categoryVOS = categoryMapper.selectAllCategories();
return new ResultVO(ResStatus.OK,"success",categoryVOS);
}
}
IndexController
import io.swagger.annotations.ApiOperation;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@RestController
@CrossOrigin
@RequestMapping("/index")
@Api
public class IndexController {
@Autowired
private IndexImgService indexImgService;
@GetMapping("/indeximg")
@ApiOperation("首页轮播图接口")
public ResultVO listIndexImgs(){
return indexImgService.listIndexImgs();
}
@Autowired
private CategoryService categoryService;
@GetMapping("/category-list")
public ResultVO listCategories(){
return categoryService.listCategories();
}
}
