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

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

前两天做了微人事登录的前端页面和后端接口，第三天则实现了前后端接口的对接，输入正确的用户名和密码之后，成功的跳转到home页。第四天做了Home页的Title制作和下拉菜单，下拉菜单有三个选项，个人中心、设置和注销登录，还做了注销登录，点击注销登录会出现提示：“此操作将注销登录，是否继续”，点是就重新跳转到登录页面，第五天做的是左边的导航菜单，第六天是做的服务端菜单接口的设计，第七天是Vuex的介绍、安装和配置、第八天是不写代码，第九天谈一谈前后端分离开发，权限管理的一些思路，是后端接口权限设计，今天开始写业务代码，从系统管理的基础信息设置开始写，先写前端页面

①：在该页面添加一个大div，然后添加一个tab选项卡，Element UI里面有

把代码复制到大div里面，把里面的label和name属性改成我们想要的，再把@tab-click="handleClick"去掉

②：在data里面设置activeName属性，activeName:'second'：默认显示第二个

data(){
            return{
                activeName:'second'
            }
        },

效果如下图所示：

③：一共有五个选项卡，可不可以直接在每一个选项卡里面直接写html标签呢，答案是可以的，但是这样写的话，就要写好久重复的，没法管理，这时我们可以想到通过组件化开发来节省资源。就是一个很复杂的页面我们可以拆分成很多个小页面，在把很多小页面拼接成一个完整的页面。

组件可以放到components文件夹里面来，页面就要views文件夹中

④：先把这5个组件定义好

再引入这5个组件，在

效果如下图所示：

至此，微人事的系统管理中的基础信息设置中的职位管理的前端页面已经完成，明天开始写后端的接口