Django,vue初始化

1、初始化Django项目

1.1、初始化项目结构

└─opwf_project # 项目根路径
    │	 .gitignore # 提交git仓库时，不提交的文件必须要在这里进行标注
    │	 README.en.md # 英文（项目介绍）
    │	 README.md # 中文项目简介
    │	 requirements.txt # django项目安装文件
    │
    ├─celery_task # 用来存放celery相关文件（以便分布式部署）
    │ 	__init__.py
    │
    ├─db # 数据库相关：1.数据库初始化sql脚本； 2.数据库维护脚本，清理，备份脚本
    ├─scrips # 脚本目录：1.定时任务脚本；2.页面静态化脚本；处理项目脚本
    ├─logs # 存放日志
    ├─packages # 外部包，原始的，未配置的：1.七牛云sdk；2.阿里云短信；
    └─uwsgi_conf # uwsgi配置，日志，pid
    │
    │
    └─opwf # 真正的django项目（代码）django-admin startproject
    项目名
        │ apps （python包） # Django各种app模块
        │ libs （python包） # 七牛云sdk+配置（外部下载）
        │ utils （python包） # 小工具，常用函数(自己写的)
        │ static
        │ templates
        │ opwf（项目配置）
        │ manager.py

1.2、创建Django项目

root@dev:shiyanlou_project# workon syl
(syl) root@dev:shiyanlou_project# cd /home/worker/opwf_project
(syl) root@dev:shiyanlou_project# django-admin startproject opwf
# 注：创建三个python包， apps、utils、libs

• 使用pycharm打开项目

  • 1.右击 ---- > 编辑配置 ---->

    • PYTHONUNBUFFERED 1
      DJANGO_SETTINGS_MODULE syl.settings
      

      

  • 文件 ---- > 设置 ---->

    

1.3、创建user模型

1.3.1 创建用户模型user

python ../manage.py startapp user   # 创建user模型

1.3.2 在settings.py中注册user模型（第一步）

INSTALLED_APPS = [
'user.apps.UserConfig',
]
# 注：pycharm无法联想，需要把apps文件夹设置为源根
# 住：要想让pycharm识别要将文件夹设置为源根
右键文件夹---->标记目录为---->源根

1.3.3 opwf/user.py添加主路由（第二步）

urlpatterns = [
	path('user/', include('user.urls')),
]

1.3.4 opwf/settings.py中添加apps路由

import sys
# 把apps目录插入，到系统包搜索路径第一个位置中
sys.path.insert(0,os.path.join(BASE_DIR,'apps'))

1.3.5 创建user/urls.py子路由文件（第三步）

from django.urls import path

urlpatterns = [
    
]

1.4 重写django默认认证用户模块

1.4.1 user/models.py创建模型:从写django user表

1.4.2 opwf/settings.py中注册自己的用户模型类

# 注册自己的用户模型类: 应用名.模型名，指定我们重写的User表进行身份验证
AUTH_USER_MODEL = 'user.User

1.4.3 配置mysql

'''1.创建mysql数据库'''
mysql> create database opwf charset utf8;

'''2.在syl/settings.py中配置mysql'''
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'opwf', # 指定数据库名称：syldatabase
        'USER': 'root',
        'PASSWORD': '1',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}

1.4.4 生成表

python manage.py makemigrations
python manage.py migrate

2、初始化vue项目

https://www.cnblogs.com/xiaonq/p/11027880.html

vue init webpack deaxios # 使用脚手架创建项目 deaxios（项目名，随便取得）
cd deaxios # 进入项目
npm install axios@0.19.2 # 安装axios
npm i element-ui -S  # 安装element-ui到当前项目

前端项目结构规范

1.2.封装axios

1.2.1 创建 src/http 文件夹

• 用来放网络请求相关的文件

1.2.2 src/http/index.js

• 文件夹下，创建index.js文件，对axios进行封装

/* eslint-disable */
// 第一步：实例化axios对象，简单封装
const axios = require('axios');                         // 生成一个axios实例
axios.defaults.baseURL = 'http://192.168.56.100:8888';  // 设置请求后端的URL地址
axios.defaults.timeout = 10000;                         // axios请求超时时间
axios.defaults.withCredentials = true;
axios.defaults.headers['Content-Type'] = 'application/json';        // axios发送数据时使用json格式
axios.defaults.transformRequest = data => JSON.stringify(data);     // 发送数据前进行json格式化


//  第二：设置拦截器
// 
//  请求拦截器(当前端发送请求给后端前进行拦截)
//  例1：请求拦截器获取token设置到axios请求头中，所有请求接口都具有这个功能
//  例2：到用户访问某一个页面，但是用户没有登录，前端页面自动跳转 /login/ 页面
// 
axios.interceptors.request.use(config => {
    // 从localStorage中获取token
    // let token = localStorage.getItem('token');
    // 如果有token, 就把token设置到请求头中Authorization字段中
    // token && (config.headers.Authorization = token);
    return config;
}, error => {
    return Promise.reject(error);
});

//  响应拦截器（当后端返回数据的时候进行拦截）
//  例1：当后端返回状态码是401/403时，跳转到 /login/ 页面
// 
axios.interceptors.response.use(response => {
    // 当响应码是 2xx 的情况, 进入这里
    // debugger
    return response.data;
}, error => {
    // 当响应码不是 2xx 的情况, 进入这里
    // debugger
    return error
});

//  第三：根据上面分装好的axios对象，封装 get、post、put、delete请求
// 
//  get方法，对应get请求
//  @param {String} url [请求的url地址]
//  @param {Object} params [请求时携带的参数]
// 
export function get(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.get(url, { params, headers }).then(res => {
            resolve(res)
        }).catch(err => {

            reject(err)
        })
    })
}

// 
//  post方法，对应post请求
//  @param {String} url [请求的url地址]
//  @param {Object} params [请求时携带的参数]
// 
export function post(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.post(url, params, headers).then((res) => {
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err)
        })
    })
}
export function put(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.put(url, params, headers).then((res) => {
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err)
        })
    })
}
export function del(url, params, headers) {
    return new Promise((resolve, reject) => {
        axios.delete(url, { data: params, headers }).then((res) => {
            resolve(res)
        }).catch((err) => {
            // debugger
            reject(err)
        })
    })
}
export default axios;

1.3.3 src/http/apis.js 接口地址

• 目录下创建apis.js文件，用来写接口地址列表

/* eslint-disable */
import { get, post, put, del } from './index'

// 用户登录
export const login_post = p => axios_post("/user/login/", p)
// username/phone, password
export const course_type_get = p => axios_get("/course/type/", p)
// 获取课程类别列表
export const course_get = (p) => { return axios_get('/course/course/' + p.id, p)
} // 获取具体某一个课程