虚拟环境 | 前端+后端搭建（包含代码简略版）创建 Vue 前端 vue create project_name

创建 Vue 前端

vue create project_name

创建完后，可以直接拖拽进 Pycharm 或者 Webstorm.

Vue 前端可能用到的包的安装

前后端交互

sudo cnpm install axios

配置 axios

在 main.js 中加入这两句。加入这两句话后，可以把 axios 加到 JS 的原型链的最顶端

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

vue-cookies

sudo cnpm install -S vue-cookies

同理，加入到原型链中去

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

element-ui渲染包

sudo cnpm install -S element-ui

我们使用官方配置：

import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css'; // 全局都会有element-ui的样式

Vue.use(ElementUI);

全局使用CSS样式

在 main.js 里面添加这么一句话

import '@/assets/css/global.css

global.css 是你创建的 CSS文件

这个功能可以用于去掉标签的默认样式

全局配置

在 settings.js文件中，写：

export default {  
BASE_URL:'http://192.168.0.140:8080/'  
}

在 main.js 文件中，添加原型链

import settings from "@/assets/js/settings";  
Vue.prototype.$settings = settings

举例后续使用方法this.$axios.get(this.$settings.BASE_URL + '/user

Django 后端常用

创建 APP 应用

python manage.py startapp app_name

安装 simpleui

pip install django-simpleui

创建超级用户

python manage.py createsuperuser

登录Django管理后台

重新启动项目，用超级管理员用户登录

http://127.0.0.1:8080/admin/

配置文件中添加 `MEDIA` 路径

以后上传的文件都放到Media文件夹下，在settings里面添加如下代码

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

MEDIA_URL = 'media/'

在 URL的配置中，我们同时需要开启 MEDIA 的访问

from django.views.static import serve  
from django.conf import settings


# 开启 MEDIA 的访问  
path('media/<path:path>', serve, {'document_root':settings.MEDIA_ROOT}),

<path:path> 第一个path是转换器，第二个path是有名分组的名字

路由分发

from django.contrib import admin  
from django.urls import path, include  
  
from rest_framework.routers import SimpleRouter  
from .views import BannerView  
router = SimpleRouter()  
router.register('banner', BannerView, 'banner')  
  
urlpatterns = []  
  
urlpatterns += router.urls

虚拟环境 | 前端+后端 搭建 （包含代码 简略版）