SpringBoot + Spring Cloud +Vue 管理系统前端搭建(六、完善登录流程)

这里我们简单做一个登录界面,界面如图:

SpringBoot + Spring Cloud +Vue 管理系统前端搭建(六、完善登录流程)_第1张图片

话不多说直接上代码

首先我们修改登录界面

login.vue

修改主界面

Home.vue

 

在views下添加导航菜单栏、头部区域、内容区域

左测导航菜单栏

NavBar.vue

头部区域:

HeadBar.vue

 

 

主内容区域:

MainContent.vue

修改App.vue

 

 

测试:

修改完代码后访问:http://localhost:8080/#/login

如下图,可以看到我们的登录界面已经出来了

SpringBoot + Spring Cloud +Vue 管理系统前端搭建(六、完善登录流程)_第2张图片

然后我们点击登录,进入主界面

SpringBoot + Spring Cloud +Vue 管理系统前端搭建(六、完善登录流程)_第3张图片

好啦,到此我们就完成了一个简单的登录流程,在实际开发过程中,在登录后可能会有一些操作要进行,我们这里就不细说了。

 

看完记得点赞哦!

 

你可能感兴趣的:(VUE,vue)