Django + Vue 创建项目基本流程

Django

创建应用

python manage.py startapp polls

视图映射（配置路由）

polls 目录里新建一个 urls.py 文件，创建“相对路径”

urlpatterns = [
    path('', views.index, name='index'),
]

使用include添加映射

urlpatterns = [
    path('polls/', include('polls.urls')),
    path('admin/', admin.site.urls),
]

数据库配置

更改 setting.py 文件的 DATABASES变量

DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'mysite',
        'USER': 'root',
        'PASSWORD': '123456',
        'HOST': '127.0.0.1',
        'PORT': '3306',
    }
}

检查 INSTALLED_APPS 设置

python manage.py migrate

建立模型并激活模型：

• 文件 mysite/settings.py
• 配置类 INSTALLED_APPS 中添加点式路径是 polls.apps.PollsConfig

INSTALLED_APPS = [
    'polls.apps.PollsConfig',
    ...
]

用以下命令检测你对模型文件的修改，并且把修改的部分储存为一次 迁移

python manage.py makemigrations polls

sqlmigrate 命令接收一个迁移的名称，然后返回对应的 SQL

python manage.py sqlmigrate polls 0001

再次运行 migrate 命令，在数据库里创建新定义的模型的数据表

python manage.py migrate

管理员页面

创建一个管理员账号

python manage.py createsuperuser

启动开发服务器

python manage.py runserver

加入投票应用：告诉管理，问题 Question 对象需要一个后台接口，编辑 polls/admin.py

from .models import Question

admin.site.register(Question)

Vue

安装 axios element-ui router

cnpm install axios --save

npm install element-ui -S

cnpm install --save vue-router

main.js 配置

// axios 前后端联调配置
import axios from "axios";
axios.defaults.withCredentials = true;
// 跨域配置
Vue.config.productionTip = false
Vue.prototype.$axios= axios;
//element-ui 配置
import ElementUI from 'element-ui' //element-ui的全部组件
import 'element-ui/lib/theme-chalk/index.css'//element-ui的css
Vue.use(ElementUI)

在 src 目录下新建 router 文件夹，然后新建 index.js 文件

import Vue from 'vue'
import VueRouter from 'vue-router'
import MongoView from '@/components/MongoView'


Vue.use(VueRouter)
const routes = [
    {
        path: '/',
        name: 'Mongo',
        component: MongoView //组件名称
    },
]
const router = new VueRouter({
    mode: 'history',
    base: process.env.BASE_URL,
    routes
})

export default router