|
在具有社交距离规范的大流行中，网站领域势必会以极快的速度蓬勃发展。因此，至关重要的是进行在线过渡并使您的企业成为有影响力的网站存在，从而在数字世界中产生涟漪。 一个典型的公司网站只是一组以或多或少简单的导航结构的页面。我们希望创建一个允许用户创建任意数量的页面并决定导航结构的网站，而无需等待代码发布。为此，我们将依赖 Cosmic JS 并创建结构来保存这个项目。在此示例中，我们的存储桶将具有以下对象类型： 演示：m.jcedus.top 页:这是一个简单的对象，没有额外的元字段。 导航:它将保存一组页面。 预设:这是一个带有属性列表的配置对象，可以帮助我们启动我们的应用程序。它将保存我们将用于网站菜单的主页和主导航的值。 使用 API 现在我们已经定义了数据的结构，我们需要创建我们的 Angular 应用程序（我建议使用 Angular CLI）并创建一个服务来调用 Cosmic JS API。看看从 Cosmic JS 请求单个页面对象是多么简单： getPage(slug: string): Observable<Page> {
if (!this.page$.get(slug)) {
const url = `api.cosmicjs.com/v1/company-presentation/object/${slug}`;
const response = this.http.get<Page>(url).pipe(
tap(_ => console.log(`fetched page: ${slug}`)),
map(_ => {
return new Page(_['object']);
}),
shareReplay(1),
catchError(this.handleError<Page>(`getPage: ${slug}`))
);
this.page$.set(slug, response);
}
return this.page$.get(slug);
}获取单个页面并将其保存到流中以保持会话缓存 请注意，对于嵌套对象，Cosmic JS 不会返回完整的树，因此有时您需要连接调用以充分利用我们的服务，例如：当获取主要预设时，您可能希望包含导航页面。 getMainPresets(includeNavigation?: boolean): Observable<Preset> {
if (includeNavigation) {
return this.getPreset(environment.presets).pipe(
switchMap(response => {
return forkJoin([of(response), this.getNavigation(response.mainNavigation._id)]);
}),
map(res => {
res[0].mainNavigation = res[1];
return res[0];
})
);
} else {
return this.getPreset(environment.presets);
}
}此调用会将 getNavigation 的结果合并到 getPreset 的结果中 我们的 api 调用需要使用读取密钥进行身份验证，我们可以将其包含在每个方法中，但最简单的可能是创建一个拦截器。这将拦截所有 http 请求，因此我们检查它是否是 Cosmic JS 请求并在必要时附加读取密钥。 intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
if (req.url.match(/api.cosmicjs/)) {
let params = new HttpParams({ fromString: req.params.toString() });
if (req.method === 'GET') {
params = params.append('read_key', environment.read_key);
} else {
params = params.append('write_key', environment.write_key);
}
req = req.clone({
params: params
});
}
return next.handle(req);
}拦截并附加读取或写入参数 路由到页面 此时，我们的网站什么都不做，它需要做的第一件事就是知道如何加载它的第一页。我们需要为页面创建一个路由模块，并将其设置为在根目录上加载。一旦进入模块，在它自己的路由上，我们将为参数 :slug 设置一个路由来加载页面组件。当没有指定路线时会发生什么？这将是我们最常见的场景，为此，我们使用 Guard 设置了一条空路由。 const routes: Routes = [
{
path: '',
canActivate: [HomepageGuard]
},
{
path: ':slug',
component: PageComponent
}
];在匹配路由时和加载组件之前会执行一个守卫，因此我们将使用它从 Cosmic JS 中获取主要预设，并将应用程序重定向到我们建立的主页。 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.cosmicService.getMainPresets().pipe(
map(presets => {
return this.router.parseUrl(`/${presets.homepage.slug}`);
})
);
}从 Angular 7.1 开始，canActivate 可以返回布尔值或 UrlTree 成分 现在我们有一个将加载 Page 组件的路由配置，这是使用参数列表中的 slug 加载页面的方式： ngOnInit() {
this.route.paramMap
.pipe(
map(paramMap => paramMap.get('slug')),
switchMap(slug => (slug ? this.cosmicService.getPage(slug) : EMPTY))
)
.subscribe(page => (this.page = page));
}现在我们可以在模板上使用页面对象 有了这个，我们就有了一种通过 url 导航的方法，但我们还应该加载一个菜单，以便用户可以看到可用的页面。为此，我们将在核心模块上添加一个菜单组件，因为它将在整个应用程序中共享。我们的菜单将由导航列表、徽标和公司名称组成；所有这些都是在预设中定义的，所以菜单会有这样的调用： ngOnInit() {
this.cosmicService.getMainPresets(true).subscribe(presets => {
this.logo = presets.companyLogoUrl;
this.navigation = presets.mainNavigation;
this.title = presets.companyName;
});
}请注意，我们特别要求通过在方法中添加“true”作为参数来包含导航 所有这些都将允许您使用 Angular 和 Cosmic JS 快速创建一个网站，剩下要做的就是创建模板并扩展配置以满足您的需求。 Next.js 搜索引擎使用网络爬虫来导航网站以发现其他网站及其页面。 以下是 Googlebot 索引网页的方式： 查找网址 将 URL 添加到 Crawl Queue 发出 HTTP 请求 渲染队列 如果满足所有条件，则该页面可能会被编入索引并显示在搜索结果中。 Next.js 中有 4 种渲染策略： 静态生成- 页面 HTML 在构建时生成。 服务器端渲染- 在每个请求期间生成页面 HTML 。 增量静态生成- 逐页生成静态。 客户端渲染——网站完全使用 JavaScript 渲染。 企业需要网站监控的主要原因 1. 维护品牌形象 无论您是拥有实体企业还是经营在线商店，都必须为您的企业维护品牌形象。如今，随着技术的进步，品牌形象在很大程度上取决于在线体验和客户服务。 如果您的网站出现性能故障或访问者经常出现停机，则企业的在线声誉受到影响的可能性很高。 甚至包括 Facebook、索尼和亚马逊在内的知名企业也会在特定时期内经历停机。网站监控对于防止此类问题并保护您公司的在线声誉是必要的。它可以帮助您快速识别和解决问题。 2. 防止销售和收入损失 频繁的停机会使您的公司在销售和收入损失方面付出代价。根据官方调查，亚马逊透露其每分钟的整体利润为 29000 美元，但当其网站面临仅两年的停机时间时，该公司损失了近 9900 万美元。 无论您是零售企业还是从事任何 B2B 或 B2C 业务，始终必须确保您的网站保持正常运行。 公平地说，商业网站的停机时间只被接受一次。网站监控使您能够停止网站的频繁停机。 3. 在 SERP 上获得更高的排名 谷歌跟踪阳光下的每个网站。它最清楚您的网站何时出现故障并在其搜索页面上相应地对您的网站进行排名。 因此，最好让您的网站远离此类问题。如果您的企业网站经常面临停机一两天，它会在 Google 的 SERP（搜索引擎排名页面）上出现故障。 网站在速度和 UX（用户体验）方面的性能以及停机时间都是您网站搜索排名的一些决定因素。 4. 提供最佳客户体验 任何企业都不能失去客户。如果网站运行缓慢，企业可能会继续失去客户。如今，精通技术的客户希望网站能够以闪电般的速度加载，从而为他们带来愉快的体验。 更重要的是，当您现有的客户访问您的网站时，最好让他们满意。在这里，监控和跟踪用户活动对您来说仍然很方便。 您的网站不仅应该看起来很有吸引力，而且还应该有助于以有意义的方式发展您的业务。我们定制的 Web 开发服务可提供高效的解决方案，满足您的业务目标。今天做生意有点不同。当今的在线世界迫使您为每项业务都拥有一个功能强大的网站，因为它可以帮助您与更多的潜在客户在线互动并获得更广泛的市场份额。您的网站是您的业务和品牌在互联网上的展示。如果您没有功能性网站并且想要一个或计划重建您当前的 Web 应用程序，请不要再担心了。 |
|
|
来自： 新用户1363OZrb > 《待分类》
