目的
该项目主要介绍了使用springboot框架搭建一个简易的登录程序的主要过程。本文的主要目的是介绍搭建一个可以运行的、能够接收用户输入的、可以访问数据库的springboot程序的完整流程,通过这个过程讲解springboot如何接收用户输入的数据、如何访问访问数据库等过程。本文主要面向只有core java基本知识,没有java web开发经验的初学者。
用到的主要工具
intellij idea 编辑器
mysql数据库
chrome浏览器(可以使用其他浏览器代替)
-
Navicat for MySQL
这是一个图形化的mysql数据管理工具
本文不再讲解springboot搭建jsp的过程,不会建立的读者可前往在idea中使用spring boot创建jsp工程学习。
思路
首先在在idea中使用spring boot创建jsp工程建立的工程中创建一个controller,然后在controller中新建一个方法指引到一个jsp页面,再在这个jsp页面中使用bootstrap搭建一个登陆页面,这个登陆页面中将包含一个form,并用form的action制定到前面建立的controller中的另一个方法,这个方法将接受到form提交的数据,并使用接收到的数据与数据库中的数据对比,然后通过对比结果返回登陆成功或登陆失败。
bootstrap是一个前端框架,其实现了一些常用的web样式,简化了开发步骤,提高了开发效率,如按钮、输入框、轮播图等。
实现过程
1、新建controller,接收\login
路径,并跳转到login.jsp页面
文件新建好以后的的结构如图所示
在LoginController
中新建login方法监听\login
请求并跳转到login.jsp
页面
package com.example.controller;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
public class LoginController {
@RequestMapping("/login")
public String login(){
return "login";
}
}
在jsp页面中填充简单html代码,并写入登录页面用于测试。页面中page
标签是jsp的内容,用于设置页面属性。其他标签是html的内容。
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<html>
<head>
</head>
<body>
登录页面
</body>
</html>
然后启动程序测试正确性,在浏览器中输入http://127.0.0.1:8080/login
结果如下图所示,说明该步骤正确
2、使用bootstrap建立基本登录页面
打开bootstrap网站点击起步->基本模板,然后将基本模板页面代码复制到login.jsp
文件中,并添加jsp标签page
设置页面为text/html页面,编码为UTF-8
模板内容为:
<%@page contentType="text/html; charset=UTF-8" language="java" %>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面,任何其他内容都*必须*跟随其后! -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询(media queries)功能 -->
<!-- 警告:通过 file:// 协议(就是直接将 html 页面拖拽到浏览器中)访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
<![endif]-->
</head>
<body>
<h1>你好,世界!</h1>
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery,所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</body>
</html>
在body标签中增加html和css代码,创建登录页面。此处参考boostrap自定义组件中的登录页模板进行编写
点击并打开登录页面,打开开发者工具并跳转到Elements标签,复制其中的代码至login.jsp文件的body标签当中,删除body标签中原来的代码<h1>你好,世界!</h1>
然后重启程序,此时的\login
页面效果如下图所示
该页面有三个地方需要修改
将其中的英文修改成汉语
给class=container的div设置宽度。修改方式是在该div上添加style属性,并在sytle属性内添加width。修改后的div标签头代码如下
<div class="container" style="width: 400px">
调整输入框代码高度,设置方法是给每个
input
标签添加style属性,并在style属性中添加height,为了让input中的文字能够上下居中显示,还需增加line-height,且line-height的值和height的值一致。sytle中多个属性要用分号隔开
调整后的代码如下图所示:
3、提交登录邮箱和密码到controller中
前端代码用html、css和JavaScript代码建立好以后,怎么将用户填写的邮箱和密码发送到controller中以备实现登录验证呢?在前端代码中,我们发现用户输入的两个input
标签和点击的button
标签都被form
标签包裹着,在这个form
标签中可以设置action
属性指定数据提交的地址,在这里我们将数据提交到服务器的\loginAction
地址,修改后的form
标签头如下所示
<form class="form-signin" action="/loginAction">
但Controller是用java实现的,java中每个数据都需要用一个变量保存。所以还需要在login.jsp页面中指定登录邮箱和密码提交到服务器后变量名。指定的方法是给每个input标签添加name属性,并在name属性中指定变量名。这里给第一个input指定为email
,给第二个input指定为password
。
在loginController中添加loginAction方法并用@RequestMapping("loginAction")
注解指定该方法接收\loginAction
的请求,并在在形式参数列表中指定String类型的email
和password
这里的形式参数名字必须和input中指定的名字相同才可接收到参数值。然后在方法中打印email的值和password的值用于测试。最后在返回到login.jsp
页面
@RequestMapping("loginAction")
public String loginAction(String email,String password){
System.out.println(email);
System.out.println(password);
return "login";
}
重启程序并在刷新/login
页面,填写用户名123@qq.com和密码123456后点击登录按钮,若在控制台打印出提交的用户名和密码的值说明该步骤正确。
4、连接数据库
该步骤需要你提前按照好mysql数据库和Navicat管理工具,若无navicate管理工具,在控制台操作数据库也可实现,前提是你必须熟悉mysql的操作。
在pom.xml中添加jdbc和mysql的依赖,让springboot具有连接数据库的能力
<!--jdbc-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<!-- mysql -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<version>5.1.46</version>
</dependency>
在项目配置文件application.properties
中配置数据库连接熟悉
spring.datasource.url=jdbc:mysql://localhost:3306/springtest?serverTimezone=GMT%2B8&useSSL=false
spring.datasource.username=root
spring.datasource.password=1234
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
在配置文件中配置的是连接springtest
数据库所以我们在navicat中建立该数据库
在数据库中新建user表
user表结构如下所示,其中id为bigint类型、主键、自增;email为varchar类型、长度为64位;password为varchar类型、为64位。
然后在表中添加一条数据用于测试
至此,就可以在springboot程序中使用JdbcTempl操作数据库了。为了验证这一步的有效性,我们在loginAction中打印user表中的测试数据
@RequestMapping("loginAction")
public String loginAction(String email,String password){
//sql字符串
String sql = "select email,password from user";
//创建一个map用于动态添加sql查询中的参数,此处不需要添加
Map<String, Object> param = new HashMap<>();
//查询结果
SqlRowSet result = jdbcTemplate.queryForRowSet(sql,param);
//循环输出结果
while (result.next()){
//打印email字段的值
System.out.println(result.getString("email"));
}
return "login";
}
在该代码中使用了jdbcTemplate
变量,该变量是用是spring自动注入进来的,所以我们还需要在LoginController
中创建jdbcTemplate
类属性,并使用@Autowired
自动注入值。
@Autowired
private NamedParameterJdbcTemplate jdbcTemplate;
若能打印出测试数据的值则说明这一步配置正确
5、修改loginAction中的代码,使其能够根据请求的email和password值返回不同的页面
新建一个index.jsp页面,并写入"网站首页",以后后期继续完善。若用户名和密码正确,返回到index.jsp页面,若用户名和密码错误则返回登陆页面。
根据上面的使用逻辑,我们修改loginAction代码如下所示
@RequestMapping("loginAction")
public String loginAction(String email,String password){
//sql字符串,添加where语句用于验证email和password
String sql = "select email,password from user where email=:email and password=:password";
//创建一个map用于动态添加sql查询中的参数,此处不需要添加
Map<String, Object> param = new HashMap<>();
param.put("email",email);
param.put("password",password);
//查询结果
SqlRowSet result = jdbcTemplate.queryForRowSet(sql,param);
//循环输出结果
if (result.next()){
//说明查询结果中有数据,则返回到index.jsp页面
return "index";
}
return "login";
}
在sql字符串中增加email和password的验证,其中以冒号开头的单词将被queryForRowSet方法作为键,然后从param中查找出对应的值并替换进sql语句当中,
这一步较为简单请自行测试。
总结
本文通过搭建一个简陋的登录页面和逻辑处理讲解了springboot搭建页面、处理页面,并连接mysql的一般流程,即controller中添加处理路径的方法并返回到一个jsp页面,然后在jsp页面中编写html代码和css代码并将用户输入提交到另一个路径,最后在编写一个接受提交数据路径的controller方法处理提交的数据。希望你能从中领悟到springboot框架中使用其它依赖的一般方法,即使用组件的时候先在pom.xml中添加依赖,然后在配置文件中配置该依赖的参数,最后使用依赖注入使用该依赖提供的功能。