搭建初始線上項目實現的方法有很多,關係簡單來說就是:數據庫——後臺服務器——前臺展示。
下面從頭開始說一種感覺方便簡單好用的方法(僅供參考,具體書寫的格式及規範遵從實際情況),本文多圖,相關的全部代碼可在文章末尾處點擊 百度網盤 下載。
————————————————————————操作環境如下——————————————————————————
類別 | 名稱 | 簡介 |
編譯器軟件 | IDEA | Java編程語言開發的集成環境 |
框架 | Springboot+Mybatis-plus | 開源的輕量級框架 |
Jar包管理 | maven | 可通過小段描述信息來管理項目的構建 |
數據庫 | mysql | 關係型數據庫管理系統 |
數據庫管理 | navicat | 快速、可靠的數據庫管理工具 |
前端框架 | Layui | 採用自身模塊規範編寫的前端 UI 框架 |
想要達成的目標:
後臺數據庫取數據——封裝成JSON——前端接收數據——在表格中顯示。
————————————————————————實際操作———————————————————————————
一、新建項目:
打開IDEA軟件,點擊 Create New Project 新建項目,如下圖所示
左側導航選擇 Maven,之後點擊 Next,進行下一步,如下圖所示
輸入相關信息,其中:
- GroupId 定義項目屬於哪個組,例如:公司是 demo,即 GroupIdy 應該是 com.demo;再加一級項目爲 test,即 GroupIdy 應該是 com.demo.test。
- ArtifactId 定義項目組中唯一 ID,例如:test 等。
- Version 定義了項目當前版本,SNAPSHOT 意思爲快照,例如:1.0-SNAPSHOT。
輸入完成後,點擊Next進行下一步,如下圖所示:
輸入相關信息,其中,Project name 爲項目名稱,Project location爲項目存放路徑,輸入完成後,點擊Finish,如下圖所示:
由此,可以得到一個空的Maven項目,如下圖所示:
二、完善依賴:
爲了減少篇幅,將所有需要的依賴都放在了一起,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>com.table.data</groupId>
<artifactId>data</artifactId>
<version>1.0-SNAPSHOT</version>
<!--設置spring boot的parent,這樣當前的項目就是Spring Boot項目了,使用它之後,常用的包依賴可以省去version標籤-->
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.0.5.RELEASE</version>
</parent>
<!-- 設置項目編碼格式及聲明JDK版本 -->
<properties>
<project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
<project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
<java.version>1.8</java.version>
</properties>
<!--依賴-->
<dependencies>
<!--對全棧web開發的支持, 包括Tomcat和spring-webmvc-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<!--引入mybatis-plus,MyBatis的增強工具-->
<dependency>
<groupId>com.baomidou</groupId>
<artifactId>mybatis-plus-boot-starter</artifactId>
<version>3.0.3</version>
</dependency>
<!--引入mysql數據庫驅動-->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
<!--引入thymeleaf頁面模板-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<!--比較喜歡這個,創建bean的時候不用寫getter/setter/toString-->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
<optional>true</optional>
</dependency>
<!-- 引入fastjson,JSON轉換時使用 -->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>fastjson</artifactId>
<version>1.2.9</version>
</dependency>
</dependencies>
<build>
<plugins>
<!--Spring boot的插件,導出成jar、war包時需要-->
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>
爲了達成目標,所需的依賴如上述內容,但有以下幾點需要說下:
- idea的maven下載包的速度太慢了。。替換成國內阿里maven庫的話,會快很多,具體操作如下:
- 找到IDEA安裝目錄,在plugins-maven-lib-maven3-conf中找到settings.xml配置文件,路徑如下圖所示:
- 查找到 <mirror> 標籤,替換標籤內容,若IDEA存在C盤的話,修改後不讓保存,可先將文件複製到桌面,修改好後再替換回來,需替換的文字
<mirror> <id>alimaven</id> <mirrorOf>central</mirrorOf> <name>aliyun maven</name> <url>http://maven.aliyun.com/nexus/content/groups/public/</url> </mirror>
- 之後重啓IDEA就可以啦。
- MyBatis-plus是一個好東西,它有代碼生成器、CRUD接口、條件構造器、分頁插件等很多核心功能,能幫助我們寫代碼,更快更方面的開發。本次目標涉及不到太多的東西,因此並沒有展示全,有興趣的可以到 MyBatis-plus 詳細的瞭解下。
核心功能。
-
Thymeleaf是現代化服務器端的Java模板引擎,依賴中加入它,HTML頁面可以通過指定標籤實現像JSP頁面一樣,讓前端頁面模板接收後端傳過來的數據,本次測試僅用到其可以讓啓動時默認跳轉指定頁面,感興趣的可以到百度或取去官網瞭解下。
-
IDEA有很多使用的插件,結合插件會方便開發,如上述文件中依賴的 lombok ,有了它實體類就不需要寫 getter/setter方法。
三、完善目錄結構:
本次測試的目錄結構如下圖(實際目錄結構根據實際情況決定):
目錄結構的說明如下:
四、創建數據庫表及測試數據:
本次使用的是 mysql5.7,確保安裝完成,並記住登錄用的賬號名及密碼後,打開 Navicat 軟件,如下圖所示:
點擊右上角的連接,選擇 Mysql,如下圖所示:
在輸入框中輸入對應信息,其中連接名起名無限制,主機名或IP地址中的 localhost意思爲本機,用戶名和密碼爲mysql數據庫安裝時數據庫的賬號密碼,輸入完成後建議點擊彈窗左下角的連接測試,顯示連接成功即成功連接數據庫,如下圖所示:
雙擊打開連接,右擊連接名,選擇新建數據庫,如下圖所示:
輸入數據庫名,選定字符集及排序規則,排序規則不選默認的話,varchar類型是對大小寫不區分,圖中的 utf8_bin 是將字符串中的每一個字符用二進制數據存儲,並區分大小寫的,具體如下圖所示:
數據庫創建完成後,右擊創建表,如下圖所示:
新建一張簡單的用戶表,如下圖所示:
在新建的表中添加一些測試數據,如圖所示,至此,數據庫準備工作結束:
五、完善後端代碼:
application.yml配置文件可根據真實情況更改配置,具體如下所示:
#服務器配置
server:
#默認端口號
port: 8088
#tomcat服務器傳輸參數時的字符編碼,不注意的話會導致中文亂碼
tomcat.uri-encoding: UTF-8
#配置spring數據源
spring:
# 配置連接信息默認連接池
datasource:
#數據庫連接地址,解釋爲:JDBC以Mysql的方式進行連接,IP地址爲本地,端口號爲3306,數據庫爲test,使用Unicode字符集,字符集編碼爲utf-8,不進行SSL連接
url: jdbc:mysql://localhost:3306/test?useUnicode=true&characterEncoding=utf-8&useSSL=false
#數據庫用戶名
username: root
#數據庫用戶密碼
password: 123456
#數據庫驅動
driver-class-name: com.mysql.jdbc.Driver
#配置hikari連接池
hikari:
#從連接池中獲取的連接是否默認處於只讀模式:否
read-only: false
#等待來自連接池的連接的毫秒數爲60000,即60秒
connection-timeout: 60000
#連接允許在池中閒置的毫秒數爲60000,即60秒
idle-timeout: 60000
#連接池中最長生命週期
max-lifetime: 3000
#指定連接數據庫的超時時間
login-timeout: 500
#連接池中最大連接數
maximum-pool-size: 60
#連接池中維護的最小連接數
minimum-idle: 10
# 配置靜態資源地址
resources:
#靜態資源默認目錄,此出配置指向resources文件夾
static-locations: classpath:/
# 配置模板引擎
thymeleaf:
# 指定文件默認目錄
prefix: classpath:/templates/
# 指定文件尾綴
suffix: .html
# 是否開啓緩存
cache: false
# 字符集編碼
encoding: UTF-8
#mybatis plus映射文件的地址
mybatis-plus:
#設置掃描.xml文件的存放目錄
mapper-locations: classpath*:/mapper/**/*.xml
#設置掃描實體bean目錄
typeAliasesPackage: com.test.demo.pojo
編寫項目啓動類代碼,如下所示:
package com.test.demo;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.boot.builder.SpringApplicationBuilder;
import org.springframework.boot.web.servlet.support.SpringBootServletInitializer;
/**
* spring boot 啓動
* extends SpringBootServletInitializer 爲了部署到Tomcat
*
* SpringBootApplication標籤是Sprnig Boot項目的核心註解,目的是開啓自動配置
*/
@SpringBootApplication
public class Application extends SpringBootServletInitializer {
public static void main(String[] args) {
SpringApplication.run(Application.class, args);
}
/**
* 用於打WAR包
* @param builder
* @return
*/
@Override
protected SpringApplicationBuilder configure(SpringApplicationBuilder builder) {
return builder.sources(Application.class);
}
}
編寫完啓動代碼後,就可以運行Application啓動類代碼中的main函數啓動項目了,直接啓動後,如圖所示:
由於我們沒有編寫頁面,所以網頁上會報404找不到頁面。依靠Thymeleaf及上述配置文件中的設置,僅需在templates文件中創建一個名爲index的html頁面即可,頁面內容如下所示:
此時,再重新啓動項目,在瀏覽器的地址欄上輸入 http://localhost:8088/,即可得到如下頁面信息:
此時,項目啓動完美成功,下面,繼續編寫後端代碼獲取數據庫數據並轉成JSON。
在 pojo 文件夾中創建實體 bean,取名爲 TUser,類的屬性名要和數據庫中對應表的屬性名一致。由於依賴導入了lombok,無須寫 getter/setter方法,但需要加上@Data註解,否則是需要寫的,代碼如下圖所示:
接下來在 Mapper 文件夾中創建接口文件,取得的數據可用實體Bean或Map兩種方式取得,具體使用情況根據實際情況決定,代碼如下:
對應的,在resources下的mapper文件夾下新建xml文件,具體內容如下所示:
接下來,寫業務層,一般情況下業務層可以進行一些複雜的操作,本次僅展示取數據庫中的數據,具體代碼如下所示:
上述 Service 業務層中使用了 ResqUtil 類中的方法,這個類是我自定義的,方便返回帶數據的前端傳參格式,具體代碼如下,使用時可根據實際情況修改:
後端代碼的最後一步,編寫Controller控制層代碼,具體如下:
至此,後端代碼創建完成,測試下,啓動項目,並在瀏覽器上訪問 http://localhost:8088/user/userBean,得到的結果如下圖所示:
六、完善前端代碼:
首先,需要先準備好Layui所需的文件。前往Layui官網,點擊頁面中的 立即下載,如下圖所示:
將下載後的壓縮包中的 layui文件夾放置到項目中的 resources的目錄下,詳情見上述第三步驟的路徑結構。準備完成後,在index.html增加表格,具體代碼如下:
上述代碼有一點需要注意,由於使用了thymeleaf模板,解析後臺傳過來的JSON,"cols:[[ "處 "["不換行會導致數據讀取失敗。
最後,看下成功的效果:
至此,全文結束。
全部的示例代碼,可在百度網盤下載,相關的數據庫 sql 在 resources 目錄下的 sql 文件下中。