好了，这服务端就写好了。N50拜客生活常识网

4.2 前端页面

接下来我们来开发前端页面。N50拜客生活常识网

前端我使用 Vue+ElementUI+Axios，咱们这个案例比较简单，就没有必要搭建单页面了，直接用普通的 HTML 就行了。另外，Vue 我是用了 Vue3：N50拜客生活常识网

                                    
开始一个请假流程
    
        
            
请输入姓名：
            
                            
        
        
            
请输入请假天数：
            
                            
        
        
            
请输入请假理由：
            
                            
        
    
    提交请假申请

这个页面有几个需要注意的点：N50拜客生活常识网

1. 通过 Vue.createApp 来创建一个 Vue 实例，这跟以前 Vue2 中直接 new 一个 Vue 实例不一样。
2. 在最下面，通过 use 来配置 ElementPlus 插件，这个跟 Vue2 也不一样。在 Vue2 中，如果我们单纯的在 HTML 页面中引用 ElementUI 并不需要这个步骤。
3. 剩下的东西就比较简单了，上面先引入 Vue3、Axios 以及 ElementPlus，然后三个输入框，点击按钮提交请求，参数就是三个输入框中的数据，提交成功或者失败，分别弹个框出来提示一下就行了。

好啦，这就写好了。N50拜客生活常识网

然而，提交完成后，没有一个直观的展示，虽然前端提示说提交成功了，但是究竟成功没，还得眼见为实。N50拜客生活常识网

5. 任务展示

好了，接下来我们要做的事情就是把用户提交的流程展示出来。N50拜客生活常识网

按理说，比如经理登录成功之后，系统页面就自动展示出来经理需要审批的流程，但是我们当前这个例子为了简单，就没有登录这个操作了，需要需要用户将来在网页上选一下自己的身份，接下来就会展示出这个身份所对应的需要操作的流程。N50拜客生活常识网

我们来看任务接口：N50拜客生活常识网

@GetMapping("/list")public RespBean leaveList(String identity) {    return askForLeaveService.leaveList(identity);}

这个请求参数 identity 就表示当前用户的身份（本来应该是登录后自动获取，但是因为我们目前没有登录，所以这个参数是由前端传递过来）。来继续看 askForLeaveService 中的方法：

相关阅读: