这是一个基于Vue2、TypeScript（clas-component）、vuetyfy、Django和PostgreSQL的开发，用于前后端分离系统的环境配置等工作。

這個專案是為那些完全沒碰過Vue或Django的人，以及想要學習編程卻不知道從何下手的人而製作的。它被簡化到最低限度的形式，並且在git上提供了可擴展的程式碼，只需複製下來，就可以在參考的基礎上進行。不過，請注意，這是一個由一位只有兩年工作經驗的新人在很短的時間內完成的，所以程式碼可能不是很高質量。請諒解。

由于最初的代码预计从git上克隆，如果您希望从更开始构建环境，很抱歉。

以下是一个可能的中文释义：

– 水流
– 进展
– 潮流
– 演变
– 趋势
– 走势
– 传统
– 风格

※因为开发是针对Windows进行的，所以也会提到一些Mac的命令，但不确定是否正确，如果无法运行，请自行查询。
– 准备postgreSQL
– 后端
– 前端
（请使用您喜欢的编辑器。我在前端使用VScode，在后端使用Pycharm。原因是当前工作环境是这样的。）
– 结束
请参考下面链接进行操作！
https://qiita.com/OTA_nagisa/private/2dad312cc9022945a551

我参考的网站

用Django和Vue.js创建的Web应用
从【Django REST Framework + Vue.js】API获取并显示数据
Django和DRF的教程
Vue/Vuex TypeScript示例：JWT身份验证 | vuex-class和vuex-module-decorators
如何使用PostgreSQL。

等等

准备PostgreSQL

安装PostgreSQL。

首先，請參考「PostgreSQL的使用方法」這個網站，將PostgreSQL設置為可用的狀態。版本可以使用最新的。

具體而言，我認為只需要以下步驟即可。（我記得）
1. 下載並安裝PostgreSQL。
2. 設置環境變數(PATH)。
3. 啟動或停止PostgreSQL作為Windows服務。

Mac用户可以参考【Mac】PostgreSQL的安装这篇文章。由于我没有Mac，所以不能确定这是否能行…

创建数据库

请根据以下参考创建数据库。如果不清楚的话，请查阅一下！
– 使用psql执行SQL命令。
– 创建数据库（CREATE DATABASE）。

安装DBeaver

如果能创建数据库，请安装DBeaver。如果您还熟悉其他工具，可以使用那个工具。当我自己安装时，我不记得参考了哪个网站的（初学者向）DBeaver安装方法，但请参考此处完成安装并选择MySQL之前的步骤。

如果做不到，我就不知道。

后端

请先创建一个放置项目文件夹的位置。这是将前端和后端放在一起的地方。

请先安装Python！最新版本可能会出现错误，建议安装3.8或更高版本。

请从这里克隆后端代码库。

git clone https://github.com/OTAnagisa/vue2-drf-rest.git

克隆后，进行一些操作后，将打开该文件夹在编辑器中。

以下是其中一种中文的表达方式：
于是，打开终端并进入虚拟环境。
如果是PowerShell的话

python -m venv venv
venv\Scripts\activate.ps1

Macならこうらしい
python3 -m venv .venv
source .venv/bin/activate

只要看到(vnev)出现在头上就可以了
一旦进入虚拟环境，就可以了

pip install -r requirements.txt

将数据库连接在一起

我将连接到最初创建的 postgreSQL 数据库。

如果可以改变的话，我会迁移。(可能有些人不知道我在说什么，但我认为如果以后接触到代码，就会明白，所以不需要考虑什么。)
这里如果是Mac的话，是用python3吗？

最初にsequencesをマイグレ
python manage.py migrate sequences
もしくは
python3 manage.py migrate sequences

その後残りをマイグレ
python manage.py migrate
もしくは
python3 manage.py migrate

尽管只有一点点，但初始数据也已经加载了，所以可以运行服务器并运行。

python manage.py runserver
もしくは
python3 manage.py runserver

“PyCharm”的设置

这边不做也没关系，但我认为最好还是做一下。
我不知道如果使用不同的编辑器。

调试设置

设置Python控制台

在控制台上搜索并设置Python控制台的配置，如图所示，然后重新启动。
环境变量：
DJANGO_SETTINGS_MODULE=rest.settings;PYTHONUNBUFFERED=1
Python解释器：
使用的Python版本
工作目录：
后端文件夹的路径
启动脚本：（更改此处可能需要重新启动才能生效）
import django; django.setup()
import sys; print(‘Python %s on %s’ % (sys.version, sys.platform))
sys.path.extend([WORKING_DIR_AND_PYTHON_PATHS])

这样后端就完成了！

前端

请从这里克隆前端代码仓库。

git clone https://github.com/OTAnagisa/vue2-drf-client.git

这边也请随便设置init和其他什么的！

在编辑器中打开文件夹，然后在终端中运行npm install。

结束后运行“npm start”。

结束了！完结了！

最后

我创建了一个这样的列表，列出了一些好像做这样的事情会很好的想法。
由于我没有写太多解释，所以请您从您感兴趣的地方开始，边查找信息边尝试进展。

 

故意設計較為複雜的表結構，或因時間不足而存在一些草率的部分，如果能進行重構，那就好了…