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 [email protected]: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)

打印的路由效果
```
[, [^/.]+)/$' [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数据

创建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应用服务器上