1. 程式人生 > >springboot+jquery實現檔案非同步上傳——淺談SOA

springboot+jquery實現檔案非同步上傳——淺談SOA

關於springBoot就不做介紹了,個讓你覺得是個不錯的框架,要學習或者瞭解springBoot,應該對spring的一些基本配置有一定的瞭解,不要一蹴而就。

這次的博文主要是介紹 springboot+jquery實現檔案非同步上傳,分一下幾點介紹:

第一、springBoot的配置檔案的配置:

[html] view plain copy print?
  1. <codeclass="language-html"></code>
  1. ## 資料來源配置
  2. spring.datasource.url=
  3. spring.datasource.username=
  4. spring.datasource.password=
  5. spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
  6. ## Mybatis 配置
  7. mybatis.typeAliasesPackage=org.spring.springboot.domain
  8. mybatis.mapperLocations=classpath:mapper/*.xml
  9. #啟用shutdown
  10. endpoints.shutdown.enabled=true
  11. #禁用密碼驗證
  12. endpoints.shutdown.sensitive=false
  13. #開啟shutdown的安全驗證
  14. endpoints.shutdown.sensitive=true
  15. #驗證使用者名稱
  16. security.user.name=admin
  17. #驗證密碼
  18. security.user.password=admin
  19. #角色
  20. management.security.role=SUPERUSER
  21. #指定shutdown endpoint的路徑
  22. #endpoints.shutdown.path=/stop
  23. #也可以統一指定所有endpoints的路徑`management.context-path=/manage`
  24. #指定管理埠和IP
  25. server.port=8081
  26. management.port=8081
  27. management.address=127.0.0.1
  28. #忽略許可權攔截
  29. management.security.enabled=false
第二、構建的是maven工程,pom.xml檔案如下:
com.oracle
[html] view plain copy print?
  1. <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">
  2.   <modelVersion>4.0.0</modelVersion>
  3.   <groupId>com.springboot</groupId>
  4.   <artifactId>myspringboot</artifactId>
  5.   <version>0.0.1-SNAPSHOT</version>
  6.     <!-- Spring Boot 啟動父依賴 -->
  7.     <parent>
  8.         <groupId>org.springframework.boot</groupId>
  9.         <artifactId>spring-boot-starter-parent</artifactId>
  10.         <version>1.5.1.RELEASE</version>
  11.     </parent>
  12.     <properties>
  13.         <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
  14.         <mysql-connector>5.1.39</mysql-connector>
  15.     </properties>
  16.     <dependencies>
  17.         <!-- 本地啟動tomcat -->
  18.         <dependency>
  19.             <groupId>org.apache.tomcat.embed</groupId>
  20.             <artifactId>tomcat-embed-jasper</artifactId>
  21.             <scope>required</scope>
  22.         </dependency>
  23.         <!-- Spring Boot Web 依賴 -->
  24.         <dependency>
  25.             <groupId>org.springframework.boot</groupId>
  26.             <artifactId>spring-boot-starter-web</artifactId>
  27.         </dependency>
  28.         <!-- Spring Boot Test 依賴 -->
  29.         <dependency>
  30.             <groupId>org.springframework.boot</groupId>
  31.             <artifactId>spring-boot-starter-test</artifactId>
  32.             <scope>test</scope>
  33.         </dependency>
  34.         <!-- Spring Boot Mybatis 依賴 -->
  35.         <dependency>
  36.             <groupId>org.mybatis.spring.boot</groupId>
  37.             <artifactId>mybatis-spring-boot-starter</artifactId>
  38.             <version>${mybatis-spring-boot}</version>
  39.         </dependency>
  40.          <!-- spring Boot 安全停止 -->
  41.          <dependency>
  42.             <groupId>org.springframework.boot</groupId>
  43.             <artifactId>spring-boot-starter-actuator</artifactId>
  44.         </dependency>
  45.         <!-- MySQL 連線驅動依賴 -->
  46.         <dependency>
  47.             <groupId>mysql</groupId>
  48.             <artifactId>mysql-connector-java</artifactId>
  49.             <version>${mysql-connector}</version>
  50.         </dependency>
  51.         <!-- Junit -->
  52.         <dependency>
  53.             <groupId>junit</groupId>
  54.             <artifactId>junit</artifactId>
  55.             <version>4.12</version>
  56.             <scope>test</scope>
  57.         </dependency>
  58.         <!-- 資料庫 -->
  59.         <dependency>
  60.             <groupId>com.oracle</groupId>
  61.             <artifactId>ojdbc6</artifactId>
  62.             <version>11.2.0</version>
  63.         </dependency>
  64.         <!-- 連線池 -->
  65.         <dependency>
  66.             <groupId>com.jolbox</groupId>
  67.             <artifactId>bonecp-spring</artifactId>
  68.             <version>0.8.0.RELEASE</version>
  69.         </dependency>
  70.     </dependencies>
  71. </project>
  72. </code>
  1. <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">
  2. <modelVersion>4.0.0</modelVersion>
  3. <groupId>com.springboot</groupId>
  4. <artifactId>myspringboot</artifactId>
  5. <version>0.0.1-SNAPSHOT</version>
  6. <!-- Spring Boot 啟動父依賴 -->
  7. <parent>
  8. <groupId>org.springframework.boot</groupId>
  9. <artifactId>spring-boot-starter-parent</artifactId>
  10. <version>1.5.1.RELEASE</version>
  11. </parent>
  12. <properties>
  13. <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
  14. <mysql-connector>5.1.39</mysql-connector>
  15. </properties>
  16. <dependencies>
  17. <!-- 本地啟動tomcat -->
  18. <dependency>
  19. <groupId>org.apache.tomcat.embed</groupId>
  20. <artifactId>tomcat-embed-jasper</artifactId>
  21. <scope>required</scope>
  22. </dependency>
  23. <!-- Spring Boot Web 依賴 -->
  24. <dependency>
  25. <groupId>org.springframework.boot</groupId>
  26. <artifactId>spring-boot-starter-web</artifactId>
  27. </dependency>
  28. <!-- Spring Boot Test 依賴 -->
  29. <dependency>
  30. <groupId>org.springframework.boot</groupId>
  31. <artifactId>spring-boot-starter-test</artifactId>
  32. <scope>test</scope>
  33. </dependency>
  34. <!-- Spring Boot Mybatis 依賴 -->
  35. <dependency>
  36. <groupId>org.mybatis.spring.boot</groupId>
  37. <artifactId>mybatis-spring-boot-starter</artifactId>
  38. <version>${mybatis-spring-boot}</version>
  39. </dependency>
  40. <!-- spring Boot 安全停止 -->
  41. <dependency>
  42. <groupId>org.springframework.boot</groupId>
  43. <artifactId>spring-boot-starter-actuator</artifactId>
  44. </dependency>
  45. <!-- MySQL 連線驅動依賴 -->
  46. <dependency>
  47. <groupId>mysql</groupId>
  48. <artifactId>mysql-connector-java</artifactId>
  49. <version>${mysql-connector}</version>
  50. </dependency>
  51. <!-- Junit -->
  52. <dependency>
  53. <groupId>junit</groupId>
  54. <artifactId>junit</artifactId>
  55. <version>4.12</version>
  56. <scope>test</scope>
  57. </dependency>
  58. <!-- 資料庫 -->
  59. <dependency>
  60. <groupId>com.oracle</groupId>
  61. <artifactId>ojdbc6</artifactId>
  62. <version>11.2.0</version>
  63. </dependency>
  64. <!-- 連線池 -->
  65. <dependency>
  66. <groupId>com.jolbox</groupId>
  67. <artifactId>bonecp-spring</artifactId>
  68. <version>0.8.0.RELEASE</version>
  69. </dependency>
  70. </dependencies>
  71. </project>
注:Oracle的一些依賴Apache的中央倉庫可能沒有,自己想辦法弄到自己的我本地倉庫,這裡不錯介紹,自己Google或百度。

第三、spring的Controller:

  1. package com.springboot.controller;
  2. import java.io.File;
  3. import java.io.IOException;
  4. import java.util.HashMap;
  5. import java.util.Map;
  6. import org.springframework.stereotype.Controller;
  7. import org.springframework.web.bind.annotation.RequestMapping;
  8. import org.springframework.web.bind.annotation.RequestMethod;
  9. import org.springframework.web.bind.annotation.ResponseBody;
  10. import org.springframework.web.multipart.MultipartFile;
  11. @Controller
  12. public class DemoController {
  13. @RequestMapping(value="to_login",method = RequestMethod.GET)
  14. @ResponseBody
  15. public Map<String, Object> select(){
  16. Map<String, Object> map = new HashMap<String, Object>();
  17. map.put("status", "ok");
  18. return map;
  19. }
  20. /**
  21. * 實現檔案上傳
  22. * */
  23. @RequestMapping(value="fileUpload",method = RequestMethod.POST)
  24. @ResponseBody
  25. public String fileUpload(MultipartFile file){
  26. if(file.isEmpty()){
  27. return "false";
  28. }
  29. String fileName = file.getOriginalFilename();
  30. String path = System.getProperty("user.dir") + "/uploadFile" ;
  31. File dest = new File(path + "/" + fileName);
  32. if(!dest.getParentFile().exists()){ //判斷檔案父目錄是否存在
  33. dest.getParentFile().mkdir();
  34. }
  35. try {
  36. file.transferTo(dest); //儲存檔案
  37. return "true";
  38. } catch (IllegalStateException e) {
  39. // TODO Auto-generated catch block
  40. e.printStackTrace();
  41. return "false";
  42. } catch (IOException e) {
  43. // TODO Auto-generated catch block
  44. e.printStackTrace();
  45. return "false";
  46. }
  47. }
  48. }
第四、springBoot的main函式入口:
  1. package com.springboot;
  2. import org.springframework.boot.SpringApplication;
  3. import org.springframework.boot.autoconfigure.SpringBootApplication;
  4. //Spring Boot 應用的標識
  5. @SpringBootApplication
  6. //mapper 介面類掃描包配置
  7. public class Application {
  8. public static void main(String[] args) {
  9. // 程式啟動入口
  10. // 啟動嵌入式的 Tomcat 並初始化 Spring 環境及其各 Spring 元件
  11. SpringApplication.run(Application.class,args);
  12. }
  13. }
注意:這裡埠有改變,不是8080埠,在配置檔案Application.properties有做修改,不瞭解的可以百度或者Google。

第五、jsp的程式碼,通過jquery的非同步實現:

  1. <%@ page language="java" contentType="text/html; charset=UTF-8"
  2. pageEncoding="UTF-8"%>
  3. <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  4. <html>
  5. <head>
  6. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  7. <title>file upload</title>
  8. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery-1.12.4.min.js"></script>
  9. <%-- <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/jquery.ajaxfileupload.js"></script>
  10. <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery/ajaxfileupload.js"></script> --%>
  11. </head>
  12. <body>
  13. <div id="uploadForm">
  14. <input id="file" type="file" name="file"/>
  15. <button id="upload" type="button" onclick="fileUpload()">upload</button>
  16. </div>
  17. <script type="text/javascript">
  18. function fileUpload(){
  19. var formData = new FormData();
  20. formData.append('file', $('#file')[0].files[0]);
  21. $.ajax({
  22. url: 'http://localhost:8083/fileUpload',
  23. type: 'POST',
  24. cache: false,
  25. data: formData,
  26. processData: false,
  27. contentType: false
  28. }).done(function(res) {
  29. }).fail(function(res) {});
  30. }
  31. </script>
  32. </body>
  33. </html>
結束語:springBoot主要的目的是SOA化,然而SOA概念提出,個人覺得就是程式設計思想中一個很古老的思想:解耦合。這裡的話是通過檔案非同步上傳來做一個簡單的Demo,因為檔案的非同步上傳,可以做到跨介面上傳檔案,這裡的跨介面目的是解耦。就是,個幹各地,看似不相關,其實是可以讓他們相關。或許可以用很官方的說法來解釋:萬事萬物是聯絡的、統一的。看來馬克思還是很偉大的。

關於springBoot就不做介紹了,個讓你覺得是個不錯的框架,要學習或者瞭解springBoot,應該對spring的一些基本配置有一定的瞭解,不要一蹴而就。

這次的博文主要是介紹 springboot+jquery實現檔案非同步上傳,分一下幾點介紹:

第一、springBoot的配置檔案的配置:

[html] view plain copy print?
  1. <codeclass="language-html"></code>
  1. ## 資料來源配置
  2. spring.datasource.url=
  3. spring.datasource.username=
  4. spring.datasource.password=
  5. spring.datasource.driver-class-name=oracle.jdbc.driver.OracleDriver
  6. ## Mybatis 配置
  7. mybatis.typeAliasesPackage=org.spring.springboot.domain
  8. mybatis.mapperLocations=classpath:mapper/*.xml
  9. #啟用shutdown
  10. endpoints.shutdown.enabled=true
  11. #禁用密碼驗證
  12. endpoints.shutdown.sensitive=false
  13. #開啟shutdown的安全驗證
  14. endpoints.shutdown.sensitive=true
  15. #驗證使用者名稱
  16. security.user.name=admin
  17. #驗證密碼
  18. security.user.password=admin
  19. #角色
  20. management.security.role=SUPERUSER
  21. #指定shutdown endpoint的路徑
  22. #endpoints.shutdown.path=/stop
  23. #也可以統一指定所有endpoints的路徑`management.context-path=/manage`
  24. #指定管理埠和IP
  25. server.port=8081
  26. management.port=8081
  27. management.address=127.0.0.1
  28. #忽略許可權攔截
  29. management.security.enabled=false
第二、構建的是maven工程,pom.xml檔案如下:
com.oracle
[html] view plain copy print?
  1. <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">
  2.   <modelVersion>4.0.0</modelVersion>
  3.   <groupId>com.springboot</groupId>
  4.   <artifactId>myspringboot</artifactId>
  5.   <version>0.0.1-SNAPSHOT</version>
  6.     <!-- Spring Boot 啟動父依賴 -->
  7.     <parent>
  8.         <groupId>org.springframework.boot</groupId>
  9.         <artifactId>spring-boot-starter-parent</artifactId>
  10.         <version>1.5.1.RELEASE</version>
  11.     </parent>
  12.     <properties>
  13.         <mybatis-spring-boot>1.2.0</mybatis-spring-boot>
  14.         <mysql-connector>5.1.39</mysql-connector>
  15.     </properties>
  16.     <dependencies>
  17.         <!-- 本地啟動tomcat -->
  18.         <dependency>
  19.             <groupId>org.apache.tomcat.embed</groupId>
  20.             <artifactId>tomcat-embed-jasper</artifactId>
  21.             <scope>required</scope>
  22.         </dependency>
  23.         <!-- Spring Boot Web 依賴 -->
  24.         <dependency>
  25.             <groupId>org.springframework.boot</groupId>
  26.             <artifactId>spring-boot-starter-web</artifactId>
  27.         </dependency>
  28.         <!-- Spring Boot Test 依賴 -->
  29.         <dependency>
  30.             <groupId>org.springframework.boot</groupId>
  31.             <artifactId>spring-boot-starter-test</artifactId>
  32.             <scope>test</scope>
  33.         </dependency>
  34.         <!-- Spring Boot Mybatis 依賴 -->
  35.         <dependency>
  36.             <groupId>org.mybatis.spring.boot</groupId>
  37.             <artifactId>mybatis-spring-boot-starter</artifactId>
  38.             <version>${mybatis-spring-boot}</version>
  39.         </dependency>
  40.          <!-- spring Boot 安全停止 -->
  41.          <dependency>
  42.             <groupId>org.springframework.boot</groupId>
  43.             <artifactId>spring-boot-starter-actuator</artifactId>
  44.         </dependency