# 耀永诚电商前端

**Repository Path**: rain-time-tech/btcode.lxx.elebusiness.frontend

## Basic Information

- **Project Name**: 耀永诚电商前端
- **Description**: lxxyyc电商前端
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: practice
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-11-06
- **Last Updated**: 2024-01-31

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 登录页位置
src/views/sys/login/Login.vue

# 路由左上角的组件位置
src/components/Application/src/AppLogo.vue

# 系统右上角菜单隐藏
src/layouts/default/header/index.vue

# 右上角用户下拉内容自定义
src/layouts/default/header/components/user-dropdown/index.vue

# 找系统组件的方法
首先打开功能符合要求的示例页面，然后在打开“系统管理”->”菜单管理“，找到对应的功能页面，看他的路径，然后根据路径找到对应的代码位置即可

# 上传文件会触发两次的问题
是因为跨域了，上传组件默认把地址变成了后台的端口，而不是由前端代理，需要修改.env.development的VITE_GLOB_DOMAIN_URL配置，改为http://localhost:3100/jeecgboot
搞错了，其实没有上传两次，是因为上传的数据中有两条数据，后台打印了两次

# vue启动流程
入口文件页面是index.html，加载src/main.ts执行入口逻辑，加载src/App.vue

# 登录流程
LoginForm.vue中的登录按钮触发handleLogin事件：
![img.png](img.png)
调用src/store/modules/user.ts的login方法进而调用afterLoginAction方法。
![img_1.png](img_1.png)
该方法中的src/store/modules/permission.ts的buildRoutesAction
![img_2.png](img_2.png)
buildRoutesAction会调用后台接口，获取配置好的用户菜单、路由和组件信息
![img_3.png](img_3.png)

其中这一行就是请求后台接口，拿到菜单路由信息的

![img_4.png](img_4.png)

最后将构建好的路由信息，添加到路由对象中即可

![img_6.png](img_6.png)

按照下面这个格式构建route信息
```javascript
export const LoginRoute: AppRouteRecordRaw = {
  path: '/login',
  name: 'Login',
  component: () => import('/@/views/sys/login/Login.vue'),
  meta: {
    title: t('routes.basic.login'),
  },
};
```

# 登录页面跳转逻辑
应该是后台重定向，判断用户没有登录后，直接重定向到login

登陆页面的路由定义：
![img_5.png](img_5.png)

# 添加自定义路由，脱离页面框架的方法
1. 代码要写在src/main.ts里
2. 先构建路由：
```javascript
const myRoute: AppRouteRecordRaw = {
    path: '/my',
    name: 'my',
    component: () => import('/@/views/yyc/reportdaily/ReportList.vue'),
    meta: {
      title: '我的页面',
    },
  };
```
1. 再添加到router里，这个router来自'/@/router'，src/main.ts已经引入了
```javascript
router.addRoute(myRoute as RouteRecordRaw);
```
1. 最后在将上述的代码放到src/main.ts的bootstrap方法里执行即可，访问效果如下：
![img_7.png](img_7.png)