springboot+jquery實現檔案非同步上傳——淺談SOA
阿新 • • 發佈:2018-12-11
關於springBoot就不做介紹了,個讓你覺得是個不錯的框架,要學習或者瞭解springBoot,應該對spring的一些基本配置有一定的瞭解,不要一蹴而就。
這次的博文主要是介紹 springboot+jquery實現檔案非同步上傳,分一下幾點介紹:
第一、springBoot的配置檔案的配置:
[html] view plain copy print?- <codeclass="language-html"></code>
- ## 資料來源配置
- spring.datasource.url=
- spring.datasource.username=
- spring.datasource.password=
- spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
- ## Mybatis 配置
- mybatis.typeAliasesPackage=org.spring.springboot.domain
- mybatis.mapperLocations=classpath:mapper/*.xml
- #啟用shutdown
- endpoints.shutdown.enabled=true
- #禁用密碼驗證
- endpoints.shutdown.sensitive=false
- #開啟shutdown的安全驗證
- endpoints.shutdown.sensitive=true
- #驗證使用者名稱
- security.user.name=admin
- #驗證密碼
- security.user.password=admin
- #角色
- management.security.role=SUPERUSER
- #指定shutdown endpoint的路徑
- #endpoints.shutdown.path=/stop
- #也可以統一指定所有endpoints的路徑`management.context-path=/manage`
- #指定管理埠和IP
- server.port=8081
- management.port=8081
- management.address=127.0.0.1
- #忽略許可權攔截
- management.security.enabled=false
第二、構建的是maven工程,pom.xml檔案如下:
com.oracle
[html] view plain copy print?- <codeclass="language-html"><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
- <modelVersion>4.0.0</modelVersion>
- <groupId>com.springboot</groupId>
- <artifactId>myspringboot</artifactId>
- <version>0.0.1-SNAPSHOT</version>
- <!-- Spring Boot 啟動父依賴 -->
- <parent>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-parent</artifactId>
- <version>1.5.1.RELEASE</version>
- </parent>
- <properties>
- <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
- <mysql-connector>5.1.39</mysql-connector>
- </properties>
- <dependencies>
- <!-- 本地啟動tomcat -->
- <dependency>
- <groupId>org.apache.tomcat.embed</groupId>
- <artifactId>tomcat-embed-jasper</artifactId>
- <scope>required</scope>
- </dependency>
- <!-- Spring Boot Web 依賴 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-web</artifactId>
- </dependency>
- <!-- Spring Boot Test 依賴 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-test</artifactId>
- <scope>test</scope>
- </dependency>
- <!-- Spring Boot Mybatis 依賴 -->
- <dependency>
- <groupId>org.mybatis.spring.boot</groupId>
- <artifactId>mybatis-spring-boot-starter</artifactId>
- <version>${mybatis-spring-boot}</version>
- </dependency>
- <!-- spring Boot 安全停止 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-actuator</artifactId>
- </dependency>
- <!-- MySQL 連線驅動依賴 -->
- <dependency>
- <groupId>mysql</groupId>
- <artifactId>mysql-connector-java</artifactId>
- <version>${mysql-connector}</version>
- </dependency>
- <!-- Junit -->
- <dependency>
- <groupId>junit</groupId>
- <artifactId>junit</artifactId>
- <version>4.12</version>
- <scope>test</scope>
- </dependency>
- <!-- 資料庫 -->
- <dependency>
- <groupId>com.oracle</groupId>
- <artifactId>ojdbc6</artifactId>
- <version>11.2.0</version>
- </dependency>
- <!-- 連線池 -->
- <dependency>
- <groupId>com.jolbox</groupId>
- <artifactId>bonecp-spring</artifactId>
- <version>0.8.0.RELEASE</version>
- </dependency>
- </dependencies>
- </project>
- </code>
- <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
- <modelVersion>4.0.0</modelVersion>
- <groupId>com.springboot</groupId>
- <artifactId>myspringboot</artifactId>
- <version>0.0.1-SNAPSHOT</version>
- <!-- Spring Boot 啟動父依賴 -->
- <parent>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-parent</artifactId>
- <version>1.5.1.RELEASE</version>
- </parent>
- <properties>
- <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
- <mysql-connector>5.1.39</mysql-connector>
- </properties>
- <dependencies>
- <!-- 本地啟動tomcat -->
- <dependency>
- <groupId>org.apache.tomcat.embed</groupId>
- <artifactId>tomcat-embed-jasper</artifactId>
- <scope>required</scope>
- </dependency>
- <!-- Spring Boot Web 依賴 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-web</artifactId>
- </dependency>
- <!-- Spring Boot Test 依賴 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-test</artifactId>
- <scope>test</scope>
- </dependency>
- <!-- Spring Boot Mybatis 依賴 -->
- <dependency>
- <groupId>org.mybatis.spring.boot</groupId>
- <artifactId>mybatis-spring-boot-starter</artifactId>
- <version>${mybatis-spring-boot}</version>
- </dependency>
- <!-- spring Boot 安全停止 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-actuator</artifactId>
- </dependency>
- <!-- MySQL 連線驅動依賴 -->
- <dependency>
- <groupId>mysql</groupId>
- <artifactId>mysql-connector-java</artifactId>
- <version>${mysql-connector}</version>
- </dependency>
- <!-- Junit -->
- <dependency>
- <groupId>junit</groupId>
- <artifactId>junit</artifactId>
- <version>4.12</version>
- <scope>test</scope>
- </dependency>
- <!-- 資料庫 -->
- <dependency>
- <groupId>com.oracle</groupId>
- <artifactId>ojdbc6</artifactId>
- <version>11.2.0</version>
- </dependency>
- <!-- 連線池 -->
- <dependency>
- <groupId>com.jolbox</groupId>
- <artifactId>bonecp-spring</artifactId>
- <version>0.8.0.RELEASE</version>
- </dependency>
- </dependencies>
- </project>
注:Oracle的一些依賴Apache的中央倉庫可能沒有,自己想辦法弄到自己的我本地倉庫,這裡不錯介紹,自己Google或百度。
第三、spring的Controller:
- package com.springboot.controller;
- import java.io.File;
- import java.io.IOException;
- import java.util.HashMap;
- import java.util.Map;
- import org.springframework.stereotype.Controller;
- import org.springframework.web.bind.annotation.RequestMapping;
- import org.springframework.web.bind.annotation.RequestMethod;
- import org.springframework.web.bind.annotation.ResponseBody;
- import org.springframework.web.multipart.MultipartFile;
- @Controller
- public class DemoController {
- @RequestMapping(value="to_login",method = RequestMethod.GET)
- @ResponseBody
- public Map<String, Object> select(){
- Map<String, Object> map = new HashMap<String, Object>();
- map.put("status", "ok");
- return map;
- }
- /**
- * 實現檔案上傳
- * */
- @RequestMapping(value="fileUpload",method = RequestMethod.POST)
- @ResponseBody
- public String fileUpload(MultipartFile file){
- if(file.isEmpty()){
- return "false";
- }
- String fileName = file.getOriginalFilename();
- String path = System.getProperty("user.dir") + "/uploadFile" ;
- File dest = new File(path + "/" + fileName);
- if(!dest.getParentFile().exists()){ //判斷檔案父目錄是否存在
- dest.getParentFile().mkdir();
- }
- try {
- file.transferTo(dest); //儲存檔案
- return "true";
- } catch (IllegalStateException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- return "false";
- } catch (IOException e) {
- // TODO Auto-generated catch block
- e.printStackTrace();
- return "false";
- }
- }
- }
第四、springBoot的main函式入口:
注意:這裡埠有改變,不是8080埠,在配置檔案Application.properties有做修改,不瞭解的可以百度或者Google。
- package com.springboot;
- import org.springframework.boot.SpringApplication;
- import org.springframework.boot.autoconfigure.SpringBootApplication;
- //Spring Boot 應用的標識
- @SpringBootApplication
- //mapper 介面類掃描包配置
- public class Application {
- public static void main(String[] args) {
- // 程式啟動入口
- // 啟動嵌入式的 Tomcat 並初始化 Spring 環境及其各 Spring 元件
- SpringApplication.run(Application.class,args);
- }
- }
第五、jsp的程式碼,通過jquery的非同步實現:
- <%@ page language="java" contentType="text/html; charset=UTF-8"
- pageEncoding="UTF-8"%>
- <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
- <title>file upload</title>
- <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.12.4.min.js"></script>
- <%-- <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.ajaxfileupload.js"></script>
- <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/ajaxfileupload.js"></script> --%>
- </head>
- <body>
- <div id="uploadForm">
- <input id="file" type="file" name="file"/>
- <button id="upload" type="button" onclick="fileUpload()">upload</button>
- </div>
- <script type="text/javascript">
- function fileUpload(){
- var formData = new FormData();
- formData.append('file', $('#file')[0].files[0]);
- $.ajax({
- url: 'http://localhost:8083/fileUpload',
- type: 'POST',
- cache: false,
- data: formData,
- processData: false,
- contentType: false
- }).done(function(res) {
- }).fail(function(res) {});
- }
- </script>
- </body>
- </html>
結束語:springBoot主要的目的是SOA化,然而SOA概念提出,個人覺得就是程式設計思想中一個很古老的思想:解耦合。這裡的話是通過檔案非同步上傳來做一個簡單的Demo,因為檔案的非同步上傳,可以做到跨介面上傳檔案,這裡的跨介面目的是解耦。就是,個幹各地,看似不相關,其實是可以讓他們相關。或許可以用很官方的說法來解釋:萬事萬物是聯絡的、統一的。看來馬克思還是很偉大的。
關於springBoot就不做介紹了,個讓你覺得是個不錯的框架,要學習或者瞭解springBoot,應該對spring的一些基本配置有一定的瞭解,不要一蹴而就。
這次的博文主要是介紹 springboot+jquery實現檔案非同步上傳,分一下幾點介紹:
第一、springBoot的配置檔案的配置:
[html] view plain copy print?- <codeclass="language-html"></code>
- ## 資料來源配置
- spring.datasource.url=
- spring.datasource.username=
- spring.datasource.password=
- spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
- ## Mybatis 配置
- mybatis.typeAliasesPackage=org.spring.springboot.domain
- mybatis.mapperLocations=classpath:mapper/*.xml
- #啟用shutdown
- endpoints.shutdown.enabled=true
- #禁用密碼驗證
- endpoints.shutdown.sensitive=false
- #開啟shutdown的安全驗證
- endpoints.shutdown.sensitive=true
- #驗證使用者名稱
- security.user.name=admin
- #驗證密碼
- security.user.password=admin
- #角色
- management.security.role=SUPERUSER
- #指定shutdown endpoint的路徑
- #endpoints.shutdown.path=/stop
- #也可以統一指定所有endpoints的路徑`management.context-path=/manage`
- #指定管理埠和IP
- server.port=8081
- management.port=8081
- management.address=127.0.0.1
- #忽略許可權攔截
- management.security.enabled=false
第二、構建的是maven工程,pom.xml檔案如下:
com.oracle
[html] view plain copy print?- <codeclass="language-html"><projectxmlns="http://maven.apache.org/POM/4.0.0"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
- <modelVersion>4.0.0</modelVersion>
- <groupId>com.springboot</groupId>
- <artifactId>myspringboot</artifactId>
- <version>0.0.1-SNAPSHOT</version>
- <!-- Spring Boot 啟動父依賴 -->
- <parent>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-parent</artifactId>
- <version>1.5.1.RELEASE</version>
- </parent>
- <properties>
- <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
- <mysql-connector>5.1.39</mysql-connector>
- </properties>
- <dependencies>
- <!-- 本地啟動tomcat -->
- <dependency>
- <groupId>org.apache.tomcat.embed</groupId>
- <artifactId>tomcat-embed-jasper</artifactId>
- <scope>required</scope>
- </dependency>
- <!-- Spring Boot Web 依賴 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-web</artifactId>
- </dependency>
- <!-- Spring Boot Test 依賴 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-test</artifactId>
- <scope>test</scope>
- </dependency>
- <!-- Spring Boot Mybatis 依賴 -->
- <dependency>
- <groupId>org.mybatis.spring.boot</groupId>
- <artifactId>mybatis-spring-boot-starter</artifactId>
- <version>${mybatis-spring-boot}</version>
- </dependency>
- <!-- spring Boot 安全停止 -->
- <dependency>
- <groupId>org.springframework.boot</groupId>
- <artifactId>spring-boot-starter-actuator</artifactId>
- </dependency