虚拟环境搭建+前后端项目搭建

虚拟环境配置

cmd敲 workon 确认是否配置环境

1、配置

　　安装

# 建议使用pip3安装到python3环境下
pip3 install virtualenv
pip3 install virtualenvwrapper-win

macOS系统

# 建议使用pip3安装到python3环境下
pip3 install -i https://pypi.douban.com/simple virtualenv
pip3 install -i https://pypi.douban.com/simple virtualenvwrapper

# 先找到virtualenvwrapper的工作文件 virtualenvwrapper.sh，该文件可以刷新自定义配置，但需要找到它
# MacOS可能存在的位置 /Library/Frameworks/Python.framework/Versions/版本号文件夹/bin
# Linux可能所在的位置 /usr/local/bin  |  ~/.local/bin  |  /usr/bin
# 建议不管virtualenvwrapper.sh在哪个目录，保证在 /usr/local/bin 目录下有一份
# 如果不在 /usr/local/bin 目录，如在 ~/.local/bin 目录，则复制一份到 /usr/local/bin 目录
    -- sudo cp -rf ~/.local/bin/virtualenvwrapper.sh /usr/local/bin

# 在 ~/.bash_profile 完成配置，virtualenvwrapper的默认默认存放虚拟环境路径是 ~/.virtualenvs
# WORKON_HOME=自定义存放虚拟环境的绝对路径，需要自定义就解注
VIRTUALENVWRAPPER_PYTHON=/usr/local/bin/python3
source /usr/local/bin/virtualenvwrapper.sh

# 在终端让配置生效：
    -- source ~/.bash_profile

$ open -e .bash_profile 打开mac环境变量配置

　　配置环境变量

# 配置环境变量：
# 控制面板 => 系统和安全 => 系统 => 高级系统设置 => 环境变量 => 系统变量 => 点击新建 => 填入变量名与值
变量名：WORKON_HOME  变量值：自定义存放虚拟环境的绝对路径
eg: WORKON_HOME: D:Virtualenvs

 # 同步配置信息：
# 去向Python3的安装目录 => Scripts文件夹 => virtualenvwrapper.bat => 双击

　　使用

# 在终端工作的命令

# 1、创建虚拟环境到配置的WORKON_HOME路径下
# 选取默认Python环境创建虚拟环境：
    -- mkvirtualenv 虚拟环境名称
# 基于某Python环境创建虚拟环境：
    -- mkvirtualenv -p python2.7 虚拟环境名称
    -- mkvirtualenv -p python3.6 虚拟环境名称

# 2、查看已有的虚拟环境
    -- workon

# 3、使用某个虚拟环境
    -- workon 虚拟环境名称
    
# 4、进入|退出 该虚拟环境的Python环境
    -- python | exit()

# 5、为虚拟环境安装模块
    -- pip或pip3 install 模块名

# 6、退出当前虚拟环境
    -- deactivate

# 7、删除虚拟环境(删除当前虚拟环境要先退出)
    -- rmvirtualenv 虚拟环境名称

 后端:

1/创建app，

到apps文件下，根据../../等找到manage.py，创建python ../../manage.py startapp ‘app名’

settings文件内注册app

2/数据库迁移，根路径文件，输命令

python manage.py makemigrations

python manage.py migrate

3/前后端分离的跨域问题，（记住）

前端：

vue基础配置

main.js文件

# axios前后台交互
# >: cnpm install axios

import axios from 'axios'
Vue.prototype.$axios = axios;

# cookies操作
# >: cnpm install vue-cookies

import cookies from 'vue-cookies'
Vue.prototype.$cookies = cookies;

# element-ui页面组件框架
# >: cnpm install element-ui

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

bootstrap页面组件框架

安装：

>: cnpm install jquery
>: cnpm install bootstrap@3

配置jquery：vue.config.js

const webpack = require("webpack");

module.exports = {
    configureWebpack: {
        plugins: [
            new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: "jquery",
                "window.jQuery": "jquery",
                "window.$": "jquery",
                Popper: ["popper.js", "default"]
            })
        ]
    }
};

配置bootstrap：main.js

import 'bootstrap'
import 'bootstrap/dist/css/bootstrap.min.css'