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: './login.component.html',
  styleUrls: ['./login.component.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");  //在本地存储中获得token

    return this.authorization;
  }
  getCurrentUser(){  //获取当前在线用户id
    if(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/login.component';
import { IndexComponent } from './index/index.component';
import { AppComponent } from './app.component';
import { HomeComponent } from './index/home/home.component';
import { VotelistComponent } from './index/votelist/votelist.component';
import { VotedetailComponent } from './index/votedetail/votedetail.component';
import { MyvoteComponent } from './index/myvote/myvote.component';
import { MyvotedetailComponent } from './index/myvotedetail/myvotedetail.component';
import { AddvoteComponent } from './index/addvote/addvote.component';
import { RegisterComponent } from './register/register.component';
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/login.component';
import { IndexComponent } from './index/index.component';
import { HomeComponent } from './index/home/home.component';
import { VotelistComponent } from './index/votelist/votelist.component';
import { VotedetailComponent } from './index/votedetail/votedetail.component';
import { MyvoteComponent } from './index/myvote/myvote.component';
import { MyvotedetailComponent } from './index/myvotedetail/myvotedetail.component';
import { AddvoteComponent } from './index/addvote/addvote.component';
import { RegisterComponent } from './register/register.component';

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，有意者可以参考