2020/11/21:项目规划(真)
Django项目:
opwf_project # 项目根路径
| .gitignore # 提交git仓库时,不提交的文件要在这里标注
| README.en.md # 项目介绍(英文)
| README.md # 项目介绍(中文)
| requirements.txt # Django项目安装文件
|–celery_task # 用来存放celery相关文件(python包,便于分布式部署)
|–db # 数据库相关:
1、数据库初始化SQL脚本;
2、数据库维护脚本,清理,备份脚本;
|–scrips # 脚本目录:
1、定时任务脚本;
2、页面静态化脚本;
3、处理项目脚本;
|–packages # 外部包,原始包,未配置包:
1、七牛云SDK;
2、阿里云短信;
|–uwsgi_conf # uwsgi配置,日志,pid
|–opwf # 真正的Django项目(代码)
|–apps # Django各种APP模块(python包)
|–libs # 七牛云SDK+配置(python包,外部下载)
|–utils # 小工具(自己写的一些常用函数)
|–static # 静态文件(图片。。。)
|–templates # 模板文件
|–opwf # 项目位置
| manage.py
1、创建Django项目:
root@dev:WorkOrder# workon loonflow
(loonflow) root@dev:WorkOrder# cd /home/worker/opwf_project
(loonflow) root@dev:WorkOrder# django-admin startproject 项目名
2、创建APP:
创建用户APP
python ../manage.py startapp user # 创建用户APP命令
在settings.py中注册用户,添加apps路径
# 添加apps路径
import sys
sys.path.insert(0, os.path.join(BASE_DIR, 'apps'))
# 注册用户
INSTALLED_APPS = [
...
'UserApp',
...
]
# pycharm无法联想,需要把apps文件夹设置为根源
在urls.py中添加主路由
from django.contrib import admin
from django.urls import path, include
urlpatterns = [
path('admin/', admin.site.urls),
path('users/', include('UserApp.urls')),
]
在userAPP下创建子路由urls.py:
from django.urls import path, include
urlpatterns = [
]
Vue项目:
1、初始化Vue项目
vue init webpack 项目名 # 使用脚手架创建项目
cd 项目名 # 进入项目
cnpm install # 安装运行项目文件
cnpm install --save axios # 安装axios
cnpm install element-ui -S # 安装element-ui到当前项目
2、前端项目规范:
-opwf-vue # 根目录
| src # 放主要的项目代码
| assets # 图片等资源
| components # 公用组件(大多数vue页面都会引用的)
| api # 放api.js和http.js封装axios请求
| router # router路由
| views # 所有独立vue文件
| APP.vue # index是主页面,APP.vue是仅次于前者的页面
| main.js # 项目运行入口(引入组件,可以使组件在任意vue页面使用)
| static # 静态文件(图片。。。)
| index.html # 是主页面(引入css、js文件,在任意.vue文件中直接使用)
在src下创建文件夹名为api
- 用来放网络请求相关的文件
src/api/http.js
-
文件夹下,创建http.js文件,对axios请求进行封装
-
import axios from 'axios' axios.defaults.baseURL = "http://127.0.0.1:8000/" // axios.defaults.baseURL = "http://192.168.56.100:8888/" //全局设置网络超时 axios.defaults.timeout = 10000; //设置请求头信息 axios.defaults.headers.post['Content-Type'] = 'application/json'; axios.defaults.headers.put['Content-Type'] = 'application/json'; axios.interceptors.request.use( config => { // 每次发送请求之前判断是否存在token,如果存在,则统一在http请求的header都加上token,不用每次请求都手动添加了 const token = localStorage.getItem("token") // console.log(token) if (token) { config.headers.Authorization = 'JWT ' + token } return config; }, error => { return Promise.error(error); }) axios.interceptors.response.use( // 请求成功 res => res.status === 200 ? Promise.resolve(res) : Promise.reject(res), // 请求失败 error => { if (error.response) { // 判断一下返回结果的status == 401? ==401跳转登录页面。 !=401passs // console.log(error.response) if (error.response.status === 401) { // 跳转不可以使用this.$router.push方法、 // this.$router.push({path:'/login'}) window.location.href = "http://127.0.0.1:8888/" } else { // errorHandle(response.status, response.data.message); return Promise.reject(error.response); } // 请求已发出,但是不在2xx的范围 } else { // 处理断网的情况 // eg:请求超时或断网时,更新state的network状态 // network状态在app.vue中控制着一个全局的断网提示组件的显示隐藏 // 关于断网组件中的刷新重新获取数据,会在断网组件中说明 // store.commit('changeNetwork', false); return Promise.reject(error.response); } }); // 封装xiaos请求 // 封装get请求 export function axios_get(url, params) { return new Promise( (resolve, reject) => { axios.get(url, { params: params }) .then(res => { // console.log("封装信息的的res", res) resolve(res.data) }).catch(err => { reject(err.data) }) } ) } // 封装post请求 export function axios_post(url, data) { return new Promise( (resolve, reject) => { // console.log(data) axios.post(url, JSON.stringify(data)) .then(res => { // console.log("封装信息的的res", res) resolve(res.data) }).catch(err => { reject(err.data) }) } ) } // 封装put请求 export function axios_put(url, data) { return new Promise( (resolve, reject) => { // console.log(data) axios.put(url, JSON.stringify(data)) .then(res => { // console.log("封装信息的的res", res) resolve(res.data) }).catch(err => { reject(err.data) }) } ) } // 封装delete请求 export function axios_delete(url, data) { return new Promise( (resolve, reject) => { // console.log(data) axios.delete(url, { params: data }) .then(res => { // console.log("封装信息的的res", res) resolve(res.data) }).catch(err => { reject(err.data) }) } ) }
src/api/api.js
-
//将我们http.js中封装好的 get,post.put,delete 导过来 import { axios_get, axios_post, axios_delete, axios_put } from './http.js' //按照格式确定方法名