使用 Angular 和 Tailwind CSS 构建 URL 缩短应用程序

一分耕耘，一分收获！既然打开了这篇文章《使用 Angular 和 Tailwind CSS 构建 URL 缩短应用程序》，就坚持看下去吧！文中内容包含等等知识点...希望你能在阅读本文后，能真真实实学到知识或者帮你解决心中的疑惑，也欢迎大佬或者新人朋友们多留言评论，多给建议！谢谢！

在本博客中，我们将引导您完成使用 angular 作为前端并使用 tailwind css 进行样式创建 url 缩短器应用程序的过程。 url 缩短器是一个方便的工具，可以将长 url 转换为更短、更易于管理的链接。该项目将帮助您了解如何使用现代 web 开发技术构建功能齐全且美观的 web 应用程序。

先决条件

要学习本教程，您应该对 angular 有基本的了解，并对 tailwind css 有一定的了解。确保您的计算机上安装了 node.js 和 angular cli。

项目设置

1. 创建一个新的 angular 项目

首先，通过在终端中运行以下命令来创建一个新的 angular 项目：

ng new url-shortener-app
cd url-shortener-app

2. 安装 tailwind css

接下来，在您的 angular 项目中设置 tailwind css。通过 npm 安装 tailwind css 及其依赖项：

npm install -d tailwindcss postcss autoprefixer
npx tailwindcss init

通过更新 tailwind.config.js 文件来配置 tailwind css：

module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

将 tailwind 指令添加到您的 src/styles.scss 文件中：

@tailwind base;
@tailwind components;
@tailwind utilities;

构建 url 缩短器

3. 创建 url 模型

创建 url 模型来定义 url 数据的结构。添加新文件 src/app/models/url.model.ts:

export type urls = url[];

export interface url {
  _id: string;
  originalurl: string;
  shorturl: string;
  clicks: number;
  expirationdate: string;
  createdat: string;
  __v: number;
}

4. 设置 url 服务

创建一个服务来处理与 url 缩短相关的 api 调用。添加新文件 src/app/services/url.service.ts:

import { httpclient } from '@angular/common/http';
import { injectable } from '@angular/core';
import { observable } from 'rxjs';
import { url, urls } from '../models/url.model';
import { environment } from '../../environments/environment';

@injectable({
  providedin: 'root',
})
export class urlservice {
  private apiurl = environment.apiurl;

  constructor(private http: httpclient) {}

  shortenurl(originalurl: string): observable {
    return this.http.post(`${this.apiurl}/shorten`, { originalurl });
  }

  getallurls(): observable {
    return this.http.get(`${this.apiurl}/urls`);
  }

  getdetails(id: string): observable {
    return this.http.get(`${this.apiurl}/details/${id}`);
  }

  deleteurl(id: string): observable {
    return this.http.delete(`${this.apiurl}/delete/${id}`);
  }
}

5. 创建缩短 url 组件

生成一个用于缩短 url 的新组件：

ng generate component shorten

更新组件的 html (src/app/shorten/shorten.component.html) 如下所示：

    
url shortener
    

        

            
            
                shorten
            
        
        @if (urlform.get('originalurl')?.invalid && (urlform.get('originalurl')?.dirty ||
        urlform.get('originalurl')?.touched)) {
        

            @if (urlform.get('originalurl')?.errors?.['required']) {
            url is required.
            }
            @if (urlform.get('originalurl')?.errors?.['pattern']) {
            invalid url format. please enter a valid url starting with http:// or https://.
            }
        
        }
    
    @if (errormsg) {
    

        
{{ errormsg }}
    
    }
    @if (shorturl) {
    

        
shortened url: {{ shorturl }}
            copy
            @if (copymessage) {
            {{ copymessage }}
            }
        
    
    }



    
all urls
    @if (isloading) {
    

        

            loading...
        
    
    }
    @else if (error) {
    

        

            
{{ error }}
        
    
    }
    @else {
    @if (urls.length > 0 && !isloading && !error) {
    

        @for (url of urls; track $index) {
        

            

                

                    url:
                    {{
                        url.shorturl }}
                
                

                    details
                    {{
                        copyindex === $index ? 'copied' : 'copy'
                        }}
                    delete
                
            
        
        }
    
    }
    @else {
    

        

            no urls found.
        
    
    }
    }


@if (showdeletemodal) {

    

        
confirm deletion
        
are you sure you want to delete this url?
        yes,
            delete
        cancel
    

}

@if (showdetailsmodal) {

    

        
url details
        @if (isloading) {
        
loading...
        }
        @else {
        
short url: {{ selectedurl.shorturl }}
        
original url: {{ selectedurl.originalurl }}
        
clicks: {{ selectedurl.clicks }}
        
created at: {{ selectedurl.createdat | date: 'medium' }}
        
expires at: {{ selectedurl.expirationdate | date: 'medium' }}
        close
        }
    

}

6. 向组件添加逻辑

更新组件的 typescript 文件（src/app/shorten/shorten.component.ts）以处理表单提交和 api 交互：

import { component, inject, oninit } from '@angular/core';
import { urlservice } from '../services/url.service';
import {
  formcontrol,
  formgroup,
  reactiveformsmodule,
  validators,
} from '@angular/forms';
import { url } from '../models/url.model';
import { environment } from '../../environments/environment';
import { datepipe } from '@angular/common';
import { subject, takeuntil } from 'rxjs';

@component({
  selector: 'app-shorten',
  standalone: true,
  imports: [datepipe, reactiveformsmodule],
  templateurl: './shorten.component.html',
  styleurl: './shorten.component.scss',
})
export class shortencomponent implements oninit {
  shorturl: string = '';
  redirecturl = environment.apiurl + '/';
  copymessage: string = '';
  copylistmessage: string = '';
  urls: url[] = [];
  showdeletemodal = false;
  showdetailsmodal = false;
  urltodelete = '';
  copyindex: number = -1;
  selectedurl: url = {} as url;
  isloading = false;
  isloading = false;
  error: string = '';
  errormsg: string = '';
  urlform: formgroup = new formgroup({});
  private unsubscribe$: subject = new subject();

  urlservice = inject(urlservice);

  ngoninit() {
    this.urlform = new formgroup({
      originalurl: new formcontrol('', [
        validators.required,
        validators.pattern('^(http|https)://.*$'),
      ]),
    });
    this.getallurls();
  }

  shortenurl() {
    if (this.urlform.valid) {
      this.urlservice.shortenurl(this.urlform.value.originalurl).pipe(takeuntil(this.unsubscribe$)).subscribe({
        next: (response) => {
          // console.log('shortened url: ', response);
          this.shorturl = response.shorturl;
          this.getallurls();
        },
        error: (error) => {
          console.error('error shortening url: ', error);
          this.errormsg = error?.error?.message || 'an error occurred!';
        },
      });
    }
  }

  getallurls() {
    this.isloading = true;
    this.urlservice.getallurls().pipe(takeuntil(this.unsubscribe$)).subscribe({
      next: (response) => {
        // console.log('all urls: ', response);
        this.urls = response;
        this.isloading = false;
      },
      error: (error) => {
        console.error('error getting all urls: ', error);
        this.isloading = false;
        this.error = error?.error?.message || 'an error occurred!';
      },
    });
  }

  showdetails(id: string) {
    this.showdetailsmodal = true;
    this.getdetails(id);
  }

  getdetails(id: string) {
    this.isloading = true;
    this.urlservice.getdetails(id).subscribe({
      next: (response) => {
        // console.log('url details: ', response);
        this.selectedurl = response;
        this.isloading = false;
      },
      error: (error) => {
        console.error('error getting url details: ', error);
        this.error = error?.error?.message || 'an error occurred!';
      },
    });
  }

  copyurl(url: string) {
    navigator.clipboard
      .writetext(url)
      .then(() => {
        // optional: display a message or perform an action after successful copy
        console.log('url copied to clipboard!');
        this.copymessage = 'copied!';
        settimeout(() => {
          this.copymessage = '';
        }, 2000);
      })
      .catch((err) => {
        console.error('failed to copy url: ', err);
        this.copymessage = 'failed to copy url';
      });
  }

  copylisturl(url: string, index: number) {
    navigator.clipboard
      .writetext(url)
      .then(() => {
        // optional: display a message or perform an action after successful copy
        console.log('url copied to clipboard!');
        this.copylistmessage = 'copied!';
        this.copyindex = index;
        settimeout(() => {
          this.copylistmessage = '';
          this.copyindex = -1;
        }, 2000);
      })
      .catch((err) => {
        console.error('failed to copy url: ', err);
        this.copylistmessage = 'failed to copy url';
      });
  }

  preparedelete(url: string) {
    this.urltodelete = url;
    this.showdeletemodal = true;
  }

  confirmdelete() {
    // close the modal
    this.showdeletemodal = false;
    // delete the url
    this.deleteurl(this.urltodelete);
  }

  deleteurl(id: string) {
    this.urlservice.deleteurl(id).subscribe({
      next: (response) => {
        // console.log('deleted url: ', response);
        this.getallurls();
      },
      error: (error) => {
        console.error('error deleting url: ', error);
        this.error = error?.error?.message || 'an error occurred!';
      },
    });
  }

  ngondestroy() {
    this.unsubscribe$.next();
    this.unsubscribe$.complete();
  }
}

7.更新应用程序组件的html文件(src/app/app.component.html)

8.更新应用程序配置文件(src/app/app.config.ts)

import { applicationconfig, providezonechangedetection } from '@angular/core';
import { providerouter } from '@angular/router';

import { routes } from './app.routes';
import { providehttpclient } from '@angular/common/http';

export const appconfig: applicationconfig = {
  providers: [
    providezonechangedetection({ eventcoalescing: true }),
    providerouter(routes),
    providehttpclient(),
  ],
};

9.更新应用程序路由文件（src/app/app.routes.ts）

import { Routes } from '@angular/router';

export const routes: Routes = [
  {
    path: '',
    loadComponent: () =>
      import('./shorten/shorten.component').then((m) => m.ShortenComponent),
  },
];

结论

您已经使用 angular 和 tailwind css 成功构建了 url 缩短器应用程序。该项目演示了如何集成现代前端技术来创建功能强大且时尚的 web 应用程序。借助 angular 的强大功能和 tailwind css 实用程序优先的方法，您可以轻松构建响应灵敏且高效的 web 应用程序。

请随意通过添加用户身份验证等功能来扩展此应用程序。祝您编码愉快！

探索代码

访问 github 存储库以详细探索代码。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~