项目分为登录,主页,修改用户信息,学生管理,教师管理前端vue组件的编写
使用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值,使父组件点击新增