用Spring Boot & Angular2快速开发文件上传服务

本文介绍了如何使用Spring Boot和Angular2快速开发一个文件上传服务。通过建立Angular2项目,实现上传组件,并结合Spring Boot构建后端服务,实现了文件上传功能。详细步骤包括Angular2项目的创建、组件的编写以及Spring Boot项目的建立。
摘要由CSDN通过智能技术生成

文件上传可以作为一个独立的微服务。用Spring Boot和Angular2开发这样的服务非常有优势,可以用最少的代码,实现非常强的功能。如果比了解Spring Boot和Angular2的,请先看这几个文章:

用Spring Boot & Cloud,Angular2快速搭建微服务web应用 - 实现RESTful CRUD

用Spring Boot & Cloud,Angular2快速搭建微服务web应用 - AngularJS2客户端

用Spring Boot & Cloud,Angular2快速搭建微服务web应用 - 增加代理服务器

用Spring Boot & Cloud,Angular2快速搭建微服务web应用 - 增加权限控制


Angular2文件上传组件

Angular2带来了全新的组件模型。如果你熟悉面向对象这个编程语言范式,就会发现这个新的组件模型和面向对象非常接近。我在学习到Angular2的组件模型的时候非常的激动,因为我觉得这是对前端开发模型的一个革命,就像C++语言之于汇编语言。它的好处显而易见,使用组件对代码基本上没有侵入性,容易写出高内聚松耦合的代码,等等。

言归正传,Angular2的文件上传组件我使用了这个:https://github.com/valor-software/ng2-file-upload/,然后简化了它的官方示例。下面是开发的步骤。

建立Angular2项目

在node环境中,先安装Angular2的CLI:
npm install -g angular-cli

用CLI的好处是,几个简单的命令就可以初始化Angular2项目,并且会自动生成相应的文件,不用自己手写了,另外打包发布也非常方便。用下面的命令建立uploader-client项目:
ng new uploader-client
之后进入uploader-client目录,可以看到项目的相关文件都生成好了,我们可以直接开发业务代码了。具体请参考官网: https://github.com/angular/angular-cli

实现上传功能

进入uploader-client/src/app,下面app打头的文件我们需要修改一下:
app.module.ts:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

import { FileUploadModule } from 'ng2-file-upload';

@NgModule({
  declarations: [
   
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值