用Spring Boot+Vue做微人事项目第四天

前两天做了微人事登录的前端页面和后端接口,第三个则实现了前后端接口的对接,输入正确的用户名和密码之后,成功的跳转到home页。现在要做的就是Home页的Title制作

Home页的Title制作

使用Element UI中的Container布局容器

用Spring Boot+Vue做微人事项目第四天_第1张图片

复制的代码如下,把复制的代码放到Home.vue的template标签中,显示效果如下图

用Spring Boot+Vue做微人事项目第四天_第2张图片

给Header加上个class属性,然后设置header的背景颜色,浏览器显示效果如下:

用Spring Boot+Vue做微人事项目第四天_第3张图片

在vuehr项目的public文件夹里面的index.html页面的body标签上加上style="margin:0px;padding:0px;";显示效果如下图

用Spring Boot+Vue做微人事项目第四天_第4张图片

 

用Spring Boot+Vue做微人事项目第四天_第5张图片

配置下拉菜单

用Spring Boot+Vue做微人事项目第四天_第6张图片

把下拉菜单的代码复制到微人事字体的下面,效果如下


用Spring Boot+Vue做微人事项目第四天_第7张图片

把这个下拉菜单和下拉菜单下面的改一下





每个下拉菜单都是一个点击按钮,所以要给下拉菜单添加点击事件,可以使command=" "点击菜单项触发的事件回调

然后在标签里面添加@command="commandHandler" 点击事件

再带script标签里面加上method方法





从登录页面点击登录会提示登录成功

用Spring Boot+Vue做微人事项目第四天_第8张图片

从下拉菜单点击注销登录 ,会出现提示,此操作将注销登录,是否继续?有取消和确定按钮,点击确定会注销成功并跳转到登录页面

用Spring Boot+Vue做微人事项目第四天_第9张图片

用Spring Boot+Vue做微人事项目第四天_第10张图片

 

你可能感兴趣的:(Spring,Boot+Vue做微人事项目)