2020/11/21：项目规划（真）

最新推荐文章于 2025-12-19 16:26:43 发布

原创最新推荐文章于 2025-12-19 16:26:43 发布 · 259 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#python #django #web

基础专栏收录该内容

8 篇文章

订阅专栏

该博客记录了2020年11月21日的项目规划，包含Django和Vue项目。Django项目介绍了创建项目、APP的步骤，如注册用户、添加路由等，还说明了项目目录结构。Vue项目阐述了初始化及前端项目规范，包括创建api文件夹、封装axios请求等内容。

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 项目名

使用pycharm打开项目（配置）：

编辑配置

# 配置环境变量
PYTHONUNBUFFERED 1 
DJANGO_SETTINGS_MODULE syl.settings

设置中的配置

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'

//按照格式确定方法名