3）建立模板工程
本项目编码部分涉及一个后端工程和一个前端工程，后端工程基于django rest，提供web api，前端工程基于vue，提供交互逻辑，后端的模板基本相同，前端则需根据客户不同的需求去定制，可以从https://www.jianshu.com/p/3c5fef687fb1这篇文章中找到合适的模板来开发，本项目的前端基于“vue-admin”这样一个工程模板，算是比较早期的版本了（vue-admin目前已经重构为“vue-bulma，但本项目仍然是老版本）。
（1）后端模板工程
本地win 7上打开pycharm，在TNDBXXXT配置库code目录下创建django工程，名为webapp（可以选择创建一个初始app或不创建app，本项目没有创建初始app）得到如下图内容
先编辑webapi/webapi/settings.py文件，添加如下内容：
#### 本地调试，远端不调试
if os.environ.__contains__('DEBUG'):
DEBUG = os.environ['DEBUG']
ALLOWED_HOSTS = [os.environ[‘WEB_HOST’], ‘localhost’]
else:
DEBUG = True
ALLOWED_HOSTS = [‘localhost’]
####加入文档化插件和跨域插件
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
####rest框架及其文档化，django版本需要为1.x
'rest_framework',
'rest_framework_docs',
####允许跨域访问
'corsheaders',
]
#### 增加模板文件，用于访问DRF页面（将api文档化的插件）
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR, 'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
REST_FRAMEWORK_DOCS = {
'HIDE_DOCS': False
}
#### 数据库配置参数
##本地开发环境
MYSQL_HOST = {
"host": '192.168.19.130',
"port": 3306,
"name": 'jsty',
"user": 'jsty',
"password": 'jsty123'
}
##远端服务器参数替换
if os.environ.__contains__('DB_MYSQL_HOST'):
MYSQL_HOST["host"] = os.environ['DB_MYSQL_HOST']
MYSQL_HOST["port"] = int(os.environ['DB_MYSQL_PORT'])
MYSQL_HOST["name"] = os.environ['DB_MYSQL_DB']
MYSQL_HOST["user"] = os.environ['DB_MYSQL_USER']
MYSQL_HOST["password"] = os.environ['DB_MYSQL_USER_PWD']
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'HOST' : MYSQL_HOST["host"],
'PORT' : MYSQL_HOST["port"],
'NAME' : MYSQL_HOST["name"],
'USER' : MYSQL_HOST["user"],
'PASSWORD': MYSQL_HOST["password"],
'OPTIONS': {
'init_command': 'SETdefault_storage_engine=INNODB',
},
},
}
####时区和静态文件路由
TIME_ZONE = 'Asia/Shanghai'
TEMPLATE_DIRS = (os.path.join(BASE_DIR, 'templates'),)
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static').replace('\\','/')
再编辑webapi/webapi/urls.py文件，设置后端api文档页面路由
# -*- coding: utf-8 -*-
from django.conf.urls import url, include
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
url(r'^docs/', include('rest_framework_docs.urls')),####文档化url
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
然后打开Run manage.py task终端，输入collectstatic命令，即可在static文件夹下获得Django rest framework的所有静态文件（Django rest framework不是上来就附属在django上的，你需要在本地pip djangorestframework==3.8.2）。为了使用DRF（一样先要安装pip drfdocs），需要在templates文件夹下创建rest_framework_docs/docs.html文件，内容如下：
{% extends "rest_framework_docs/base.html" %}
{% block title %}XXX系统服务后端API文档{% endblock%}
{% block style %}
{% load static %}
{% endblock %}
{% block logo %}api{% endblock %}
{% block jumbotron %}
XXX WEB服务
XXX 系统WEB服务后端API文档.
{% endblock %}
{% block footer %}<div
class="footer">Copyright © 20xxXXX系统.{%endblock %}
然后运行django工程，如果可以在浏览器访问localhost:8000/docs看到相应页面说明模板OK，但要部署到服务器上，需要配置uwsgi参数，在webapi根目录下创建webapi_uwsgi.ini文件，内容如下：
# -*- coding: utf-8 -*-
[uwsgi]
# Django-related settings
# the base directory (full path)
chdir =/var/www/webapi ####后端代码根目录
# Django's wsgi file
module =webapi.wsgi ####必须是后端工程名称+wsgi格式
# the virtualenv (full path)
# home =/path/to/virtualen
# process-related settings
# master
master =true
#pid to save
pidfile = /var/run/webapi.pid ####使用pid启动后端服务
#log to save
daemonize = /var/log/webapi.log ####后端运行日志文件
# maximum number of worker processes
#processes = 10
# the socket (use the full path to be safe
socket =/var/www/webapi/webapi.sock ####sock文件，会自动创建
# ... with appropriate permissions - may be needed
uid = git ####远端用户名
chmod-socket = 666
# clear environment on exit
vacuum =true
uwsgi_read_timeout = 1800
harakiri = 1800
env = LANG=en_US.utf8 ####远端编码信息
env = LC_ALL=en_US.UTF-8
env = LC_LANG=en_US.UTF-8
然后就可以将配置库提交push到远端服务器，并在远端服务器拉取code内容，替换到git用户根目录下的docker文件夹的后端代码位置，本实例为
/home/git/docker/backend文件夹下，然后重启容器，即可通过访问远端服务器ip:8000/docs看到api文档页面。
（2）前端模板工程
将选定的模板拷贝到TNDBXXXT配置库code目录下，本项目前端模板工程文档结构如图所示（基本大同小异），
其中：
build文件夹存放执行build配置文件；
config文件夹存放开发和生产环境配置参数，跨域访问设置也在此处进行；
dist文件夹是执行npm run build产生的build文件，用于直接部署到服务器上；node_modules文件夹是存放于本地的js库，可以在package.json文件中查看前端工程依赖的js库，如果找不到，运行npm run dev时，会提示哪些库没有安装，使用npm install XX即可安装相应库；
src文件夹是前端开发的主要工作区，包括静态文件、vue源码文件和js文件等都可以放在此处，从vue-admin模板工程可以看到它已经建立了一些归集文件夹，例如api文件夹用于存放调用后端接口的js文件、assets文件夹存放字体、img等文件、components存放一些全局组件、icons文件夹存放图标矢量文件、router文件夹存放路由逻辑、store文件夹存放全局会话变量、styles文件夹存放样式文件、utils文件夹存放通用功能js接口、最主要的views文件夹则存放我们后面主要开发的各个功能模块的视图.vue文件。上述文件夹如何使用，我们放到后面章节详细说明，目前先把它运行起来。
如无意外，在本地终端运行npm run dev即可获得前端模板工程运行页面，如果碰到未找到XX库，需要使用npm install命令安装，调试无误后，再运行npm run build，即可在dist文件中生成构建好的前端产品文件。将所有内容提交并push到服务器上，并在远端服务器拉取code内容，替换到git用户根目录下的docker文件夹的后端代码位置，本实例为/home/git/docker/frontend文件夹下，然后重启容器，即可通过访问远端服务器ip看到前端运行页面。
网友评论