Vue腳手架+Django+DRF+Docker+gitee+postgis開發筆記

1.參考資料的位置

模塊 資料位置
Vue基礎 文檔：/Users/cocytus/Desktop/平臺建設/開發/Vue/VUE基礎.md
案例：/Users/cocytus/vueProjects/vue學習（sublime）
Vue腳手架 文檔：/Users/cocytus/Desktop/平臺建設/開發/Vue/Vue腳手架（自己寫的）
案例：/Users/cocytus/vueProjects/vue_cli_test（vscode）
RDF 文檔：見案例中
案例：/Users/cocytus/PycharmProjects/Django/restfulproject（Pycharm）
gitee 基礎：/Users/cocytus/Desktop/平臺建設/開發/git/
正式使用：見pad（git使用--gitee）
docker 文檔：/Users/cocytus/Desktop/平臺建設/開發/docker/groundwaterDocker（很好）
視頻https://www.bilibili.com/video/BV18J411n79W?spm_id_from=333.1007.top_right_bar_window_custom_collection.content.click

2.創建倉庫gitee

  • 開源在創建完成后才能配置
  • 倉庫名建議后綴是_git
  • 忽略文件選python
  • 進入pycharmprojects/Django，此時開始克隆
git clone git@gitee.com:hetianyu20/vue-django_git.git
  • 配置.gitingore文件，防止pycharm開發環境的相關文件被git，以及腳手架相關的文件node_modules
    • 這里vuedjango是工程名（在使用pycharm打開該工程時，會出現.idea文件）
# Pycharm .idea file
vuedjango/.idea/*

  • 進入vue-django_git文件，開始執行django項目創建，見第3大點

  • 提交步驟

    • 查看當前狀態

      git status

    • 準備提交，會忽略gitingore的內容

      git add .

    • 提交到本地倉庫（寫一個功能就commit一次）

      git commit -m "本次提交的描述"

    • 提交到遠程倉庫（一天push一次）

      git push

  • 在Pycharm中使用git，打開項目（注意不是clone的這個_git目錄）

    • 點擊VCS-Enable Version Control In.....識別git
    • command+k 進入git操作 勾選= add .
    • Commit Message = 描述
    • 右下角Commit按鈕=commit
    • command+shift+k=push

  • 取消最近一次commit（未push時）

git reset --hard HEAD~1

3.Django項目創建

  • 先創建虛擬環境，使用虛擬環境下的Django創建項目
mkvirtualenv -p python3 vuedjango
workon vuedjango
  • 在虛擬環境中安裝django 3.1版本（這是第一個pip）
pip install django==3.1
  • 在vue-django_git目錄下執行創建，注意在虛擬環境下創建
django-admin startproject vuedjango

  • 創建三個python package，分別是apps，utils和libs

  • 進入apps文件夾，開始創建應用student

python ../manage.py startapp student

修改如下配置

1.注冊應用（setting）

'apps.student'

2.嘗試啟動服務器看看目前是否有問題

python ../manage.py runserver 
python ../manage.py runserver 127.0.0.1:8001

3.與postgis的配置 （setting）

postgis在docker上 。地址：xxxx用戶名和密碼均是xxxx。
  • 現在docker中（postgis 的client中）創建一個數據庫，名字和項目一樣
CREATE DATABASE vuedjango;
  • 配置（setting）
DATABASES = {
    'default': {
         'ENGINE': 'django.db.backends.postgresql_psycopg2',
         'NAME': 'xxxx', # 數據庫名稱 需要在postgresql中提前建立該庫
         'USER': 'xxxx',
        'PASSWORD': 'xxxx', # 登錄數據庫密碼
        'HOST': 'xxxx', # 數據庫服務器的主機地址 后面需要改成docker宿主機的ip 宿主機需要映射到數據庫容器端口
        'PORT': 'xxxx', # 數據庫服務的端口號
    },
}
    • 安裝依賴（這是第二個pip）**
    pip install psycopg2
pip install gdal==3.1.4 暫時沒用上這個庫

    • 運行服務器以測試(看在哪個目錄)

    • python manage.py runserver

    • 配置后臺管理部分(本地化)

      LANGUAGE_CODE = 'zh-hans'
TIME_ZONE = 'Asia/Shanghai'

  • models+遷移

class StudentInfo(models.Model):
    """學生模型"""

    sname = models.CharField(max_length=20,verbose_name='姓名')
    sbirth = models.DateField(verbose_name='出生日期')
    snum = models.IntegerField(verbose_name='學號')
    sage = models.IntegerField(verbose_name='年齡')
    isdelete = models.BooleanField(default=False, verbose_name='邏輯刪除')

    class Meta:
        db_table = 'tb_students'
        verbose_name = '學生'
        verbose_name_plural = verbose_name

    def __str__(self):
        return self.sname

生成遷移文件

python manage.py makemigrations

執行遷移文件生成表

python manage.py migrate

去docker查看表

docker run -it --rm --net groundwaternet --ip [xxxx] postgis/postgis psql -h [xxxx] -U [xxxx]

\c vuedjango 鏈接庫

\d 顯示表

select * from tb_student;

生成一些假數據

INSERT INTO tb_students(sname,sbirth,snum,sage,isdelete) VALUES 
('咖啡', '1984-2-1', '10001', '21',false),
('果殼', '1985-2-2', '10002', '22',true),
('雞胸肉', '1986-2-3', '10003', '23',false);

  • 引入restframework，開始寫視圖

    • 安裝（這是第三個pip）

      pip install djangorestframework

    • 注冊

    'rest_framework',

  • 實現序列化器

    • 創建一個serializers.py文件（每個app里面）
    from rest_framework import serializers
from apps.student.models import StudentInfo

# 定義序列化器 這里需要繼承serializers.ModelSerializer
class StudentModelSerializer(serializers.ModelSerializer):
    class Meta:
        # 就寫這兩句 自動創建所有model
        model = StudentInfo # 參考模型類生成字段
        fields = "__all__" # 生成所有字段

  • 創建視圖集

    from django.shortcuts import render
from rest_framework.viewsets import ModelViewSet
from apps.student.models import StudentInfo
from apps.student.serializers import StudentModelSerializer

# 自帶五種方法 getall addone ||  deleteone getone updateone
class BookModelCustomViewSet(ModelViewSet):

    queryset = StudentInfo.objects.all()
    serializer_class = StudentModelSerializer
    # 根據id進行get update之類的操作 id時只能寫pk，其他寫sname也可以
    lookup_field = "pk"

  • 自動生成路由

    from django.urls import path
from apps.student.views import StudentModelCustomViewSet

urlpatterns = [
    # url(r'^index/$', IndexView.as_view()),
]
from rest_framework.routers import SimpleRouter,DefaultRouter
# 1.創建 兩種形式 router = DefaultRouter()會贈送一些額外的路由 都可以
router = SimpleRouter()

# 2.注冊視圖集
# 第一個參數：'books' 即公共的路由 都從這里進入
# 第二個參數是視圖集 最后一個參數不重要
router.register('books', StudentModelCustomViewSet, basename="hhhh")
urlpatterns += router.urls
# 3.查看
print(urlpatterns)

  • 打印的路由效果

    [<URLPattern '^books/$' [name='hhhh-list']>, <URLPattern '^books/(?P<pk>[^/.]+)/$' [name='hhhh-detail']>]

  • 測試 http://127.0.0.1:8000/students/ 即get請求all數據
    配置urls

  • 在項目的總urls.py中

    from django.contrib import admin
from django.urls import path
from django.conf.urls import url, include

urlpatterns = [
    path('admin/', admin.site.urls),
    url(r'^', include('apps.student.urls')),
]

  • 每一個app下面都有一個urls.py文件，內容見上面自動生成路由部分

至此，Django+RDF項目完成，并能返回JSON數據

<meta charset="UTF-8">

創建Vue-cli

  • 新建一個終端，進入vue-django_git文件夾下,此時里面就一個django項目，與這個項目平級的創建一個腳手架。

  • 在當前文件夾下創建vue-cli，選項Vue2---npm。腳手架版本：Vue CLI v5.0.1

    vue create vue_cli_test

  • 啟動服務器測試是否成功，進入該腳手架

    npm run serve

  • 停止 crtl+c

  • 使用vscode打開該項目（下載插件Vetur）

  • 腳手架自帶的忽略文件似乎不會與clone下來的沖突，因此在這里嘗試第一次git操作,在倉庫文件夾中執行一下。

    git status 查看當前狀態
git add . 追蹤所有變化
git status 再次查看狀態
    • 此時發現，vscode中，vue被忽略的文件確實沒有add
    • django中被忽略的也沒有add
    git commit -m "創建django和vue腳手架項目"
git push 提交到遠程倉庫
    • 最后去gitee上看一下，沒問題的話，以后就反復執行：
    git add . 
git commit -m "描述內容"
git push

4.1發送請求去django上請求數據的腳手架實現

  • 實現一些內容

    1.在vue.config.js中增加

    // 關閉嚴格的語法檢查 否則定義一個不使用的變量都會報錯
  lintOnSave:false,

    每次改變了vue.config.js都需要重啟服務器（在vscode的終端中即可）

    2.使用axios發送get請求，并展示數據

    • 新的腳手架工程，所有插件、依賴都得重新安裝
    sudo npm i axios

    3.成功出現跨域問題，在django服務器端解決
    3.1 在服務器端安裝包（這是第四個pip）

     pip install django-cors-headers

    3.2 在setting中配置

    • 注冊

      'corsheaders',

    • 配置MIDDLEWARE，注意必須卸載下一行的那句話上面

      'corsheaders.middleware.CorsMiddleware',# 跨域2
'django.middleware.common.CommonMiddleware',

    • 增加

      #跨域3 增加忽略
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_ALLOW_ALL = True

  • 再次發送請求，成功拿到數據

至此，腳手架配置完成，且前后端分別部署（node.js和django服務器），并且能夠通信。

5.全面部署在docker上

  • 將vue打包部署在docker中nginx容器上，將django部署在docker中的python應用服務器上
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。