Angular上传文件,Angualr分页查询

声明：这篇是我学习angualr的笔记，可以转载，但必须注明来源作者 kone 并附上本文链接

上一篇Angular8入门学习笔记讲了一些Angualr基本的入门知识.并没有针对项目的实际功能支持,如Angualr分页查询和Angualr文件上传要注意的坑.这一篇就来了.

Angular分页

先把分页代码贴上来

1:pagination.component.html

<ul class="pagination">
  <li>
    <a (click)="changePage(0)">
      <i class="iconfont" title="首页">首页</i>
    </a>
  </li>
  <li [class.disabled]="currentPage < 1">
    <a (click)="goPrevious(currentPage)">
      <i class="iconfont" title="上一页">&lt;</i>
    </a>
  </li>
  <li class="disabled" *ngIf="currentPage > 3">
    <a>...</a>
  </li>
  <li *ngIf="currentPage >= 3">
    <a (click)="changePage(currentPage-3)">{{currentPage-2}}</a>
  </li>
  <li *ngIf="currentPage >= 2">
    <a (click)="changePage(currentPage-2)">{{currentPage-1}}</a>
  </li>
  <li *ngIf="currentPage >= 1">
    <a (click)="changePage(currentPage-1)">{{currentPage}}</a>
  </li>
  <li class="active">
    <a (click)="changePage(currentPage)">{{currentPage+1}}</a>
  </li>
  <li *ngIf="currentPage <= totalPage-2">
    <a (click)="changePage(currentPage+1)">{{currentPage+2}}</a>
  </li>
  <li *ngIf="currentPage <= totalPage-3">
    <a (click)="changePage(currentPage+2)">{{currentPage+3}}</a>
  </li>``
  <li *ngIf="currentPage <= totalPage-4">
    <a (click)="changePage(currentPage+3)">{{currentPage+4}}</a>
  </li>
  <li class="disabled" *ngIf="currentPage < totalPage-4">
    <a>...</a>
  </li>
  <li [class.disabled]="currentPage > totalPage-2">
    <a (click)="goNext(currentPage)">
      <i class="iconfont" title="下一页">&gt;</i>
    </a>
  </li>
  <li>
    <a (click)="changePage(totalPage-1)">
      <i class="iconfont" title="末页">末页</i>
    </a>
  </li>
</ul>

2:pagination.component.ts

import { Component, OnInit, EventEmitter, Input, Output } from '@angular/core';

/*
功能：分页组件
用法：
html：<hw-pagination [currentPage]="currentPage" [totalPage]="totalPage" (pageChange)="changePage($event)"> </hw-pagination>
ts：   private changePage(event){
        this.currentPage=event;
      }
注意：currentPage 从0开始
*/
@Component({
  selector: 'hw-pagination',
  templateUrl: './pagination.component.html',
  styleUrls: ['./pagination.component.css']
})
export class PaginationComponent implements OnInit {

  @Input() totalPage: number;
  @Input() currentPage: number;
  @Output() pageChange = new EventEmitter<number>();
  constructor() { }
  ngOnInit() {
  }

  changePage(pageNum) {
    this.pageChange.emit(pageNum);
  }

  goPrevious(pageNum) {
    if (pageNum >= 1) {
      this.changePage(pageNum - 1);
    }
  }

  goNext(pageNum) {
    if (pageNum <= this.totalPage - 2) {
      this.changePage(pageNum + 1);
    }
  }
}

3:pagination.component.css

.pagination li {
  cursor: pointer;
}

.iconfont {
  color: #337ab7;
}

.pagination a {
  height: 34px;
}

4:使用之前

我这里自定义了一个module,在该module里都是对一些公共组件(叫插件更贴切),然后在app.module.ts里面就不用一个个引入这些插件,直接import这个自定义的module就可以了.
在被其他组件调用之前先要把这个分页组件对外暴露:如下,另外两个是上传的组件和防止重复点击组件

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { PaginationComponent } from './component/pagination/pagination.component';
import { DebounceClickDirective } from './directive/debounce-click.directive';
import { ErrorImgDirective } from './directive/error-img.directive';
import { FileUploadComponent } from './component/file-upload/file-upload.component';

@NgModule({
  imports: [
    CommonModule
  ],
  declarations: [PaginationComponent, DebounceClickDirective, ErrorImgDirective, FileUploadComponent],
  exports: [PaginationComponent, DebounceClickDirective,FileUploadComponent]
})
export class SharedModule { }

5:使用分页组件和防止重复点击组件

html:

<button (click)="getUser()"  >普通查詢列表</button>
<button hwDebounceClick (debounceClick)="getUser2()" [debounceTime]="300">防止重複提交查詢列表</button>
<br>
<hr>
<table class="usertable">
  <th>姓名</th>
  <th>AD</th>
  <th>email</th>
  <th>adress</th>
  <th>phone</th>
  <tr *ngFor="let item of userList; let i=index" >
    <td>{{item.name}}</td>
    <td>{{item.AD}}</td>
    <td>{{item.email}}</td>
    <td>{{item.adress}}</td>
    <td>{{item.phone}}</td>
  </tr>

</table>
<hw-pagination [currentPage]="currentPage" [totalPage]="totalPage" (pageChange)="changePage($event)"> </hw-pagination>

ts:

import { PaginationComponent } from './../../../shared/component/pagination/pagination.component';
import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { CookieService } from 'ngx-cookie-service';
import * as $  from 'jquery';
@Component({
  selector: 'app-echarts',
  templateUrl: './echarts.component.html',
  styleUrls: ['./echarts.component.css']
})
export class EchartsComponent implements OnInit {
  public userList:any;
  constructor(private router: Router,public http: HttpClient,private cookieService: CookieService) { }
  currentPage:number=0;
  totalPage:number=1;
  ngOnInit() {
  }

  getUser(){
    console.log('当前页数'+(this.currentPage+1));
    let url = "http://localhost:8080/getMembers?currentPage="+(this.currentPage+1);
    const header = {headers: new HttpHeaders({'Content-Type': 'application/json'})};
    this.http.post(url,{},header).subscribe(re=>{
      this.totalPage=18;
      this.userList=re;
     console.log( this.userList);
    });
  }

  //防止短時間內重複提交
  getUser2(){
    console.log('当前页数'+(this.currentPage+1));
    let url = "http://localhost:8080/getMembers?currentPage="+(this.currentPage+1);
    const header = {headers: new HttpHeaders({'Content-Type': 'application/json'})};
    this.http.post(url,{},header).subscribe(re=>{
      this.totalPage=18;
      this.userList=re;
     console.log( this.userList);
    });
  }
  private changePage(event){
    this.currentPage=event;
    //这里注意一下方法调用的顺序
    this.getUser();
  }

}

css

.usertable{
    border: 1px solid black;
    width: 600px;
}
.usertable th,tr{
    height: 10px;
}
.usertable th,td{
    border: 1px solid black;
    text-align: center;
}

6:后台java

假数据哈,别介意

  @RequestMapping(value = "/getMembers",method = RequestMethod.POST)
    public List getMembers(@RequestParam(name = "currentPage") int currentPage){
        System.out.println("当前页数:"+currentPage);
        List list=new ArrayList();
        for(int i=0;i<25;i++){
            Map<String,Object> map=new HashMap<String,Object>();
            map.put("name","kone"+(i+1));
            map.put("AD","R"+(i+2500));
            map.put("email",(i+1)+".mitac.com");
            map.put("adress","永和一村"+(i+45)+"棟");
            map.put("phone",1832618680+i);
            list.add(map);
        }
        return list;

    }

7:效果

8:小结

这里面用到了#Input和@Output,父子组件的通信.可以参考上一篇

Angular上传文件

html:

  <!-- 上传单个文件 -->
  <div>
  <input type="file" (change)="uploadFile($event)" name="value" value="测试上传单个文件"/>
  </div><br><br>
<p style="color: red">{{resultInfo}}</p>

ts

  // post方式上传单个文件
  uploadFile(event) {
      let file: FormData = new FormData();
      let fileList: FileList = event.target.files;
      if (fileList.length > 0) {
          let file: File = fileList[0];
          let formData: FormData = new FormData();
          formData.append('value', file, file.name);
          let url = this.baseUrl + "/importExcel";
          const header = {headers: new HttpHeaders({'Accept':'application/json'})};
          this.http.post(url,formData,header).subscribe(re=>{
            this.resultInfo=re['msg'];
          });
      }
  }

这个比较简单,贴出这个只是记录一下这个可能会是个坑

 const header = {headers: new HttpHeaders({'Accept':'application/json'})};