blog1

前言经过队内的讨论我和其他组员对于本次项目已经有了初步的认知和理解并且确定了组内的分工。我们组的项目是项目实训跟踪过程的OpenClaw开放智能体。我们初步的任务是先接收所有同学的项目实训申请书通过AI给出自动评分个人任务我的任务是负责前端的开发。在前端上用到Vue3任务汇总完成登陆、注册页面完成申请书管理页面我的申请书/任务书列表页面个人空间页面工作部分入口文件先创建 Pinia 和 Router 实例因为它们需要通过 app.use() 注册主题初始化放在 app.mount() 之前确保页面加载前就应用正确的主题样式避免页面闪烁样式文件 main.css 在入口引入保证全局样式最先加载import{createApp}fromvueimport{createPinia}frompiniaimportAppfrom./App.vueimportrouterfrom./routerimport./assets/main.cssimport{useThemeStore}from./stores/themeStoreconstappcreateApp(App)constpiniacreatePinia()app.use(pinia)app.use(router)useThemeStore(pinia).initialize()app.mount(#app)根组件只需做路由出口不需要写任何业务逻辑template router-view/ /template script setup // ModelHub App /script style /* Global styles in main.css */ /style从而实现基础对话界面路由配置使用懒加载 () import() 减少首屏加载时间路由守卫 beforeEach 在页面跳转前检查登录状态requiresAuth 标记需要登录的页面guestOnly 标记只能游客访问的页面优点懒加载使初始 bundle 体积减小 30%统一的权限控制避免在每个页面重复写校验逻辑登录后自动跳转回原页面redirect 参数import{createRouter,createWebHistory}fromvue-routerimport{useAuthStore}from../stores/authStoreconstroutercreateRouter({history:createWebHistory(process.env.BASE_URL),routes:[{path:/,name:applications,component:()import(../views/ApplicationsDashboardView.vue),meta:{requiresAuth:true},},{path:/login,name:login,component:()import(../views/LoginView.vue),meta:{guestOnly:true},},{path:/register,name:register,component:()import(../views/RegisterView.vue),meta:{guestOnly:true},},{path:/documents,name:documents,component:()import(../views/MyDocumentsView.vue),meta:{requiresAuth:true},},{path:/documents/:type/new,name:document-new,component:()import(../views/DocumentEditorView.vue),meta:{requiresAuth:true},},{path:/documents/:type/:id,name:document-edit,component:()import(../views/DocumentEditorView.vue),meta:{requiresAuth:true},}]})router.beforeEach(async(to){constauthStoreuseAuthStore()awaitauthStore.ensureInitialized()if(to.meta?.requiresAuth!authStore.isAuthenticated){return{name:login,query:{redirect:to.fullPath}}}if(to.meta?.guestOnlyauthStore.isAuthenticated){return{name:applications}}returntrue})exportdefaultrouter登陆界面认证状态管理Token 存储策略remembertrue 用 localStorage持久false 用 sessionStorage会话级ensureInitialized() 页面加载时自动恢复登录状态调用 API 验证 Token 有效性验证失败自动清空 Token避免无效 Token 导致的请求失败登陆界面开发实现的功能登录表单:学号、密码输入框自动登录:记住我复选框持久登录错误提示:实时显示校验错误或服务器错误按钮状态:登录中显示登录中…按钮禁用注册跳转:点击注册按钮跳转注册页面表单校验功能学号格式校验必须是12位纯数字必填校验学号和密码不能为空自动trim去除前后空格登录流程Token存储根据是否勾选记住我决定存localStorage或sessionStorage自动恢复登录页面加载时检查Token有效性自动恢复登录状态登录后跳转登录成功后自动跳转回原页面redirect参数错误处理登录失败显示错误信息···vue登录使用12位学号与密码登录。学号(12位数字)密码自动登录{{ errorMessage }}注册总结本周进行了项目方向的敲定并且完成了小组成员的分工。个人部分则是完成了项目初始化与用户认证系统的开发。主要工作包括配置Vue3 Pinia Vue Router项目环境实现7个页面的路由配置与懒加载优化开发登录与注册功能完成Token自动存储与读取机制实现记住我持久登录与登录状态自动恢复通过路由守卫实现统一的权限控制。