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 axios3.成功出现跨域问题，在django服务器端解决
3.1 在服务器端安装包（这是第四个pip）pip install django-cors-headers3.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应用服务器上