{"id":49449,"date":"2023-07-20T17:06:37","date_gmt":"2023-04-23T17:58:08","guid":{"rendered":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/"},"modified":"2024-04-30T14:29:28","modified_gmt":"2024-04-30T06:29:28","slug":"%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82","status":"publish","type":"post","link":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/","title":{"rendered":"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c"},"content":{"rendered":"

\u9996\u5148<\/h1>\n

\u6211\u662f\u7b2c\u4e00\u6b21\u6295\u7a3f\u3002
\n\u6700\u8fd1\u6211\u5bf9Web\u5f00\u53d1\u5f88\u611f\u5174\u8da3\uff0c\u6b63\u5728\u5b66\u4e60\u5404\u79cd\u77e5\u8bc6\u3002
\n\u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u4ecb\u7ecd\u4e00\u4e2a\u4f7f\u7528Django\u6784\u5efa\u540e\u7aef\u90e8\u5206\u3001\u4f7f\u7528Nuxt.js\u6784\u5efa\u524d\u7aef\u90e8\u5206\u7684\u9879\u76ee\uff0c
\n\u5e76\u5c06\u91cd\u70b9\u653e\u5728\u5f00\u53d1\u73af\u5883\u4e2d\u7684\u53ef\u7528\u6027\u4e0a\u3002<\/p>\n

\u51c6\u5907<\/h1>\n
\"qiita\u75281<\/div>\n

\u73af\u5883<\/h3>\n

Windows10 \u4e13\u4e1a\u7248
\nDocker \u684c\u9762\u7248 v2.1.0.5
\nPython 3.6.9
\nDjango 2.2.7
\nDjango Rest Framework 3.10.3
\nMySQL \u7248\u672c 8.0.17
\nNuxt.js v2.11.0<\/p>\n

\u76ee\u5f55\u7ed3\u6784<\/h3>\n
.\r\n\u251c\u2500django\r\n\u2502  \u251c\u2500manage.py\r\n\u2502  \u251c\u2500composeexample\r\n\u2502  \u2502   \u251c\u2500settings.py\r\n\u2502  \u2502   \u251c\u2500urls.py\r\n\u2502  \u2502   \u251c\u2500wsgi.py\r\n\u2502  \u2502   \u2514\u2500__init__.py\r\n\u2502  \u2514\u2500myapp\r\n\u2502      \u251c\u2500migrations\r\n\u2502      \u251c\u2500admin.py\r\n\u2502      \u251c\u2500apps.py\r\n\u2502      \u251c\u2500models.py\r\n\u2502      \u251c\u2500renderers.py\r\n\u2502      \u251c\u2500serializers.py\r\n\u2502      \u251c\u2500tests.py\r\n\u2502      \u251c\u2500urls.py\r\n\u2502      \u251c\u2500views.py\r\n\u2502      \u2514\u2500__init__.py\r\n\u2502\r\n\u251c\u2500docker-compose.yml\r\n\u2502\r\n\u251c\u2500dockerfiles\r\n\u2502  \u251c\u2500django_docker\r\n\u2502  \u2502   \u251c\u2500dockerfile\r\n\u2502  \u2502   \u2514\u2500requirements.txt\r\n\u2502  \u2514\u2500nuxt_docker\r\n\u2502      \u2514\u2500dockerfile\r\n\u2502\r\n\u251c\u2500mysql\r\n\u2502  \u2514\u2500conf.d\r\n\u2502\r\n\u2514\u2500nuxt\r\n    \u2514\u2500front\r\n       \u2514\u2500\u4ee5\u4e0b\u7565\r\n<\/code><\/pre>\n
\u5404\u79cd\u6587\u4ef6<\/h3>\n
version<\/span>:<\/span> '<\/span>3'<\/span>\r\n\r\nservices<\/span>:<\/span>\r\n  db<\/span>:<\/span>\r\n    image<\/span>:<\/span> mysql:latest<\/span>\r\n    restart<\/span>:<\/span> always<\/span>\r\n    container_name<\/span>:<\/span> mysql<\/span>\r\n    environment<\/span>:<\/span>\r\n      MYSQL_ROOT_PASSWORD<\/span>:<\/span> test<\/span>\r\n      MYSQL_USER<\/span>:<\/span> test<\/span>\r\n      MYSQL_DATABASE<\/span>:<\/span> test<\/span>\r\n      MYSQL_PASSWORD<\/span>:<\/span> test<\/span>\r\n    ports<\/span>:<\/span>\r\n      -<\/span> 3306:3306<\/span>\r\n    expose<\/span>:<\/span>\r\n      -<\/span> 3306<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> mysqldata:\/var\/lib\/mysql<\/span>\r\n      -<\/span> .\/mysql\/conf.d:\/etc\/mysql\/conf.d<\/span>\r\n\r\n  web<\/span>:<\/span>\r\n    container_name<\/span>:<\/span> django<\/span>\r\n    build<\/span>:<\/span> .\/dockerfiles\/django_docker<\/span>\r\n    command<\/span>:<\/span> \r\n      python3 manage.py runserver 0.0.0.0:8000<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> .\/django:\/code<\/span>\r\n    ports<\/span>:<\/span>\r\n      -<\/span> \"<\/span>8000:8000\"<\/span>\r\n    depends_on<\/span>:<\/span>\r\n      -<\/span> db<\/span>\r\n\r\n  front<\/span>:<\/span>\r\n    container_name<\/span>:<\/span> nuxt<\/span>\r\n    build<\/span>:<\/span> .\/dockerfiles\/nuxt_docker<\/span> \r\n    tty<\/span>:<\/span> true<\/span>\r\n    volumes<\/span>:<\/span>\r\n      -<\/span> .\/nuxt:\/code<\/span>\r\n    ports<\/span>:<\/span>\r\n      -<\/span> \"<\/span>3000:3000\"<\/span>\r\n\r\nvolumes<\/span>:<\/span>\r\n  mysqldata<\/span>:<\/span>\r\n<\/code><\/pre>\n
# \u30d9\u30fc\u30b9\u30a4\u30e1\u30fc\u30b8\u3092\u6307\u5b9a<\/span>\r\nFROM<\/span> python:3.6-stretch<\/span>\r\n\r\nENV<\/span> PYTHONUNBUFFERED 1<\/span>\r\nRUN <\/span>mkdir<\/span> \/code\r\n\r\n# \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u79fb\u52d5\u3059\u308b<\/span>\r\nWORKDIR<\/span> \/code<\/span>\r\n\r\n# pip\u3067requirements.txt\u306b\u8a18\u8f09\u306e\u30d1\u30c3\u30b1\u30fc\u30b8\u3092\u30a4\u30f3\u30b9\u30c8\u30fc\u30eb<\/span>\r\nCOPY<\/span> requirements.txt \/code\/<\/span>\r\nRUN <\/span>pip3 install<\/span> -r<\/span> requirements.txt\r\n\r\nCOPY<\/span> . \/code\/<\/span>\r\n<\/code><\/pre>\n
\u203bDjango\u7684\u6620\u50cf\u662f\u901a\u8fc7stretch\u6784\u5efa\u7684\uff0c\u539f\u56e0\u662f\u4e0eOpen SSH\u7684\u5bc6\u94a5\u957f\u5ea6\u6709\u5173\u3002\u8bf7\u53c2\u8003\u6b64\u5904\u3002<\/p>\n
Django>=2.0,<3.0\r\ndjangorestframework\r\ndjango-webpack-loader\r\ndjango-cors-headers\r\nmysqlclient\r\n<\/code><\/pre>\n
\u5728requierment.txt\u6587\u4ef6\u4e2d\u8bb0\u5f55\u9700\u8981\u7684Python\u5305\u3002\u9664\u4e86Django\uff0c\u8fd8\u9700\u8981\u5b89\u88c5\u4e0eAPI\u76f8\u5173\u7684\u5176\u4ed6\u5305\u3002<\/p>\n
\u4ee5\u4e0b\u662fDjango REST\u6846\u67b6\u6240\u9700\u7684\u7ec4\u4ef6\uff1a
\n– djangorestframework
\n– django-webpack-loader
\n– django-cors-headers<\/p>\n
\u4ee5\u4e0b\u662f\u4f7f\u7528Django\u8fde\u63a5MySQL\u6240\u9700\u7684\u5fc5\u5907\u7ec4\u4ef6\u4e4b\u4e00\uff1amysqlclient\u3002<\/p>\n
# \u30d9\u30fc\u30b9\u30a4\u30e1\u30fc\u30b8\u3092\u6307\u5b9a<\/span>\r\nFROM<\/span> node:latest<\/span>\r\n\r\nRUN <\/span>mkdir<\/span> -p<\/span> \/code\r\n\r\n# node.js \u306e\u74b0\u5883\u5909\u6570\u3092\u5b9a\u7fa9\u3059\u308b<\/span>\r\n# \u672c\u756a\u74b0\u5883\u3067\u306f production<\/span>\r\nENV<\/span> NODE_ENV=development<\/span>\r\n\r\n# yarn\u3068axios\u3092install<\/span>\r\nRUN <\/span>yarn install<\/span>\r\nRUN <\/span>yarn add @nuxtjs\/axios\r\n\r\n# \u30c7\u30a3\u30ec\u30af\u30c8\u30ea\u3092\u79fb\u52d5\u3059\u308b<\/span>\r\nWORKDIR<\/span> \/code<\/span>\r\n\r\n# \u30dd\u30fc\u30c83000\u756a\u3092\u958b\u653e\u3059\u308b<\/span>\r\nEXPOSE<\/span> 3000<\/span>\r\n<\/code><\/pre>\n
Django\u7684\u5efa\u7acb<\/h1>\n
\u521b\u5efa\u9879\u76ee<\/h3>\n
\u6211\u6b63\u5728\u53c2\u8003\u8fd9\u7bc7\u6587\u7ae0\u3002
\n\u5b66\u4e60\u5982\u4f55\u8fc5\u901f\u638c\u63e1Django\u7684\u7b2c\u4e00\u90e8\u5206\u3002
\n\u901a\u8fc7Docker\u521b\u5efaDjango\u7684\u5f00\u53d1\u73af\u5883\uff08\u5feb\u901f\u5165\u95e8\uff1aCompose\u548cDjango\u7684MySQL\u7248\uff09\u3002
\n\u3010Django\u3011\u6dfb\u52a0\u5e94\u7528\u7a0b\u5e8f\u7684\u6b65\u9aa4\u3002
\n\u9996\u5148\u4f7f\u7528docker-compose\u542f\u52a8\u5bb9\u5668\u3002\u4f7f\u7528MySQL\u6765\u5efa\u7acb\u5b83\u3002<\/p>\n
><\/span> docker-compose up -d<\/span> db\r\n<\/code><\/pre>\n
\u53ef\u4ee5\u7528 docker ps \u547d\u4ee4\u786e\u8ba4\u3002<\/p>\n
><\/span> docker ps\r\nCONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                               NAMES\r\n285cf6b8473b        mysql:latest        \"docker-entrypoint.s\u2026\"<\/span>   2 minutes ago       Up 4 seconds        0.0.0.0:3306->3306\/tcp, 33060\/tcp   mysql\r\n<\/code><\/pre>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u4f7f\u7528docker-compose\u6765\u542f\u52a8\u5bb9\u5668\u3002\u7531\u4e8e\u8fd9\u662f\u521d\u6b21\u64cd\u4f5c\uff0c\u6211\u4eec\u4e5f\u4f1a\u6267\u884c\u6784\u5efa\u64cd\u4f5c\u3002<\/p>\n
><\/span> docker-compose up -d<\/span> --build<\/span>\r\n<\/code><\/pre>\n
\u6211\u5c06\u521b\u5efa\u4e00\u4e2aDjango\u9879\u76ee\uff08\u9879\u76ee\u540d\u79f0\u4efb\u610f\uff09\u3002<\/p>\n
><\/span> docker-compose run web django-admin.py startproject composeexample .<\/span>\r\n<\/code><\/pre>\n
\u8fd9\u4e2a\u90e8\u5206\u5c06\u4f1a\u88ab\u751f\u6210\u3002<\/p>\n
.\r\n\u2514\u2500django\r\n   \u251c\u2500manage.py\r\n   \u2514\u2500composeexample\r\n       \u251c\u2500settings.py\r\n       \u251c\u2500urls.py\r\n       \u251c\u2500wsgi.py\r\n       \u2514\u2500__init__.py\r\n<\/code><\/pre>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u7f16\u8f91setting.py\u6587\u4ef6\u3002
\n\u9ed8\u8ba4\u60c5\u51b5\u4e0b\uff0c\u5b83\u4f7f\u7528SQLite\u6570\u636e\u5e93\uff0c\u6211\u4eec\u5c06\u5176\u66f4\u6539\u4e3aMySQL\u3002<\/p>\n
#<\u5909\u66f4\u524d>\r\n<\/span>DATABASES<\/span> =<\/span> {<\/span>\r\n    'default'<\/span>:<\/span> {<\/span>\r\n        'ENGINE'<\/span>:<\/span> 'django.db.backends.sqlite3'<\/span>,<\/span>\r\n        'NAME'<\/span>:<\/span> os<\/span>.<\/span>path<\/span>.<\/span>join<\/span>(<\/span>BASE_DIR<\/span>,<\/span> 'db.sqlite3'<\/span>),<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n\r\n#\u4e0a\u8a18\u3092\u2193\u2193\u2193\u306b\u5909\u66f4\r\n#\u30e6\u30fc\u30b6\u540d\u3084\u30d1\u30b9\u306f\u9069\u5b9c\u5909\u66f4\u3057\u3066\u304f\u3060\u3055\u3044\r\n<\/span>\r\n#<\u5909\u66f4\u5f8c>\r\n<\/span>DATABASES<\/span> =<\/span> {<\/span>\r\n    'default'<\/span>:<\/span> {<\/span>\r\n        'ENGINE'<\/span>:<\/span> 'django.db.backends.mysql'<\/span>,<\/span>\r\n        'NAME'<\/span>:<\/span> 'test'<\/span>,<\/span>\r\n        'USER'<\/span>:<\/span> 'test'<\/span>,<\/span>\r\n        'PASSWORD'<\/span>:<\/span> 'test'<\/span>,<\/span>\r\n        'HOST'<\/span>:<\/span> 'db'<\/span>,<\/span>   \r\n        'PORT'<\/span>:<\/span> '3306'<\/span>,<\/span>\r\n    }<\/span>\r\n}<\/span>\r\n\r\n<\/code><\/pre>\n
\u63a5\u4e0b\u6765\u5c06\u8fdb\u884c\u8054\u5408DB\u7684\u8fc1\u79fb\u3002<\/p>\n
><\/span> docker-compose run web .\/manage.py migrate\r\n<\/code><\/pre>\n
\u521b\u5efa\u8d85\u7ea7\u7528\u6237\u3002<\/p>\n
><\/span> docker-compose run web .\/manage.py createsuperuser --username<\/span> admin --email<\/span> admin@localhost\r\nStarting mysql ... done                                                                                   \r\n<\/span>Password: #\u30d1\u30b9\u30ef\u30fc\u30c9\u3092\u805e\u304b\u308c\u308b\u306e\u3067\u5165\u529b<\/span>\r\nPassword (<\/span>again)<\/span>: #\u518d\u5ea6\u5165\u529b<\/span>\r\nThe password is too similar to the username.\r\nThis password is too short. It must contain at least 8 characters.\r\nThis password is too common. #\u30d1\u30b9\u30ef\u30fc\u30c9\u304c\u77ed\u3044\u3068\u8b66\u544a\u304c\u51fa\u308b<\/span>\r\nBypass password validation and create user anyway? [<\/span>y\/N]: y #y\u3092\u5165\u529b<\/span>\r\nSuperuser created successfully.\r\n<\/code><\/pre>\n
\u6211\u5c06\u5728\u8fd9\u91cc\u5c1d\u8bd5\u542f\u52a8Django\u7684\u5f00\u53d1\u670d\u52a1\u5668\u3002
\n\u4f7f\u7528docker-compose up -d\u547d\u4ee4\uff0c\u6240\u6709\u5728docker-compose.yml\u4e2d\u5b9a\u4e49\u7684\u5bb9\u5668\u5c06\u5728\u540e\u53f0\u542f\u52a8\u3002
\n(Nuxt\u7684\u5bb9\u5668\u4e5f\u4f1a\u5728\u8fd9\u4e2a\u9636\u6bb5\u542f\u52a8)<\/p>\n
><\/span> docker-compose up -d<\/span>\r\n\r\n><\/span> docker ps\r\nCONTAINER ID        IMAGE               COMMAND                  CREATED             STATUS              PORTS                                         NAMES\r\n746b29edf07b        working_web         \"python3 manage.py r\u2026\"<\/span>   30 hours ago        Up 30 hours         0.0.0.0:8000->8000\/tcp                        django\r\n0ae9f6506532        mysql:latest        \"docker-entrypoint.s\u2026\"<\/span>   30 hours ago        Up 30 hours         3306\/tcp, 33060\/tcp, 0.0.0.0:3306->3306\/tcp   mysql\r\n0107b2a7301b        working_front       \"docker-entrypoint.s\u2026\"<\/span>   30 hours ago        Up 30 hours         0.0.0.0:3000->3000\/tcp                        nuxt\r\n<\/code><\/pre>\n
\u7531\u4e8edjango\u5f00\u53d1\u670d\u52a1\u5668\u6b63\u5728\u76d1\u542c\u7aef\u53e38000\uff0c
\n\u6211\u4eec\u5c1d\u8bd5\u8bbf\u95eehttp:\/\/localhost:8000\/admin\u3002
\n\u5bf9\u5e94\u4e8e.\/docker-compose.yml\u4e2d\u7684\u4ee5\u4e0b\u90e8\u5206\u3002<\/p>\n
#~\u7565~<\/span>\r\n    command<\/span>:<\/span> \r\n      python3 manage.py runserver 0.0.0.0:8000<\/span>\r\n#~\u7565~<\/span>\r\n<\/code><\/pre>\n
\"image.png\"<\/div>\n
\"image.png\"<\/div>\n
\u521b\u5efa\u5e94\u7528\u7a0b\u5e8f<\/h3>\n
\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u751f\u6210\u5e94\u7528\u7a0b\u5e8f\u7684\u90e8\u5206\u3002\uff08\u5e94\u7528\u7a0b\u5e8f\u7684\u540d\u79f0\u53ef\u4ee5\u81ea\u7531\u9009\u62e9\uff09<\/p>\n
><\/span> docker-compose run web .\/manage.py startapp myapp\r\n<\/code><\/pre>\n
\u8fd9\u90e8\u5206\u5c06\u88ab\u751f\u6210\u3002<\/p>\n
.\r\n\u2514\u2500django\r\n   \u2514\u2500myapp\r\n       \u251c\u2500migrations\r\n       \u251c\u2500admin.py\r\n       \u251c\u2500apps.py\r\n       \u251c\u2500model.py\r\n       \u251c\u2500tests.py\r\n       \u251c\u2500view.py\r\n       \u2514\u2500__init__.py\r\n<\/code><\/pre>\n
\u5728setting.py\u4e2d\u6dfb\u52a0\u521b\u5efa\u7684\u5e94\u7528\u7a0b\u5e8f\u3002
\n\u5982\u679c\u4e0d\u8fd9\u6837\u505a\uff0cDjango\u4e0a\u751f\u6210\u7684\u5e94\u7528\u7a0b\u5e8f\u5c06\u65e0\u6cd5\u88ab\u8bc6\u522b\u3002<\/p>\n
# ~\u7565~\r\n<\/span>INSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n    'myapp'<\/span>,<\/span> #\u8ffd\u52a0\r\n<\/span>]<\/span>\r\n# ~\u7565~\r\n<\/span><\/code><\/pre>\n
\u6211\u5011\u5c07\u5728\u751f\u6210\u7684models.py\u6587\u4ef6\u4e2d\u9032\u884c\u6a21\u578b\u7684\u9644\u52a0\u3002
\n\u9996\u5148\uff0c\u6211\u5011\u5275\u5efa\u4e00\u500b\u7c21\u55ae\u7684Person_data\u6a21\u578b\u3002
\n\u8a72\u6a21\u578b\u53ea\u5305\u542b\u4eba\u7684\u59d3\u540d\u548c\u5e74\u9f61\u3002
\n\u5c07\u6b64\u5167\u5bb9\u5beb\u5728\u9019\u88e1\uff0c\u901a\u904e\u9077\u79fb\u64cd\u4f5c\uff0c\u5c07\u5728MySQL\u4e0a\u5275\u5efa\u76f8\u61c9\u7684\u8868\u3002<\/p>\n
from<\/span> django.db<\/span> import<\/span> models<\/span>\r\n\r\n# Create your models here.\r\n<\/span>class<\/span> Person_data<\/span>(<\/span>models<\/span>.<\/span>Model<\/span>):<\/span>\r\n    person_name<\/span> =<\/span> models<\/span>.<\/span>TextField<\/span>()<\/span>\r\n    person_age<\/span> =<\/span> models<\/span>.<\/span>IntegerField<\/span>()<\/span>\r\n<\/code><\/pre>\n
\u5982\u679c\u60a8\u65b0\u589e\u4e86\u61c9\u7528\u7a0b\u5f0f\uff0c\u5247\u9700\u8981\u57f7\u884cmakemigrations\u3002<\/p>\n
><\/span> docker-compose run web .\/manage.py makemigrations\r\n><\/span> docker-compose run web .\/manage.py migrate\r\n<\/code><\/pre>\n
\u60a8\u53ef\u4ee5\u901a\u8fc7\u5728admin.py\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\u6765\u4ece\u7ba1\u7406\u754c\u9762\u67e5\u770b\u5df2\u521b\u5efa\u7684\u6a21\u578b\u3002<\/p>\n
from<\/span> django.contrib<\/span> import<\/span> admin<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Person_data<\/span> #\u4f5c\u6210\u3057\u305f\u30e2\u30c7\u30eb\u3092import\r\n<\/span>\r\n# Register your models here.\r\n<\/span>admin<\/span>.<\/span>site<\/span>.<\/span>register<\/span>(<\/span>Person_data<\/span>)<\/span> #\u4f5c\u6210\u3057\u305f\u30e2\u30c7\u30eb\u3092\u8ffd\u8a18\r\n<\/span><\/code><\/pre>\n
\"image.png\"<\/div>\n
\"image.png\"<\/div>\n
\"image.png\"<\/div>\n
\u4f60\u53ef\u4ee5\u5728MySQL\u4e0a\u786e\u8ba4\u4e0b\u9762\u7684\u5185\u5bb9\u3002<\/p>\n
><\/span> docker exec<\/span> -it<\/span> mysql \/bin\/bash #MySQL\u30b3\u30f3\u30c6\u30ca\u306b\u5165\u308b<\/span>\r\n\r\n><\/span> mysql -u<\/span> test<\/span> -p<\/span> #MySQL\u8d77\u52d5<\/span>\r\nEnter password: #\u672c\u8a18\u4e8b\u306e\u4f8b\u3060\u3068test\u3067\u30ed\u30b0\u30a4\u30f3\u53ef\u80fd<\/span>\r\n\r\n><\/span> use test<\/span>;<\/span>\r\n><\/span> select<\/span> *<\/span> from myapp_person_data;<\/span>\r\n+----+-------------+------------+\r\n| id<\/span> | person_name | person_age |\r\n+----+-------------+------------+\r\n|  1 | takashi     |         26 |\r\n|  2 | naoto       |         32 |\r\n|  3 | tomoko      |         15 |\r\n+----+-------------+------------+\r\n3 rows in <\/span>set<\/span> (<\/span>0.00 sec)<\/span>\r\n<\/code><\/pre>\n
Django\u7684\u51c6\u5907\u5de5\u4f5c\u5230\u6b64\u7ed3\u675f\u3002<\/p>\n
\u6784\u5efaDjango REST\u6846\u67b6<\/h1>\n
\u5728\u51c6\u5907\u597dDjango\u4e4b\u540e\uff0c\u63a5\u4e0b\u6765\u6211\u4eec\u5c06\u5728Django\u4e2d\u521b\u5efaAPI\u3002
\n\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u7b80\u5355\u7684API\uff0c\u53ea\u4f7f\u7528GET\u65b9\u6cd5\u6765\u83b7\u53d6\u4e0a\u8ff0\u8868\u683c\u7684\u5185\u5bb9\u3002
\n\u9996\u5148\uff0c\u5728setting.py\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n
\u8fd9\u91cc\u53c2\u8003\u4e86\u4ee5\u4e0b\u5185\u5bb9\uff1a
\n\u5c1d\u8bd5\u4f7f\u7528Django REST Framework\u521b\u5efaAPI
\n\u603b\u7ed3\u4e86\u4f7f\u7528Django REST Framework\u5b9e\u73b0API\u670d\u52a1\u5668\u7684\u7ecf\u9a8c\u548c\u77e5\u8bc6\uff08\u8fd8\u5305\u62ecOAuth\uff09<\/p>\n
# ~\u7565~\r\n<\/span>INSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n    'myapp'<\/span>,<\/span> \r\n    'rest_framework'<\/span>,<\/span> #\u8ffd\u52a0\r\n<\/span>]<\/span>\r\n# ~\u7565~\r\n<\/span><\/code><\/pre>\n
\u901a\u8fc7\u6dfb\u52a0’rest_framework’\uff0c\u53ef\u4ee5\u4f7f\u7528Django REST framework\u7684\u529f\u80fd\u3002
\n\u7136\u540e\uff0c\u624b\u52a8\u521b\u5efaSerializer.py\u3001Renderer.py\u548curls.py\uff08\u5728\u6211\u7684\u5e94\u7528\u7a0b\u5e8f\u4e0b\uff09\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n
.\r\n\u2514\u2500django\r\n   \u2514\u2500myapp\r\n       \u251c\u2500migrations\r\n       \u251c\u2500admin.py\r\n       \u251c\u2500apps.py\r\n       \u251c\u2500model.py\r\n       \u251c\u2500tests.py\r\n       \u251c\u2500view.py\r\n       \u251c\u2500renderers.py #\u3053\u308c\r\n       \u251c\u2500serializers.py #\u3053\u308c\r\n       \u251c\u2500urls.py #\u3053\u308c\r\n       \u2514\u2500__init__.py\r\n<\/code><\/pre>\n
from<\/span> rest_framework<\/span> import<\/span> serializers<\/span>\r\nfrom<\/span> .models<\/span> import<\/span> Person_data<\/span>\r\n\r\nclass<\/span> PersonSerializer<\/span>(<\/span>serializers<\/span>.<\/span>ModelSerializer<\/span>):<\/span>\r\n\r\n    class<\/span> Meta<\/span>:<\/span>\r\n        model<\/span> =<\/span> Person_data<\/span>\r\n        fields<\/span> =<\/span> '__all__'<\/span> \r\n<\/code><\/pre>\n
import<\/span> json<\/span>\r\nfrom<\/span> rest_framework.renderers<\/span> import<\/span> JSONRenderer<\/span>\r\n\r\nclass<\/span> PersonJSONRenderer<\/span>(<\/span>JSONRenderer<\/span>):<\/span>\r\n    charset<\/span> =<\/span> 'utf-8'<\/span>  \r\n\r\n    def<\/span> render<\/span>(<\/span>self<\/span>,<\/span> data<\/span>,<\/span> accepted_media_type<\/span>=<\/span>None<\/span>,<\/span> renderer_context<\/span>=<\/span>None<\/span>):<\/span>\r\n        return<\/span> json<\/span>.<\/span>dumps<\/span>({<\/span>'person_data'<\/span>:<\/span> data<\/span>},<\/span>ensure_ascii<\/span>=<\/span>False<\/span>)<\/span>\r\n<\/code><\/pre>\n
from<\/span> django.urls<\/span> import<\/span> path<\/span>\r\nfrom<\/span> .views<\/span> import<\/span> PersonListApiView<\/span>\r\n\r\n\r\nurlpatterns<\/span> =<\/span> [<\/span>\r\n    path<\/span>(<\/span>'get_person\/'<\/span>,<\/span> PersonListApiView<\/span>.<\/span>as_view<\/span>()),<\/span>\r\n]<\/span>\r\n<\/code><\/pre>\n
\u7f16\u8f91composeexample\u6587\u4ef6\u5939\u4e0b\u7684urls.py\uff0c\u5e76\u542f\u7528myapp\u6587\u4ef6\u5939\u4e0b\u7684urls.py\u3002<\/p>\n
\"\"\"composeexample URL Configuration\r\n\r\nThe `urlpatterns` list routes URLs to views. For more information please see:\r\n    https:\/\/docs.djangoproject.com\/en\/2.2\/topics\/http\/urls\/\r\nExamples:\r\nFunction views\r\n    1. Add an import:  from my_app import views\r\n    2. Add a URL to urlpatterns:  path('', views.home, name='home')\r\nClass-based views\r\n    1. Add an import:  from other_app.views import Home\r\n    2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')\r\nIncluding another URLconf\r\n    1. Import the include() function: from django.urls import include, path\r\n    2. Add a URL to urlpatterns:  path('blog\/', include('blog.urls'))\r\n\"\"\"<\/span>\r\nfrom<\/span> django.contrib<\/span> import<\/span> admin<\/span>\r\nfrom<\/span> django.urls<\/span> import<\/span> path<\/span>,<\/span> include<\/span> # include\u3092\u8ffd\u52a0\r\n<\/span>\r\nfrom<\/span> myapp<\/span> import<\/span> urls<\/span> # myapp\u914d\u4e0b\u306eurls.py\u3092import\r\n<\/span>\r\n\r\nurlpatterns<\/span> =<\/span> [<\/span>\r\n    path<\/span>(<\/span>'admin\/'<\/span>,<\/span> admin<\/span>.<\/span>site<\/span>.<\/span>urls<\/span>),<\/span>\r\n    path<\/span>(<\/span>'api\/'<\/span>,<\/span> include<\/span>(<\/span>urls<\/span>),<\/span> # \u8ffd\u52a0\r\n<\/span>]<\/span>\r\n<\/code><\/pre>\n
\u6211\u8981\u7f16\u8f91view.py\u6587\u4ef6\u3002<\/p>\n
from<\/span> django.shortcuts<\/span> import<\/span> render<\/span>\r\nfrom<\/span> django.views.generic<\/span> import<\/span> ListView<\/span>\r\n\r\nfrom<\/span> myapp.models<\/span> import<\/span> Person_data<\/span>\r\n\r\nfrom<\/span> rest_framework<\/span> import<\/span> status<\/span>\r\nfrom<\/span> rest_framework.generics<\/span> import<\/span> ListAPIView<\/span>\r\nfrom<\/span> rest_framework.permissions<\/span> import<\/span> AllowAny<\/span>\r\n\r\nfrom<\/span> .renderers<\/span> import<\/span> PersonJSONRenderer<\/span>\r\nfrom<\/span> .serializers<\/span> import<\/span> PersonSerializer<\/span>\r\n\r\n# Create your views here.\r\n<\/span>\r\nclass<\/span> PersonListApiView<\/span>(<\/span>ListAPIView<\/span>):<\/span>\r\n    model<\/span> =<\/span> Person_data<\/span> # \u30e2\u30c7\u30eb\u3092\u6307\u5b9a\r\n<\/span>    queryset<\/span> =<\/span> Person_data<\/span>.<\/span>objects<\/span>.<\/span>all<\/span>()<\/span>\r\n    permission_classes<\/span> =<\/span> (<\/span>AllowAny<\/span>,<\/span> )<\/span>\r\n    renderer_classes<\/span> =<\/span> (<\/span>PersonJSONRenderer<\/span>,<\/span> )<\/span> # Renderer\u3092\u6307\u5b9a\r\n<\/span>    serializer_class<\/span> =<\/span> PersonSerializer<\/span> # Serializer\u3092\u6307\u5b9a\r\n<\/span>\r\n<\/code><\/pre>\n
\u5728settings.py\u6587\u4ef6\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n
REST_FRAMEWORK<\/span> =<\/span> {<\/span>\r\n    # Use Django's standard `django.contrib.auth` permissions,\r\n<\/span>    # or allow read-only access for unauthenticated users.\r\n<\/span>    'DEFAULT_PERMISSION_CLASSES'<\/span>:<\/span> [<\/span>\r\n        'rest_framework.permissions.DjangoModelPermissionsOrAnonReadOnly'<\/span>\r\n    ]<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\"image.png\"<\/div>\n
\u4f7f\u7528Nuxt.js\u83b7\u53d6API\u7ed3\u679c\u3002<\/h1>\n
\u5df2\u7ecf\u5b8c\u6210\u4e86Django\u7aef\u7684API\uff0c\u73b0\u5728\u8981\u5f00\u59cb\u6784\u5efa\u524d\u7aef\u3002
\n\u53c2\u8003\u4e86\u4ee5\u4e0b\u5185\u5bb9\u3002
\n\u7406\u89e3Nuxt.js\u548cVue.js\u7684\u57fa\u672c\u7528\u6cd5\u3002
\nNuxt.js\u5b98\u65b9\u7f51\u7ad9\u3002<\/p>\n
\u9996\u5148\u8fdb\u5165Nuxt.js\u7684\u5bb9\u5668\uff0c\u521b\u5efa\u4e00\u4e2a\u9879\u76ee\uff08\u9879\u76ee\u540d\u79f0\u53ef\u4ee5\u4efb\u610f\uff09\u3002<\/p>\n
\u5728\u8f93\u5165 “yarn create nuxt-app front” \u4e4b\u540e\uff0c\u9009\u62e9\u57fa\u672c\u4e0a\u90fd\u91c7\u7528\u4e86\u9ed8\u8ba4\u503c\uff0c\u53ea\u662f\u5c06\u6e32\u67d3\u6a21\u5f0f\u8bbe\u7f6e\u4e3a\u5355\u9875\u9762\u5e94\u7528\u7a0b\u5e8f\u3002
\n\u8fd9\u91cc\u7684\u8bbe\u7f6e\u53ef\u4ee5\u5728\u4ee5\u540e\u7684 “nuxt.config.js” \u6587\u4ef6\u4e2d\u8fdb\u884c\u66f4\u6539\u3002<\/p>\n
><\/span> docker exec<\/span> -it<\/span> nuxt \/bin\/bash\r\n\r\n><\/span> yarn create nuxt-app front\r\n\r\n? Project name front\r\n? Project description My doozie Nuxt.js project\r\n? Author name\r\n? Choose the package manager Yarn\r\n? Choose UI framework None\r\n? Choose custom server framework None (<\/span>Recommended)<\/span>\r\n? Choose Nuxt.js modules (<\/span>Press <space> to select<\/span>, <a> to toggle all, <i> to invert selection)<\/span>\r\n? Choose linting tools (<\/span>Press <space> to select<\/span>, <a> to toggle all, <i> to invert selection)<\/span>\r\n? Choose test <\/span>framework None\r\n? Choose rendering mode Single Page App\r\n? Choose development tools (<\/span>Press <space> to select<\/span>, <a> to toggle all, <i> to invert selection)<\/span>\r\n\r\n<\/code><\/pre>\n
\u5982\u679c\u4e0b\u5217\u5185\u5bb9\u663e\u793a\u51fa\u6765\uff0c\u5c31\u8868\u793a\u5b8c\u6210\u4e86\u3002<\/p>\n
?  Successfully created project front\r\n\r\n  To get started:\r\n\r\n        cd <\/span>front\r\n        yarn dev\r\n\r\n  To build & start for <\/span>production:\r\n\r\n        cd <\/span>front\r\n        yarn build\r\n        yarn start\r\n\r\nDone in <\/span>167.32s.\r\n<\/code><\/pre>\n
\u5728\u8fd0\u884c\u5f00\u53d1\u670d\u52a1\u5668\u4e4b\u524d\uff0c\u9700\u8981\u5728nuxt.config.js\u4e2d\u6dfb\u52a0\u4ee3\u7801\u4ee5\u8fdb\u884c\u786e\u8ba4\u3002
\n\u5728docker\u4e0a\u8fd0\u884cnuxt.js\u65f6\uff0c\u9700\u8981\u4ee5\u4e0b\u5185\u5bb9\u3002\u8bf7\u53c2\u8003\u3002<\/p>\n
export<\/span> default<\/span> {<\/span>\r\n  mode<\/span>:<\/span> '<\/span>spa<\/span>'<\/span>,<\/span>\r\n\r\n  \/\/\u3053\u3053\u304b\u3089<\/span>\r\n  server<\/span>:<\/span> {<\/span>\r\n    port<\/span>:<\/span> 3000<\/span>,<\/span>\r\n    host<\/span>:<\/span> '<\/span>0.0.0.0<\/span>'<\/span>,<\/span>  \r\n  },<\/span>\r\n  \/\/\u3053\u3053\u307e\u3067\u3092\u8ffd\u8a18<\/span>\r\n\r\n  \/*\r\n  ** Headers of the page\r\n  *\/<\/span>\r\n<\/code><\/pre>\n
\u6211\u5c06\u5c1d\u8bd5\u8fd0\u884c\u5f00\u53d1\u670d\u52a1\u5668\u3002\u5728\u5b8c\u6210\u540e\u7684\u6d88\u606f\u4e2d\u4e5f\u6709\u63d0\u5230\uff0c\u60a8\u9700\u8981\u8fdb\u5165\u5bb9\u5668\u5185\u521b\u5efa\u7684\u9879\u76ee\u6587\u4ef6\u5939\uff0c\u7136\u540e\u8fd0\u884c”yarn dev”\u547d\u4ee4\u3002<\/p>\n
><\/span> cd <\/span>front\r\n><\/span> yarn dev\r\n<\/code><\/pre>\n
\"image.png\"<\/div>\n
\u5728\u4ece\u8fd9\u91cc\u5f00\u59cb\u7f16\u8f91\u65f6\u542f\u7528\u70ed\u91cd\u8f7d\u3002
\n\u5982\u679c\u8981\u5728Docker\u4e0a\u8fdb\u884c\u5f00\u53d1\uff0c\u5219\u9700\u8981\u660e\u786e\u6307\u5b9a\u3002
\n\u8bf7\u53c2\u8003\u5982\u4e0b\u6240\u793a\uff0c\u5728\u6587\u4ef6\u672b\u5c3e\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\u3002<\/p>\n
export<\/span> default<\/span> {<\/span>\r\n\/\/~\u7565~<\/span>\r\n  },<\/span> \/\/\u8ffd\u8a18\u306e\u969b\u306f\u3053\u306e\u30ab\u30f3\u30de\u3092\u5fd8\u308c\u305a\u306b<\/span>\r\n  watchers<\/span>:<\/span> {<\/span>\r\n    webpack<\/span>:<\/span> {<\/span>\r\n      poll<\/span>:<\/span> true<\/span>\r\n    }<\/span>\r\n  }<\/span>\r\n}<\/span>\r\n<\/code><\/pre>\n
\u63a5\u7740\u6211\u4eec\u5c06\u6dfb\u52a0axios\u7684\u8bbe\u7f6e\u3002
\naxios\u662f\u4e00\u4e2a\u5728node.js\u4e2d\u8fd0\u884c\u7684HTTP\u5ba2\u6237\u7aef\uff0c\u6211\u4eec\u5c06\u4f7f\u7528\u5b83\u4ecenuxt.js\u4e2d\u8c03\u7528\u4e4b\u524d\u63d0\u5230\u7684API\u7684URL\u3002
\n\u7531\u4e8e\u5728\u524d\u9762\u63d0\u5230\u7684nuxt\u7684dockerfile\u4e2d\u5df2\u7ecf\u5305\u542b\u4e86\u8fd9\u4e9b\u5185\u5bb9\uff0c\u6240\u4ee5axios\u5df2\u7ecf\u5b89\u88c5\u5728\u5bb9\u5668\u4e2d\u3002
\n\u6211\u4eec\u5c06\u5728modules\u4e2d\u6dfb\u52a0\u4ee5\u4e0b\u5185\u5bb9\uff0c\u5e76\u6dfb\u52a0axios\u3002<\/p>\n
export<\/span> default<\/span> {<\/span>\r\n\/\/~\u7565~<\/span>\r\n  modules<\/span>:<\/span> [<\/span>\r\n    '<\/span>@nuxtjs\/axios<\/span>'<\/span>,<\/span>\r\n  ],<\/span>\r\n  axios<\/span>:<\/span> {<\/span>\r\n    baseURL<\/span>:<\/span> \"<\/span>http:\/\/localhost:8000<\/span>\"<\/span>\r\n  },<\/span>\r\n\/\/~\u7565~<\/span>\r\n<\/code><\/pre>\n
\u4e3a\u4e86\u7b80\u5316\u64cd\u4f5c\uff0c\u6211\u4eec\u5c06\u7f16\u8f91\u9996\u9875\u3002
\n\u63a5\u4e0b\u6765\uff0c\u6211\u4eec\u5c06\u5bf9\u5b9e\u9645\u9875\u9762\u8fdb\u884c\u7f16\u8f91\u3002<\/p>\n
<<\/span>template<\/span>><\/span>\r\n  <div<\/span> class=<\/span>\"container\"<\/span>><\/span>\r\n    <div><\/span>\r\n      <logo<\/span> \/><\/span>\r\n      <h1<\/span> class=<\/span>\"title\"<\/span>><\/span>\r\n        front\r\n      <\/h1><\/span>\r\n      <h2<\/span> class=<\/span>\"subtitle\"<\/span>><\/span>\r\n        My doozie Nuxt.js project\r\n      <\/h2><\/span>\r\n      <div<\/span> class=<\/span>\"links\"<\/span>><\/span>\r\n        <a<\/span>\r\n          href=<\/span>\"https:\/\/nuxtjs.org\/\"<\/span>\r\n          target=<\/span>\"_blank\"<\/span>\r\n          class=<\/span>\"button--green\"<\/span>\r\n        ><\/span>\r\n          Documentation\r\n        <\/a><\/span>\r\n        <a<\/span>\r\n          href=<\/span>\"https:\/\/github.com\/nuxt\/nuxt.js\"<\/span>\r\n          target=<\/span>\"_blank\"<\/span>\r\n          class=<\/span>\"button--grey\"<\/span>\r\n        ><\/span>\r\n          GitHub\r\n        <\/a><\/span>\r\n\r\n<!-- \u3053\u3053\u304b\u3089\u8ffd\u8a18 --><\/span>\r\n        <div<\/span> v-for=<\/span>\"d in dat.person_data\"<\/span> :key=<\/span>d.person_name<\/span> align=<\/span>\"center\"<\/span>><\/span>\r\n          <h2><\/span>\r\n            {{<\/span>d<\/span>.<\/span>person_name<\/span>}}<\/span> {{<\/span>d<\/span>.<\/span>person_age<\/span>}}<\/span> \r\n          <\/h2><\/span>\r\n        <\/div><\/span>\r\n<!-- \u3053\u3053\u307e\u3067\u8ffd\u8a18 --><\/span>\r\n\r\n      <\/div><\/span>\r\n    <\/div><\/span>\r\n  <\/div><\/span>\r\n<\/<\/span>template<\/span>><\/span>\r\n\r\n<<\/span>script<\/span>><\/span>\r\nimport<\/span> Logo<\/span> from<\/span> '<\/span>~\/components\/Logo.vue<\/span>'<\/span>\r\n\r\nexport<\/span> default<\/span> {<\/span>\r\n  components<\/span>:<\/span> {<\/span>\r\n    Logo<\/span>\r\n  },<\/span>\r\n\r\n\/\/\u3053\u3053\u304b\u3089\u8ffd\u8a18<\/span>\r\n  data<\/span>()<\/span> {<\/span>\r\n    return<\/span> {<\/span>\r\n      dat<\/span>:<\/span> []<\/span>\r\n    }<\/span>\r\n  },<\/span>\r\n  async<\/span> mounted<\/span>(){<\/span>\r\n    const<\/span> url<\/span> =<\/span> \"<\/span>\/api\/get_person\/<\/span>\"<\/span> \r\n    const<\/span> response<\/span> =<\/span> await<\/span> this<\/span>.<\/span>$axios<\/span>.<\/span>get<\/span>(<\/span>url<\/span>)<\/span>\r\n    this<\/span>.<\/span>dat<\/span> =<\/span> response<\/span>.<\/span>data<\/span>\r\n  }<\/span>\r\n\/\/\u3053\u3053\u307e\u3067\u8ffd\u8a18<\/span>\r\n}<\/span>\r\n<\/<\/span>script<\/span>><\/span>\r\n\/\/~\u7565~\r\n<\/code><\/pre>\n
\u7531\u4e8e\u8fd9\u6837\u7684\u8bdd\u4f1a\u9047\u5230CORS\u95ee\u9898\uff0c\u6240\u4ee5\u9700\u8981\u8c03\u6574django\u7684\u8bbe\u7f6e\u3002\u5c06\u5176\u6dfb\u52a0\u5230setting.py\u4e2d\u3002<\/p>\n
# ~\u7565~\r\n<\/span>INSTALLED_APPS<\/span> =<\/span> [<\/span>\r\n    'django.contrib.admin'<\/span>,<\/span>\r\n    'django.contrib.auth'<\/span>,<\/span>\r\n    'django.contrib.contenttypes'<\/span>,<\/span>\r\n    'django.contrib.sessions'<\/span>,<\/span>\r\n    'django.contrib.messages'<\/span>,<\/span>\r\n    'django.contrib.staticfiles'<\/span>,<\/span>\r\n    'myapp'<\/span>,<\/span> \r\n    'rest_framework'<\/span>,<\/span> \r\n    'corsheaders'<\/span>,<\/span> #\u8ffd\u52a0\r\n<\/span>]<\/span>\r\n\r\nMIDDLEWARE<\/span> =<\/span> [<\/span>\r\n    'corsheaders.middleware.CorsMiddleware'<\/span>,<\/span> # \u8ffd\u52a0\r\n<\/span>    'django.middleware.security.SecurityMiddleware'<\/span>,<\/span>\r\n    'django.contrib.sessions.middleware.SessionMiddleware'<\/span>,<\/span>\r\n    'django.middleware.common.CommonMiddleware'<\/span>,<\/span>\r\n    'django.middleware.csrf.CsrfViewMiddleware'<\/span>,<\/span>\r\n    'django.contrib.auth.middleware.AuthenticationMiddleware'<\/span>,<\/span>\r\n    'django.contrib.messages.middleware.MessageMiddleware'<\/span>,<\/span>\r\n    'django.middleware.clickjacking.XFrameOptionsMiddleware'<\/span>,<\/span>\r\n]<\/span>\r\n# ~\u7565~\r\n<\/span>\r\n### \u672b\u5c3e\u306b\u4e0b\u8a18\u3092\u8ffd\u52a0\r\n<\/span>\r\n# \u8a31\u53ef\u3059\u308b\u30aa\u30ea\u30b8\u30f3\r\n<\/span>CORS_ORIGIN_WHITELIST<\/span> =<\/span> [<\/span>\r\n    'http:\/\/localhost:3000'<\/span>,<\/span>\r\n]<\/span>\r\n# \u30ec\u30b9\u30dd\u30f3\u30b9\u3092\u516c\u958b\u3059\u308b\r\n<\/span>CORS_ALLOW_CREDENTIALS<\/span> =<\/span> True<\/span>\r\n<\/code><\/pre>\n
\"image.png\"<\/div>\n
\u6700\u540e<\/h1>\n
\u6211\u5df2\u7ecf\u901a\u8fc7API\u5b9e\u73b0\u4e86Django\u548cNuxt.js\u7684\u7b80\u5355\u96c6\u6210\u3002\u4ee5\u4e0a\u662f\u5f00\u53d1\u73af\u5883\u7684\u5185\u5bb9\uff0c\u6211\u8ba4\u4e3a\u53ef\u80fd\u9700\u8981\u8fdb\u884c\u8c03\u6574\u4ee5\u7528\u4e8e\u751f\u4ea7\u73af\u5883\u3002\u4e3a\u4e86\u5b66\u4e60\u76ee\u7684\uff0c\u6211\u73b0\u5728\u5148\u53d1\u5e03\u6b64\u9636\u6bb5\u7684\u5185\u5bb9\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
\u9996\u5148 \u6211\u662f\u7b2c\u4e00\u6b21\u6295\u7a3f\u3002 \u6700\u8fd1\u6211\u5bf9Web\u5f00\u53d1\u5f88\u611f\u5174\u8da3\uff0c\u6b63\u5728\u5b66\u4e60\u5404\u79cd\u77e5\u8bc6\u3002 \u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u4ecb\u7ecd\u4e00\u4e2a\u4f7f\u7528Djan […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-49449","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\n\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c - Blog - Silicon Cloud<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86nuxt-js\u524d\u7aef\u4e0edjango\u540e\u7aef\u4e4b\u95f4\u7684api\u534f\u4f5c\u3002\/\" \/>\n<meta property=\"og:locale\" content=\"zh_CN\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c\" \/>\n<meta property=\"og:description\" content=\"\u9996\u5148 \u6211\u662f\u7b2c\u4e00\u6b21\u6295\u7a3f\u3002 \u6700\u8fd1\u6211\u5bf9Web\u5f00\u53d1\u5f88\u611f\u5174\u8da3\uff0c\u6b63\u5728\u5b66\u4e60\u5404\u79cd\u77e5\u8bc6\u3002 \u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u4ecb\u7ecd\u4e00\u4e2a\u4f7f\u7528Djan […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86nuxt-js\u524d\u7aef\u4e0edjango\u540e\u7aef\u4e4b\u95f4\u7684api\u534f\u4f5c\u3002\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog - Silicon Cloud\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-23T17:58:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-04-30T06:29:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8b6b913a08637a6cd7f0\/3-0.jpeg\" \/>\n<meta name=\"author\" content=\"\u6587, \u7fd4\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"\u4f5c\u8005\" \/>\n\t<meta name=\"twitter:data1\" content=\"\u6587, \u7fd4\" \/>\n\t<meta name=\"twitter:label2\" content=\"\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 \u5206\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/\",\"name\":\"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c - Blog - Silicon Cloud\",\"isPartOf\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\"},\"datePublished\":\"2023-04-23T17:58:08+00:00\",\"dateModified\":\"2024-04-30T06:29:28+00:00\",\"author\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/#breadcrumb\"},\"inLanguage\":\"zh-Hans\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"\u9996\u9875\",\"item\":\"https:\/\/www.silicloud.com\/zh\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#website\",\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/\",\"name\":\"Blog - Silicon Cloud\",\"description\":\"\",\"inLanguage\":\"zh-Hans\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c\",\"name\":\"\u6587, \u7fd4\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g\",\"caption\":\"\u6587, \u7fd4\"},\"url\":\"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/\"},{\"@type\":\"ImageObject\",\"inLanguage\":\"zh-Hans\",\"@id\":\"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/#local-main-organization-logo\",\"url\":\"\",\"contentUrl\":\"\",\"caption\":\"Blog - Silicon Cloud\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c - Blog - Silicon Cloud","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86nuxt-js\u524d\u7aef\u4e0edjango\u540e\u7aef\u4e4b\u95f4\u7684api\u534f\u4f5c\u3002\/","og_locale":"zh_CN","og_type":"article","og_title":"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c","og_description":"\u9996\u5148 \u6211\u662f\u7b2c\u4e00\u6b21\u6295\u7a3f\u3002 \u6700\u8fd1\u6211\u5bf9Web\u5f00\u53d1\u5f88\u611f\u5174\u8da3\uff0c\u6b63\u5728\u5b66\u4e60\u5404\u79cd\u77e5\u8bc6\u3002 \u5728\u8fd9\u7bc7\u6587\u7ae0\u4e2d\uff0c\u6211\u5c06\u4ecb\u7ecd\u4e00\u4e2a\u4f7f\u7528Djan […]","og_url":"https:\/\/www.silicloud.com\/zh\/blog\/\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86nuxt-js\u524d\u7aef\u4e0edjango\u540e\u7aef\u4e4b\u95f4\u7684api\u534f\u4f5c\u3002\/","og_site_name":"Blog - Silicon Cloud","article_published_time":"2023-04-23T17:58:08+00:00","article_modified_time":"2024-04-30T06:29:28+00:00","og_image":[{"url":"https:\/\/cdn.silicloud.com\/blog-img\/blog\/img\/657d8b6b913a08637a6cd7f0\/3-0.jpeg"}],"author":"\u6587, \u7fd4","twitter_card":"summary_large_image","twitter_misc":{"\u4f5c\u8005":"\u6587, \u7fd4","\u9884\u8ba1\u9605\u8bfb\u65f6\u95f4":"7 \u5206"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/","url":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/","name":"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c - Blog - Silicon Cloud","isPartOf":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website"},"datePublished":"2023-04-23T17:58:08+00:00","dateModified":"2024-04-30T06:29:28+00:00","author":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c"},"breadcrumb":{"@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/#breadcrumb"},"inLanguage":"zh-Hans","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"\u9996\u9875","item":"https:\/\/www.silicloud.com\/zh\/blog\/"},{"@type":"ListItem","position":2,"name":"\u6211\u5c1d\u8bd5\u5b9e\u73b0\u4e86Nuxt.js\u524d\u7aef\u4e0eDjango\u540e\u7aef\u4e4b\u95f4\u7684API\u534f\u4f5c"}]},{"@type":"WebSite","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#website","url":"https:\/\/www.silicloud.com\/zh\/blog\/","name":"Blog - Silicon Cloud","description":"","inLanguage":"zh-Hans"},{"@type":"Person","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/64d5cc7727fffbff2f9a2a8da1de3e5c","name":"\u6587, \u7fd4","image":{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/920c3d673e0bccacc98e5e6b7149bb3c22edd8d39cb753e5d7d7e471498118a1?s=96&d=mm&r=g","caption":"\u6587, \u7fd4"},"url":"https:\/\/www.silicloud.com\/zh\/blog\/author\/wenxiang\/"},{"@type":"ImageObject","inLanguage":"zh-Hans","@id":"https:\/\/www.silicloud.com\/zh\/blog\/%e6%88%91%e5%b0%9d%e8%af%95%e5%ae%9e%e7%8e%b0%e4%ba%86nuxt-js%e5%89%8d%e7%ab%af%e4%b8%8edjango%e5%90%8e%e7%ab%af%e4%b9%8b%e9%97%b4%e7%9a%84api%e5%8d%8f%e4%bd%9c%e3%80%82\/#local-main-organization-logo","url":"","contentUrl":"","caption":"Blog - Silicon Cloud"}]}},"_links":{"self":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49449","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/comments?post=49449"}],"version-history":[{"count":2,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49449\/revisions"}],"predecessor-version":[{"id":92463,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/posts\/49449\/revisions\/92463"}],"wp:attachment":[{"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/media?parent=49449"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/categories?post=49449"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.silicloud.com\/zh\/blog\/wp-json\/wp\/v2\/tags?post=49449"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}