django和vue前后端分离配置

1.创建项目

django-admin startproject 项目名

2.创建子应用

python manage.py startapp 子应用名

django-admin startapp 子应用名

3.运行项目

python manage.py runserver

4.项目配置

 import os  # 导入os模块  ##########没导入os
 ​
 # 安装子应用
 INSTALLED_APPS = [
 INSTALLED_APPS = [
     'django.contrib.admin',
     'django.contrib.auth',
     'django.contrib.contenttypes',
     'django.contrib.sessions',
     'django.contrib.messages',
     'django.contrib.staticfiles',
     'rest_framework',  # drf框架
     'corsheaders',  # 跨域
     'student',  # 自定义子应用
      # 安装自定义子应用，关联数据库  #############子应用名字写错
     ##################### 子应用之间逗号隔开
 ]
 ​
 ​
 # 中间件配置
 MIDDLEWARE = [
     'django.middleware.security.SecurityMiddleware',
     'django.contrib.sessions.middleware.SessionMiddleware',
     'django.middleware.common.CommonMiddleware',
     # 'django.middleware.csrf.CsrfViewMiddleware',
     'django.contrib.auth.middleware.AuthenticationMiddleware',
     'django.contrib.messages.middleware.MessageMiddleware',
     'django.middleware.clickjacking.XFrameOptionsMiddleware',
     'corsheaders.middleware.CorsMiddleware',  # 跨域中间件
 ]
     
 ​
 CORS_ORIGIN_ALLOW_ALL = True  # 允许所有源访问
 ​
 ​
 # 数据库配置
 # 查询全部数据库 show databases;
 # 创建数据库 create database 数据库名 charset=utf8;
 # 删除数据库 drop database 数据库名
 DATABASES = {
     'default': {
         'ENGINE': 'django.db.backends.mysql',  # 数据库引擎  ########### 引擎不修改
         'HOST': 'localhost',  # 主机 localhost 就是 127.0.0.1  ########## 主机写的不对
         'PORT': 3306,  # 端口
         'USER': 'root',  # 用户名  ##########  USER写成USERNAME
         'PASSWORD': 'root',  # 密码(写自己的)   ########## 密码不加双引号
         'NAME': 'dev_date',  # 数据库名，需要自己新建   ######## 不新建数据库
         ############## 数据库名字写错 比如多个分号 多个空格
     }
 }
 ​
 LANGUAGE_CODE = 'zh-Hans'  # 语言 中文  *
 ​
 TIME_ZONE = 'Asia/Shanghai'  # 时区 上海   *
 ​
 USE_TZ = False  # 添加数据库数据时，使用本地时区   *
 ​

5.安装数据库

在项目同名的init文件中安装mysql数据库

 import pymysql
 # 如果没有pymysql 在黑窗口中运行 pip install pymysql
 ​
 pymysql.install_as_MySQLdb()  # 安装mysql数据库
 ​

6.模型代码编写

 from django.db import models
 ​
 # Create your models here.
 # 在子应用的models.py中编写模型类
 # 模型类的作用: 1.用于生成数据库中的表  2.用于操作表(增删改查)
 # 生成表的过程不可逆!!!!! 一旦生成数据库中的表，要修改的话，最彻底的方法就是删除数据库，重新创建数据库，然后重新生成表
 ​
 # 模型类都继承models.Model
 # Student是模型类名字，自定义
 class Student(models.Model):
     # 模型类默认自带id字段作为主键，也可以修改，一般不管他
     # 姓名字段 name(自定义)  models.CharField字符串类型 max_length=20最大长度 verbose_name='姓名' 起一个可读性比较高的名字(选)
     name = models.CharField(max_length=20, verbose_name='姓名')
     major = models.CharField(max_length=50, verbose_name='专业')
 ​
     # 模型类配置(可选)
     class Meta:
         db_table = 'students'  # 模型类生成mysql数据库中的表 的名字
         verbose_name = '学生表'  # 起一个可读性比较高的表名
         verbose_name_plural = verbose_name  # 表名的复数
 ​
     # 魔法方法，当直接打印模型类对象时，打印姓名name字段
     def __str__(self):
         return self.name

7.迁移

migrations迁移文件夹，刚开始只有一个init.py文件，不要删这个文件

1.生成迁移文件：python manage.py makemigrations

2.执行迁移: python manage.py migrate

注意：执行迁移完成后会生成表

8.添加测试数据

通过超级用户添加测试数据

创建超级用户: python manage.py createsuperuser

1.邮箱不用写，直接回车

2.密码没有提示，你输入了但是不显示

3.密码太简单不用管，直接y回车

运行项目:python manage.py runserver

进入管理员页面：http://127.0.0.1:8000/admin/

添加可以管理的模型类(表)，在admin.py文件中，注册模型类：

 from django.contrib import admin
 from .models import Student
 # Register your models here.
 admin.site.register(Student)  # 注册模型类，不要加引号

接下来，刷新管理员页面，就可以操作表数据。

9.路由分发

主路由

 from django.contrib import admin
 from django.urls import path, include
 ​
 urlpatterns = [
     path('admin/', admin.site.urls),
     path('', include('user.urls')),  # 路由分发
 ]
 ​

子路由

 from django.urls import path
 ​
 urlpatterns = [
 ​
 ]

vue项目

创建项目：vue create 项目名

配置项目

? Please pick a preset: Manually select features ? Check the features needed for your project: Router, Vuex ? Choose a version of Vue.js that you want to start the project with 2.x ? Use history mode for router? (Requires proper server setup for index fallback in production) Yes ? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated config files ? Save this as a preset for future projects? (y/N) N

安装axios: npm install --save axios

安装elementUI：npm i element-ui -S

在main.js中配置elementUI:

 import Vue from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
 import ElementUI from 'element-ui';  //新增
 import 'element-ui/lib/theme-chalk/index.css';    //新增
 ​
 Vue.use(ElementUI);  //新增
 ​
 Vue.config.productionTip = false
 ​
 new Vue({
   router,
   store,
   render: function (h) { return h(App) }
 }).$mount('#app')

配置跨域，在根目录下新建 vue.config.js文件：

 module.exports = {
     devServer:{
         proxy:'http://127.0.0.1:8000/',  //后端基地址
     }
 }
 ​
 // 跨域重启后生效