2019-08-10 Django+Vue.js实现前后端分离的单页面博客系统(3)解决URL访问与刷新导致404的问题

问题的来源

在开发完前端页面和一部分组件之后,我执行了npm run buildpython manage.py runserver来启动后端服务器测试页面的表现。但是这时候出现了一个问题:从页面上直接点击链接可以正常跳转,但是刷新页面、输入url或者从审查元素里点击,就会出现404 Not Found的问题。

一开始一直不明白是为什么,在想了一天、掉了一大把头发之后终于明白了问题的本质并找到了解决方法。

参考资料:https://blog.csdn.net/hayre/article/details/70145513

问题分析

要想知道这个问题为什么会产生,首先还是应该搞明白单页面应用与Vue-router的本质:

什么是单页面应用(SPA)

单页面应用(Single Page Web Application)的本质其实就是一个外壳页面加上不同的页面组件(也就是构成页面本体的不同片段)。与传统的多页面应用(MPA,Multiple Page Web Application)每次跳转都是一次HTTP请求不同,单页面应用的页面跳转只是页面的局部刷新——使用JavaScript等操作DOM的工具将页面的一部分显示或者隐藏,达到“看起来像是页面跳转了”的效果。

例如,攻防世界这个CTF平台的本体(不包括题目)就是一个很典型的单页面应用(至于为什么你可以打开它,再打开审查元素,然后点击一个链接,观察一下页面元素的变化,你就明白了)。

因为单页面应用有这样的本质,所以在页面跳转的时候如果打开审查元素,不会看到在跳转的同时页面全部重新加载的现象,而只能看到页面发生了局部更新,如下图:

访问首页
跳转页面,页面本身没有变化,只是局部发生更新

Vue-router的本质

Vue-router的本质其实就是使用Vue.js构建的单页面应用的路径管理器,再本质一点,就是建立url与整个单页面应用的不同组成部分的映射关系的模块。因为是单页面应用,所以<a>标签并不会起作用,这时候就需要vue-router这样的路径管理器来实现链接与页面跳转。

因为不是真正的像后端路由一样每切换一次url都重新发送请求,所以vue-router所形成url其实并不是真实存在的url,只是一个壳子而已(其实就是区分不同“页面”的,注意这里“页面”加了双引号)。

vue-router本来是使用“hash模式”(也就是url前面有个“#”,这个部分不改变页面就不会重新加载)的,但是为了美观和与我们以往的经验相同,可以使用“history模式”去掉这个“#”,这样我们看到的单页面应用的url就和多页面应用的url相差无几了。

重新分析问题的本质

明白了单页面应用和vue-router的本质之后,再看这个问题就没有那么困难了。

正因为没有使用“hash模式”,所以url跟正常的多页面应用的url一模一样。当输入url、刷新页面时这个虚假的url也会被后端解析,但它的本质只是与页面不同组成部分之间的映射关系,所以肯定是不可能真正存在于服务器上的,被后端解析之后,返回404 Not Found也就不是奇怪的事情了。

问题的解决方法

既然知道问题出在哪了,就很容易想到解决方法——配置后端时,除了接口之外,无论我们请求什么,都返回原来的index.html就可以了。这个在Django中也不难实现,用re_path()函数做一个正则匹配就可以了:

urls.py(未完成)

from django.contrib import admin
from django.urls import path, re_path
from django.views.generic import TemplateView
from backend.views import Login    # 还没写完的登录接口,不用管它

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', TemplateView.as_view(template_name='index.html')),
    path('login/check/', Login.as_view(), name='login-check'),    # 还没写完的登录接口
    re_path(r'.*', TemplateView.as_view(template_name='index.html'))
]

这样做又会引来新的问题:无论我们访问什么都不返回404了。

这个问题也不难解决,开发一个专门的404组件,并且在vue-router里配置一下:在配置完所有的url之后,配置上这个404组件。

NotFound.vue

<!--
  404 Not Found
-->
<template>
    <div>
      <v-navbar></v-navbar>
      <v-header></v-header>
      <div class="container">
        <h1 class="display-3">404 Not Found</h1>
      </div>
    </div>
</template>

<script>
  import NavBar from './NavBar'
  import Header from './Header'
  export default {
    name: 'NotFound',
    components: {
      'v-navbar': NavBar,
      'v-header': Header
    }
  }
</script>

<style scoped>
  h1 {
    text-align: center;
  }
</style>

配置这个404组件,注意看routers的最后一部分:

index.js(未完成?)

import Vue from 'vue'
import Router from 'vue-router'
import Manage from '@/components/Manage'
import Main from '@/components/Main'
import Login from '@/components/Login'
import Archive from '@/components/Archive'
import ArticleDetail from '@/components/ArticleDetail'
import Add from '@/components/Add'
import Delete from '@/components/Delete'
import Logout from '@/components/Logout'
import NotFound from '@/components/NotFound'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Main',
      component: Main
    },
    {
      path: '/manage',
      name: 'Manage',
      component: Manage
    },
    {
      path: '/login',
      name: 'Login',
      component: Login
    },
    {
      path: '/archive',
      name: 'Archive',
      component: Archive
    },
    {
      path: '/article/:id',
      name: 'Article',
      component: ArticleDetail
    },
    {
      path: '/add',
      name: 'Add',
      component: Add
    },
    {
      path: '/delete/:id',
      name: 'Delete',
      component: Delete
    },
    {
      path: '/logout',
      name: 'Logout',
      component: Logout
    },
    {
      path: '*',
      name: 'NotFound',
      component: NotFound
    }
  ]
})

这样,当我们访问不存在的url时,就会返回这个404页面,而访问存在的url时,页面回显正常:

存在的url
不存在的url

这样,这个问题就完美地解决了。

推荐阅读更多精彩内容