angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)

简介: angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)

前言

大家好,我是yma16,本文分享angular引入包、路由权限配置、打包问题与nginx配置问题(简单部署)

angular配置

Angular 配置的主要方式是通过 Angular CLI (命令行接口)。Angular CLI 是 Angular 项目的官方脚手架,其中包含了一些最佳实践和可扩展的功能。

以下是一些基本的 Angular CLI 命令:

  1. 创建一个新的 Angular 应用程序:
ng new my-app
  1. 进入应用程序目录:
cd my-app
  1. 启动开发服务器:
ng serve
  1. 构建应用程序:
ng build
  1. 运行单元测试:
ng test
  1. 运行端到端测试:
ng e2e
  1. 生成代码:
ng generate component <component-name>

以上是一些常用的 Angular CLI 命令。涉及更多的配置和选项,请参阅 Angular CLI 文档。

思考js和ts

js没有数据类型的规范使用比较粗暴,和人生苦短的python堪比卧龙凤雏.

ts在js的基础之上添加了类型的规范,增强cleanCode和问题排除.

ts还引入他的创始人c++的类、继承和接口的使用,多元化的buff让他在前端界平步青云.

angular对比vue的router

vue存在vue-router,beforeEach初始化是否加载路由

angular存在CanActivate,默认存在且加载路由,在跳转路由会预先判断是否满足

CanActivate接口

对路由跳=跳转时添加前置判断返回true;false

一下是个人结合后端判断角色登录时后是否具有权限的判断逻辑

//路由权限认证
import { CanActivate } from "@angular/router";
import { AxiosService } from '../axios/axios.service'
import { Injectable } from '@angular/core';
@Injectable({
  providedIn: 'root'
})
export class LoginGuard implements CanActivate{
  constructor(public $axios: AxiosService) { }
  async canActivate(){
    console.log('权限配置')
    let loggedIn :boolean= false;
    // 权限配置
    if(!loggedIn){
      console.log("用户未登录");
      let userInfo:object=JSON.parse(window.localStorage.getItem('edit-site-info')||'')
      const url:string='https://yongma16.xyz/api/user/login/'
      await this.$axios.AxiosPost(url,userInfo).then((data:any)=>{
        console.log("axios post 请求: ", data)
        if(data.data.code==1){
          loggedIn=!loggedIn
        }
      })
      // axios.post(url,userInfo).then((data:any)=>{
      //   console.log("axios post 请求: ", data)
      //   loggedIn=!loggedIn
      // })
    }
    return loggedIn;
  }
}

providers声明

providers

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { EditComponent } from './edit/edit.component';
import {LoginGuard} from './guard/login.guard';//权限
// import {UnsaveGuard} from './guard/unsave.guard';//权限
const routes: Routes = [
  { path: 'home', component: HomeComponent ,
    children:[
      { path: 'edit', component: EditComponent },
    ] ,
    canActivate: [LoginGuard]},
  {
    path: '**',
    component: LoginComponent
  }
];
@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
  providers: [LoginGuard]
})
export class AppRoutingModule { }

使用axios

加载包

我这里imports ckEditor

加载了providers axios

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CKEditorModule } from '@ckeditor/ckeditor5-angular';//ckeditor
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { LoginComponent } from './login/login.component';
import { EditComponent } from './edit/edit.component';
import { AxiosService } from '../app/axios/axios.service'
@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    LoginComponent,
    EditComponent,
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    CKEditorModule,
  ],
  providers: [AxiosService],
  bootstrap: [AppComponent]
})
export class AppModule { }

二次利用axios

我这里定义AxiosService类调用get和post

import { Injectable } from '@angular/core';
import axios from 'axios'
@Injectable({
  providedIn: 'root'
})
export class AxiosService {
  constructor() { }
  AxiosGet(api:any) {
    return new Promise((resolve, reject)=>{
      axios.get(api).then((res)=>{
        resolve(res)
      })
    })
  }
  AxiosPost(url:string,data:object) {
    return new Promise((resolve, reject)=>{
      axios.post(url,data).then((res)=>{
        resolve(res)
      }).catch(r=>{
        reject(r)
      })
    })
  }
}

路由跳转的前提和baseUrl的关系

跳转路由

this.router.navigate(['/home/edit/',''])

index.html中的base作为跳转的前置路由拼接

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>ckEditor测试</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root id="ng-app"></app-root>
</body>
</html>

部署后的跳转路由

url:href+navigate的路由path参数

nginx部署前端项目

注意点:路由拼接

location /edit-web{
  alias 前端打包文件
  try_files $uri $uri/ /edit-web/index.html;# 循环查找/edit-web统一路由下的前端进行拼接
    index index.html index.htm;
}

结束

本文分享到这结束,如有错误或者不足之处欢迎指出,感谢大家的阅读!

目录
相关文章
|
29天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(1)
|
3天前
|
Java 应用服务中间件 nginx
【Azure Spring Apps】Spring App部署上云遇见 502 Bad Gateway nginx
在部署Azure Spring App后,用户遇到502 Bad Gateway错误,问题源于Nginx。解决方案是检查并关闭Spring App的ingress-to-app TLS配置,因为若未启用HTTPS访问,Nginx通过HTTPS访问应用会导致此错误。
|
17天前
|
缓存 安全 应用服务中间件
蓝易云 - Nginx的HTTPS部署与安全性能优化教程
以上就是在Nginx上部署HTTPS并进行安全性能优化的基本步骤。需要注意的是,这些步骤可能会根据您的具体需求和环境有所不同。
27 0
|
23天前
|
Java 关系型数据库 Docker
docker打包部署spring boot应用(mysql+jar+Nginx)
docker打包部署spring boot应用(mysql+jar+Nginx)
|
29天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷
|
29天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(3)
|
29天前
|
应用服务中间件 nginx Docker
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
Docker部署Nginx以及挂载数据卷(代码详细展示)_nginx 挂载大文件卷(2)
|
1月前
|
存储 前端开发 API
浅谈 Angular 应用前端消息显示机制的一个实际需求
浅谈 Angular 应用前端消息显示机制的一个实际需求
21 0
|
1月前
|
设计模式 JavaScript 前端开发
什么是 Angular 应用里的 Custom provider
什么是 Angular 应用里的 Custom provider
36 2
|
30天前
|
JavaScript 前端开发 架构师
Angular进阶:理解RxJS在Angular应用中的高效运用
RxJS(Reactive Extensions for JavaScript)是JavaScript的一个响应式编程库,特别适用于处理异步数据流。
31 0