Spring cloud實戰 從零開始一個簡單搜索網站(一)
阿新 • • 發佈：2018-12-02
repo start release 不存在 home tex $.ajax 技術 ots 
效果地址http://121.40.36.198:9080/web/
本文從建站開始，就不跟別的順序一樣要怎麽開始開始的，懂java就行 我會盡量講的詳細，
首先肯定是工具的選擇 ，俗話說工欲善其事，必先利其器，Eclipse 和IDEA 都可以集成Spring 插件，不過最好還是用Spring Tool suite ，它有三個版本，看個人喜好，我比較偏向eclipse
安裝完後 第一步 記得把maven 改成阿裏雲的
軟件安裝完後New - Spring start Project 然後填寫 一些東西 ，進入next, 選擇插件
有很多選項 不了解的也不用管 ， 我們這裏先eureka-server 主要是服務註冊 ，點創建後可能會報錯 版本的原理 ，阿裏雲的倉庫可能沒有全部版本
POM中哪個包有紅線可以自己上阿裏雲倉庫看看有沒有存在 不存在當前版本可以自己更換成現有的 http://maven.aliyun.com/mvn/view
POM如下
<?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.xsdView Code"> <modelVersion>4.0.0</modelVersion> <groupId>tsearch_web</groupId> <artifactId>springtest</artifactId> <version>0.0.1</version> <packaging>jar</packaging> <name>springtest</name> <description>Note Server catch</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.1.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> <spring-cloud.version>Greenwich.M3</spring-cloud.version> </properties> <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-eureka-server</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-dependencies</artifactId> <version>Finchley.RELEASE</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> <repositories> <repository> <id>spring-milestones</id> <name>Spring Milestones</name> <url>https://repo.spring.io/milestone</url> <snapshots> <enabled>false</enabled> </snapshots> </repository> </repositories> </project>
這裏需要改下 main/resource裏面的配置 ， 一般有yml 和property兩種格式，看自己喜好， 名字的話 application 和bootstrap , bootstrap啟動優先級比較高，
下面是application.property配置
eureka.client.serviceUrl.defaultZone=http://localhost:8761/eureka/ spring.application.name=search-server server.port=8761 eureka.client.register-with-eureka=false eureka.client.fetch-registry=false
defaultZone Eureka-server的地址, 後面其它客戶端註冊全部需要這個地址
name 服務名稱（Eureka會把名字全映射成大寫，用到的時候需要註意)
server port 當前服務的端口 ， 因為我們建的是server 下面2個參數的意思本身不需要註冊
然後修改我們自己包名下的Application 添加@EnableEurekaServer 標註當前是一個EurekaServer服務端
@EnableEurekaServer
@SpringBootApplication public class SpringtestApplication { public static void main(String[] args) { SpringApplication.run(SpringtestApplication.class, args); } }
Spring 自帶了一個強大的tomcat ， 等你想發布到外部的tomcat的時候 就會發現， 創建項目後 會在這裏顯示， 右鍵啟動 一個server端就創建好了
通過前面設置的 http://localhost:8761 進行訪問
下面我們創建一個Client端， 創建的步驟都一樣 ， 這裏主要選Eureka Server ，Web Freemarker （因為涉及到一些前端的頁面）
同樣先修改 ClientApplication @EnableEurekaClient 註冊生成一個EurekaClient
@EnableEurekaClient @SpringBootApplication public class SpringtestClientApplication { public static void main(String[] args) { SpringApplication.run(SpringtestClientApplication.class, args); } }
POM
<?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"> <modelVersion>4.0.0</modelVersion> <groupId>tsearch_web</groupId> <artifactId>springtest-client</artifactId> <version>0.0.1</version> <packaging>jar</packaging> <name>springtest-client</name> <description>Note Server catch</description> <parent> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-parent</artifactId> <version>2.1.1.RELEASE</version> <relativePath/> <!-- lookup parent from repository --> </parent> <properties> <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding> <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding> <java.version>1.8</java.version> <spring-cloud.version>Greenwich.M3</spring-cloud.version> </properties> <dependencies> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-freemarker</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-web</artifactId> </dependency> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-starter-netflix-eureka-server</artifactId> </dependency> <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-test</artifactId> <scope>test</scope> </dependency> </dependencies> <dependencyManagement> <dependencies> <dependency> <groupId>org.springframework.cloud</groupId> <artifactId>spring-cloud-dependencies</artifactId> <version>Finchley.RELEASE</version> <type>pom</type> <scope>import</scope> </dependency> </dependencies> </dependencyManagement> <build> <plugins> <plugin> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-maven-plugin</artifactId> </plugin> </plugins> </build> <repositories> <repository> <id>spring-milestones</id> <name>Spring Milestones</name> <url>https://repo.spring.io/milestone</url> <snapshots> <enabled>false</enabled> </snapshots> </repository> </repositories> </project>View Code
Application.Properties
eureka.client.serviceUrl.defaultZone=http://localhost:8761/eureka/
spring.application.name=client
server.port=8881
在左下角點啟動 然後點開 http://localhost:8761/ 會發現instance current 裏面多了當前的eureka client
下面新建一個Controll ( Spring 默認掃描的是當前包下的)
Controll有兩種 一種是Controll 能跳轉到頁面 一種ResController 直接返回數據
@RestController public class ClientController { @RequestMapping(value ="/hello") public String openSearch() { return "hello"; } }
這裏 @RequestMapping(value ="/hello") 表示的是URI 問好前面的地址 這裏直接打開http://localhost:8881/hello 能看到返回的字符串
如果想添加參數 可以直接加 @PathVariable long barid 或者@RequestParam("name") String name
都需要寫 要嫌麻煩直接暴力點 拿request
@RequestMapping(value ="/hello") public String openSearch(HttpServletRequest request) { return "hello"; }
下面要弄一個前端頁面 先建一個Controller 不是ResController
@Controller
public class WebController {
@RequestMapping(value ="/")
public String home() {
return "index";
}
}
我們這裏用的是freemaker,可以直接在resource/temple 下面新建一個後綴為ftl 或者html都行 名字對應上面的index 我這裏叫index.ftl
編輯HTML 推薦用Hbuider 可以編改變看 直接附上前臺代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .searchBtn{ background-color:#38f; color:#fff; font-size: 16px; padding-top: 0px; width: 80px; height: 34px; vertical-align: middle; padding: 0; border: 0; } .searchBtn:hover { background-color: #3171f3; } .searchBtn:active { background-color: #2964bb; } .searchSpan{ padding-left: 10px; padding-right: 10px; margin-top: 0px; margin-bottom: 0px; border-color: #b8b8b8; width: 40%; vertical-align: middle; display: inline-block; height: 34px; border: 1px solid #b6b6b6; } .searchText{ font-size: 16px; width: 100%; margin-top: 5px; outline: 0; border: 0; } dt{ margin: 0px; padding: 0px; font-size: 16px; color: #303030; line-height: 24px; margin-top: 20px; } dd{ margin: 0px; padding: 0px; font-size: 14px; line-height: 22px; color: #999999; } a{ text-decoration: none; } .contentDiv{ width: 800px; text-align: left; padding-bottom: 30px; } .contentDiv em{ color: #CA0C16; font-style:normal; } .nextdiv{ width: 50px; height: 50px; position: relative; } .next a:visited { text-decoration: none; color: #9B8878; } </style> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script> <script > String.prototype.replaceAll = function(s1,s2){ return this.replace(new RegExp(s1,"gm"),s2); } $(document).ready(function(){ var width =$(window).width(); if(width<900){ $(".searchSpan").css("width","50%") $(".searchBtn").css("width","20%") $("#contentDiv").css("width","80%") } else{ $(".searchSpan").css("width","600px") $("#contentDiv").css("width","800px") $(".searchBtn").css("width","80px") $(".searchSpan").css("margin-left","-85px") } $(‘.searchText‘).bind(‘keydown‘,function(event){ if(event.keyCode == "13") { openSearch(0); } }); }); function openSearch(state){ if(state!=null){ $("#contentDiv").html(""); } isLoad = true; $.ajax({ type: "GET", url: "hello", data: {"key":$("#searchText").val()}, dataType: "text", success: function(data){ alert(data); } }); } </script> </head> <body > <div align="center" style="margin-top: 30px;font-size: 24px;margin-left: -50px;" >博客搜</div> <div align="center" style="margin-top: 20px;" > <span class="searchSpan"> <input type="text" id="searchText" value="spring" class="searchText" /></span> <input type="submit" value="Search" id="su" class="searchBtn" onclick="openSearch(0)" ></input> </div> <div align="center"> <div id="contentDiv" class="contentDiv" ></div> </div> </body> </html>View Code
別看只有一個簡單的搜索框 弄了好久 好了 在瀏覽器 再次輸入http://localhost:8881/ 可以看到一個類似某某搜索的
修改下Controller
@RestController
public class ClientController {
@RequestMapping(value ="/hello")
public String openSearch(@RequestParam("key") String key) {
return "hello "+key;
}
}
Spring cloud實戰 從零開始一個簡單搜索網站(一)