반응형
소스 코드는 마지막에 작성해두었습니다.
순차적으로 보시면서 전체적인 프로젝트 흐름을 나타냈습니다.
프로젝트 구조
Flutter(View)에서 User가 데이터를 입력하면 Spring(Server)을 통하여 DB에 저장하는 방식입니다.
View 생성 (Flutter)
Flutter 프로젝트 생성
-> pubspec.yaml 파일의 해당 부분에 http: ^0.13.5를 추가
'StatefulWidget' 위젯을 상속받아 Page를 구현
입력 받을 값을 TextEditingController를 사용하여 저장
Flutter에서 입력받는 값은 아래 3가지입니다.
- 대학교 이름
- 학생 이름
- 이메일
view test 진행
-> onPressed 함수를 통하여 controller에 데이터가 정상적으로 전달되는지 console에 출력하여 확인
view test 완료
Server API 구현 (Spring)
Spring 프로젝트 생성 (maven)
아래 라이브러리 추가
- Lombok
- Spring Data JPA
- MySQL Driver
- Spring Web
패키지 생성
- controller
- entity
- repo
- service
User Entity 생성
entity 패키지 -> User.class 작성
참고: ID는 기본키 그 외 필드는 Flutter에서 전달 받을 데이터입니다.
application.properties 작성
-> DB 연결 정보 작성
Controller 소스 코드 작성
api test 진행 (postman)
DB 확인
Lombok 버전의 문제로 Getter과 Setter 직접 생성
API 테스트 진행 후 DB 확인
API 테스트 완료, Flutter과 Spring 연동
Flutter & Spring 연동
service 폴더 생성
-> service.dart 소스 코드 작성
-> Flutter -> Spring으로 Data를 보내주는 서비스 코드 부분
test 진행
flutter console에서 정상 결과 확인
DB에서 데이터 insert 확인
소스 코드
Flutter 소스 코드
pubspec.yaml -> http dependencies를 추가
main.dart
import 'dart:developer';
import './service/service.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
//primarySwatch 추가
primarySwatch: Colors.blue,
),
home: const RegisterPage(),
//debug 표시 삭제 속성
debugShowCheckedModeBanner: false,
);
}
}
class RegisterPage extends StatefulWidget {
const RegisterPage({super.key});
@override
State<RegisterPage> createState() => _RegisterPageState();
}
class _RegisterPageState extends State<RegisterPage> {
TextEditingController schoolController = TextEditingController();
TextEditingController nameController = TextEditingController();
TextEditingController emailController = TextEditingController();
Service service = Service();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('회원가입 화면'),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
Center(
child: SizedBox(
height: 50,
),
),
SizedBox(
height: 20,
),
SizedBox(
width: 250,
child: TextField(
controller: schoolController,
decoration: InputDecoration(hintText: "대학교이름"),
),
),
SizedBox(
height: 10,
),
SizedBox(
width: 250,
child: TextField(
controller: nameController,
decoration: InputDecoration(hintText: "이름"),
),
),
SizedBox(
height: 10,
),
SizedBox(
width: 250,
child: TextField(
controller: emailController,
decoration: InputDecoration(hintText: "이메일"),
),
),
SizedBox(
height: 80,
),
SizedBox(
width: 250,
child: ElevatedButton(
child: const Text('전송'),
onPressed: () {
service.saveUser(
schoolController.text,
nameController.text,
emailController.text,
);
},
),
),
],
),
));
}
}
service.dart
import 'dart:async';
import 'dart:convert';
import 'package:http/http.dart' as http;
class Service {
Future<http.Response> saveUser(
String schoolname, String name, String email) async {
var uri = Uri.parse("http://localhost:8080/register");
Map<String, String> headers = {"Content-Type": "application/json"};
Map data = {
'schoolName': '$schoolname',
'email': '$email',
'name': '$name'
};
var body = json.encode(data);
var response = await http.post(uri, headers: headers, body: body);
print("${response.body}");
return response;
}
}
Spring Java 소스 코드
참고: 본인의 DB에 맞게 application.properties를 작성해 주세요.
User.java
package com.example.demo.entity;
import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;
import jakarta.persistence.Table;
import lombok.AllArgsConstructor;
import lombok.NoArgsConstructor;
@AllArgsConstructor
@NoArgsConstructor
@Entity
@Table(name = "user_table")
public class User {
@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
private Integer id;
private String schoolName;
private String name;
private String email;
public String getSchoolName() {
return schoolName;
}
public void setSchoolName(String schoolName) {
this.schoolName = schoolName;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
UserRepo.java
package com.example.demo.repo;
import org.springframework.data.jpa.repository.JpaRepository;
import com.example.demo.entity.User;
public interface UserRepo extends JpaRepository<User, Integer>{
}
UserService.java
package com.example.demo.service;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import com.example.demo.entity.User;
import com.example.demo.repo.UserRepo;
@Service
public class UserService {
@Autowired
private UserRepo repo;
public String saveUser(User user) {
repo.save(user);
return "회원가입이 성공적으로 되었습니다.";
}
}
UserController.java
package com.example.demo.controller;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RestController;
import com.example.demo.entity.User;
import com.example.demo.service.UserService;
@RestController
@CrossOrigin
public class UserController {
@Autowired
private UserService service;
@PostMapping("/register")
private ResponseEntity<String> registerUser(@RequestBody User user){
String msg = service.saveUser(user);
return new ResponseEntity<String>(msg,HttpStatus.OK);
}
}
반응형
'Flutter' 카테고리의 다른 글
| [Flutter] 사용자 비밀번호 암호화 설정 ( obscureText & Hash ) (2) | 2023.09.03 |
|---|---|
| [Flutter] PathExistsException: Cannot create link, path 오류 해결 방법 (0) | 2023.08.31 |
| [Flutter] appbar 색상 변경하기 / primarySwatch 속성 (0) | 2023.08.31 |
| [ Flutter ] Flutter 프로젝트 만들기, 프로젝트 생성 하는 방법 (0) | 2023.08.23 |
| [Flutter][VSC]No suitable Android AVD system images are available 에러 해결 방법 (0) | 2023.08.21 |
댓글