{"id":48037973,"url":"https://github.com/zients/django-react-forum","last_synced_at":"2026-04-04T14:01:08.770Z","repository":{"id":41919614,"uuid":"212824425","full_name":"zients/django-react-forum","owner":"zients","description":null,"archived":false,"fork":false,"pushed_at":"2022-12-08T07:03:31.000Z","size":19524,"stargazers_count":0,"open_issues_count":5,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-03-23T18:30:56.678Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zients.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-10-04T13:44:37.000Z","updated_at":"2023-06-12T04:26:29.000Z","dependencies_parsed_at":"2022-08-11T21:50:42.482Z","dependency_job_id":null,"html_url":"https://github.com/zients/django-react-forum","commit_stats":null,"previous_names":["zients/django-react-forum"],"tags_count":null,"template":false,"template_full_name":null,"purl":"pkg:github/zients/django-react-forum","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zients%2Fdjango-react-forum","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zients%2Fdjango-react-forum/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zients%2Fdjango-react-forum/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zients%2Fdjango-react-forum/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zients","download_url":"https://codeload.github.com/zients/django-react-forum/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zients%2Fdjango-react-forum/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31402277,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-04T10:20:44.708Z","status":"ssl_error","status_checked_at":"2026-04-04T10:20:06.846Z","response_time":60,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-04T14:00:33.266Z","updated_at":"2026-04-04T14:01:08.755Z","avatar_url":"https://github.com/zients.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Catalog/目錄\n\n## English\n\n[GettingStarted](#GettingStarted)\n\n[NewArticle](#NewArticle)\n\n[Comment](#Comment)\n\n[Login](#Login)\n\n[Registration](#Registration)\n\n## 中文\n\n[啟動](#啟動)\n\n[簡介](#簡介)\n\n[新話題](#新話題)\n\n[留言](#留言)\n\n[登入](#登入)\n\n[註冊](#註冊)\n\n# GettingStarted\n\n## React\n\nHello, you can start this project by installing react and others modules with front-end by npm.\n\n```\n$ npm install\n```\n\nThen, we need to run the front-end server.\n\n```\n$ npm run start\n```\n\n## Django\n\nWe need to enter the virtual environment to run django server.\n\n```\n$ virtualenv env\n```\n\n```\n$ cd env\n$ Scripts/activate (Windows)\n$ source bin/activate (MacOS/Linux)\n```\n\nRun server.\n\n```\n$ py manage.py runserver\n```\n\n---\n\n## Introduction\n\nThis is a forum where users can post articles.\n\nUsers can read and comment which they are interested in.\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Home.jpg' alt=''\u003e\n\n# NewArticle\n\nUsers can post their article after they login.\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Posts.jpg' alt=''\u003e\n\nIf you aren't login, the feature will lock.\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/beforeLogin.jpg' alt=''\u003e\n\nIf you are the article creator, you can delete and update the article.\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/revisedelete.jpg'\u003e\n\nHint: Data will post, then Django Model will process that, save to SQLite3, design api with rest framework finally.\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/ArticleAPI.jpg' alt=''\u003e\n\n```\nArticle API setting:\n\nclass ArticleSerializer(serializers.ModelSerializer):\n    class Meta:\n        model = Article\n        fields = ('id', 'title', 'content', 'user', 'created', 'updated')\n\n\n```\n\n# Comment\n\nUsers can enter the articles and comment.\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Reply.jpg' alt=''\u003e\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Reply2.jpg' alt=''\u003e\n\nComments will have foreign key to connect with the article which they leave messages.\n\nYou can't comment until you login.\n\n\u003cimg  src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/beforelogincomment.jpg' alt=''\u003e\n\n```\n\nAPI filter:\n\nclass CommentFilter(django_filters.FilterSet):\n    class Meta:\n        model = Comment\n        fields = ['article', 'user']\n\n```\n\n```\n\nAPI setting:\n\nclass CommentSerializer(serializers.ModelSerializer):\n    class Meta:\n        model = Comment\n        fields = ('id', 'article', 'content', 'user', 'created', 'updated')\n\n```\n\n# Login\n\nLogin page:\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Login.jpg' alt=''\u003e\n\nWhen it posts the account info, back-end will receive the requests and then send token and username to front-end.\n\nReact gets the response then dispatch information.\n\nRudex manages the statement.\n\nRest-auth API settings:\n\n```\n\nfrom rest_framework.authtoken.models import Token\nfrom django.contrib.auth.models import User\n\n\nclass UserSerializer(serializers.ModelSerializer):\n    class Meta:\n        model = User\n        fields = ('username', 'email')\n\n\nclass TokenSerializer(serializers.ModelSerializer):\n    user = UserSerializer()\n\n    class Meta:\n        model = Token\n        fields = ('key', 'user')\n\n\n```\n\nRedux reducer settings:\n\n```\n\nutility:updateObject(state,updatedProperty)\n\nconst initialState = {\n  token: null,\n  userid: null,\n  error: null,\n  loading: false\n};\n\nconst authStart = (state, action) =\u003e {\n  return updateObject(state, {\n    error: null,\n    loading: true\n  });\n};\n\nconst authSuccess = (state, action) =\u003e {\n  return updateObject(state, {\n    token: action.token,\n    userid: action.userid,\n    error: null,\n    loading: false\n  });\n};\n\nconst authFail = (state, action) =\u003e {\n  return updateObject(state, {\n    error: action.error,\n    loading: false\n  });\n};\n\nconst authLogout = (state, action) =\u003e {\n  return updateObject(state, {\n    token: null,\n    userid: null\n  });\n};\n\n```\n\nLogin actions function settings:\n\n```\n\nfunction authStart()\nfunction authSuccess(token, userid)\nfunction authFail(error)\nfunction logout()\nfunction checkAuthTimeout(expirationTime)\nfunction authLogin (username, password)\nfunction authCheckState ()\n\nYou can know the detail from code.\n```\n\nBack-end API login.\n\n\u003cimg src='https://github.com/tsen1220/DjangoReact-Forum/blob/master/intro/loginAPI.jpg' alt=''\u003e\n\n# Registration\n\nRegistration page:\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Signup.jpg' alt=''\u003e\n\nThe post data will insert into SQLite3 by Django Model.\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/registerAPI2.jpg' atl=''\u003e\n\nRegistration has the addition action below.\n\n```\n\nfunction authSignup (username, email, password1, password2)\n\nYou can know the detail from code.\n\n```\n\n# 啟動\n\n## 前端\n\nReact/Redux 開發。\n\n請先安裝 Node 與 Npm。\n\n並輸入下面的指令安裝 modules。\n\n```\n$ npm install\n```\n\n啟動伺服器\n\n```\n$ npm start\n```\n\n預設 Port 為 3000，位於 localhost。\n\n## 後端\n\nPython Django 開發。\n\n須先進入虛擬環境。\n\n```\n$ cd env\n$ Scripts/activate\n```\n\n成功進入虛擬環境後進入 src 目錄，並安裝所需 modules。\n\n```\n$ pip install -r requirements.txt\n```\n\n安裝完成後，啟動伺服器 Server。\n\n```\n$ py manage.py runserver\n```\n\n# 簡介\n\n這是一個簡易的論壇，使用者可以發佈談話主題，其他用戶看到感興趣的主題，可以點進去並留言，與其他用戶進行互動。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Home.jpg' alt=''\u003e\n\n# 新話題\n\n使用者登入後可以在 Posts 的位置發佈主題，或至主題列最下方發佈。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Posts.jpg' alt=''\u003e\n\n需要進行登入才能發文，不然功能會被鎖定。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/beforeLogin.jpg' alt=''\u003e\n\n若主題發佈者是使用者本人，則可以進行刪除貼人以及改變主題內容的動作。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/revisedelete.jpg'\u003e\n\n說明:發佈的貼文會 Post 到後端，傳至 Django Model 處理，並存放置資料庫，再透過 API，由前端串接，並在頁面上顯示內容。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/ArticleAPI.jpg' alt=''\u003e\n\n```\nArticle API setting:\n\nclass ArticleSerializer(serializers.ModelSerializer):\n    class Meta:\n        model = Article\n        fields = ('id', 'title', 'content', 'user', 'created', 'updated')\n\n\n```\n\n# 留言\n\n使用者進入別人開設的主題後，可以在裡面留言，與其他用戶互動。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Reply.jpg' alt=''\u003e\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Reply2.jpg' alt=''\u003e\n\n同樣地，流程與發文相同，留言會 Post 到後端，經由 Django Model 處理，存至資料庫 ，並在頁面上顯示留言，在這裡留言的顯示會根據 Foreign Key 的索引經由 API filter 顯示。\n\n且未登入一樣無法使用留言系統。\n\n\u003cimg  src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/beforelogincomment.jpg' alt=''\u003e\n\n```\n\nAPI filter:\n\nclass CommentFilter(django_filters.FilterSet):\n    class Meta:\n        model = Comment\n        fields = ['article', 'user']\n\n```\n\n```\n\nAPI setting:\n\nclass CommentSerializer(serializers.ModelSerializer):\n    class Meta:\n        model = Comment\n        fields = ('id', 'article', 'content', 'user', 'created', 'updated')\n\n```\n\n# 登入\n\n登入頁面。\n\n如果沒有帳號請選擇註冊。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Login.jpg' alt=''\u003e\n\n當登入完成後，會將登入資訊 POST 到後端，後端會回應並傳出登入的帳號以及 Token，隨後前端接收並 Dispatch， Redux 來進行狀態管理，確認是否為登入成功的狀態，而 Login 會變更為 Logout。\n\n在這邊使用 rest framework 的 auth 部分，API 設定為:\n\n```\n\nfrom rest_framework.authtoken.models import Token\nfrom django.contrib.auth.models import User\n\n\nclass UserSerializer(serializers.ModelSerializer):\n    class Meta:\n        model = User\n        fields = ('username', 'email')\n\n\nclass TokenSerializer(serializers.ModelSerializer):\n    user = UserSerializer()\n\n    class Meta:\n        model = Token\n        fields = ('key', 'user')\n\n\n```\n\nRedux 的 reducer 主要設定為:\n\n```\n\nutility:updateObject(state,updatedProperty)\n\nconst initialState = {\n  token: null,\n  userid: null,\n  error: null,\n  loading: false\n};\n\nconst authStart = (state, action) =\u003e {\n  return updateObject(state, {\n    error: null,\n    loading: true\n  });\n};\n\nconst authSuccess = (state, action) =\u003e {\n  return updateObject(state, {\n    token: action.token,\n    userid: action.userid,\n    error: null,\n    loading: false\n  });\n};\n\nconst authFail = (state, action) =\u003e {\n  return updateObject(state, {\n    error: action.error,\n    loading: false\n  });\n};\n\nconst authLogout = (state, action) =\u003e {\n  return updateObject(state, {\n    token: null,\n    userid: null\n  });\n};\n\n```\n\n而 login actions 簡單地分為:\n\n```\n\nfunction authStart()\nfunction authSuccess(token, userid)\nfunction authFail(error)\nfunction logout()\nfunction checkAuthTimeout(expirationTime)\nfunction authLogin (username, password)\nfunction authCheckState ()\n\nYou can know the detail from code.\n```\n\n後端 API 登入後的操作。\n\n\u003cimg src='https://github.com/tsen1220/DjangoReact-Forum/blob/master/intro/loginAPI.jpg' alt=''\u003e\n\n# 註冊\n\n註冊頁面。\n\n輸入以下資訊即註冊完成。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/Signup.jpg' alt=''\u003e\n\n註冊完成後跟登入一樣，但是後端會先把資訊傳入 Django Model，由 Model 處理並放置於資料庫，後面與登入流程大同小異。\n\n\u003cimg src='https://raw.githubusercontent.com/tsen1220/DjangoReact-Forum/master/intro/registerAPI2.jpg' atl=''\u003e\n\naction 部分這邊多使用了:\n\n```\n\nfunction authSignup (username, email, password1, password2)\n\nYou can know the detail from code.\n\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzients%2Fdjango-react-forum","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzients%2Fdjango-react-forum","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzients%2Fdjango-react-forum/lists"}