學習(Java Web)編程技術要點及方向; 完成項目的要決

時間 2019-11-12

標籤學習 java web 編程技術要點方向完成項目欄目 Java 简体版

原文原文鏈接

本文亮點：css

傳統學習編程技術落後，應跟著潮流，要對業務聚焦處理。
要Jar，不要War；以小爲主，以簡爲寶，集堆而成。
去繁取簡 Spring Boot，明日之春。
集堆綜合技術如 jHipster 是必然的軟件開發途徑
先後端分離技術，跨域資源共享（ CORS）。
提供Spring Boot 1.3.6 + Angular1.4.0 UI-Route 0.40 + Mongodb 2.6.3 CRUD學習程式例子。

開場白html

　　通常大專的軟件技術課程是這樣的，有系統地介紹一下有關該技術的背景，而後歸納地描述編程語言的定義，指令的用法及幾個運用的例子，跟著就要作幾個技術合量不一樣的學習頂目。我參考過澳洲某大學的課程，基本上都是這樣的。無可非議，這是正統的學習方法！惋惜，這種方法偏向教條主義，形式工夫而已，學生學不到真正應用知識的。之因此，幾位電腦及互聯網著名大亨如比爾·蓋茨（Bill Gates，史蒂夫·喬布斯（Steve Jobs）和馬克·扎克伯格（Mark Zuckerberg）同樣，蓋茨等也是從大學輟學而另創途徑去學習技術的。筆者注：偏向學術的學位一樣重要，蓋茨後來都十分認同。前端

　　事實上，大專學校有關普通電腦技術方面一般是3至5年落後於市場應用，更不用說突飛猛進的編程技術。固然能夠去技術培訓學校去學習的。不過，筆者認爲那些所謂技術培訓課程形式上和大專的也是差不了多少，更新了部份技術，祇是著重於操做例子多些吧。 java

編程方面要提升對業務聚焦處理web

　　我相信，大部分的計算機程式員/電腦工程師都是從工做中獲得應用知識的。筆者在電訊公司任職了兩年，再在美國通用電氣公司工做時，主管對筆者說：「你可能在三年內都不知道你在作些什麼，三年之後才真正對我有點用處「。意思是要你學習業務知識三年後纔有用。在工做應用方面，知道了一點語言知識遠遠不夠用的！很多公司招聘電腦程式員/電腦工程師都但願有些經驗的，不光是看其技術方面，更重要是業務應用方面，就是這樣道理吧。可見，編程技術不過是一種工具，重點仍是應用業務了得！spring

　　行業專家早已洞悉業務的重要性，在編程方面提升了對業務聚焦處理。不過通常程式員還不清楚怎樣在編譯中採起主動的步伐，沒有在業務應用方向多下功夫，仍然卡在技術層次上落階梯上。在筆者朋友中，很多是編程專家和精英，熟練多種語言技術。其中一位編程技術超凡，工做了二十多年，作了很多項目，可是每一個項目都是拖延超時，沒有按時間表完成的。其道理很簡單，項目應以業務爲主導的，編程技術祇是工具；必須採起適應的編程技術，集中地處理好業務上的邏輯，這纔是項目工做方向。簡易直說就是要花多些時間在業務上，多和客戶打交道。筆者曾經在道瓊斯的華爾街日報處理網站技術，用了三個月的時間就完成了六個月時間表的項目。深得處理業務的重要性。 mongodb

Java 編譯技術內容豐富，各類分類技術繁多，又是議論多多的普及技術apache

　　上文花了很多文字來解釋業務在編程技術上的分量，那麼在學習和應用編程技術方面該怎樣進行呢？無論Java, Php, C, C++，雖然他們的語言句法要求不一樣，編譯中使用的編譯工具包不一樣，可是其過程和結果都是差很少的。如下就以 Java 編譯技術爲主題，它的內容豐富，各類分類技術繁多，又是議論多多的普及技術。編程

　　Java 是很通用普及的編譯語言，能夠在不一樣的做業系統上運行。有關詳細Java 技術，不是本文討論議題。本文祇集中在普遍應用的Java Web 技術方面。假設你剛剛從有關電腦技術專科或本科畢業了（軟件系統／網頁開發），面對你一般有三條路選擇：找到了工做；尋覓工做；再進一步深造。深造固然指出國或考科研。剛出校門，無論你是否有工做，怎麼樣可以學習新知識，充實本身是首要的任務！其實，能夠一面工做一面學習是最隹的搭檔，可是對於剛來社會的菜烏，應付工做相信會有很多壓力的。此時，很多人就會想到的是能夠上網，蒐集資料，問百度！ json

互聯網五花八門，什麼都有，簡直是中國人所謂的江湖

　　如今是互聯網世界，網上什麼都有，很多人士都能從網上學習了很多的技術及方法。也許你都有過至關次數的經驗，但是花了很多時間去尋找一些答案，老是有點不合使用，問非所答，不是實際狀況。那麼，應該怎麼樣學習電腦技術呢？或者怎麼樣利用網上知識來幫助你解決問題呢？事實上，互聯網是人類最大的資料庫，一應俱全，你沒有想到的都有，問題是你怎樣在這洪荒海量的資訊裏提走一點對你有用的資料。更可怕的是不要陷入了一些所謂專家答案的Merry-go-round - 旋轉木馬圈套裏，永遠得不到答案的。怎樣利用互聯網海量的資訊呢？在大同的環境內要採起戰略方針：根據具體存在的條件要求尋找方向，該方向是現今流行的編程技術，而不是你立刻能夠應用具體的方向。這裏所說不是專門解答你工做上或者做業上的難題，而是在互聯網世界裏能夠獲得學習電腦技術知識的方向，這是十分重要的！舉個簡單易明的例子，若是你仍然使用Windows XP來處理或開發工做，別人已經在利用Windows 10, 8 等工做了；你徹底是Out 了！

　　現今科技世界突飛猛進，大部分是與電腦計算機技術有關的。有做爲的公司及機構必定會跟隨大方向走的，不管是經濟，產品，尤爲是在技術方面的趁勢，有時身不禁己。前面幾段說話有點偏離了學習（Java Web）編程技術要點及方向，不過筆者相信編程技術必須跟隨著電腦計算機技術主流的。

編程技術潮流：以小爲主，以簡爲寶，集堆而成

　　最新Java軟件開發技術是以分離技術爲方向, 偏向細小程式。尤爲是要Jar，不要War! 記得初學Java Web (IEEE)，確定不是輕量級別，十分繁瑣。自從有了三劍客出現（Spring, Structs, Hibenate）, 編程開發工做的確簡化了很多。可是基本仍是以XML 編譯爲核心。社會的生產和工做日益進步，對軟件技術有更高的要求，使用XML 編譯的方式已經應付不來，加上容易人爲錯誤，很多新穎的開發技術減輕了對XML的依賴，或減至其使用率爲最極限度，而採用了程式，資料庫，新技術如NOSQL，大數據，雲操做等處理軟件開發技術的新潮流。

去繁取簡又是一個顯著的標誌

　　著名的例子正是 Spring Boot，包容了一切可應用的啓動功能，包括了全部的annotation 的接口。 Spring 框架的常見問題就是要快速建立一個能夠立刻運行的應用比較麻煩，學習曲線高！而Spring Boot 能夠自動配置 Spring 的各類組件，並不用依賴代碼生成和 XML 配置文件。 Spring Boot 能夠大大提高使用 Spring 框架時的開發效率。除了能提供很多自動又高效率的智能裝置以外，又是現今能夠投入微服務（Microservice）的平臺。 Spring Boot被認爲future of Spring! 筆者相信它將會取締其餘大部分Spring框架配件。之後可能沒有SpringMVC 6, 7續號了。另一個值得注意的訊息就是經常使用的Jsp：它和Java同期產物，但Java已經是進入第八代了，而Jsp變化很少，加上Jsp不能在嵌套在Tomcat容器來解析，換句話就是不能在打包而成爲可執行的Jar狀況下解析的。一樣地，Jetty嵌套容器也不支持Jsp ，因此Spring Boot 官方不推薦使用Jsp技術。Jsp 也該退休了，祇是時間問題吧。

　　如今有規模的項目主流設計通常會採用微服務架構（Microservice Architecture）。簡單來講，把全部業務邏輯分析成每一個獨立性又細少的服務應用，單獨部署和開發，分佈式的管理，實現了敏捷開發和部署。這就是以小爲主的完美。能夠應用微服務架構的項目多指有100個開發程式員以上。

MVC設計典範：Spring Boot

　　事實上，軟件架構分離技術如MVC設計典範，便是模型(model)－視圖(view)－控制器(controller)的分離組織；把業務邏輯、數據、界面顯示用分離的方法來組織代碼，將業務邏輯集中到一個部件裏面，在修正或改進顯示結果在界面上，而在用戶互動時也不須要從新編寫業務邏輯。 MVC用於映射傳統的輸入、處理和輸出功能，而變成在一個邏輯的圖形化的結構。通常軟件系統可分前端和後臺：後臺提供資料數據給前端的；前端則和用戶互動及顯示結果的。上文提到的Spring Boot 可以以MVC模型來處理該程式的後臺數據資料。

前端分離模式：AngularJS

　　若是前端要採用MVC模型來處理運做的話，那麼可使用 AngularJS。嚴格來講它是 MVVM （Model-View-ViewModel），固然還有其餘，例如Avalon，Regular，Knockout，都是走的差很少路線的，用相似模板的語法來描述界面狀態與數據的綁定關係，當界面發生變化的時候，會按照配置規則去更新相應的數據，或者從數據來更新界面狀態。其分離方法原則上都是把狀態，數據及視圖變成MVC模板處理。注：遊戲，圖形界面編輯器，這種DOM操做很頻繁不適使用 AngularJS。以目前的潮流來講，固然是以 AngularJS + UI-Route用戶最多，根據業界的統計。

集堆綜合技術：必然的軟件開發途徑

　　另一股不容忽視的潮流正是在 Java 平臺上利用多種開放源碼工具組合而成的集堆綜合技術。比較著名的有 AppFuse 和 jHipster 。簡單地說，它們都是可以提供一個項目骨架，來幫助程式員快速地而能高效地開發 Web 應用程序。它能夠生成代碼，編譯，鏈接資料庫和部署，並提供了目錄和包結構，以及開發基於 Java 語言的 Web 應用程序所須要的Jar庫。上文說起的聚焦在處理好業務上的邏輯，就必須仔細地考慮怎樣利用集堆綜合技術的應用。尤爲要迎合領導上的項目時間表的規範！注： AppFuse 3.5 多是最後一期的更新，明年開始將不會在網上有支援服務了。緣由是 AppFuse 的主要創做者 Matt Raible 轉向開發及支援他的競爭者 – jHipster. 他表示 jHipster 功能及穩定性都比 AppFuse 強，最重要是jHipster 可以支持 Java 8, 而 AppFuse 不能。筆者也曾嘗試採用過 AppFuse，的確是不錯的 Java Web開發工具組合。現今能夠說， jHipster 是一隻領頭羊。有關 jHipster 的應用，請參考筆者所撰寫的慱客分享。

開發及雲部署先鋒： Docker

　　另外一類熱潮相信非 Docker 莫屬。它是一個虛擬容器，像沙箱式的運做。程式祇能在該容器內進行有關的運行，但能分享做業系統的資源。以往程式服務器多在仿真的虛擬硬件內（emulating virtual hardware）操做，如今一樣硬件但佈置了虛擬容器，就可以支援4至6倍的程式服務器數目。之因此 Docker 又是部署雲的工具。它令程序各自各獨立工做，又能安全地分享其程式，正是符合典型的能夠共同開發系統的結構！正是微服務的好搭檔。

結束語

　　本文目的是但願給讀者提供一些編程技術方向：那些是流行的；這些可能會被淘汰的！故此筆者祇能簡單地介紹各類技術的要點。網上有關這些技術資料相信很多，祇是等待有心人去發掘而已。有了大方向，你才能夠站得高，望得遠！有些讀者可能有疑問：大部份的程式員都是在維護系統，這些新技術，新方向有什麼做用呀？其實所謂新技術都是和 Java ， Spring 有關的。若是系統是按照 MVC 的規範去實踐和部署的，例如控制器不會和直接處理業務數據的，那麼，該服務流程很容易轉移到 Spring Boot 的程式裏。或者在 jHipster 程式裏，明白其中一些應用程式代碼，你能夠用一樣方法在如今的程式中去處理這些數據的。

示範例子

安裝和運行汽車搜索及增長修改程式例子須要如下的工做或開發環境：

Java 8 SDK
Maven 或 Gradle
Spring Boot 1.3.6
MongoDB
AngularJs + UI-Route + Jquery
Git 版本控制
STS ide, Eclipse, Intellij IDEA, 其中一個

　　若是沒有一個實用的編程例子，可能有些讀者不會認真地體會本文的要點。筆者就提供一個 Spring Boot + Angular UI-Route + Mongodb CRUD學習程式資料. 筆者要用最簡單又有效的編程方法來實踐「以小爲主，以簡爲寶」的原則。首先什麼是小呢？程式可分紅先後端分開處理，都是以 MVC 模式安排，加上用跨域資源共享（ CORS）來分紅先後端的開發。換句話說，先後端各自開發，祇有在程式運做時纔有直接數據來往。

後端的開發： Spring Boot + mongoDB + H2

打開你經常使用的瀏覽器，在 URL 輸入https://stat.spring.io
在頁面上輸入：

　　　　　　Maven Project Spring Boot 1.3.7.

　　　　　　Group: com.emo.product

　　　　　　Artifact: product-server

　　　　　　Selected Dependencies: Web, MongoDb, H2。

圖1：自動生成 Spring Boot 骨架項目

而後按一下 Generate Project 按鈕，就是自動下載一個壓縮 zip 檔案，便是 product-server.zip。把該 zip 檔案放在適當位置，再解壓。在解壓後的目錄裏有 src, .setting, .mvn 及 POM.xml. 打開 pom.xml 會見到這裏祇用了3個依賴包（Web, MongoDb, H2）而已，而其餘 Jar 包會自動下載的。該網頁 (SPRING INITIALIZR) 就是可以提供 Spring Boot 的項目骨架，最重要的 POM.xml 的程式依賴部署檔案。本程式採用了記憶體的資料庫 H2, 方便數據資料修改及儲存到硬盤上的MonogoDB。

3. 爲了容易修改程式文檔，固然要輸入你所經常使用的 IDE，例如 Eclipse. 筆者使用的是 STS 3.8.0 RELEASE. 如今你祇有骨架，沒有真實的 Java 類，業務，接口等的文檔。正是要運用你的 Java 技術了。筆者與人方便，爲你提供了汽車搜索及增長修改程式。並附上 MongoDB 資料庫檔案。

圖2：Product Server Spring Boot項目Java架構

你能夠按本身的方式來編制你的Java代碼及其有關的類，接口和業務的應用。也能夠參考本文的代碼。

圖3：Product Server Java 所需的程式名稱

首先是最重要的程式依賴檔

Product-server/POM.xml.

<?xml version="1.0" encoding="UTF-8"?>

<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">

<groupId>com.emo.product</groupId>

<artifactId>product-server</artifactId>

<version>0.0.1-SNAPSHOT</version>

<name>car-server</name>

<description>Spring Boot Server</description>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>1.3.6.RELEASE</version>

</parent>

<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>

<java.version>1.8</java.version>

</properties>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-mongodb</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

</dependency>

</dependencies>

<build>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>

App.java 典型的Spring Boot 起動程式。

package com.emo.product;

import org.springframework.boot.SpringApplication;

import org.springframework.boot.autoconfigure.SpringBootApplication;

import org.springframework.scheduling.annotation.EnableAsync;

@SpringBootApplication

@EnableAsync

public class app {

public static void main(String[] args) {

SpringApplication.run(app.class, args);

}

public void run() {

}

SimpleCORSFilter.java 跨域資源共享的過濾器

package com.emo.product.config;

import java.io.IOException;

import javax.servlet.Filter;

import javax.servlet.FilterChain;

import javax.servlet.FilterConfig;

import javax.servlet.ServletException;

import javax.servlet.ServletRequest;

import javax.servlet.ServletResponse;

import javax.servlet.http.HttpServletRequest;

import javax.servlet.http.HttpServletResponse;

import org.springframework.http.HttpMethod;

import org.springframework.http.HttpStatus;

import org.springframework.stereotype.Service;

@Service

public class SimpleCORSFilter implements Filter {

public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {

HttpServletResponse response = (HttpServletResponse) res;

HttpServletRequest request = (HttpServletRequest) req;

response.setHeader("Access-Control-Allow-Origin", "*");

response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");

response.setHeader("Access-Control-Max-Age", "3600");

response.setHeader("Access-Control-Allow-Headers", "Origin,Accept,X-Requested-With,Content-Type,Access-Control-Request-Method,Access-Control-Request-Headers,Authorization");

response.setHeader("Access-Control-Allow-Credentials", "true");

if(request.getMethod().equals(HttpMethod.OPTIONS.name())){

response.setStatus(HttpStatus.NO_CONTENT.value());

}else{

chain.doFilter(req, res);

}

public void init(FilterConfig filterConfig) {}

public void destroy() {}

}

CarController.java 汽車控制器，留意程式儘可能使用現成的mongoRepository的資料庫接口，祇有 update 和 search 才作業務上的運做。由於mongoRepository 沒有直接提供現成的接口。少一句代碼就簡化了一度步驟，減小一個機會犯人爲錯誤的。

package com.emo.product.controllers;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.ui.Model;

import org.springframework.web.bind.annotation.RequestBody;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.bind.annotation.RequestMethod;

import org.springframework.web.bind.annotation.RestController;

import com.emo.product.model.Car;

import com.emo.product.repository.CarSearchRepository;

import com.emo.product.repository.CarRepository;

import com.emo.product.service.CarService;

@RestController

@RequestMapping(value="/api")

public class CarController {

@Autowired

CarRepository carRepository;

@Autowired

CarSearchRepository carSearchRepository;

@Autowired

private CarService carService;

/**

* Save car to database

@RequestMapping(value="/save",method=RequestMethod.POST)

public String saveCar(@RequestBody Car car) {

carRepository.save(car);

return "success";

}

@RequestMapping(value="/getListOfCar",method=RequestMethod.GET)

public List<Car> getListOfCar() {

return carRepository.findAll();

}

@RequestMapping("/home")

public String home(Model model) {

model.addAttribute("List", carRepository.findAll());

return "home";

}

@RequestMapping(value="/update",method=RequestMethod.POST)

public void updateCar(@RequestBody Car car) {

carService.update(car);

}

@RequestMapping(value = "/search",method=RequestMethod.POST)

public Car search(@RequestBody String search) {

Car car = carService.search(search);

carService.update(car);

return car;

}

@RequestMapping(value="/delete", method=RequestMethod.POST)

public void removeCar(@RequestBody Car car) {

carRepository.delete(car);

}

CarService.java 十分簡單的服務

package com.emo.product.service;

import com.emo.product.model.Car;

public interface CarService {

//update car

public void update(Car car);

//search Car.

public Car search(String text);

}

CarServiceImpl.java 實驗服務

package com.emo.product.service;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.stereotype.Service;

import com.emo.product.model.Car;

import com.emo.product.repository.CarRepository;

import com.emo.product.repository.CarSearchRepository;

@Service

public class CarServiceImpl implements CarService {

@Autowired

private CarRepository carRegistory;

@Autowired

private CarSearchRepository searchRegistory;

@Override

public Car search(String text) {

return searchRegistory.searchCars(text);

}

@Override

public void update(Car car) {

carRegistory.save(car);

}

CarRepository.java mongoDB 的接口

package com.emo.product.repository;

import java.util.List;

import org.springframework.data.mongodb.repository.MongoRepository;

import org.springframework.stereotype.Repository;

import com.emo.product.model.Car;

@Repository

public interface CarRepository extends MongoRepository<Car, String> {

public List<Car> findAll();

public Car findOne(String id);

@SuppressWarnings("unchecked")

public Car save(Car car);

public void delete(Car car);

}

CarSearchRepository.java 利用mongoTemplate 來查詢資料庫

package com.emo.product.repository;

import org.springframework.beans.factory.annotation.Autowired;

import org.springframework.data.mongodb.core.MongoTemplate;

import org.springframework.data.mongodb.core.query.Criteria;

import org.springframework.data.mongodb.core.query.Query;

import org.springframework.stereotype.Repository;

import com.emo.product.model.Car;

@Repository

public class CarSearchRepository {

@Autowired

MongoTemplate mongoTemplate;

public Car searchCars(String text) {

Car car = mongoTemplate.findOne(Query.query(new Criteria()

.orOperator(Criteria.where("description").regex(text, "i"),

Criteria.where("make").regex(text, "i"),

Criteria.where("model").regex(text, "i"))

), Car.class);

return car;

}

application.properties最後是設置mongoDB 的 Host 和 Port.

spring.data.mongodb.database=car_dealer

spring.data.mongodb.host=localhost

spring.data.mongodb.port=27017

上面就是汽車搜索及增長修改資料程式，十分簡潔。不過，Spring Boot 版本 1.4.0在 Windows 10會出錯的；而在 Mac 機上相安無事。讀者請留意：本服務程式沒有使用 DAO，又沒有 JSP ！製做風險都是與網絡順暢有關的，有時因本機的 jar 包出現問題，要從新下載的，惋惜網絡不必定給面子，無奈！

前端的開發： Angular + UI-Route

開始處理全部有關 Java 的程式都是要考慮須要那些依賴包及其版本，AngularJS 也不例外。根據前端程式須要，它可能是存在 Bower.json 檔的。該檔案是記錄著該 AngularJS 程序所須要的各種 Jar 包。若是丟失了某個包，能夠從新下載的。功能有點像服務程式中的 POM.xml.

Bower.json

{

"name": "angular-auth",

"version": "0.1",

"authors": [

"sam8881"

"moduleType": [

"amd"

"license": "MIT",

"dependencies": {

"angular-ui-router": "~0.2.15",

"angular-ui": "~0.4.0",

"angular": "~1.4.0",

"jQuery": "~2.1.4",

"angular-cookies": "~1.4.0"

}

注意：不要隨便修改該檔，很容易出錯的。必須用 Json 工具。

靜態程式如 AngularJS 不方便在 Eclipse 或 STS 內操做（能夠處理的，不過是煩了一點），因此筆者喜歡用 Intelli J Idea 直接打開目錄就能夠看到所有的檔案了。

圖4：Car-Client 所需的AngularJS 架構及其程式名稱

前端程式也很簡單，重要的代碼文檔祇有4個，其餘通常讀者都會明白的。如下就解釋一下這幾個檔案。

Index.hml 起動檔案，部署有關的附屬工具／包／界面等來保證程式運做正常。

<!DOCTYPE html>
<html>
<head lang="en">
    <title>Angularjs Spring-boot example</title>
    <script src="plugin/angular/angular.js"></script>
    <script src="plugin/angular-ui-router/angular-ui-router.min.js"></script>
    <script src="app/js/app.js"></script>
    <script src="app/js/ProductController.js"></script>
    <style>
        .username.ng-valid {
            background-color: lightgreen;
        }
        .username.ng-dirty.ng-invalid-required {
            background-color: red;
        }
      .username.ng-dirty.ng-invalid-minlength {
            background-color: yellow;
        }
        .email.ng-valid {
            background-color: lightgreen;
        }
        .email.ng-dirty.ng-invalid-required {
            background-color: red;
        }
        .email.ng-dirty.ng-invalid-email {
            background-color: yellow;
        }
    </style>
    
    <link rel="stylesheet" href="plugin/bootstrap-3.3.4-css/bootstrap.min.css">
    <link rel="stylesheet" href="app/css/app.css">
</head>
<body ng-app="springApp">
    <div ui-view></div>
</body>
</html>

app.js - AngularJS 設定有關情況及指令

var springApp = angular.module('springApp',['ui.router'])

springApp.config(function($stateProvider, $urlRouterProvider) {

    $urlRouterProvider.otherwise('/home');

    $stateProvider

        .state('home', {

            url: '/home',

            templateUrl: 'app/html/present.html',

            controller:'productController'

        });

});

springApp.directive('ngConfirmClick', [ function() {

    return {

        link : function(scope, element, attr) {

            var msg = attr.ngConfirmClick || "Are you sure?";

            var clickAction = attr.confirmedClick;

            element.bind('click', function(event) {

                if (window.confirm(msg)) {

                    scope.$eval(clickAction)

                }

            });

        }

    };

} ])

present.html - 這是界面與用戶互動畫面。/*** Created by sam8881 on 2016/8/22*<div class="inner"

<div class="generic-container">
             <div class="panel panel-default">
                 <div class="panel-heading"><span class="lead">Car Entry Form </span></div>
                 <div class="formcontainer">
                 <table>
                 <div class="row">
                     <div class="form-group col-md-12">
                         <label class="col-md-2 control-lable" for="Car Make">Car Make</label>
                         <div class="col-md-7">
         <input type="text"  ng-model="car.make" class="form-control input-sm" placeholder="Enter the make of the car."/>
                         </div>
                     </div>
                 </div>
                 <div class="row">
                         <div class="form-group col-md-12">
                             <label class="col-md-2 control-lable" for="Car Model">Car Model</label>
                         <div class="col-md-7">
       <input type="text"   ng-model="car.model" class="form-control input-sm" placeholder="Enter the model of the car. "/>
                         </div>
                         </div>
                 </div>
                 <div class="row">
                         <div class="form-group col-md-12">
                             <label class="col-md-2 control-lable" for="Car Description">Car Description</label>
                             <div class="col-md-7">
 <input type="text"  ng-model="car.description" class="form-control input-sm" placeholder="Enter the description of the car. "/>
                         </div>
                         </div>
                 </div>
                 <div class="row">
                         <div class="form-group col-md-12">
                             <label class="col-md-2 control-lable" for="Year of Car">Year of Car</label>
                             <div class="col-md-7">
                             <input type="text"  value="" ng-model="car.year" class="form-control input-sm" placeholder="Enter the year of the car. "/>
                         </div>
                         </div>
                 </div>
                 <div class="row">
                     <div class="floatRight">
                             <input type="submit" name="submit" class="btn btn-primary btn-sm custom-width" value="Submit" ng-click="save();"/>
                             <input type="submit" name="clear" class="btn btn-warning btn-sm custom-width" value="Clear" ng-click="car = null"/>
                     </div>
                 </div>
                 </table>
             </div>
         </div>
                <div class="panel panel-default">   
                 <div class="formcontainer">
             <form ng-init="acar=null" ng-submit="search(acar)" method="POST">
              <div class="row">
              <div class="form-group col-md-12">
              <label class="col-md-2 control-lable" for="Info">Search Information</label>
              <div class="col-md-7">
 　　　　　　<input type="text"  ng-model="acar" class="form-control input-sm" placeholder="Enter search of the car"/>
           </div>
             </div>
             <div class="floatRight">
             <input type="submit" name="search" class="btn btn-primary btn-sm custom-width" value="Search" />
             <input type="submit" name="clear" class="btn btn-warning btn-sm custom-width" value="Clear" ng-click="acar = null"/>
             </div>
             </div>
             </form>
             </div>
         </div>
             <div class="panel panel-default">
                 <!-- Default panel contents -->
                 <div class="panel-heading"><span class="lead">List of Cars </span></div>
                 <td class="tablecontainer">
                 <table class="table table-hover">
                     <thead>
                         <tr>
                             <th>No</th>
                             <th>Car Make</th>
                             <th>Car Model</th>
                             <th>Description</th>
                             <th>Car of Year</th>
                         </tr>
                     </thead>
                     <tbody>
                         <tr ng-repeat="car in cars">
                             <td>{{$index + 1}}</td>
                             <td>{{car.make}}</td>
                             <td>{{car.model}}</td>
                             <td>{{car.description}}</td>
                             <td>{{car.year}}</td>
                             <td>
                                 <div class="floatRight">
                             <button type="button" ng-click="updateCar(car);" class="btn btn-success custom-width">Edit</button>
                             <button type="button" confirmed-click="deleteCar(car);" ng-confirm-click=" Do you want to delete this car?" class="btn btn-danger custom-width">Delete</button>
                             </div>
                             </td>
                         </tr>
                     </tbody>
                 </table>
                 </td>
             </div>
             </div>
             </div>
 </div>

CarController.js 這是前端程式核心機能，經過運用 $http api，負責和後臺接收及輸送資訊，這樣才能夠和服務器徹底分離開發。前端工做者能夠自由處理畫面上的圖示和表格，只要數據是正確，其餘因素和後端沒有什麼關係。 /** * Created by sam8881 on 2016/8/22 */(function() {

   var productController = function($scope,$http) {
         var getListOfCar = function() {
          var response = $http({
                 method: 'GET',
                 url: "http://localhost:8080/api/getListOfCar"
             }).success(function(data, status, headers, config) {
                 $scope.cars = data;
           }).error(function(err, status, headers, config) {
                 console.log(err);
             });
         }
      $scope.save = function() {
             var response = $http({
                 method: 'POST',
                 url: "http://localhost:8080/api/save",
                 data : $scope.car
             }).success(function(data, status, headers, config) {
                 $scope.car = null;
                 getListOfCar();
             }).error(function(err, status, headers, config) {
                 console.log(err);
             });
         }
         $scope.search = function(acar) {
             var response = $http({
                 method: 'POST',
                 url: "http://localhost:8080/api/search",
                 data:$params=acar,
   }).success(function(data) {
                 $scope.car = data;
                 getListOfCar();
                 console.log(data);
                 console.log("success!");
             }).error(function(err, status, headers, config) {
                 console.log(err);
             });
         }
         $scope.updateCar = function(car) {
             $scope.car = car;
             getListOfCar();
         }
       $scope.deleteCar = function(car) {
             var response = $http({
                 method: 'POST',
                 url: "http://localhost:8080/api/delete",
                 data : car
             }).success(function(data, status, headers, config) {
                 getListOfCar();
             }).error(function(err, status, headers, config) {
                 console.log(err);
             });
         }
       getListOfCar();
    };
 productController.$inject = ['$scope','$http'];
  angular.module('springApp').controller('productController', productController);
}());

注：比較花時間仍是有關 Css, 筆者有點懶，偷偷用了人家的 Css，加以改良一下。

測試

首先要啓動資料庫 MongoDB，建議使用 RoboMongo，容易查詢資料。

打開一個 terminal 或 cmd，cd 到那有cars.dat的目錄裏，準備輸入所提供的資料到MongoDB：

mongoimport -d car_dealer -c cars cars.dat

而後打開 MongoDB，肯定這些汽車資源在庫存。

有了汽車資料，就能夠開始測試了。首先是打開 STS，在右邊選擇了該服務器程式，按右鍵操做：

product-server =>Run As => Spring Boot App 。若是你能夠在 console 裏看到com.emo.product.app 在等候，該服務器正在運做了。有讀者可能問，畫面呢？去了那裏？他可能不記得先後端分離處理的，前臺都沒有開始，那有畫面呢！注：若是不想在 STS/Eclipse 上運行，能夠在 terminal/cmd 進入該 product-server的目錄內，輸入： mvn spring-boot:run 也一樣能夠啓動服務器。

啓動前端更容易，打開那個 car-client 的視窗或 Mac的 finder，在 car-cleint的目錄內（不用在 terminal 內開啓的）選擇了該index.html程式，按右鍵選取瀏覽器（Firefox）操做，如無心外，畫面就出如今你的眼前。

圖5：Spring Boot + Angular UI-Route + Mongodb CRUD學習程式

圖6：輸入S4按 search 鍵

圖7：輸入Honda 按 Submit 鍵來增長

圖8： Honda 汽車資料已保存

一個簡易又清楚的程式開發過程所有顯示了。也可能做爲一個模版做未來的 Web 的開發。因此要處理固然是頁數及搜索的速度。由於如今是全方位的資料庫搜查， MongoDB 是十分紅任的。

若是您以爲本文的內容對您的學習或工做有所幫助，您能夠贊助來支持我，您的認同就是我動力！支付微信在頂部。多少不拘，5元，10元，20元。。。心意而已！

原創，若有轉載，請註明出處！

筆者以往分享的記錄：

jHipster 3.4 建立最流行Java Web應用項目最簡單的入門基本教程

原精PHP5.2.9+MySQL5.6.26+Easyui 1.41開發易貿達出入口公司產品查詢瀏覽表

---恢復內容結束---