点击空白处退出提示
作品详情
使用vue3来搭建前端项目,登录组件中的用户名和密码框的内容和ts代码中的数据进行双向绑定,使用ant-design-vue中的Form组件中的useForm方法来完成表单的校验,从useForm中解构出validateInfos校验对象和validate方法,用户名表单项绑定validateInfos中的usename,密码框绑定validateInfos中的password,定义校验规则,把封装用户名和密码的响应式对象和校验规则分别作为参数传递给useForm方法,使用vue-router根据不同的用户对应着不同的角色登录后生成动态生成路由和菜单信息,。
学生组件使用ant-design-vue中的表格组件来展示后台数据,使用vue-request中的组件实现分页,搜索,删除,删除选中功能,搜索可以根据根据页面输入的姓名、性别、年龄区间来搜索,使用template中的bodyCell插槽自定义单元格内容,使用编译宏定义事件update:visible,可以从子组件向父组件传递boolean值,使父组件点击新增或者修改按钮可以弹出对话框来实现新增或者修改功能,使用ant-design-vue中的Form组件中的validateInfos对象和 validate方法来实现表单校验,并且在自定义的axios对象中自定义响应拦截器实现新增、删除、删除选中操作后的信息提示功能。
使用pina在多个组件之间可以共享数据,在A6P1组件修改用户信息,提交成功之后,在主页可以实时更新用户信息,从后端获取路由和菜单数据,使用tsx二次封装@ant-design/icons-vue中的图标组件,在每个菜单上使用图标可以使用统一的格式。
声明:本文仅代表作者观点,不代表本站立场。如果侵犯到您的合法权益,请联系我们删除侵权资源!如果遇到资源链接失效,请您通过评论或工单的方式通知管理员。未经允许,不得转载,本站所有资源文章禁止商业使用运营!
下载安装【程序员客栈】APP
实时对接需求、及时收发消息、丰富的开放项目需求、随时随地查看项目状态
评论