# demo3

**Repository Path**: zhuddan/demo3

## Basic Information

- **Project Name**: demo3
- **Description**: demo3
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-07-21
- **Last Updated**: 2023-07-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 原要求  :envelope: 
1. 页面 （1）带导航栏的页面 （2）不带导航的页面也就是全屏页面 （3）白名单页面：不需要登录即可访问
  全屏： 登录页面（白名单），注册页面（白名单），404 页面（此页面是不是白名单自行判断）
  带导航的页面： 首页、个人中心、关于页面

文件结构：
views                  
  ├─about              
  │      index.vue     
  │                    
  ├─account            
  │      index.vue     
  │                    
  ├─error              
  │      404.vue       
  │                    
  ├─home               
  │      index.vue     
  │                    
  ├─login              
  │      index.vue     
  │                    
  └─register           
          index.vue    
                        

2. 布局要求

  （1）带导航栏的页面必须用父组件包含例如 Layout 包含 ，并且提取导航栏组件

  （2）登录页面包含一个登录按钮，一个到注册页面的链接。

  （3）导航栏包含左侧侧logo和右侧导航链接（包含首页、个人中心、关于）和退出登录按钮

  （4）个人中心包含一个到修改密码的链接 ，链接为 /change-password

  （5）404页面内容需要提示：页面不见了，和返回首页的链接

  （6）其余页面自行标注页面即可（比如首页内容写：这是首页，即可）


3. 路由拦截

  （1）未登录的用户进入 非白名单页面 时重定向到 登录页面

  （2）已登录的用户进入 登录页面 或者 注册页面 时重定向到 首页

  （3）修改密码的链接应该跳转到 404 页面

   难点：

  （4）登录状态应该使用 cookie 进行存储，并且设置过期时间为1分钟（可以自行修改方便调试）。不得使用任何第三方库，请自行封装

  （5）使用 pinia 保存 是否获取过 动态菜单，定义 menus 数组存放

  （6）在路由拦截中获取动态菜单，根据 后台返回json（自行模拟后台请求） 和 项目文件路径获取，如果获取过则存放在menus中，获取过则不重复获取（根据menus的length判断）

  （7）退出登录按钮点击后清空所有动态路由和登录状态，并且返回到登录页面

  （8）默认路由只有登录注册

      export const router = createRouter({
        history: createWebHistory(),
        routes: [
          // 登录 注册（其余应该使用动态路由动态添加）
        ],
      });
 
4. 提示
  （1）3.（8）中的 routes 补充完整, 包含所有页面都，把登录和退出登录逻辑完成再考虑动态路由(今天至少完成)
  （2）3.（6）中的 后台返回json（自行模拟后台请求）参考,请思考是否需要包含404
```js
 function getAsyncRoutes() {
      // return;
      return new Promise((resolve) => {
        resolve(
          [
            {
              path: '/',
              meta: {
                title: '首页',
              },
              component: 'home/index.vue',
            },
            {
              path: '/about',
              meta: {
                title: '关于',
              },
              component: 'about/index.vue',
            },
            {
              path: '/account',
              meta: {
                title: '个人中心',
              },
              component: 'account/index.vue',
            },
          ],
        );
      });
    }
```




# 不足的地方或未按照要求完成的内容 :muscle: 

【1】未按 2(1) 要求 **提取导航组件** ；

【2】未按2（3）要求导航包含  **logo** 和  **退出登录按钮** ；

【3】未按2（4）要求个人页面包含 **修改密码的链接** ；

【4】登录之后需要保存登录状态（即刷新后还是已登录的，除非token过期，或者用户手动退出登录），3（4）中已经指明使用 **cookie** ，但是未使用，另外请自行封装cookie，不得使用第三方库；

# 值得称赞的地方 :+1:

【1】路由拦截逻辑清晰明了 

【2】vite配置中配置了elementplus和vue的AutoImport自动导入功能，以及别名配置

【3】登录注册有完善的逻辑和必要的校验

# 其他建议  :memo: 

【1】 **请认真参阅所有要求！！！且务必完全符合所有要求！！！否则视为无效！！！** 尤其是布局方面，可以拓展自己的东西，但是要在符合要求的基础之上！

【2】本项目重点是  **登录逻辑** 和 **动态路由** ，不需要太关注登录和注册的输入框，故2(2)中提示登录页面需要一个登录按钮，点击登录按钮就可以登录了（你可以写死账号密码），不需要写多余的账号密码输入框（需要拓展必须在符合要求之上，见上一条）。

【3】登录中的setToken逻辑应该提出来，在useUserStore中应该定义login方法而不是setToken，然后在login方法中调用setToken方法

【4】导航栏中的菜单请使用a标签（router-link）而不是自定义方法，使用router-link可以根据css类名进行高亮显示，使用li标签的话需要单独编写跳转逻辑，或者调用方法，另外在vue的template如果确实需要调用router.push直接使用$router.push，而不用去重复引入。下面图中明显可以看到$router 和 引入的 router等价。另外route文件夹建议命名为router。

![输入图片说明](image2.png)![输入图片说明](image3.png)![输入图片说明](image4.png)

【5】不重要但是建议，vite.config中配置了别名配置, 建议配置jsconfig.json 主要是@别名跳转，可以方便开发，请查阅compilerOptions.paths
![输入图片说明](image.png)
```json
{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "ES6",
    "module": "commonjs",
    "allowSyntheticDefaultImports": true
  },
  "include": ["src/**/*"],
  "exclude": ["node_modules"]
 }

```

# 最后
根据当前代码情况，务必于7.21下午5点前完成布局不足的地方或未按照要求完成的内容