搭建初始线上项目实现的方法有很多,按照本人接触的,它们关系简单来说就是:数据库——后台服务器——前台展示。
下面从头开始说一种感觉方便简单好用的方法(仅供参考,具体书写的格式及规范遵从实际情况),本文多图,相关的全部代码可在文章末尾处点击 百度网盘 下载。
————————————————————————操作环境如下——————————————————————————
类别 | 名称 | 简介 |
编译器软件 | 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:[[ "处 "["不换行会导致数据读取失败。
最后,看下成功的效果: