项目系列目录：
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（一）
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（二）
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（三）
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（四）
手把手叫你学会利用Spring框架编写基本的【学生信息管理系统】（五）
目录
编辑 applicationContext.xml配置文件中所要添加的代码：
前言
本期教程我们要做的是登陆界面以及实现账号密码登录功能，我们采用数据库的方式进行登录功能的实现。
登陆界面login的设计图如下所示（可以自行设计，我做的比较丑）：
一、登录信息数据库的设计
采用Navicat Premium 15创建数据库--名字为study。创建表名为t_user。
表的各个字段为如下所示：
注意：
1、id字段为主键、并且不能为空、自动递增一定要勾选！！！
2、name、pass字段的字符集为utf8mb4。
3、WhetherDelete字段的默认值为0！！！，后面的注释不要忘了。
表中的信息填写一部分，我写的如下图所示（可以自由发挥！）：
到这里数据库简单的设计就结束了，我们进入到login界面的设计。
二、登陆界面的设计
首先，我们需要创建login.html文件和images文件夹（用于存放背景图、logo等），路径为src--main--resources 。如下图所示：
注：如果想使用我的images里的图片的话，可以到我的资源里下载！或者联系我，我发邮箱给你！
login.html设计就非常的简单了，利用简单的form表单就可以实现。这里就直接贴代码了。
login.html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>spring学习系统</title>
<style>
html body{
width: 100%;
height: 100%;
margin: 0px ;
padding: 0px;
background-image: url("images/background.jpg");
background-repeat: no-repeat;
background-size: 100%;
}
.top{
height:30% ;
background-image: url("images/logo.png");
background-repeat: no-repeat;
background-position: 580px 120px;
}
.middle{
height:70%;
}
.login{
width: 100%;
height: 100%;
background: white;
opacity: 0.8;
border: 0px solid red;
border-radius: 15px;
}
.user{
width: 50%;
margin-right: 25%;
margin-left: 25%;
margin-top: 50px;
height: 40px;
font-size: 18px;
color: black;
background-image: url("images/user.png");
background-repeat: no-repeat;
background-position: 4px 10px;
padding-left: 30px;
}
.pass{
width: 50%;
margin-right: 25%;
margin-left: 25%;
margin-top: 50px;
height: 40px;
font-size: 18px;
color: black;
background-image: url("images/pass.png");
background-repeat: no-repeat;
background-position: 4px 10px;
padding-left: 30px;
}
.loginbutton{
width: 285px;
margin-right: 25%;
margin-left: 25%;
margin-top: 50px;
background-color: royalblue;
color: white;
font-size: 18px;
height: 45px;
border:0;
box-sizing: content-box;
border-radius: 5px;
}
button:hover{
background-color: #008df6;
}
span{
margin-left: 210px;
}
</style>
<script>
function login() {
// loginForm.name.value 取loginForm表单下的id为name的元素的值
loginForm.submit();
}
</script>
</head>
<body>
<div class="top" ></div>
<div class="middle">
<table border="0" style="width: 30%;height: 60%;margin: 0px auto;" cellspacing="0px" cellpadding="0px">
<tr>
<td>
<div class="login">
<form id="loginForm" action="main.html" method="post">
<span style="color: #0a5495;font-size:35px;font-weight: bold;">账号登录</span>
<input class="user" name="name" id="name" placeholder="请输入账号/邮箱">
<input class="pass" type="password" name="pass" id="pass" placeholder="请输入密码">
<input class="loginbutton" type="button" value="登 录" onclick="login()">
</form>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>三、配置文件、jar包导入
在pom.xml文件中导入jar包。（Mysql的jar包在之前已经导入成功了，这里就不写了）。
在导入之前，提前加入以下版本。
版本号如下：
<properties>
<spring.version>5.3.8</spring.version>
</properties>导入Jar包代码如下：
<!--导入Spring jar包-->
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-core</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-context</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-beans</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-expression</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-web</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-jdbc</artifactId>
<version>${spring.version}</version>
</dependency>
<dependency>
<groupId>org.springframework</groupId>
<artifactId>spring-webmvc</artifactId>
<version>${spring.version}</version>
</dependency>
<!--阿里巴巴的druid-->
<dependency>
<groupId>com.alibaba</groupId>
<artifactId>druid</artifactId>
<version>1.1.9</version>
</dependency>等待jar包导入成功之后。需要创建配置文件 --applicationContext.xml。
在web.xml文件中加入以下代码：
<!--加载容器-->
<!-- spring上下文配置文件参数 -->
<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</context-param>
<!-- context参数监听器 -->
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<!-- Spring MVC分发器的注册，也是入口 -->
<servlet>
<servlet-name>mvc</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<init-param>
<param-name>contextConfigLocation</param-name>
<param-value>classpath:applicationContext.xml</param-value>
</init-param>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>mvc</servlet-name>
<url-pattern>*.do</url-pattern>
</servlet-mapping>web.xml文件的结构如下：
applicationContext.xml配置文件中所要添加的代码：
<!--扫描枪-->
<!-- 扫描 类、方法、属性上的注解-->
<context:component-scan base-package="com.study"/>
<!--druid数据源-->
<bean id="dataSource" class="com.alibaba.druid.pool.DruidDataSource">
<!-- 驱动 -->
<property name="driverClassName"
value="com.mysql.jdbc.Driver"/>
<property name="url"
value="jdbc:mysql://localhost:3306/jisuanji1"/>
<property name="username" value="root"/>
<property name="password" value="admin"/>
</bean>
<!--开启spring MVC的扫描注解-->
<!--配置spring mvc-->
<!-- 开启Spring MVC的注解-->
<!-- MVC注解开启<mvc:annotation-driven>会自动注册
RequestMappingHandlerMapping与RequestMappingHandlerAdapter两个Bean,
这是Spring MVC为@Controller分发请求所必需的，并且提供了数据绑定支持，
@NumberFormatannotation支持，@DateTimeFormat支持,
@Valid支持读写XML的支持（JAXB）和读写JSON的支持（默认Jackson）等功能。-->
<mvc:annotation-driven/>四、创建所用类文件
在src--main--Java--com--study下创建db、login、user三个文件夹，分别创建相对应的类：
user包下创建UserDao类。
db包下创建DB类。
login包下创建LoginService、LoginController类。
创建类的具体结构如下：
以下分别将具体的类中的代码粘贴如下：
DB.class具体代码如下：
package com.study.db;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;
import javax.activation.DataSource;
@Component
public class DB {
@Autowired
private DataSource dataSource ;
public JdbcTemplate getTem(){
return new JdbcTemplate((javax.sql.DataSource) dataSource);
}
}LoginService.class具体代码如下：
package com.study.login;
import com.study.user.UserDao;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
@Service
public class LoginService {
@Autowired
UserDao userDao;
public boolean login(String name, String pass) {
boolean re = false;
re = userDao.login(name, pass);
return re;
}
}
LoginController.class具体代码如下：
package com.study.login;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
@Controller
@RequestMapping("/login")
public class LoginController {
@Autowired
LoginService loginService;
@RequestMapping("login.do")
public String login(String name,String pass) {
boolean login = loginService.login(name, pass);
if (login) {
//登录页面
return "/main.html";
} else {
return "/login.html";
}
}
}
UserDao.class具体代码如下：
package com.study.user;
import com.study.db.DB;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.stereotype.Component;
import java.util.List;
import java.util.Map;
@Component
public class UserDao {
@Autowired
private DB db;
public boolean login(String name, String pass) {
boolean re = false;
String sql = "select * from study.t_user where name='"+name+"' and pass='"+pass+"'";
JdbcTemplate tem = db.getTem();
List<Map<String, Object>> list = tem.queryForList(sql);
if(list.size()>0){
re = true;
}
return re;
}
}
根据以上的所有代码已经可以实现登录功能的实现。在代码中可以看到，我们登录成功之后，需要进入到main.html界面中去。所以，我们需要再创建一个mian.html文件来进行编写主界面的功能展示及设计。
main.html和login.html创建的位置是同一目录下就可以。我这里就先写了个很简单的标题。
main.html的代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主界面</title>
</head>
<body>
<h1>这里是主界面！</h1>
</body>
</html>到这里，登录功能已经完成了，并且可以正确的运行！！我们下期继续编写项目内容。谢谢观看！！！
《后续内容持续更新中！！！》
麻烦点个收藏点个关注不迷路！！！