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;
}

结束

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

目录
打赏
0
0
0
0
52
分享
相关文章
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
简介: 本教程介绍如何基于 Dragonwell 的 Ubuntu 镜像创建一个运行 Nginx 的 Docker 容器。首先从阿里云容器镜像服务拉取基础镜像,然后编写 Dockerfile 确保 Nginx 作为主进程运行,并暴露 80 端口。最后,在包含 Dockerfile 的目录下构建自定义镜像并启动容器,确保 Nginx 在前台运行,避免容器启动后立即退出。通过 `docker build` 和 `docker run` 命令完成整个流程。
220 25
今日小结通过aliyun的本地容器镜像部署我的nginx和php环境
技术指南:如何把docsify项目部署到基于CentOS系统的Nginx中。
总结 与其他部署方法相比,将docsify项目部署到基于CentOS系统的Nginx中比较简单。以上步骤应当帮助你在不花费太多时间的情况下,将你的项目顺利部署到Nginx中。迈出第一步,开始部署你的docsify项目吧!
112 14
Angular 应用打包和部署
【10月更文挑战第16天】Angular 应用的打包和部署是一个综合性的过程,需要考虑多个方面的因素。通过合理的打包和部署策略,可以确保应用在生产环境中稳定运行,并为用户提供良好的体验。你需要根据实际情况选择合适的部署方式,并不断优化和改进部署流程,以适应业务的发展和变化。
前端serverless探索之组件单独部署时,利用rxjs实现业务状态与vue-react-angular等框架的响应式状态映射
本文深入探讨了如何将RxJS与Vue、React、Angular三大前端框架进行集成,通过抽象出辅助方法`useRx`和`pushPipe`,实现跨框架的状态管理。具体介绍了各框架的响应式机制,展示了如何将RxJS的Observable对象转化为框架的响应式数据,并通过示例代码演示了使用方法。此外,还讨论了全局状态源与WebComponent的部署优化,以及一些实践中的改进点。这些方法不仅简化了异步编程,还提升了代码的可读性和可维护性。
200 2
nginx部署vue项目
本文介绍了将Vue项目部署到Nginx的步骤,包括构建Vue项目、上传dist文件夹到服务器、安装Nginx、配置Nginx代理静态文件以及重启Nginx,确保了Vue应用可以通过域名或IP地址访问。
463 1
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
2758 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
部署Django应用:使用Gunicorn和Nginx构建高效的生产环境
507 0
|
11月前
|
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
165 0
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
137 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问