Project series directory:
Table of contents
1. Design of login information database
3. Configuration file, jar package import
The version numbers are as follows:
The code to import the Jar package is as follows:
Add the following code to the web.xml file:
The structure of the web.xml file is as follows:
Edit the code to be added in the applicationContext.xml configuration file:
Fourth, create the class files used
The specific code of DB.class is as follows:
The specific code of LoginService.class is as follows:
The specific code of LoginController.class is as follows:
The specific code of UserDao.class is as follows:
"Follow-up content is being continuously updated! ! ! "
foreword
What we are going to do in this tutorial is to log in to the interface and realize the account and password login function. We use the database method to realize the login function.
The design diagram of the login interface login is as follows (you can design it yourself, I made it ugly):
1. Design of login information database
Use Navicat Premium 15 to create a database -- the name is study. Create a table called t_user.
The fields of the table are as follows:
Notice:
1. The id field is the primary key and cannot be empty. Auto-increment must be checked! ! !
2. The character set of the name and pass fields is utf8mb4.
3. The default value of the WhetherDelete field is 0! ! ! , don't forget the following notes.
Fill in part of the information in the table, I wrote it as shown in the picture below (you can play it freely!):
The simple design of the database is over here, and we enter the design of the login interface.
2. Design of login interface
First, we need to create a login.html file and an images folder (for storing background images, logos, etc.), the path is src--main--resources. As shown below:
Note: If you want to use the pictures in my images, you can download them in my resources! Or contact me, I will email you!
The design of login.html is very simple, and it can be realized by using a simple form form. The code is pasted directly here.
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>3. Configuration file, jar package import
Import the jar package in the pom.xml file. (Mysql's jar package has been imported successfully before, so I won't write it here).
Before importing, prepend the following versions.
The version numbers are as follows:
<properties>
<spring.version>5.3.8</spring.version>
</properties>The code to import the Jar package is as follows:
<!--导入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>Wait until the jar package is imported successfully. A configuration file --applicationContext.xml needs to be created.
Add the following code to the web.xml file:
<!--加载容器-->
<!-- 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>The structure of the web.xml file is as follows:
The code to be added in the applicationContext.xml configuration file:
<!--扫描枪-->
<!-- 扫描 类、方法、属性上的注解-->
<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/>Fourth, create the class files used
Create three folders of db, login, and user under src--main--Java--com--study, and create corresponding classes respectively:
Create the UserDao class under the user package.
Create a DB class under the db package.
Create LoginService and LoginController classes under the login package.
The specific structure of the created class is as follows:
Paste the code in the specific class as follows:
The specific code of DB.class is as follows:
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);
}
}The specific code of LoginService.class is as follows:
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;
}
}
The specific code of LoginController.class is as follows:
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";
}
}
}
The specific code of UserDao.class is as follows:
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;
}
}
According to all the above codes, the login function can be realized. As you can see in the code, after we log in successfully, we need to enter the main.html interface. Therefore, we need to create another mian.html file to display and design the main interface.
Main.html and login.html can be created in the same directory. I wrote a very simple title here first.
The code of main.html is as follows:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主界面</title>
</head>
<body>
<h1>这里是主界面！</h1>
</body>
</html>At this point, the login function has been completed and can run correctly! ! We will continue to write the content of the project in the next issue. Thanks for watching! ! !
"Follow-up content is being continuously updated! ! ! "
Please bookmark and follow to not get lost! ! !