天天看點

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

Spring Boot 介紹

我們先用1分鐘簡單了解一下Spring Boot。

百科給的定義是:Spring Boot是由Pivotal團隊提供的全新架構,其設計目的是用來簡化新Spring應用的初始搭建以及開發過程。該架構使用了特定的方式來進行配置,進而使開發人員不再需要定義樣闆化的配置。通過這種方式,Spring Boot緻力于在蓬勃發展的快速應用開發領域(rapid application development)成為上司者。

特點:

1. 建立獨立的Spring應用程式

2. 嵌入的Tomcat,無需部署WAR檔案

3. 簡化Maven配置

4. 自動配置Spring

5. 提供生産就緒型功能,如名額,健康檢查和外部配置

6. 絕對沒有代碼生成并且對XML也沒有配置要求 [1]

說了一分鐘廢話了,下面用九分鐘說一下springboot的基本使用。

一、生成springboot項目并提供接口

1.通路start.spring.io 輸入包名項目名,添加基本依賴web (選Full stack web...) 生成工程

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

2.導入工程将下載下傳後的項目解壓

使用idea/eclipse的導入 import -> exist maven project. IEDA下是自帶maven插件的,eclipse的話得自己配置一下。自己配置的方法也很簡單,此處不做介紹

3.編寫接口

建包controller,寫TestRestController類

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

4.啟動項目

行主類:項目名+Application的main方法

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

前台輸入:localhost:8080/test即可顯示:call success!

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫
總結:沒錯,第一個springboot的demo就這麼完成了。是不是很6很簡單很暴力。分分鐘我們就開發了一個項目,提供了一個接口。别人也可以通過通路這個接口擷取到我們提供的資料了。比起之前的springmvc項目開始前的還需要配置各種xml的是不是爽多了。

二、springboot通路html頁面

1.springboot推薦前台使用thymeleaf模闆

pom.xml檔案中引入thymeleaf依賴:

(ps通過: mvnrepository.com 或 search.maven.org 可以找到所需依賴的dependency)

org.springframework.boot

spring-boot-starter-thymeleaf

2.在自帶的application.properties中對thymeleaf進行配置

### server config

server.ip=192.168.0.77

server.port=8080

server.servlet.context-path: /sbDemo

### themeleaf

spring.thymeleaf.prefix=classpath:/templates/pages/

spring.thymeleaf.suffix=.html

spring.thymeleaf.mode=HTML5

spring.thymeleaf.encoding=UTF-8

spring.thymeleaf.content-type=text/html

spring.thymeleaf.cache=false

3.背景與html互動

controller類

在Controller寫前往html的接口,并提供資料

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

寫前台hello.html

接收并顯示資料。thymeleaf的用法跟jsp差不多。能完成所有jsp能完成的事

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

通路接口後前台顯示:通路路徑為 192.168.0.77:8080/sbDemo/hello

注:路徑前面對應你的配置檔案application.properties中server的ip,port,context-path.

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

補充:html中需要引用css與js檔案時,如果css和js不是直接在static下,而是在static下的檔案夾中。在背景需要配置對靜态資源的引用,否則通路不到資源檔案。添加配置後,html中就可以用@{...}來引用static下的js/css/img等資源。當然,如果你隻提供接口提供資料不涉及頁面的話就不需要這些了。

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

前台引用如圖:

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

三、springboot通路資料庫

1.pom.xml中引入相關資料庫如mysql驅動依賴和mybatis依賴:

mysql

mysql-connector-java

org.springframework.boot

spring-boot-starter-jdbc

org.mybatis.spring.boot

mybatis-spring-boot-starter

1.1.1

引入資料庫依賴後,在application.properties中配置資料庫連接配接

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

2.編寫Dao層從資料庫擷取資料,并測試

建庫後,插入表資料sql:

DROP TABLE IF EXISTS `users`;

CREATE TABLE `users` (

`id` int(11) NOT NULL AUTO_INCREMENT,

`name` varchar(40) DEFAULT NULL,

`age` int(11) DEFAULT NULL,

PRIMARY KEY (`id`)

) ENGINE=InnoDB AUTO_INCREMENT=3 DEFAULT CHARSET=utf8;

-- ----------------------------

-- Records of users

-- ----------------------------

INSERT INTO `users` VALUES ('1', '東邪', '41');

INSERT INTO `users` VALUES ('2', '吸毒', '42');

建立dao層擷取表資料,類中引用Mapper注解即可。(當然,也可以選擇用mapper.xml檔案的形式,此處不介紹。)

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

測試類測試能不能擷取到資料,用自帶的src/test/java即可:

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

測試成功結果如下:

springboot html引入js_十分鐘帶你掌握springboot微服務架構的基本使用Spring Boot 介紹一、生成springboot項目并提供接口二、springboot通路html頁面三、springboot通路資料庫

這時候就可以寫controller、service、dao層的調用關系了。

此時,前台的資料就可以顯示為從資料庫擷取的資料了。

繼續閱讀