学习Django+Vue搭建前后端分离项目，前后端各用一个服务器

前言：最近在学习用Django和Vue搭建前后端分离项目，在b站上看见了一个视频，觉得很不错，就是字太模糊了，所以写了这篇博客。写这篇博客一是为了作为笔记，二是为了再理清一边过程加强记忆。这里附上视频链接：https://www.bilibili.com/video/BV1Ux411f7r3。建议手机屏幕放大食用，如果觉得视频的字太小太模糊欢迎回来，我根据视频的步骤搭建成功了。

我的环境

• 前端
  • node.js 版本号：14.15.1
  • vue-cli 版本号：2.9.6
  • webstorm软件
• 后端
  • python 版本号：3.7
  • django 版本号：3.1
  • pycharm软件

前端项目搭建

1.在安装的node.js文件夹下找到Node.js command prompt,在这个终端里面进入到要建项目的路径下。我的项目路径建在D盘下的WebstormProjects文件夹下。例如：

C:\Users\Dell>cd D:\WebstormProjects

C:\Users\Dell>D:

D:\WebstormProjects>

使用vue init webpack vueproject命令创建项目，然后会进行项目的配置，其中vueproject是项目名，可以修改,但是项目名中不能有大写字母

D:\WebstormProjects>vue init webpack vueproject

? Project name vueproject  # 回车默认是创建时的项目名
? Project description A Vue.js project  # 回车默认安装vue.js项目
? Author huan  # 作者，随意写
? Vue build (Use arrow keys)
> Runtime + Compiler: recommended for most users  # 选择这个，回车就好
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - re
nder functions are required elsewhere
? Install vue-router? Yes  # 输入Y，默认安装路由
? Use ESLint to lint your code? No  # 输入N，不安装，下同
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

之后等待安装就好

2.在webstorm软件中打开我们新建的项目，找到左下角的Terminal，打开这个终端，输入npm run dev命令进行运行，点击终端里的链接，如果出现Vue.js欢迎界面，说明运行成功。
由于之后会用到axios,我们先安装一下，在终端中输入命令npm install axios --save，等待安装完成。

3.进行Vue页面的改造

• 打开vueproject/src/components/HelloWorld.vue文件，components文件夹下存放vue的组件，HelloWorld.vue文件里面写的内容vue欢迎界面的主要内容，我们将其修改如下：

<template>
  <div class="hello">
    {{msg}} | {{message}}	<!--这里的值对应的是下面data里的return里面的值-->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      message: 'learn vue'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>

我们可以看到对应的页面的变化

• 打开vueproject/src/main.js文件注册axios，内容如下：

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import axios from "axios";

Vue.config.productionTip = false
Vue.use(axios);		//使用axios
Vue.prototype.$axios = axios	//注册axios

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

• 在组件里创建一个新的vue文件，User.vue，内容如下

<template>
  <div id="User">	<!--此处id值要和vue的name值相同-->
    {{page_info}}
    <br>	<!--换行-->
    {{django_message}}
    <br>
    <table border="1">		<!--表格，这个表格是用来显示从后端传来的数据的，可以先注释掉，等后端搭建好后再使用-->
      <tr>
        <th>id</th>
        <th>user</th>
      </tr>
      <tr v-for="user in user_list" :key="user">	<!--使用到了vue的语法-->
        <td>{{user.pk}}</td>	<!--根据解析到的json数据格式获取用户id-->
        <td>{{user.fields.name}}</td>	<!--根据解析到的json数据格式获取用户name-->
      </tr>
    </table>
  </div>
</template>

<script>
export default {
    name: "User",		//vue的name值，默认和创建的组件文件名相同
    data(){
      return{
        page_info: "this is a User page",
        django_message: "",
        user_list: [],
      }
    },
    created() {		//created()方法会在页面加载完成之前进行调用
      this.$axios.get("/api/test/")		//axios方法向后端发送ajax请求，刚开始搭建时可以先注释掉，等后端项目搭建好后再使用
        .then(response =>{
        console.log(response.data)
        this.django_message = response.data.message
        });
      this.$axios.get("/api/user")
        .then(response =>{
          // this.user_list = response.data.data
          this.user_list = JSON.parse(response.data.data)	//将json数据进行解析
        })
    }
}
</script>

<style scoped>

</style>

• 打开vueproject/src/router/index.js文件进行配置，router文件夹存放路由配置文件，文件内容修改如下

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import User from "@/components/User";

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    },
    {
      path: '/user',	//路径
      name: 'User',		//vue名
      component: User	//组件
    }
  ]
})

• 将vueproject/src/App.vue文件中的template部分修改如下：

<template>
  <div id="app">
    <img src="./assets/logo.png"> <br>
    <router-link to="/user">User</router-link> 	<!--添加路由链接-->
    <router-link to="/">root</router-link>
    <hr>
    <router-view/>
  </div>
</template>

之后可以查看页面变化

后端项目搭建

1.在pycharm软件中新建一个项目，注意：要选择django框架、项目路径中不能存在中文、python路径的选择。我的项目名起的是test_vue

2.打开左下角Ternimal终端,在终端中输入python manage.py startapp mysite命令创建app,其中mysite是自定义的app名，可以改。创建好后会在根目录下，也就是项目目录下出现一个名为mysite的文件夹。
为了方便，我们使用django自带的数据库，在终端中输入python manage.py migrate生成sqlite数据库

3.进行项目的编写

• 打开test_vue/test_vue/seetings.py文件进行注册app和相关配置的修改，文件内容修改如下：

ALLOWED_HOSTS = ["*"]	# 允许所有的主机

INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'mysite',	# 注册app
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    # 'django.middleware.csrf.CsrfViewMiddleware',	将这个防范csrf攻击的中间件注释掉，要不然之后会有很多麻烦
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

LANGUAGE_CODE = 'zh-hans'	# 语言设置为中文-汉字

TIME_ZONE = 'Asia/Shanghai'	  # 时间设置为亚洲/上海

STATIC_URL = '/api/static/'	 # 设置静态路径

之后在终端中使用python manage.py runserver命令启动项目，点击终端里的链接，看到django的欢迎界面，说明项目启动成功
-在test_vue/mysite/models.py文件中进行模型类的创建：

from django.db import models

# Create your models here.


class Stu(models.Model):

    id = models.IntegerField(primary_key=True, auto_created=True)
    name = models.CharField(max_length=200)

在终端中使用python manage.py makemigrations命令生成迁移文件,然后使用python manage.py migrate命令生成数据表

• 在test_vue/mysite/admin.py文件中进行模型类的注册：

from django.contrib import admin
from . import models
# Register your models here.

admin.site.register(models.Stu)		# 注册模型类

在终端中使用python manage.py createsuperuser命令创建管理员，会让你输入用户和密码。创建时候启动服务器，打开http://127.0.0.1:8000/admin/页面进行管理员登录，可以对数据库里的数据进行修改，在这里我添加了5个数据

• 打开test_vue/mysite/views.py文件，进行视图的编写：

from django.core import serializers		
from django.http import JsonResponse
from .models import Stu

# Create your views here.


def test(request):
    return JsonResponse({"status": 0, "message": "This is Django message"})		# 返回json数据类型


def all_user(request):
    if request.method == "GET":

        db = Stu.objects.all()	# 从数据库中获取所有数据对象
        json = serializers.serialize("json", db)	# 将模型类数据序列化为json数据
        # db = [i.name for i in db]
        # print(type(db))
        return JsonResponse({"status": 0, "data": json})
    else:
        # print(request.method)
        return JsonResponse({"status": 1, "message": "you need Get method"})

• 在test_vue/mysite路径下新建一个urls.py文件，用来为配置app路由，文件内容如下：

from django.urls import path
from mysite import views

urlpatterns = [
    path("test/", views.test),		# 添加一个新的路由
    path("user/", views.all_user)
]

• 打开test_vue/urls.py文件配置路由，文件修改内容如下：

from django.contrib import admin
from django.urls import path, include

urlpatterns = [
    path('admin/', admin.site.urls),
    path('api/', include("mysite.urls")),	# 添加一个新的路由
]

启动服务器到相应的页面查看显示结果

采用前端配置反向代理方法解决跨域问题

• 打开vueproject/cofig/index.js文件，在文件中找到proxyTable，在里面进行相关配置

proxyTable: {
      '/api': {
        target: ' http://127.0.0.1:8000/api/',//后端接口地址
        changeOrigin: true,  //是否跨域
        pathRewrite: {
          '^/api': ''   //需要rewrite重写的,
        }
      }
    },

项目展示

• 前端
  
  点击User链接后：
  
• 后端
  
  
  后言：搭建项目1个多小时，写完这篇博客花了一上午，内容比较多，若有不足请指出并多多包涵。