vue python sqlite 게시판

프로젝트 해보니 심플하게 나와서 비슷한게 어떤 것이 있는지 잠시 생각해 봤습니다.

심심풀이 여담

 스벨렛이 나왔을때 이걸 주로하는 개발자 인터뷰를 본적이 있었습니다. 마치 이천년대 초 초기 웹서비스 만들던 때와 유사한 코드를 보면서 과연 이게 장점이 될수 있을까 ? 왜 장점이 되지 라는 생각을 했습니다.

 테스트 코드에 대해서 빠르게 해볼 수 있다는 장점을 본다면 상용서비스를 기획해서 만드는 사람입장에서 약간 의아할 수 있다 생각들었습니다.

 또 react를 보고 vue를 해본사람이 하기 쉽다는 말을 들었을때 과연 vue가 뭐길래...

 그리고 파이썬으로 스크랩핑과 웹서비스 장고를 만들어 보고 ... 이러저러한 것을들 해본적이 있었는데, 때 마침 vue가 궁금해져서 pinia 상태관리를 가지고 게시판을 한번 만들어 보고 싶었습니다.

 react를 해본 사람이 vue를 해보면 더 쉽다. 그리고 jsp와 기타 axios등 부가적인 내용들을 기본적으로 알고 있는 사람이라면 더욱 쉽다. 

 그럼 이걸로 뭘 할 수 있지? 샘플 코드 짜보는 것을 쉽겠다 라는 생각이 들었습니다. 

 그래서 해본건데 확실히 요즘 개발하기 쉬운 환경이 되어있네요.

자 그럼 간단하게 정리를 해보면 vue 는 한 페이지에 html 과 파라메터 입력이 같이 되는 것이다 라는 한줄 소감을 추가하고 싶네요.

세부 문법이나 표현의 미려함을 담기에는 조금더 사용해 봐야 겠지만 특성을 경험하기에는 이번 예제도 좋다고 생각들어 다시 정리해 봅니다.

 

1. 프로젝트 구조

2025.04.24 - [프로그램/vue] - vue3 pina 크린아키텍쳐 적용 샘플 플젝

vue3 pina 크린아키텍쳐 적용 샘플 플젝

 

2. vue에 라우터 적용

2025.04.29 - [프로그램/vue] - vue router

vue router

 

3. 목업 게시판 vue

vue_moc_board_files.zip

0.20MB

 

이글을 보러 오신분들이라면 간단하게 돌려보면서 소스를 따라가는 것이 좋을 것이라 생각해서 전체를 공유합니다.

 

4. api 연동 vue

vue_api_board_files.zip

0.20MB

/src/router/index.js       # 라우팅 정보
/src/stores/boardStore.js  # 상태와 axios 를 통한 api 호출부
/src/views/boards/BoardDetail.vue  # 게시글 읽기
/src/views/boards/BoardForm.vue    # 쓰기, 수정하기
/src/views/boards/BoardList.vue    # 목록
/src/App.vue               # 라우터 뷰등록
/src/axios.js              # api 경로
/main.js                   # pinia, router 사용

어려워야 뭔가 더 열심히 파헤쳐 볼 것 같은데 쉽게 되어 보시는 분에게 도움이 될 만한 설명이 필요한지 모르겠네요.

 

5. 파이썬 api

python_flask_sqlite_board_files.zip

0.00MB

 

파이썬으로 sqlite flask를 이용한 api 구현 했습니다.

파이썬 v3이상에서는 sqlite가 기본 지원하고 있고 flask가 가벼운 웹서비스가 가능하기 때문에 선택해서 만들었습니다.

from flask import Flask, request, jsonify

from flask_cors import CORS

from flask_sqlalchemy import SQLAlchemy

import os

import sqlite3

app = Flask(__name__)

CORS(app, origins=["http://localhost:8080"])

# SQLite DB 설정

BASE_DIR = os.path.abspath(os.path.dirname(__file__))

app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///' + os.path.join(BASE_DIR, 'board.db')

app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)

# 게시글 모델

class Post(db.Model):

    id = db.Column(db.Integer, primary_key=True)

    title = db.Column(db.String(100), nullable=False)

    content = db.Column(db.Text, nullable=False)

    def to_dict(self):

        return {

            'id': self.id,

            'title': self.title,

            'content': self.content

        }

# DB 초기화

appHasRunBefore:bool = False

@app.before_request

#@ app.before_first_request

def create_tables():

    db.create_all()

    appHasRunBefore = True

# 게시글 목록 조회

@app.route('/api/posts', methods=['GET'])

def get_posts():

    print('/api/posts *** get_posts()')

    posts = Post.query.all()

    return jsonify([p.to_dict() for p in posts])

# 게시글 단건 조회

@app.route('/api/post/<int:post_id>', methods=['GET'])

def get_post(post_id):

    print('/api/posts/post_id *** get_post()')

    post = Post.query.get_or_404(post_id)

    return jsonify(post.to_dict())

# 게시글 등록

@app.route('/api/posts', methods=['POST'])

def create_post():

    print('/api/posts *** create_post()')

    data = request.get_json()

    post = Post(title=data['title'], content=data['content'])

    db.session.add(post)

    db.session.commit()

    return jsonify(post.to_dict()), 201

# 게시글 수정

@app.route('/api/posts/<int:post_id>', methods=['PUT'])

def update_post(post_id):

    print('/api/posts/post_id **PUT* update_post()')

    post = Post.query.get_or_404(post_id)

    data = request.get_json()

    post.title = data['title']

    post.content = data['content']

    db.session.commit()

    return jsonify(post.to_dict())

# 게시글 삭제 (선택사항)

@app.route('/api/posts/<int:post_id>', methods=['DELETE'])

def delete_post(post_id):

    post = Post.query.get_or_404(post_id)

    db.session.delete(post)

    db.session.commit()

    return jsonify({'message': 'Deleted'})

# 헬스 체크크

@app.route('/', methods=['GET'])

def get_helth():

    return jsonify({'message': 'server live'})

if __name__ == '__main__':

    app.run(debug=True)

 

※ sqlite 참고 : DB사용은 기본은 비슷하니 참고하시면 될 것 같습니다. 

※ 엑셀파일 비교 간단 개념이해

: 물리적 DB 파일 == 엑셀 파일, 테이블 == 엑셀.시트, 컬럼 == 엑셀.시트.열, 데이터1row = 엑셀.시트.행

※ DB 사용 방법 이해

: 물리적 파일 연결 -> 커서 -> 테이블 -> CRUD -> COMMIT -> 닫기

2025.04.26 - [프로그램/python&&AI] - python에서 SQLite

python에서 SQLite