Spring Boot + Vue前后端分离(四)前端路由

标签: SpringBoot+Vue

你好,欢迎来到 【程序职场】 ,这里有你需要的技术提升,职场规划,个人成长,副业发展 等文章。

和更多小伙伴 一起学习,一起进步。

上篇文章为大家讲述了 Spring Boot + Vue前后端分离(三)实现登录功能;本篇文章接着上篇内容继续为大家介绍 前端路由和前后端合并启动,当然前后端合并这种方式不建议在正式部署的时候使用,一般前后端分开部署不同的服务器,除非非要使用这种方式。

本文是Spring Boot + Vue前后端分离 系列的第四篇,了解前面的文章有助于更好的理解本文:


1.Spring Boot + Vue前后端分离(一)前端Vue环境搭建
2.Spring Boot + Vue前后端分离(二)前端Vue启动流程
3.Spring Boot + Vue前后端分离(三)实现登录功能


目录

(一).前端路由简介

(二).History路由模式
(三).前后端合并启动

前言

上一篇大家都学习到了 前后端分离实现 登录功能,相信对于小伙伴来说都知道了前后端分离的原理,细心的小伙伴可能发现, 上篇文章中的一个 # 号问题,我们不可能每次浏览器访问打一个#号的,所以本节主要说一下访问#号的处理 和 前后端合并启动,有些小伙伴就说了,不是前后端分离吗?为什么还要合并启动呢?这也是让大家明白一下,需要的时候怎么做。

好了,多说无益,我们开始今天的知识吧!!!

(一).前端路由简介

上一章一直有一个bug,不知道小伙伴发现没有,我们做的页面的 URL 里有一个 # 号,我们如果不带这个#号访问不正确,这个 # 号有什么含义呢?

在使用Vue开发时,一般会用到vue-router来作为前端路由,实现单页应用。vue-router提供了两种模式模拟一个完整的 URL: 

(1)hash模式

(2)history模式。

一、hash模式:使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。

//例如:查看id为1的文章

http://localhost:8080/#/page/1

二、history模式:URL 就像正常的 url,比较好看。

//查看id为1的文章

http://localhost:8080/page/1

那么 vue-router默认是使用hash模式的,不需要额外的配置,所以在上一章中我们访问必须带#号才能正常访问,如果我们想去掉#号需要怎么做呢?

我们只需要 使用history模式就可以了

Vue 已经为我们提供了两种模式的前端路由,无需我们自己去实现。

实现方式如下:

前端:vue-router的mode: ‘history’

(二).History路由模式

如果要去掉#号,首先我们把 Vue 中配置的路由从默认的 hash 模式切换为 histroy 模式。打开我们的前端项目,修改文件 router\index.js,加入 mode: 'history 这句话。整体代码如下:

import Vue from 'vue'import Router from 'vue-router'// 导入刚才编写的组件import HomePage from '@/components/home/HomePage'import Login from '@/components/Login'
Vue.use(Router)
export default new Router({  mode: 'history',  routes: [    // 下面都是固定的写法    {      path: '/login',      name: 'Login',      component: Login    },    {      path: '/index',      name: 'HomePage',      component: HomePage    }  ]})

很简单,就是添加一行代码:mode: 'history',

添加后运行项目,这时候访问就不用添加 # 号了  http://localhost:8080/login ,好了,成功加载页面。

(三).前后端合并启动

这里再说一下,我们的项目是前后端分离,这是确定的,但是我们自己在使用的时候可以合并在一起启动,部署,但是正式使用需要部署不同的服务。

那么怎么操作呢?
 

首先我们要把前端打包后的资源文件 放在后端。这不是前后端分离项目推荐的做法,应该把前后端分别部署在不同的服务器中,但实际上仍有不少项目会选择把前后端整合在一起,只使用一个服务器,所以这里我们也提及一下这种方式,但在之后的开发中不会这样部署。

执行命令行:
cnpm run build

成功后会显示如下效果:

成功后查看项目 会多一个 dist的目录

dist 文件夹下生成了两个文件 static 文件夹和 index.html 文件,把这两个文件,拷贝到我们后端项目的 \src\main\resources\static 文件夹下,一定要注意这个位置,这时后端配置的静态文件的 path,这里一般都不作修改。

 

添加好以后我们开心的去运行项目,浏览器访问项目,结果还是不行

在我们访问 http://localhost:8082/index.html ,(注意输入后缀 .html)发现页面是空白的,但确实取到了这个页面,再访问 http://localhost:8082/login ,发现跳转到了错误页面(White Error Page)。

为什么会进入错误页面呢?明明有登录这个操作的。这个错误是找不到的错误页面.

 

回顾一下单页面应用的概念,在我们这个项目中,其实只有 index.html 这一个页面,所有的其它内容都是在这个页面里动态渲染的。当我们直接在后端访问 /login 路径时,服务器后端并没有这个路径对应的内容,所以返回了 Error Page。

为了获取到我们需要的内容,我们要想办法触发前端路由,即在后端添加处理内容,把 通过这个 URL 渲染出的 index.html 返回到浏览器。

功能实现如下:

在后端项目中新建一个 包名为 error 的目录,添加实现 ErrorPageRegistrar 接口的类 ErrorConfig,把默认的错误页面设置为 /index.html​​​​​​​

package com.cxzc.mycxzc.demo.error;
import org.springframework.boot.web.server.ErrorPageRegistrar;import org.springframework.boot.web.server.ErrorPage;import org.springframework.boot.web.server.ErrorPageRegistry;import org.springframework.http.HttpStatus;import org.springframework.stereotype.Component;
@Componentpublic class ErrorConfig implements ErrorPageRegistrar {
    @Override    public void registerErrorPages(ErrorPageRegistry registry) {        ErrorPage error404Page = new ErrorPage(HttpStatus.NOT_FOUND, "/index.html");        registry.addErrorPages(error404Page);    }
}

这时,再次访问路径 :http://localhost:8082/login  成功进入登录页面。

 

源码链接: https://github.com/ProceduralZC/bookcircle

好了,通过合并前后端启动项目 到这里就ok了,敬请期待下篇。。。​​​​​​​

加微信(mmlz6879),回复「程序职场」或公众号右下角点击「撩我   ->  加群」拉你进讨论群和众多爱学习的小伙伴一起学习。

作者:小小蒲公英
公众号:程序职场
微信:mmlz6879
简介:专注于 Spring Boot ,微服务,前端APP,副业赚钱,职场规划,运营管理,个人成长 等,关注后回复   学习资料 ,领取为你精心准备的学习干货!
一个执着的职场程序员
资料: 可以在公众号后台回复 “学习资料”  获得技能提升的干货资料。

版权声明:本文为jianpengxuexikaifa原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/jianpengxuexikaifa/article/details/104373514