Directorio de series de proyectos:
Tabla de contenido
1. Diseño de la base de datos de información de inicio de sesión
2. Diseño de la interfaz de inicio de sesión
3. Archivo de configuración, importación de paquetes jar
Los números de versión son los siguientes:
El código para importar el paquete Jar es el siguiente:
Agregue el siguiente código al archivo web.xml:
La estructura del archivo web.xml es la siguiente:
Edite el código que se agregará en el archivo de configuración applicationContext.xml:
Cuarto, cree los archivos de clase utilizados
El código específico de DB.class es el siguiente:
El código específico de LoginService.class es el siguiente:
El código específico de LoginController.class es el siguiente:
El código específico de UserDao.class es el siguiente:
"¡El contenido de seguimiento se actualiza continuamente! ! ! "
prefacio
Lo que vamos a hacer en este tutorial es iniciar sesión en la interfaz y realizar la función de inicio de sesión con cuenta y contraseña. Usamos el método de la base de datos para realizar la función de inicio de sesión.
El diagrama de diseño de la interfaz de inicio de sesión es el siguiente (puede diseñarlo usted mismo, lo hice feo):
1. Diseño de la base de datos de información de inicio de sesión
Use Navicat Premium 15 para crear una base de datos: el nombre es estudio. Cree una tabla llamada t_user.
Los campos de la tabla son los siguientes:
Aviso:
1. El campo id es la clave principal y no puede estar vacío. ¡Se debe marcar el incremento automático! ! !
2. El conjunto de caracteres de los campos de nombre y contraseña es utf8mb4.
3. ¡El valor predeterminado del campo Si eliminar es 0! ! ! , no olvide las siguientes notas.
Complete parte de la información en la tabla, la escribí como se muestra en la imagen a continuación (¡puede jugarla libremente!):
El diseño simple de la base de datos está aquí, y entramos en el diseño de la interfaz de inicio de sesión.
2. Diseño de la interfaz de inicio de sesión
Primero, necesitamos crear un archivo login.html y una carpeta de imágenes (para almacenar imágenes de fondo, logotipos, etc.), la ruta es src--main--resources. Como se muestra abajo:
Nota: ¡Si desea utilizar las imágenes en mis imágenes, puede descargarlas en mis recursos! O ponte en contacto conmigo, ¡te enviaré un correo electrónico!
El diseño de login.html es muy simple y se puede realizar utilizando un formulario de formulario simple. El código se pega directamente aquí.
iniciar sesión.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. Archivo de configuración, importación de paquetes jar
Importe el paquete jar en el archivo pom.xml. (El paquete jar de Mysql se ha importado con éxito anteriormente, por lo que no lo escribiré aquí).
Antes de importar, anteponga las siguientes versiones.
Los números de versión son los siguientes:
<properties>
<spring.version>5.3.8</spring.version>
</properties>El código para importar el paquete Jar es el siguiente:
<!--导入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>Espere hasta que el paquete jar se importe correctamente. Se debe crear un archivo de configuración --applicationContext.xml.
Agregue el siguiente código al archivo 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>La estructura del archivo web.xml es la siguiente:
El código que se agregará en el archivo de configuración 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/>Cuarto, cree los archivos de clase utilizados
Cree tres carpetas de base de datos, inicio de sesión y usuario en src--main--Java--com--study, y cree las clases correspondientes respectivamente:
Cree la clase UserDao en el paquete de usuario.
Cree una clase de base de datos en el paquete db.
Cree las clases LoginService y LoginController en el paquete de inicio de sesión.
La estructura específica de la clase creada es la siguiente:
Pegue el código en la clase específica de la siguiente manera:
El código específico de DB.class es el siguiente:
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);
}
}El código específico de LoginService.class es el siguiente:
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;
}
}
El código específico de LoginController.class es el siguiente:
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";
}
}
}
El código específico de UserDao.class es el siguiente:
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;
}
}
De acuerdo con todos los códigos anteriores, se puede realizar la función de inicio de sesión. Como puede ver en el código, después de iniciar sesión correctamente, debemos ingresar a la interfaz main.html. Por lo tanto, necesitamos crear otro archivo mian.html para mostrar y diseñar la interfaz principal.
Main.html y login.html se pueden crear en el mismo directorio. Escribí un título muy simple aquí primero.
El código de main.html es el siguiente:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>主界面</title>
</head>
<body>
<h1>这里是主界面！</h1>
</body>
</html>En este punto, la función de inicio de sesión se ha completado y puede ejecutarse correctamente. ! Continuaremos escribiendo el contenido del proyecto en el próximo número. ¡Gracias por ver! ! !
"¡El contenido de seguimiento se actualiza continuamente! ! ! "
¡Marque y siga para no perderse! ! !