ASP .NET + Angular 前后端分离实现简单投票系统（下）

现在开始说说前端咋实现的，首先用Angular cli创建一个项目，由于代码文件太多，就挑登录模块来讲讲吧

创建登录模块的组件：

模板：

<div class="inner-content"><div class="login-window"><nz-breadcrumb><nz-breadcrumb-item>Please Login</nz-breadcrumb-item></nz-breadcrumb><form nz-form [formGroup]="validateForm" class="login-form" (ngSubmit)="submitForm()"><nz-form-item><nz-form-control nzErrorTip="请输入你的账号！"><nz-input-group><input type="text" nz-input formControlName="userName" placeholder="账号" /></nz-input-group></nz-form-control></nz-form-item><nz-form-item><nz-form-control nzErrorTip="请输入你的密码！"><nz-input-group><input type="password" nz-input formControlName="password" placeholder="密码" /></nz-input-group></nz-form-control></nz-form-item><button nz-button class="login-form-button login-form-margin" [nzType]="'primary'">登录</button>Or <a routerLink="/register"> 现在注册! </a></form></div></div>

组件类:

import {Component, OnInit } from '@angular/core';import {FormBuilder, FormGroup, Validators } from '@angular/forms';import {Router } from '@angular/router';import {LoginService } from '../service/login.service'@Component({selector: 'app-login',templateUrl: './ponent.html',styleUrls: ['./ponent.css']})export class LoginComponent implements OnInit {validateForm!: FormGroup;submitForm(): void {for (const i in this.validateForm.controls) {this.validateForm.controls[i].markAsDirty();this.validateForm.controls[i].updateValueAndValidity();}this.service.Login(this.validateForm.value.userName,this.validateForm.value.password).then(({data})=>{if(data["token"]){this.service.SetAuthorization(data['token']); //写入本地localStorage.setItem("token", this.service.getAuthorization());localStorage.setItem("userId", this.validateForm.value.userName);this.router.navigateByUrl("/index/home"); //登陆成功后跳转路由}else{alert("登录失败")}})}constructor(private fb: FormBuilder,private router: Router,private service:LoginService) {}ngOnInit(): void {this.validateForm = this.fb.group({userName: [null, [Validators.required]],password: [null, [Validators.required]],remember: [true]});}}

首先前后端运用的是axios，写了一个通用的类

import {Injectable } from "@angular/core";import axios from "axios";@Injectable({providedIn: 'root',})export class BaseService{constructor(){}axiosGet(url: string, singValue: string){const axiosInstance = axios.create({baseURL: 'https://localhost:44369',timeout: 5000,headers: {Authorization: singValue //添加token}});return new Promise((resolve,reject)=>{axiosInstance.get(url).then(res =>{resolve(res)}).catch(err =>{reject(err)})})}axiosPost(url: string, singValue: string, dataobj: string){const axiosInstance = axios.create({baseURL: 'https://localhost:44369',timeout: 5000,headers:{"Content-type": "application/json; charset=UTF-8",Authorization: singValue //添加token}});return new Promise((resolve, reject) =>{axiosInstance.post(url,dataobj).then(res =>{resolve(res);}).catch(err =>{reject(err);})})}}

写了一个处理登录业务逻辑的类

import {Injectable } from '@angular/core';import {BaseService } from './base.service';@Injectable({providedIn: 'root'})export class LoginService extends BaseService{data = {};baseurl:string = "/api/login";private authorization:string = "";private currentuser: string;SetAuthorization(auth:string){this.authorization = "Bearer "+auth; //设置token}getAuthorization(){if(!this.authorization)this.authorization = localStorage.getItem("token"); //在本地存储中获得tokenreturn this.authorization;}getCurrentUser(){//获取当前在线用户idif(this.currentuser == undefined)this.currentuser = localStorage.getItem("userId");return this.currentuser;}Login(username:string,pwd:string){let url = this.baseurl + `/CheckLogin?username=${username}&pwd=${pwd}`;return this.axiosGet(url,"123"); //调用axios}}

在根模块引入

import {BrowserModule } from '@angular/platform-browser';import {NgModule } from '@angular/core';import {NgZorroAntdModule } from 'ng-zorro-antd';import {BrowserAnimationsModule } from '@angular/platform-browser/animations';import {FormsModule, ReactiveFormsModule } from '@angular/forms';import {HttpClientModule } from '@angular/common/http';import {AppRoutingModule } from './app-routing.module';import {BaseService } from './service/base.service';import {LoginComponent } from './login/ponent';import {IndexComponent } from './index/ponent';import {AppComponent } from './ponent';import {HomeComponent } from './index/home/ponent';import {VotelistComponent } from './index/votelist/ponent';import {VotedetailComponent } from './index/votedetail/ponent';import {MyvoteComponent } from './index/myvote/ponent';import {MyvotedetailComponent } from './index/myvotedetail/ponent';import {AddvoteComponent } from './index/addvote/ponent';import {RegisterComponent } from './register/ponent';import {CommonModule } from '@angular/common';@NgModule({declarations: [AppComponent,IndexComponent,VotelistComponent,VotedetailComponent,AddvoteComponent,HomeComponent,LoginComponent,MyvoteComponent,MyvotedetailComponent,RegisterComponent,],imports: [BrowserModule,CommonModule,HttpClientModule,NgZorroAntdModule,BrowserAnimationsModule,FormsModule,ReactiveFormsModule,AppRoutingModule],providers: [ BaseService],bootstrap: [AppComponent]})export class AppModule {}

在根组件配置路由

import {NgModule } from '@angular/core';import {CommonModule } from '@angular/common';import {Routes, RouterModule } from '@angular/router';import {LoginComponent } from './login/ponent';import {IndexComponent } from './index/ponent';import {HomeComponent } from './index/home/ponent';import {VotelistComponent } from './index/votelist/ponent';import {VotedetailComponent } from './index/votedetail/ponent';import {MyvoteComponent } from './index/myvote/ponent';import {MyvotedetailComponent } from './index/myvotedetail/ponent';import {AddvoteComponent } from './index/addvote/ponent';import {RegisterComponent } from './register/ponent';const routes: Routes = [{path: 'login', component: LoginComponent },{path: 'register', component: RegisterComponent },{path: 'index', component: IndexComponent,children: [{path: 'home', component: HomeComponent },{path: 'votelist', component: VotelistComponent },{path: 'votedetail/:id', component: VotedetailComponent },{path: 'addvote', component: AddvoteComponent },{path: 'myvote', component: MyvoteComponent },{path: 'myvotedetail/:id', component: MyvotedetailComponent },]},{path: '', redirectTo: '/login',pathMatch: 'full'},{path: '**', redirectTo: '/login'}];@NgModule({imports: [CommonModule,RouterModule,RouterModule.forRoot(routes)],exports: [RouterModule]})export class AppRoutingModule {}

大体就是这样，来看看效果

登录：

注册：

查看投票列表：

点击进入投票：

多选类型：

发起投票，设置开始时间截止时间，投票类型，动态添加选项

写得很简单，完整代码在github，有意者可以参考