[Angular 基础] - routing 路由(下)

news2024/11/18 13:36:46

[Angular 基础] - routing 路由(下)

之前部分 Angular 笔记：

  • [Angular 基础] - 自定义指令，深入学习 directive

  • [Angular 基础] - service 服务

  • [Angular 基础] - routing 路由(上)

使用 route

书接上回，继续折腾 routing

按照最初的 wireframe，它的实现是这样的：

在这里插入图片描述

之前为了简化一些实现，就直接采取了在 routes 下面声明一个新的路径，去采用重新渲染子组件的方式去进行重定向。这也会有几个比较麻烦的点：

  1. 数据渲染不完全
  2. 从 servers/:id 返回到 servers 很麻烦

如果想要解决这个问题，将子组件重新渲染：

<div class="col-xs-12 col-sm-4">
  <app-edit-server></app-edit-server>
  <hr />
  <app-server></app-server>
</div>

又会遇到下面这些问题：

  1. 在主界面时代码抛出异常

    在这里插入图片描述

    有些情况 Cannot read properties of undefined 是会 break 页面，从而导致内容无法渲染的情况

    会有这个问题也是因为子页面尚未被选中，路径还是 http://localhost:4200/servers，自然无法获取对应的 server 数据

  2. 渲染了额外数据

    理想条件下，当在 /servers 这个路径下，代表着没有任何的服务器被选中，那么也不应该渲染对应的组件

为了更加优雅的解决这个问题，而不是使用大量的 ngIf 去进行条件控制，Angular 提供了 child/nested routes 的解决方案

child route

突然想到， react-router v6 也实现了这个功能……果然这日子还是到了前端框架互相抄的日子了……

这里具体修改的配置如下：

  • routing module

    const appRoutes: Routes = [
  {
    path: 'servers',
    component: ServersComponent,
    children: [
      {
        path: ':id',
        component: ServerComponent,
      },
      {
        path: ':id/edit',
        component: EditServerComponent,
      },
    ],
  },
];

  • servers V 层

    <div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="list-group">
      <a
        [routerLink]="['/servers', server.id]"
        [queryParams]="{ allowEdit: server.id === 3 ? '1' : '0' }"
        fragment="loading"
        class="list-group-item"
        *ngFor="let server of servers"
      >
        {{ server.name }}
      </a>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <router-outlet></router-outlet>
  </div>
</div>

实现后的效果：

在这里插入图片描述

就像是在 appRoutes 中定义的一样，一旦路径为 servers/:id，那么就会渲染单独的 server component，如果路径是 servers/:id/edit，就会渲染 edit-server component

我的理解是，一旦将对应的组件放到了 children 中，就会形成以父组件为基础的一个单独模块。Angular 就像处理其他模块一样，都需要通过一个 router-outlet 去进行监听，才能做出合适的反应

如果 V 层没有添加 router-outlet 的话，那么 children 中的模块就不会被渲染

更多 query param 的部分

上面的动图其实还有一个问题，那就是当从 servers/:id 定向到 servers/:id/edit 时，后置的 query parameters 全都丢了，这也是 Angular 的默认行为，想要改变这个行为，需要在 click handler 中进行处理，下面是对于 edit server 按钮的事件处理：

export class ServerComponent implements OnInit {
  onEdit() {
    this.router.navigate(['edit'], {
      relativeTo: this.route,
      queryParamsHandling: 'preserve',
    });
  }
}

这里的 queryParamsHandling 有三个值：

export declare type QueryParamsHandling = 'merge' | 'preserve' | '';

  • merge

    会将当前组件有的 query parameters 与已经存在的 query parameter 进行合并

  • preserve

    会保留已经存在的 query parameter

这时候的效果如下：

在这里插入图片描述

可以看到，allowEdit 这个参数被保留下来了，对应的 EditServerComponent 也可以通过当前的 query parameter 进行正常的逻辑处理

⚠️：EditServerComponent 有两个 subscription，一个 subscribe queryParams，另一个则是 subscribe 当前传来的 server id：

export class EditServerComponent implements OnInit {
  ngOnInit() {
    this.route.queryParams.subscribe((queryParams: Params) => {
      this.allowEdit = queryParams.allowEdit === '1';
    });
    this.route.fragment.subscribe();

    const id = parseInt(this.route.snapshot.params.id);

    // subscribe route params to update the id if params change
    this.server = this.serversService.getServer(id);
    this.serverName = this.server.name;
    this.serverStatus = this.server.status;

    this.route.params.subscribe((params: Params) => {
      this.server = this.serversService.getServer(parseInt(params.id));
      this.serverName = this.server.name;
      this.serverStatus = this.server.status;
    });
  }
}

添加 not found 页面

根据当前的实现，如果用户意外输入了一些错误的路径，那么就会重新导航到首页，并且在 console 中输出报错信息：

在这里插入图片描述

这也是一个相对而言比较粗暴的处理方式，大多数的应用都会渲染一个 not found 页面，而不是直接显示一个空白屏幕。接下来就更新 app routing module 进行实现：

const appRoutes: Routes = [
  // 其余处理不变
  { path: 'not-found', component: PageNotFoundComponent },
  { path: '**', redirectTo: '/not-found' },
];

⚠️：这里假设 Not Found 页面已经通过 ng generate component 被创建了，也实现了对应的 V 层

显示效果如下：

在这里插入图片描述

这里业务实现的逻辑也比较简单，首先是确定一个为 not-found 的路径，将对因渲染的组件设置为 PageNotFoundComponent。接下来就是终点的实现了，也就是一个 wildcard match，这个 match 必须 放在最下面，这样无法被之前路由 capture 的变化会落到这里，否则所有的页面都会渲染为 PageNotFoundComponent 组件。

当当前路由找不到当前提供的路径时，它就会被重新定向到 /not-found 页面，从而渲染 PageNotFoundComponent 组件

另一个稍微简单一点的处理方式就是直接将 ** 和 component: PageNotFoundComponent 进行绑定：{ path: '**', component: PageNotFoundComponent，这样就可以保留当前的路径，并渲染 PageNotFoundComponent 组件

这里有一点像是 React Router Dom v5 里的 Switch，不过 React Router Dom 里面的 wildcard 时 *，这里是 **

⚠️：Agular 的路径 match 是通过前缀实现的，在 not found page 这个案例的情况是 wildcard，不会造成任何的问题。

👀：一个使用情况可以从 '' 导航到 '/home，这时候配置可以这么写：{ path: '', redirectTo: 'home', patchMatch: 'full' },

Guards

guards 是用来控制路由的，博啊哭哦权限控制、是否能被访问等一些行为，每个 guard 都有不同的功能

canActive

这个 guard 用来控制当前路由是否可以被访问

这里以 servers 为例，条件控制为只有登录的用户才可以访问 /servers，变动如下：

  • routing module

    const appRoutes: Routes = [
  {
    path: 'servers',
    canActivate: [AuthGuardService],
    component: ServersComponent,
  },
];

  • 新增 AuthGuardService

    @Injectable({
providedIn: 'root',
})
export class AuthGuardService implements CanActivate, CanActivateChild {
constructor(private authService: AuthService, private router: Router) {}

canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
): Observable<boolean> | Promise<boolean> | boolean {

    return this.authService.isAuthenticated().then((authenticated: boolean) => {

    if (authenticated) {
        console.log('authenthenciated');
        return true;
    } else {
      console.log('not authenthenciated');
        this.router.navigate(['/']);
        return false;
    }
    });
}

其中 isAuthenticated 的实现如下：

  isAuthenticated() {
    const promise = new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(this.login);
      }, 1000);
    });

    return promise;
  }

展示效果如下：

在这里插入图片描述

这里 isAuthenticated 返回的永远是一个 promise，并且会在一秒钟后完成登陆，所以永远不会被重定向到首页。稍微代码，将 resolve 中改成 false，并修改一下冲定向的路径也可以实现一下效果：

在这里插入图片描述

这里都有一个 1s 的等待时间，这个是 setTimeout 决定的

需要注意的是 CanActivate 已经 deprecated 了，原因似乎也是 Angular 要走走 functional guard，而 functional guard 的实现如下：

这里的实现稍微复杂一些，

  1. 首先将 then 那一块代码抽出来，放到一个新的 service 中：

    @Injectable({
  providedIn: 'root',
})
export class PermissionsService {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.authService
      .isAuthenticated()
      .then((authenticated: boolean) => {
        if (authenticated) {
          console.log('authenthenciated');
          return true;
        } else {
          console.log('not authenthenciated');
          this.router.navigate(['/forbidden']);
          return false;
        }
      });
  }
}

    ⚠️：这里使用 canActivate 只是一个约定俗成的规范，它可以改成任何一个名称，不是一定要用 canActivate

  2. 使用 functional guard

    export const authGuardFunc: CanActivateFn = (route, state) => {
  return inject(PermissionsService).canActivate(route, state);
};

    ⚠️：直接实现下面的代码，ide 不会报错，但是浏览器会报错：

    export const authGuardFunc: CanActivateFn = (route, state) => {
  return inject(AuthService)
    .isAuthenticated()
    .then((authenticated: boolean) => {
      if (authenticated) {
        console.log('authenthenciated');
        return true;
      } else {
        console.log('not authenthenciated');
        inject(PermissionsService).canActivate(route, state);
        return false;
      }
    });
};

    在这里插入图片描述

canActiveChild

有一个情况就是，用户可以访问 servers，但是不能访问 servers 的 children。一个解决方法是将 canActivate: [AuthGuardService], cv 到每一个 child component，不过当 child component 变多的时候，管理就会变得非常的麻烦。

如果当前逻辑应用于所有的 child component，就可以使用 canActiveChild 去实现：

@Injectable({
  providedIn: 'root',
})
export class AuthGuardService implements CanActivate, CanActivateChild {
  constructor(private authService: AuthService, private router: Router) {}

  // 新增部分，可以直接调用之前实现的 canActivate
  canActivateChild(
    childRoute: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    return this.canActivate(childRoute, state);
  }
}

并在 routing module 中实现对应的修改：

const appRoutes: Routes = [
  {
    path: 'servers',
    canActivateChild: [AuthGuardService],
    // 其余部分省略
  },
];

效果如下：

在这里插入图片描述

同样，对应的 functional guard 的修改如下：

  1. permissions service 的修改：

    export class PermissionsService {
  constructor(private authService: AuthService, private router: Router) {}

  canActiveChild(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    return this.canActivate(route, state);
  }
}

  2. func guard 的修改：

    export const authGuardFunc: CanActivateFn = (route, state) => {
  return inject(PermissionsService).canActivate(route, state);
};

export const authGuardChildFunc: CanActivateChildFn = (route, state) => {
  return inject(PermissionsService).canActiveChild(route, state);
};

调用的时候则是直接在 canActivateChild 中放入 authGuardChildFunc 即可

鉴于代码完全一致，放入 authGuardFunc 也没问题啦……

canDeactivate

canDeactivate 是一个在离开当前页面时会触发的 guard，一般可以用来检查未保存的内容，防止用户提前离开

具体实现方式如下：

  1. 创造一个 service，具体实现如下：

    export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

@Injectable({
  providedIn: 'root',
})
export class CanDeactivateGuard
  implements CanDeactivate<CanComponentDeactivate>
{
  canDeactivate(
    component: CanComponentDeactivate,
    currentRoute: ActivatedRouteSnapshot,
    currentState: RouterStateSnapshot,
    nextState: RouterStateSnapshot
  ): boolean | Observable<boolean> | Promise<boolean> {
    return component.canDeactivate();
  }
}

  2. 在 routing module 中添加 guard：

    const appRoutes: Routes = [
  {
    path: 'servers',
    children: [
      {
        path: ':id/edit',
        component: EditServerComponent,
        canDeactivate: [CanDeactivateGuard],
      },
    ],
  },
];

  3. EditServerComponent 实现 canDeactivate 函数

    如果不实现的话，在离开当前页面会报错，也就 break project 了：

    在这里插入图片描述

    这也是为什么 Angular 的实现这么复杂……主要还是为了类型检查，以及 添加的功能都必须实现 这样的检查

    具体实现如下：

    @Component({
  selector: 'app-edit-server',
  templateUrl: './edit-server.component.html',
  styleUrls: ['./edit-server.component.css'],
})
export class EditServerComponent implements CanComponentDeactivate {
  serverName = '';
  serverStatus = '';
  allowEdit = false;
  changesSaved = false;

  canDeactivate(): boolean | Promise<boolean> | Observable<boolean> {
    if (!this.allowEdit) {
      return true;
    }

    if (
      (this.serverName !== this.server.name ||
        this.serverStatus !== this.server.status) &&
      !this.changesSaved
    ) {
      return confirm('Do you want to discard the changes?');
    } else {
      return true;
    }
  }
}

实现完成后的效果：

在这里插入图片描述

这里有 3 种情况：

  1. 当用户没有编辑权限

    ✅ 直接允许重定向

  2. 当用户有编辑权限，但是用户 没有 编辑内容

    ✅ 直接允许重定向

  3. 当用户有编辑权限，并且用户 已经 编辑内容

    ❌ 不允许直接冲定向

    这里的具体操作是跳出一个 confirm，当用户确认后，即可重新定向

这里也提出 functional guard 的实现方式，鉴于其他的变量名不变，所以这里只需要修改 CanDeactivateGuard service 即可：

export interface CanComponentDeactivate {
  canDeactivate: () => Observable<boolean> | Promise<boolean> | boolean;
}

export const CanDeactivateGuard: CanDeactivateFn<CanComponentDeactivate> = (
  component: CanComponentDeactivate
): Observable<boolean> | boolean => {
  if (component.canDeactivate && component.canDeactivate()) return true;
};

// @Injectable({
//   providedIn: 'root',
// })
// export class CanDeactivateGuard
//   implements CanDeactivate<CanComponentDeactivate>
// {
//   canDeactivate(
//     component: CanComponentDeactivate,
//     currentRoute: ActivatedRouteSnapshot,
//     currentState: RouterStateSnapshot,
//     nextState: RouterStateSnapshot
//   ): boolean | Observable<boolean> | Promise<boolean> {
//     return component.canDeactivate();
//   }
// }
resolve

canActivate 是控制用户允许访问当前页面， canDeactivate 是控制用户不允许访问当前页面，resolve 则是允许等待一段时间(如获取数据的异步操作)，在完成操作后渲染组件

实现如下：

  • 创建一个新的 resolver service

    interface Server {
  id: number;
  name: string;
  status: string;
}

@Injectable({
  providedIn: 'root',
})
export class ServerResolverService implements Resolve<Server> {
  constructor(private serversService: ServersService) {}

  resolve(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Server | Observable<Server> | Promise<Server> {
    const promise: Promise<Server> = new Promise((resolve) => {
      setTimeout(() => {
        console.log('resolving');

        resolve(this.serversService.getServer(parseInt(route.params.id)));
      }, 1000);
    });

    return promise;
  }
}

    这个 service 就是实现一个 resolver，即在组件渲染之前获取对应的 server。我这里用 setTimeout 模拟了一个异步操作

  • 更新 routing module

    这里制定要使用 resolver 的组件，即 servers/:id

    const routes = (Routes = [
  {
    path: 'servers',
    children: [
      {
        path: ':id',
        component: ServerComponent,
        resolve: { server: ServerResolverService },
      },
    ],
  },
]);

    这一步操作会将获取的 server——resolve 的数据——存储到 server 这个变量名中

  • 更新 server component

    export class ServerComponent implements OnInit {
  server: { id: number; name: string; status: string };

  ngOnInit() {
    this.route.data.subscribe((data: Data) => {
      console.log(data);

      this.server = data.server;
    });
  }
}

    这里主要更新 ngOnInit 中的内容，最终的效果与实现的效果是一致的

最终效果：

在这里插入图片描述

可以看到渲染被延迟了大概一秒钟，然后输出了对应的 server

同样增添一下 functional guard 的实现：

export const serverResolver: ResolveFn<Server> = (route) => {
  const serverId = parseInt(route.params.id);

  return inject(ServersService).getServer(serverId);
};

⚠️：getServer 返回的是一个 Server

传输数据

之前在 canActivate guard 中创建了一个 forbidden 页面，这样每次页面报错都会重新导航到 /forbidden 上去。但是这样做的一个问题就在于，如果想要做更多的报错处理，那么可能需要创造更多的报错页面。

下面提供一个可以复用

下面是步骤：

  1. 创建一个新的 generic error 页面

    • V 层
    <h4>{{ errorMessage }}</h4>

  • VM 层

    @Component({
  selector: 'app-error-page',
  templateUrl: './error-page.component.html',
  styleUrl: './error-page.component.css',
})
export class ErrorPageComponent implements OnInit {
  errorMessage: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.errorMessage = this.route.snapshot.data['message'];
    this.route.data.subscribe((data: Data) => {
      this.errorMessage = data.message;
    });
  }
}

  1. 修改 app routing

    const appRoutes: Routes = [
  {
    path: 'not-found',
    component: ErrorPageComponent,
    data: { message: 'Page not found!' },
  },
  {
    path: '**',
    redirectTo: '/not-found',
  },
];

效果如下：

在这里插入图片描述

这样可以创建多个不同的路径，并传输不同的信息，实现使用一个 ErrorPageComponent 渲染不同的报错信息

如果搭配其他的 Observable，这里应该也是可以实现避开重复声明路由，而是直接用 ** wildcard 去渲染 ErrorPageComponent，随后使用 Observable 获取报错信息

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1492303.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

计算机设计大赛 深度学习的动物识别

计算机设计大赛 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…
阅读更多...
阿里云打响“算力平价”第一枪

阿里云打响“算力平价”第一枪

大数据产业创新服务媒体 ——聚焦数据 改变商业 2月29日&#xff0c;阿里云宣布了史上最大力度的一次降价&#xff0c;平均降价幅度超过20%&#xff0c;最高降幅达55%。通过此次降价&#xff0c;阿里云的核心云计算产品价格都击穿了全网最低价。 这次降价&#xff0c;涉及100多…
阅读更多...
HTML静态网页成品作业(HTML+CSS)——我的家乡北京网页设计制作(7个页面)

HTML静态网页成品作业(HTML+CSS)——我的家乡北京网页设计制作(7个页面)

&#x1f389;不定期分享源码&#xff0c;关注不丢失哦 文章目录 一、作品介绍二、作品演示1、首页2、子页13、子页24、子页35、子页46、子页57、子页6 三、代码目录四、网站代码HTML部分代码CSS部分代码 五、源码获取 一、作品介绍 &#x1f3f7;️本套采用HTMLCSS&#xff0…
阅读更多...
web学习笔记（二十五）BOM

web学习笔记（二十五）BOM

目录 1.BOM概述 1.1什么是BOM 1.2BOM的构成 2.windom常用属性汇总 3.window常用方法汇总 4.window对象常见事件汇总 5.this总结&#xff1a; 1.BOM概述 1.1什么是BOM BOM(Browser Object Model)就是浏览器对象模型(整个浏览器)&#xff0c;他的核心对象是window,BOM缺…
阅读更多...
探索 PostgreSQL 的高级数据类型 - 第 1 部分

探索 PostgreSQL 的高级数据类型 - 第 1 部分

数组和枚举 PostgreSQL 因其可扩展性和多功能性而备受欢迎&#xff0c;除了传统的整数和字符串之外&#xff0c;它还提供了多种数据类型。其中&#xff0c;包括数组和枚举&#xff0c;其为开发者提供了高级的数据建模能力。本文中&#xff0c;我们将深入研究这些复杂的数据类型…
阅读更多...
CSS常用五类选择器，附面试题

CSS常用五类选择器，附面试题

学习路线 第一阶段&#xff1a;网页制作 HTML&#xff1a;常用标签&#xff0c;锚点&#xff0c;列表标签&#xff0c;表单标签&#xff0c;表格标签&#xff0c;标签分类&#xff0c;标签语义化&#xff0c;注释&#xff0c;字符实体 CSS&#xff1a;CSS介绍&#xff0c;全局…
阅读更多...
mac报错：zsh: command not found: npm

mac报错：zsh: command not found: npm

1、问题概述&#xff1f; 在mac系统中使用npm命令的时候&#xff0c;mac os报错提示&#xff1a; zsh: command not found: npm 一般出现发这种情况的原因时没有安装npm,而npm这命令时集成在nodejs中的&#xff0c;所以安装nodejs就可以了。 2、解决办法 本质就是需要安装…
阅读更多...
论文笔记：Code Llama: Open Foundation Models for Code

论文笔记：Code Llama: Open Foundation Models for Code

导语 Code Llama是开源模型Llama 2在代码领域的一个专有模型&#xff0c;作者通过在代码数据集上进行进一步训练得到了了适用于该领域的专有模型&#xff0c;并在测试基准中超过了同等参数规模的其他公开模型。 链接&#xff1a;https://arxiv.org/abs/2308.12950机构&#x…
阅读更多...
HarmonyOS创建项目和应用—设置数据处理位置

HarmonyOS创建项目和应用—设置数据处理位置

项目和应用介绍 关于项目 项目是资源、应用的组织实体。资源包括服务器、数据库、存储&#xff0c;以及您的应用、终端用户的数据等。在您使用部分服务时&#xff0c;您是数据的控制者&#xff0c;数据将按照您设置的数据处理位置来存储在指定区域。 通常&#xff0c;您不需…
阅读更多...
【C++】继续学习 string类 吧

【C++】继续学习 string类 吧

开始使用 string类 吧 1 继续学习1.1 扩容机制1.2 string类对象的访问及遍历操作1.3 string类对象的修改操作1.4 其他一些成员函数 2 实践解决问题&#xff1a;Thanks♪(&#xff65;ω&#xff65;)&#xff89;谢谢阅读&#xff01;&#xff01;&#xff01;下一篇文章见&…
阅读更多...
计算机网络(4)----局域网与广域网

计算机网络(4)----局域网与广域网

目录 1.局域网 (1)局域网拓扑结构 (2)局域网的传输介质 (3)局域网介质访问控制方法 (4)局域网的分类 (5)IEEE 802标准 (6)MAC子层与LLC子层 (7)常用的局域网技术---以太网 (8)以太网传输介质与拓扑结构的发展 (9)常用的以太网---10BASE-T以太网 (10)适配器与MAC地址…
阅读更多...
数据库 与 数据仓库

数据库 与 数据仓库

OLTP 与 OLAP OLTP(On Line Transaction Processing&#xff0c;联机事务处理) 系统主要针对具体业务在数据库联机下的日常操作&#xff0c;适合对少数记录进行查询、修改&#xff0c;例如财务管理系统、ERP系统、交易管理系统等。该类系统侧重于基本的、日常的事务处理&#…
阅读更多...
Batch Normalization和Layer Normalization和Group normalization

Batch Normalization和Layer Normalization和Group normalization

文章目录 前言一、Group normalization二、批量规范化(Batch Normalization)三、层规范化&#xff08;Layer Normalization&#xff09; 前言 批量规范化和层规范化在神经网络中的每个批次或每个层上进行规范化&#xff0c;而GroupNorm将特征分成多个组&#xff0c;并在每个组内…
阅读更多...
【AGI】大模型 深度学习入门学习路径

【AGI】大模型 深度学习入门学习路径

【AGI】大模型 深度学习入门学习路径 1. 深度学习入门学习路径可以从以下几个方面入手：2. 深度学习中的基本概念和算法有哪些？3. Python在深度学习中的应用和库有哪些？4. PyTorch的基本计算结构和应用教程推荐？5. 如何通过实战项目加深对深度学习模型训练的理解？6. 参考资…
阅读更多...
Linux运维：在线/离线安装Telnet客户端和Telnet服务

Linux运维：在线/离线安装Telnet客户端和Telnet服务

Linux运维&#xff1a;在线/离线安装Telnet客户端和Telnet服务 前言1.1 在线安装Telnet1.2 离线安装Telnet1.3 Telnet服务有关的命令 &#x1f496;The Begin&#x1f496;点点关注&#xff0c;收藏不迷路&#x1f496; 前言 Telnet是一种用于远程登录到其他计算机的协议&…
阅读更多...
springboot+jsp汽车配件管理系统idea maven 项目lw

springboot+jsp汽车配件管理系统idea maven 项目lw

springbootweb汽车配件销售业绩管理系统服务于汽车配件公司业务,实现了客户管理&#xff0c;主要负责对客户相关数据的增删改查方面、渠道管理&#xff0c;主要对渠道信息也就是设备的供应商渠道信息进行管理、项目管理&#xff0c;主要是一些项目信息的记录与整理、销售数据管…
阅读更多...
深入探索Docker数据卷：实现容器持久化存储的完美方案（下）

深入探索Docker数据卷：实现容器持久化存储的完美方案（下）

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《Docker入门到精通》 《k8s入门到实战》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 四、Docker数据卷的高级管理 1、数据卷的生命周期管理 2、数据…
阅读更多...
基于巨控GRM561/562/563Y西门子1200PLC发邮件

基于巨控GRM561/562/563Y西门子1200PLC发邮件

巨控GRM560,GRM600系列同比之前的GRM530&#xff0c;除短信&#xff0c;微信&#xff0c;电话语音播报增加了邮件发送功能&#xff0c;简单介绍一下PLC发邮件。 1在博途中建立好DB块 2.打开GRMDEV6&#xff0c;新建工程&#xff0c;做好数据采集&#xff0c;这里以DB4.D0&#…
阅读更多...
【笔记】React-Native React DevTools

【笔记】React-Native React DevTools

/** * 官网文档&#xff1a;https://reactnative.dev/docs/next/react-devtools */ 1、本想在Demo项目中添加依赖(npx react-devtools)&#xff0c;但其他项目就需要再操作一次&#xff0c;所以全局安装就好了 yarn global add react-devtools 或 npm install -g react-devto…
阅读更多...
linux 将 api_key设置环境变量里

linux 将 api_key设置环境变量里

vi ~/.bashrc在最后添加api_key的环境变量 export GEMINI_API_KEYAIza**********WvpX7FwbdM刷新配置 source ~/.bashrc使用python 读取环境变量 import os gemini_api_key os.getenv(GEMINI_API_KEY) print(gemini_api_key)
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023