前言
大家好，我是yma16，本文分享angular引入包、路由权限配置、打包问题与nginx配置问题（简单部署）
angular配置
Angular 配置的主要方式是通过 Angular CLI (命令行接口)。Angular CLI 是 Angular 项目的官方脚手架，其中包含了一些最佳实践和可扩展的功能。
以下是一些基本的 Angular CLI 命令：
- 创建一个新的 Angular 应用程序：
ng new my-app
- 进入应用程序目录：
cd my-app
- 启动开发服务器：
ng serve
- 构建应用程序：
ng build
- 运行单元测试：
ng test
- 运行端到端测试：
ng e2e
- 生成代码：
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; }
结束
本文分享到这结束，如有错误或者不足之处欢迎指出，感谢大家的阅读！
