springboot 데이터베이스 쿼리, JS는 두 가지 효과의 연계를 달성

1. 데이터베이스 설계

오라클 구현, MySQL의 데이터베이스 링크 다른 다른 데이터 유형

데이터베이스 쿼리 PARENT_ID = 0 데이터, add.html 페이지에 modelMap에 저장 될 때로 이동하는 페이지를 추가합니다

( "추가 /"@GetMapping ) 
공공 문자열 추가 ( ModelMap의 mmap) { 
   데이터베이스 쿼리, 데이터베이스를 반환 오라클과 MySQL의 등 // 유형 
   목록을 <DatabaseVo> databaseVo = matedataService.selectDatabases (); 
   mmap.addAttribute ( "데이터베이스" , databaseVo) ; 반환 "추가 /" ; 
}

데이터 DatabaseVo 정의를 사용하여 수신 된 리턴;

공용 클래스 DatabaseVo 구현 직렬화 { 
    개인 정적 최종 오래 serialVersionUID의 = 1L ; 
    //编号
    개인 긴 ID를; 
    //数据库名称
    개인 문자열 이름; 
}

페이지 add.html 3. 점프

<div 클래스 = "폼 그룹"> 
    <Label 클래스 = "COL-SM-3 제어 라벨">数据库类型</ 라벨> 
        <div 클래스 = "COL-SM-8"> 
             <SELECT 클래스 = "폼 ▪ 제어 MB "ID ="데이터베이스 "일 : 이름 ="databaseId "> 
                  <옵션 값 =" ">请选择数据库</ 옵션> 
                  <옵션 일 : 각 ="데이터베이스 : $ {데이터베이스} "일 : 값 =" $ {database.id} " 일 : 텍스트 ="$ {database.name} "> </ 옵션> 
             </ 선택> 
   　　 </ DIV> 
</ DIV>

<div 클래스 = "폼 그룹"> 
     <Label 클래스 = "COL-SM-3 제어 라벨">数据项类型</ 라벨> 
        <div 클래스 = "COL-SM-8"> 
                <SELECT NAME = " "ID ="타입 "클래스 ="폼 제어 MB를 "> 입력 
                    
                <선택 /> 
       　</ div> 
</ div>

4.js와 연관 코드

    $ ( "# 데이터베이스" ) .change (함수 () { 
        var에 databaseId = $ ( "# 데이터베이스" () .val) 
        (databaseId == 경우는 null ) { 
            반환 ;  }  $ 아약스 ({  캐시 : 사실 ,  유형 "GET" 접두사 + "/ getTypeByDataBaseId", URL , 데이터 : { "databaseId" : databaseId}, 성공 :; var에 유형 = $ ( "# 유형"기능 (데이터) {을 console.log (데이터) ) .empty를 ()에 대해 (나는 <data.data.length; VAR 난 0 = I ++ ) {types.append ( "<옵션 값 = '"+ data.data [I] .name을 + ""> "+ data.data [I] + .name과 "</ 옵션>" );}}})})

데이터베이스의 데이터 형식을 조회 할 수있는 ID는, 반환 된 데이터는 데이터베이스와 일치

    @GetMapping ( "/ getTypeByDataBaseId" ) 
    @ResponseBody의 
    공개 AjaxResult getTypeByDataBaseId (@RequestParam ( "DatabaseID" ) 길이 ID) { 
        // 데이터 타입 ID에 대응하는 데이터베이스 조회 
        일람 <TypeVo> typeVo = matedataService.selectTypesByDatabaseId (ID), 
        IF ( == null이 typeVo는 ) {  새로운 새로운 ( "빈 데이터!"는 RuntimeException을 던져 );  }  반환 AjaxResult.success (typeVo을);}

결과를 달성 6.

================================================== ====================================

7. 요약

기본적 아이디어는, 데이터베이스 설계가 달라, 몇 가지 세부 사항은 모든 사람의 같은, 당신은 조정할 수 있습니다되지 않을 수도 있습니다을 달성하는 것입니다.

springboot 데이터베이스 쿼리, JS는 두 가지 효과의 연계를 달성

추천