共计 6260 个字符，预计需要花费 16 分钟才能阅读完成。
考试
业务形容
将数据库中的品类 (商品分类) 信息从数据库中加载到客户端而后以 tree 构造形式进行数据的出现, 并在此 table 的根底之上拓展其它业务操作(增加, 批改, 删除)
零碎原型设计
1)参考 https://www.bootstrap-table.com 网址中的 treeGrid 进行数据出现
具体 demo 网址: https://examples.bootstraptable.com/#extensions/treegrid.html#view-source
2)参考 http://www.treejs.cn 网址中的 demo 进行实现?
具体 demo 网址:
http://www.treejs.cn/v3/faq.php#_206我的项目创立及初始化
1)数据库初始化
2) 创立 Springboot 我的项目 14-springboot-category
3)增加相干依赖 (mysql,springjdbc,mybatis,springweb,thymeleaf,lombok,devtools,actuator,…)
4) 配置文件初始化配置实现
业务外围 API 设计
1)POJO(Category)，代码如下：
2)DAO (CategoryDao-com.cy.pj.category.dao-@Mapper)，代码如下
3)com.cy.pj.category.service.CategoryService，@Service，代码如下
-com.cy.pj.category.service.CategoryServiceImpl-@Service
4)Controller(CategoryController-com.cy.pj.category.controller-@RestController)
拜访 https://gitee.com/JasonCN2008…
品类数据信息查问及出现
1)品类 POJO 对象设计及实现
package com.cy.pj.category.pojo;
import lombok.Data;
import java.util.Date;
@Data
public class Category {
private Integer id;
private String name;
private Integer parentId;
private String remark;
private Date createdTime;
}2)数据逻辑对象办法设计及实现
package com.cy.pj.category.dao;
import com.cy.pj.category.pojo.Category;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;
import java.util.List;
@Mapper
public interface CategoryDao {@Select("select * from tb_category")
List<Category> findCategorys();}3)业务逻辑对象办法设计及实现
CategoryService 页面
package com.cy.pj.category.service;
import com.cy.pj.category.pojo.Category;
import org.springframework.stereotype.Service;
import java.util.List;
@Service
public interface CategoryService {List<Category> findCategorys();
}CategoryServiceImpl 页面
package com.cy.pj.category.service;
import com.cy.pj.category.dao.CategoryDao;
import com.cy.pj.category.pojo.Category;
import lombok.extern.slf4j.Slf4j;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@Slf4j
@Service
@RestController
public class CategoryServiceImpl implements CategoryService {
@Autowired
private CategoryDao categoryDao;
@Override
public List<Category> findCategorys() {return categoryDao.findCategorys();
}
}4)管制逻辑对象办法设计及实现
package com.cy.pj.category.controller;
import com.cy.pj.category.pojo.Category;
import com.cy.pj.category.service.CategoryService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import java.util.List;
@RestController
public class CategoryController {
@Autowired
private CategoryService categoryService;
@GetMapping("/category/doFindCategorys")
public List<Category> doFindCategorys(Model model) {return categoryService.findCategorys();
}
}5)客户端页面设计及实现
创立一个 html 页面，命名为 treegrid-1.html
这里 head 的内容必须是你曾经下载了 static 外面的所有内容
否则就用 https://examples.bootstrap-table.com/#extensions/treegrid.html#view-source；这个网址上的在线下载的链接
这个页面是拜访 https://examples.bootstrap-table.com/#extensions/treegrid.html#view-source；之后复制的内容，批改如图所示的中央：1. 在你下载好了离线版的 static 外面所有的内容之后，粘贴上面代码在 treegrid-1.html 的 head 外面
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/treegrid/bootstrap-table.css">
<link rel="stylesheet" href="/treegrid/jquery.treegrid.css">
<link rel="stylesheet" href="/treegrid/bootstrap-table.css">2. 在 treegird.html 的 body 里增加如下代码：
<script src="/jquery/jquery.min.js"></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/treegrid/jquery.treegrid.js"></script>
<script src="/treegrid/bootstrap-table.js"></script>
<script src="/treegrid/bootstrap-table-treegrid.min.js"></script>3. 把网址上的代码粘贴进 body 里，代码如下：
网址：https://examples.bootstrap-ta…
<script>
var $table = $('#table')
$(function() {
$table.bootstrapTable({
url: 'json/treegrid.json',
idField: 'id',
showColumns: true,
columns: [
{
field: 'ck',
checkbox: true
},
{
field: 'name',
title: '名称'
},
{
field: 'status',
title: '状态',
sortable: true,
align: 'center',
formatter: 'statusFormatter'
},
{
field: 'permissionValue',
title: '权限值'
}
],
treeShowField: 'name',
parentIdField: 'pid',
onPostBody: function() {var columns = $table.bootstrapTable('getOptions').columns
if (columns && columns[0][1].visible) {
$table.treegrid({
treeColumn: 1,
onChange: function() {$table.bootstrapTable('resetView')
}
})
}
}
})
})
function typeFormatter(value, row, index) {if (value === 'menu') {return '菜单'}
if (value === 'button') {return '按钮'}
if (value === 'api') {return '接口'}
return '-'
}
function statusFormatter(value, row, index) {if (value === 1) {return '<span class="label label-success"> 失常 </span>'}
return '<span class="label label-default"> 锁定 </span>'
}
</script>4. 批改下图圈起来中央的代码：
5. 批改后的代码如下：
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Hello, Bootstrap Table!</title>
<link rel="stylesheet" href="/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="/treegrid/bootstrap-table.css">
<link rel="stylesheet" href="/treegrid/jquery.treegrid.css" >
<link rel="stylesheet" href="/treegrid/bootstrap-table.css" >
</head>
<body>
<table id="table"></table>
<script src="/jquery/jquery.min.js" ></script>
<script src="/bootstrap/js/bootstrap.js"></script>
<script src="/treegrid/jquery.treegrid.js"></script>
<script src="/treegrid/bootstrap-table.js"></script>
<script src="/treegrid/bootstrap-table-treegrid.min.js"></script>
<script>
var $table = $('#table')
$(function() {
$table.bootstrapTable({
url: '/category/doFindCategorys',
idField: 'id',
showColumns: true,
columns: [
{
field: 'ck',
checkbox: true
},
{
field: 'name',
title: '名称'
},
{
field: 'remark',
title: '备注',
},
],
treeShowField: 'name',
parentIdField: 'parentId',
onPostBody: function() {var columns = $table.bootstrapTable('getOptions').columns
if (columns && columns[0][1].visible) {
$table.treegrid({
treeColumn: 1,
onChange: function() {$table.bootstrapTable('resetView')
}
})
}
}
})
})
function typeFormatter(value, row, index) {if (value === 'menu') {return '菜单'}
if (value === 'button') {return '按钮'}
if (value === 'api') {return '接口'}
return '-'
}
function statusFormatter(value, row, index) {if (value === 1) {return '<span class="label label-success"> 失常 </span>'}
return '<span class="label label-default"> 锁定 </span>'
}
</script>
</body>
</html>6)启动服务进行拜访测试剖析
7)启动及拜访过程中的 BUG 剖析
正文完
