Python/DjangoとVue.jsで構築するニュース管理システム

本記事では、PythonのDjangoフレームワークとVue.jsを組み合わせたニュース管理システムの構築方法について解説します。このシステムは、ニュース情報の登録、編集、表示、コメント機能、ユーザー管理、および統計分析機能などを提供し、フロントエンドとバックエンドが分離された設計を採用しています。

主要機能

  • ニュースコンテンツ管理: ニュース記事の追加、更新、削除、検索機能を提供します。記事のタイトル、本文、情報源などを管理できます。
  • カテゴリー管理: ニュース記事を分類するためのカテゴリー情報を管理します。
  • コメントシステム: 記事に対するユーザーコメントの管理と閲覧が可能です。
  • ユーザー管理: システムのユーザーアカウント（登録、編集、削除）を一元的に管理します。
  • 統計分析: ニュースの閲覧データやユーザーの活動状況に基づいた統計分析機能を提供し、システムの運用状況を把握するのに役立ちます。
  • メッセージ配信: 管理者から全ユーザーへのお知らせを配信できます。
  • 広告管理: ニュース詳細ページに表示する広告コンテンツを管理します。
  • フィードバック管理: ユーザーから提出された意見やフィードバックを管理画面で確認できます。
  • システム情報表示: サーバーやソフトウェアに関する基本的なシステム情報を確認できます。
  • ユーザー認証: ユーザー登録およびログイン機能を通じて、システムへのアクセスを制御します。
  • ポータル閲覧: ログイン前のユーザーも最新ニュースや人気ニュースを閲覧できます。
  • おすすめ記事: 協調フィルタリングアルゴリズムに基づいた記事推薦機能。
  • ユーザープロフィール: ユーザーが自身の基本情報、パスワード、お気に入り、いいね！などを管理できる個人ページ。
  • 検索機能: ニュース記事のあいまい検索に対応した検索機能。
  • 記事へのコメント: 各ニュース記事の詳細ページでコメントを投稿できます。

開発環境と技術スタック

本システムの開発および運用に必要な主要な環境と技術は以下の通りです。

  • バックエンド: Python 3.8+、Django 3.2+
  • フロントエンド: JavaScript、Vue.js
  • データベース: MySQL 5.7+
  • 開発ツール: PyCharm、VS Code
  • 推奨OS: Windows 10/11

主要技術スタック

  • フロントエンド: ES6、Vue.js、Vuex、Vue Router、Vue CLI、Axios、Ant Design Vue
  • バックエンド: Python、Django、pip

システム構築手順

1. 必要なソフトウェアの準備

以下のソフトウェアを事前にインストールしてください。

  1. Python 3.8以降
  2. MySQL 5.7以降
  3. Node.js (npmが利用可能な状態)

2. バックエンドのセットアップ

バックエンドはDjangoフレームワークで構築されています。

  1. 依存関係のインストール:
    プロジェクトのserverディレクトリへ移動し、以下のコマンドを実行して必要なPythonパッケージをインストールします。

    pip install -r requirements.txt

  2. データベースの準備:
    MySQLサーバーにデータベースを作成します。以下のSQL文を実行してください。

    CREATE DATABASE IF NOT EXISTS news_app_db CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

    次に、提供されているSQLファイルを使用してデータベースに初期データをインポートします。データベース名とSQLファイルのパスは適宜変更してください。

    USE news_app_db;
SOURCE /path/to/your/initial_data.sql;

  3. データベース設定:
    server/server/settings.pyファイルを開き、データベース接続情報を設定します。以下の例のように、NAME、USER、PASSWORD、HOSTの値を実際の環境に合わせて更新してください。

    DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'news_app_db',          # 作成したデータベース名
        'USER': 'db_user',             # MySQLユーザー名
        'PASSWORD': 'your_secure_password', # MySQLパスワード
        'HOST': 'localhost',           # データベースホスト
        'PORT': '3306',                # データベースポート
        'OPTIONS': {
            'charset': 'utf8mb4',
            'init_command': "SET foreign_key_checks = 0;", # 初期データインポート時の制約解除
        },
    }
}

  4. Djangoサーバーの起動:
    serverディレクトリ内で以下のコマンドを実行し、Django開発サーバーを起動します。

    python manage.py runserver

    通常、サーバーはhttp://127.0.0.1:8000/で起動します。

3. フロントエンドのセットアップ

フロントエンドはVue.jsで構築されています。

  1. 依存関係のインストール:
    プロジェクトのwebディレクトリへ移動し、以下のコマンドを実行して必要なNode.jsパッケージをインストールします。

    npm install

  2. フロントエンドアプリケーションの実行:
    引き続きwebディレクトリ内で以下のコマンドを実行し、開発サーバーを起動します。

    npm run dev

    アプリケーションが起動したら、ブラウザで指定されたアドレスにアクセスしてください（例: http://localhost:8080/）。

よくある質問 (FAQ)

  • Q: データベースのバージョン要件はありますか？
    A: MySQL 5.7以降が推奨されます。

  • Q: プロジェクトのコード構造について教えてください。
    A: serverディレクトリにバックエンド（Django）のコードが、webディレクトリにフロントエンド（Vue.js）のコードがそれぞれ格納されています。

  • Q: どのような技術知識が必要ですか？
    A: Pythonプログラミング、Djangoフレームワーク、Vue.jsフレームワークに関する基本的な知識があるとスムーズに進められます。

  • Q: 管理画面のデフォルトの認証情報は？
    A: 管理者アカウントのデフォルトのユーザー名とパスワードは、それぞれadmin123とadmin123です。

タグ: Django vue.js MySQL Python フロントエンド開発

10月11日 16:47 投稿

ホットタグ

©2026 異端開発室