[19] Flutter 로그인 구성하기

찬과장·2025년 5월 13일
0

Flutter

목록 보기
19/22
post-thumbnail

login_page

import 'package:flutter/material.dart';
import 'package:flutter_http/screen/join_page.dart';

TextEditingController emailCon = TextEditingController();
TextEditingController pwCon = TextEditingController();

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('로그인 페이지'),
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Container(
            margin: EdgeInsets.all(12),
            padding: EdgeInsets.all(12),
            child: Column(
              children: [
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                    controller: emailCon,
                    decoration: InputDecoration(
                        label: Row(
                          children: [
                            Icon(Icons.account_circle),
                            Text("email 입력 "),
                          ],
                        ),
                        hintText: "example@example.com",
                        hintStyle: TextStyle(color: Colors.grey[300])),
                    keyboardType: TextInputType.emailAddress,
                  ),
                ),
                Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: TextField(
                      obscureText: true,
                      controller: pwCon,
                      decoration: InputDecoration(
                        label: Row(
                          children: [
                            Icon(Icons.key),
                            Text("pw 입력 "),
                          ],
                        ),
                      )),
                ),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.blueAccent),
                        onPressed: () {

                        },
                        child: Text('로그인하기')),
                    ElevatedButton(
                        style: ElevatedButton.styleFrom(
                            backgroundColor: Colors.grey),
                        onPressed: () {
                          Navigator.push(context, MaterialPageRoute(builder: (
                              _) => JoinPage()));
                        },
                        child: Text('회원가입하기'))
                  ],
                ),
                SizedBox(
                  height: 40,
                ),
                Container(
                  color: Colors.grey[200],
                  width: double.infinity,
                  height: 2,
                ),
                SizedBox(
                  height: 40,
                ),

              ],
            ),
          ),
        ),
      ),
    );
  }
}

join_page

import 'package:flutter/material.dart';

class JoinPage extends StatelessWidget {
  const JoinPage({super.key});

  @override
  Widget build(BuildContext context) {
    TextEditingController input_id = TextEditingController();
    TextEditingController input_pw = TextEditingController();
    TextEditingController input_age = TextEditingController();
    TextEditingController input_name = TextEditingController();

    return Scaffold(
      appBar: AppBar(
        title: Text('회원가입 페이지'),
      ),
      body: Column(
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                  label: Row(
                    children: [
                      Icon(Icons.account_circle),
                      Text("email 입력 "),
                    ],
                  ),
                  hintText: "example@example.com",
                  hintStyle: TextStyle(color: Colors.grey[300])),
              keyboardType: TextInputType.emailAddress,
              controller: input_id,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                label: Row(
                  children: [
                    Icon(Icons.key),
                    Text("비밀번호 입력 "),
                  ],
                ),

              ),
              keyboardType: TextInputType.text,
              obscureText: true,
              controller: input_pw,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                  label: Text("나이 입력 "),
                  hintText: "20",
                  hintStyle: TextStyle(color: Colors.grey[300])),
              keyboardType: TextInputType.number,
              controller: input_age,
            ),
          ),
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: TextField(
              decoration: InputDecoration(
                  label: Text("이름 입력 "),
                  hintText: "플러터",
                  hintStyle: TextStyle(color: Colors.grey[300])),
              keyboardType: TextInputType.text,
              controller: input_name,
            ),
          ),

          ElevatedButton(onPressed: (){

          }, child: Text('회원 가입'))
        ],
      ),
    );
  }
}

MySQL연동하고 데이터 강제로 넣어보기

  • dbConnect.py
# python - mysql 연결 라이브러리
import pymysql
from flask import Blueprint

# 1. Blueprint 설정
member = Blueprint("member", __name__, template_folder="templates")

@member.route('/')
def test():
    return 'hello member'

@member.route('/insert')
def insert():
    # 1. db 연결 - host, user, password,schema, encoding
    db = pymysql.connect(host='localhost', user='root', password='1234', db='flutter_db', charset = 'utf8')

    # 2. 데이터 접근 객 체(cursor 객체 생성)
    # db 연결한 변수 안에 cursor가 존재
    cursor = db.cursor()

    # 3. sql문 작성
    sql = "insert into member values('test2','1234','test2',20)"

    # 4. 실행 cursor.excute(sql)
    cursor.execute(sql)

    # 필수는 아니나 유용한 변수 insert, update, delete 성공한 행의 개수를 파악
    row = cursor.rowcount

    # 5. 저장 후 db 닫기
    db.commit()
    db.close()

    # 데이터 insert 성공시 row라는 변수에 양수가 들어가 예정(성공한 행의 개수)
    if row > 0:
        return "success"
    else :
        return "fail"
  • app.py
from flask import Flask, request,Blueprint
# 파일 관리를 위해 Blueprint
# 해당 파일 명을 import 진행
# from 파일명  import 변수명
from dbConnect import member

app = Flask(__name__)

# register_blueprint() 사용해서 연결
app.register_blueprint(member, url_prefix="/member") # prefix 별칭

@app.route('/')
def test():
    # return타입에 html 띄울 수 있는 함수 혹은 문자열 혹은 json이 반환
    return 'hello'

@app.route('/send')
def send():
    # 데이터 받는법
    # request.args.get('보내준 곳에서의 key값')
    test = request.args.get('test')
    print(test)
    return "hello234"

if __name__ == '__main__':
    app.debug = True #저장 하면 즉시 반영
    app.run('192.168.219.179', port = 8086)
profile
나는,,,,,,,,,나다

0개의 댓글