【ANGULAR网站开发】初始环境搭建
1. 初始化angular项目
1.1 创建angular项目
需要安装npm和nodejs,这边不在重新安装
直接安装最新版本的angular
npm install -g @angular/cli
安装指定大版本的angular
npm install -g @angular/cli@18

1.2 启动angular
使用idea启动

控制台启动
ng serve
启动成功后的情况

1.2.1 特殊情况,angular启动后localhost和ip都无法访问
在启动脚本里加–host 0.0.0.0后,就可以用ip访问,为啥localhost不行,没找到解决方案

1.3 清理自带的首页信息

<style>
</style><main class="main"></main>
<router-outlet />
1.4 创建home和login
ng generate component admin/home
ng generate component admin/login
1.5 添加全局绝对路径
在tsconfig.json添加代码
{"compilerOptions": {"baseUrl": "./","paths": {"@app/*": ["src/app/*"]}}}
可以直接用@app 前缀来引用服务
2. 创建身份验证服务
2.1 身份验证服务
在根目录下执行创建身份验证服务的代码
用来保存用户登录状态
ng generate service base/authService/auth
修改auth.service.ts
import { Injectable } from '@angular/core';@Injectable({providedIn: 'root'
})
export class AuthService {private isLoggedIn = false;constructor() { }login() {this.isLoggedIn = true;}logout() {this.isLoggedIn = false;}isAuthenticated(): boolean {return this.isLoggedIn;}
}
2.2 路由守卫服务
在根目录下执行创建路由守卫服务的代码
用于检查用户是否已登录。如果用户未登录,则重定向到登录页面。
ng generate service base/authService/authGuard
修改authGuard.service.ts
import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';@Injectable({providedIn: 'root'
})
export class AuthGuard implements CanActivate {constructor(private authService: AuthService, private router: Router) { }canActivate(): boolean {if (this.authService.isAuthenticated()) {return true;} else {this.router.navigate(['/login']);return false;}}
}
2.3 配置路由app.routes.ts
import { Routes } from '@angular/router';
import { HomeComponent } from './admin/home/home.component';
import { LoginComponent } from './admin/login/login.component';
import {AuthGuard} from './base/authService/auth-guard.service';
export const routes: Routes = [{ path: '', component: HomeComponent, canActivate: [AuthGuard] },{ path: 'home', component: HomeComponent, canActivate: [AuthGuard] },{ path: 'login', component: LoginComponent },{ path: '**', redirectTo: '', pathMatch: 'full' } ,// 添加通配符路由,访问不存在的路径时重定向到主页
];
2.4 更新 app.config.server.ts (如果有的话,18不需要添加)
import { mergeApplicationConfig, ApplicationConfig } from '@angular/core';
import { provideServerRendering } from '@angular/platform-server';
import { appConfig } from './app.config';
import {AuthGuard} from './base/authService/auth-guard.service';const serverConfig: ApplicationConfig = {providers: [provideServerRendering(),AuthGuard]
};export const config = mergeApplicationConfig(appConfig, serverConfig);
2.5 在login里添加登录事件
编辑login.component.ts文件
import { Component } from '@angular/core';
import { Router } from '@angular/router';
import { AuthService } from '@app/base/authService/auth.service';
@Component({selector: 'app-login',imports: [],templateUrl: './login.component.html',styleUrl: './login.component.css'
})
export class LoginComponent {constructor(private authService: AuthService, private router: Router) { }login() {this.authService.login();this.router.navigate(['/']);}
}
在login.component.html添加登录按钮
<button (click)="login()">Login</button>
点击登录后直接跳转到指定页面
3.
相关文章:
【ANGULAR网站开发】初始环境搭建
1. 初始化angular项目 1.1 创建angular项目 需要安装npm和nodejs,这边不在重新安装 直接安装最新版本的angular npm install -g angular/cli安装指定大版本的angular npm install -g angular/cli181.2 启动angular 使用idea启动 控制台启动 ng serve启动成功…...
【Java】面试题 并发安全 (2)
文章目录 可重入锁(ReentrantLock)知识总结1. 可重入锁概念与特点2. 基本语法与使用注意事项3. 底层实现原理4. 面试回答要点 synchronized与lock的区别死锁相关面试题讲解死锁产生的四个条件ConcurrentHashMap2. JDK1.7的ConcurrentHashMap结构添加数据…...
springboot启动不了 因一个spring-boot-starter-web底下的tomcat-embed-core依赖丢失
这个包丢失了 启动不了 起因是pom中加入了 <tomcat.version></tomcat.version>版本指定,然后idea自动编译后,包丢了,删除这个配置后再也找不回来, 这个包正常在 <dependency><groupId>org.springframe…...
React 组件的通信方式
在 React 应用开发中,组件之间的通信是构建复杂用户界面和交互逻辑的关键。正确地实现组件通信能够让我们的应用更加灵活和易于维护。以下是几种常见的 React组件通信方式。 一、父子组件通信 1. 通过 props 传递数据(父组件向子组件传递数据࿰…...
WAV文件双轨PCM格式详细说明及C语言解析示例
WAV文件双轨PCM格式详细说明及C语言解析示例 一、WAV文件双轨PCM格式详细说明1. WAV文件基本结构2. PCM编码方式3. 双轨PCM格式详细说明二、C语言解析WAV文件的代码示例代码说明一、WAV文件双轨PCM格式详细说明 WAV文件是一种用于存储未压缩音频数据的文件格式,广泛应用于音频…...
【ES6复习笔记】数值扩展(16)
介绍 在 JavaScript 中,数值扩展提供了一些额外的功能,使得处理数值变得更加方便。本教程将介绍一些常用的数值扩展方法和属性。 1. Number.EPSILON Number.EPSILON 是 JavaScript 表示的最小精度。它的值接近于 2.2204460492503130808472633361816E-…...
百度热力图数据日期如何选择
目录 1、看日历2、看天气 根据研究内容定,一般如果研究城市活力的话,通常会写“非重大节假日,非重大活动,非极端天气等”。南方晴天不多,有小雨或者中雨都可认为没有影响,要不然在南方很难找到完全一周没有…...
Vue.js 高级组件开发:设计模式与实践
Vue.js 高级组件开发:设计模式与实践 引言一、组合式 API 与动态依赖注入1. 基于 provide/inject 的动态依赖2. 动态依赖注入与懒加载 二、动态渲染与自定义渲染函数1. 使用 Render 函数动态生成内容2. 自定义 vnode 操作 三、复杂场景下的动态表单生成与验证四、高…...
《一文读懂卷积网络CNN:原理、模型与应用全解析》
《一文读懂卷积网络CNN:原理、模型与应用全解析》 一、CNN 基本原理大揭秘(一)从人类视觉到 CNN 灵感(二)核心组件详解 二、经典 CNN 模型巡礼(一)LeNet-5:开山鼻祖(二&a…...
MONI后台管理系统-数据敏感字段存储加密
前言: 在我们数据库中,存在很多的敏感数据,如用户表中,存在用户电话、身份证号、邮箱等属于用户的敏感信息,我们通常在存入数据库后,将其进行加密存储,以此来保证数据安全性。 …...
熟悉各类游戏设计模式的用途与限制,如 factory、strategy、mvc、object pool 等
良好的系统分析与设计能力要求开发者熟悉并正确运用各种设计模式来解决特定问题。设计模式是一种针对特定问题的通用解决方案,可提高代码的可复用性、可维护性和可扩展性。以下是对一些常见游戏设计模式的详细分析,包括其用途、限制和代码示例。 一、工厂…...
【RabbitMQ高级篇】消息可靠性问题(1)
目录 1.消息可靠性 1.1.生产者消息确认 1.1.1.修改配置 1.1.2.定义Return回调 1.1.3.定义ConfirmCallback 1.2.消息持久化 1.2.1.交换机持久化 1.2.2.队列持久化 1.2.3.消息持久化 1.3.消费者消息确认 1.3.1.演示none模式 1.3.2.演示auto模式 1.4.消费失败重试机制…...
ASP.NET |日常开发中常见问题归纳讲解
ASP.NET |日常开发中常见问题归纳讲解 前言一、性能问题1.1 数据库访问性能1.2 视图状态(在ASP.NET Web Forms 中) 二、安全问题2.1 SQL 注入2.2 跨站脚本攻击(XSS) 三、状态管理问题3.1 会话状态(Session …...
【【深入浅出TinyRisc-v】】
深入浅出TinyRisc-v 本代码参考于 https://gitee.com/liangkangnan/tinyriscv 自己理解之后又重新写了一遍 tinyriscv.v // 涓嬮潰鏄鏁翠釜top妯″潡鐨勪功鍐? module tinyriscv(input clk ,input rst_n …...
常见的限流算法
常见的限流算法 限流的定义固定窗口算法滑动窗口算法漏桶算法(推荐)令牌桶算法(推荐)限流粒度本地限流(单机限流)分布式限流(多机限流)分布式限流的实现 限流的定义 限流,也称流量控制。是指系统…...
【Leetcode 每日一题】3159. 查询数组中元素的出现位置
问题背景 给你一个整数数组 n u m s nums nums,一个整数数组 q u e r i e s queries queries 和一个整数 x x x。 对于每个查询 q u e r i e s [ i ] queries[i] queries[i],你需要找到 n u m s nums nums 中第 q u e r i e s [ i ] queries[i] q…...
xadmin后台首页增加一个导入数据按钮
xadmin后台首页增加一个导入数据按钮 效果 流程 1、在添加小组件中添加一个html页面 2、写入html代码 3、在urls.py添加导入数据路由 4、在views.py中添加响应函数html代码 <!DOCTYPE html> <html lang...
行为树详解(5)——事件驱动
【分析】 如果行为树的节点很多,那么会存在要经过很多节点才会走到动作节点的情况。显然,性能上不如状态机。 每帧都需要重新遍历一系列节点才会走到动作节点,而实际上很多条件节点在数帧内不会有变化,这是造成性能问题的重要原…...
3.若依前端项目拉取、部署、访问
因为默认RuoYi-Vue是使用的Vue2,所以需要另外去下载vue3来部署。 拉取代码 git clone https://gitee.com/ys-gitee/RuoYi-Vue3.git 安装node才能执行npm相关的命令 执行命令npm install 如果npm install比较慢的话,需要添加上国内镜像 npm install --registrhttp…...
Debian操作系统相对于Ubuntu有什么优势吗?
更高的稳定性:Debian 以其出色的稳定性闻名,得益于严格的软件包测试和发布流程。其稳定版经过长时间测试与验证,确保了系统的高度稳定,更适合对稳定性要求极高的长期运行服务器环境。而 Ubuntu 虽有稳定版本,但更新周期…...
接口测试中缓存处理策略
在接口测试中,缓存处理策略是一个关键环节,直接影响测试结果的准确性和可靠性。合理的缓存处理策略能够确保测试环境的一致性,避免因缓存数据导致的测试偏差。以下是接口测试中常见的缓存处理策略及其详细说明: 一、缓存处理的核…...
Linux 文件类型,目录与路径,文件与目录管理
文件类型 后面的字符表示文件类型标志 普通文件:-(纯文本文件,二进制文件,数据格式文件) 如文本文件、图片、程序文件等。 目录文件:d(directory) 用来存放其他文件或子目录。 设备…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
IGP(Interior Gateway Protocol,内部网关协议)
IGP(Interior Gateway Protocol,内部网关协议) 是一种用于在一个自治系统(AS)内部传递路由信息的路由协议,主要用于在一个组织或机构的内部网络中决定数据包的最佳路径。与用于自治系统之间通信的 EGP&…...
深入理解JavaScript设计模式之单例模式
目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式(Singleton Pattern&#…...
cf2117E
原题链接:https://codeforces.com/contest/2117/problem/E 题目背景: 给定两个数组a,b,可以执行多次以下操作:选择 i (1 < i < n - 1),并设置 或,也可以在执行上述操作前执行一次删除任意 和 。求…...
2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面
代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口(适配服务端返回 Token) export const login async (code, avatar) > {const res await http…...
Spring Boot面试题精选汇总
🤟致敬读者 🟩感谢阅读🟦笑口常开🟪生日快乐⬛早点睡觉 📘博主相关 🟧博主信息🟨博客首页🟫专栏推荐🟥活动信息 文章目录 Spring Boot面试题精选汇总⚙️ **一、核心概…...
C++.OpenGL (10/64)基础光照(Basic Lighting)
基础光照(Basic Lighting) 冯氏光照模型(Phong Lighting Model) #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
相机Camera日志分析之三十一:高通Camx HAL十种流程基础分析关键字汇总(后续持续更新中)
【关注我,后续持续新增专题博文,谢谢!!!】 上一篇我们讲了:有对最普通的场景进行各个日志注释讲解,但相机场景太多,日志差异也巨大。后面将展示各种场景下的日志。 通过notepad++打开场景下的日志,通过下列分类关键字搜索,即可清晰的分析不同场景的相机运行流程差异…...
