Kotlin + Spring Boot (Gradle) + React.js (Nowa) 集成 Web 开发

2018-08-17 11:24:38 浏览数 (1)

Kotlin Spring Boot (Gradle) React.js (Nowa) 集成 Web 开发

Category.kt

代码语言:javascript复制
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"

}
代码语言:javascript复制
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>

}
代码语言:javascript复制
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
    }

}

分页

代码语言:javascript复制
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

代码语言:javascript复制
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>
    );
  }
}

后台分页接口

代码语言:javascript复制
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
    }

}

完整示例工程源代码: https://github.com/EasyKotlin/reakt

0 人点赞