Kotlin + Spring Boot （Gradle） + React.js (Nowa) 集成 Web 开发
image.png
image.png
Category.kt
package com.easykotlin.reakt.entity
import java.util.*
import javax.persistence.*
/**
* Created by Kor on 2017-12-24 14:04:20.
*/
@Entity
@Table(indexes = [
Index(columnList = "code", unique = true),
Index(columnList = "name", unique = false),
Index(columnList = "type", unique = false)
])
class Category {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
var id: Long = -1
var gmtCreate = Date()
var gmtModify = Date()
var isDeleted = 0
@Column(length = 200)
var name = ""
@Column(length = 1000)
var detail = ""
/**
* 1 学科分类
* 2 图书分类
* 3 行业分类
* 4 动植物分类
* 5 国家分类
* 6 语言分类
* 7 宗教分类
* 8 组织机构分类
* 9 音乐分类
* 10 文学分类
* 11 计算机编程语言分类
*
*/
var type = 1
// 编码
@Column(unique = true, length = 200)
var code = "001"
}
package com.easykotlin.reakt.dao
import com.easykotlin.reakt.entity.Category
import org.springframework.data.domain.Page
import org.springframework.data.domain.Pageable
import org.springframework.data.jpa.repository.JpaRepository
import org.springframework.data.jpa.repository.Query
import org.springframework.data.repository.query.Param
/**
* Created by Kor on 2017-12-24 14:04:20.
*/
interface CategoryDao : JpaRepository<Category, Long> {
/**
* Paging query needs to have a Pageable parameter!
*/
@Query("select a from #{#entityName} a where type = :type and a.name like %:searchTxt%")
fun page(@Param("searchTxt") searchTxt: String,
@Param("type") type: Int,
pageable: Pageable): Page<Category>
}
package com.easykotlin.reakt.controller
import com.alibaba.fastjson.JSON
import com.easykotlin.reakt.dao.CategoryDao
import com.easykotlin.reakt.entity.Category
import com.easykotlin.reakt.page.PageConterter
import com.easykotlin.reakt.page.PageDto
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.data.domain.PageRequest
import org.springframework.web.bind.annotation.*
import javax.servlet.http.HttpServletRequest
/**
* Created by Kor on 2017-12-24 14:04:20.
*/
@RestController
@RequestMapping("/category")
class CategoryController {
@Autowired lateinit var CategoryDao: CategoryDao
@GetMapping(value = ["/"])
fun category(request: HttpServletRequest): List<Category> {
return CategoryDao.findAll()
}
@GetMapping(value = ["/{id}"])
fun getOne(@PathVariable("id") id: Long): Category {
return CategoryDao.getOne(id)
}
@GetMapping(value = ["/page.json"])
fun page(
@RequestParam(value = "currentPage", defaultValue = "1") currentPage: Int,
@RequestParam(value = "pageSize", defaultValue = "10") pageSize: Int,
@RequestParam(value = "searchTxt", defaultValue = "") searchTxt: String,
@RequestParam(value = "type", defaultValue = "1") type: Int
): PageDto<Category> {
println("searchTxt = $searchTxt")
// Spring Data JPA 的分页默认第一页是： pageNum = 0
val page = CategoryDao.page(searchTxt, type,
PageRequest.of(currentPage - 1, pageSize))
println("page = ${JSON.toJSONString(page)}")
val pageDto = PageDto<Category>()
PageConterter.convert(page, pageDto)
return pageDto
}
}
分页
package com.easykotlin.reakt.page
import org.springframework.data.domain.Page
class PageDto<T> {
var content: Content<T> = Content()
}
class Content<T> {
var data: List<T> = ArrayList()
var currentPage = 1
var totalCount = 100L
}
object PageConterter {
fun <T> convert(page: Page<T>, pageDto: PageDto<T>) {
pageDto.content.data = page.content
// Spring Data JPA 的分页默认第一页是： pageNum = 0, 所以这里 + 1
pageDto.content.currentPage = page.number + 1
pageDto.content.totalCount = page.totalElements
}
}
JSX
import {Component} from 'react';
import './CategoryList1.less';
import {URLS} from "../../app/variables";
import {isDev} from 'variables';
import Title from 'uxcore-title';
const Table = require('uxcore-table');
const fetchUrl = URLS.category_list_url_1;
export default class CategoryList1 extends Component {
static defaultProps = {}
static propTypes = {}
constructor(props) {
super(props);
}
render() {
const me = this;
const columns = [
{dataKey: 'code', title: 'Code', width: 200},
{dataKey: 'name', title: 'Name', width: 400, type: 'text'},
{
dataKey: 'detail', title: 'Detail', width: 600, type: 'text',
render(cellData, rowData) {
console.log(`cellData = ${cellData}`)
console.log(`rowData = ${rowData}`)
return <div><a href="javascript:;">{cellData}</a></div>;
}
},
];
const renderProps = {
height: 600,
pageSize: 10,
fetchUrl: fetchUrl,
fetchParams: {},
jsxcolumns: columns,
showSearch: true,
searchBarPlaceholder: '搜索',
showMask: true,
emptyText: '暂无数据',
loadingText: '数据加载中',
addRowClassName: function (rowData) {
return 'multiline'
}
};
return (
<div className="mod-category_list_1">
<Title type="secondary">学科分类</Title>
<Table {...renderProps} />
</div>
);
}
}
image.png
image.png
后台分页接口
package com.easykotlin.reakt.controller
import com.alibaba.fastjson.JSON
import com.easykotlin.reakt.dao.CategoryDao
import com.easykotlin.reakt.entity.Category
import com.easykotlin.reakt.page.PageConterter
import com.easykotlin.reakt.page.PageDto
import org.springframework.beans.factory.annotation.Autowired
import org.springframework.data.domain.PageRequest
import org.springframework.web.bind.annotation.*
import javax.servlet.http.HttpServletRequest
/**
* Created by Kor on 2017-12-24 14:04:20.
*/
@RestController
@RequestMapping("/category")
class CategoryController {
@Autowired lateinit var CategoryDao: CategoryDao
@GetMapping(value = ["/"])
fun category(request: HttpServletRequest): List<Category> {
return CategoryDao.findAll()
}
@GetMapping(value = ["/{id}"])
fun getOne(@PathVariable("id") id: Long): Category {
return CategoryDao.getOne(id)
}
@GetMapping(value = ["/page.json"])
fun page(
@RequestParam(value = "currentPage", defaultValue = "1") currentPage: Int,
@RequestParam(value = "pageSize", defaultValue = "10") pageSize: Int,
@RequestParam(value = "searchTxt", defaultValue = "") searchTxt: String,
@RequestParam(value = "type", defaultValue = "1") type: Int
): PageDto<Category> {
println("searchTxt = $searchTxt")
// Spring Data JPA 的分页默认第一页是： pageNum = 0
val page = CategoryDao.page(searchTxt, type,
PageRequest.of(currentPage - 1, pageSize))
println("page = ${JSON.toJSONString(page)}")
val pageDto = PageDto<Category>()
PageConterter.convert(page, pageDto)
return pageDto
}
}
image.png
