网站开发用mvc多吗,品牌建设有效提升城市竞争力例子,北京手机网站制作多少钱,专建网站文章目录 一、实战概述二、实战步骤#xff08;一#xff09;创建数据库#xff08;二#xff09;创建用户表#xff08;三#xff09;后端项目引入数据库1、添加相关依赖2、用户实体类保持不变3、编写应用配置文件4、创建用户映射器接口5、创建用户服务类6、修改登录控制… 文章目录 一、实战概述二、实战步骤一创建数据库二创建用户表三后端项目引入数据库1、添加相关依赖2、用户实体类保持不变3、编写应用配置文件4、创建用户映射器接口5、创建用户服务类6、修改登录控制器 四测试用户登录功能1、启动前端项目 - login-vue2、启动后端项目 - LoginDemo3、访问前端登录页面4、测试用户登录功能 三、实战总结 一、实战概述 本次实战我们深入实践了基于数据库的用户登录功能开发。首先构建了包含id、username和password字段的user表并初始化了测试数据。接着在后端Spring Boot项目中集成MySQL数据库驱动与Druid连接池以及MyBatis持久层框架通过配置application.yaml文件来指定数据库连接信息。 在模型层我们保留了User实体类以映射数据库中的用户表结构在数据访问层创建了UserMapper接口并使用注解方式编写SQL查询方法用于根据用户名和密码从数据库获取用户信息。为验证查询逻辑我们编写了单元测试确保能正确查询到数据库中的用户记录。 服务层上构建了UserService类注入UserMapper实例并封装了一个基于数据库查询的登录方法。最后在控制器层的LoginController中通过Autowired注入UserService并调整登录处理逻辑使其调用服务层的登录方法进行实际的身份验证。 在前端Vue项目运行的同时启动后端Spring Boot应用通过前后端联动测试展示了基于数据库的用户登录功能。用户在前端页面输入用户名和密码经由跨域请求传递至后端通过数据库查询验证身份后返回结果成功实现了根据实际用户数据进行登录的功能有效提高了系统的安全性与实用性。
二、实战步骤
一创建数据库
创建login数据库
二创建用户表
创建用户表user 添加用户表记录
三后端项目引入数据库
1、添加相关依赖
修改pom.xml文件添加相关依赖
?xml version1.0 encodingUTF-8?
project xmlnshttp://maven.apache.org/POM/4.0.0 xmlns:xsihttp://www.w3.org/2001/XMLSchema-instancexsi:schemaLocationhttp://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsdmodelVersion4.0.0/modelVersionparentgroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-parent/artifactIdversion3.2.1/versionrelativePath/ !-- lookup parent from repository --/parentgroupIdnet.huawei/groupIdartifactIdLoginDemo/artifactIdversion0.0.1-SNAPSHOT/versionnameLoginDemo/namedescriptionLoginDemo/descriptionpropertiesjava.version21/java.version/propertiesdependenciesdependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-thymeleaf/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-web/artifactId/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-devtools/artifactIdscoperuntime/scopeoptionaltrue/optional/dependencydependencygroupIdcom.mysql/groupIdartifactIdmysql-connector-j/artifactIdscoperuntime/scope/dependencydependencygroupIdcom.alibaba/groupIdartifactIddruid-spring-boot-starter/artifactIdversion1.2.18/version/dependencydependencygroupIdorg.mybatis.spring.boot/groupIdartifactIdmybatis-spring-boot-starter/artifactIdversion3.0.3/version/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-starter-test/artifactIdscopetest/scope/dependencydependencygroupIdorg.springframework.boot/groupIdartifactIdspring-boot-configuration-processor/artifactIdoptionaltrue/optional/dependency/dependenciesbuildpluginsplugingroupIdorg.springframework.boot/groupIdartifactIdspring-boot-maven-plugin/artifactId/plugin/plugins/build/project
刷新项目依赖
2、用户实体类保持不变
用户实体类 - User
package net.huawei.login.bean;/*** 功能用户实体类* 作者华卫* 日期2024年01月14日*/
public class User {private int id;private String username;private String password;public int getId() {return id;}public void setId(int id) {this.id id;}public String getUsername() {return username;}public void setUsername(String username) {this.username username;}public String getPassword() {return password;}public void setPassword(String password) {this.password password;}Overridepublic String toString() {return User{ id id , username username \ , password password \ };}
}
3、编写应用配置文件
将全局配置文件application.properties更名为application.yaml
# 配置服务器
server:port: 8888# 配置数据源
spring:datasource:driver-class-name: com.mysql.cj.jdbc.Driverurl: jdbc:mysql://localhost:3306/login?useSSLfalseuseUnicodetruecharacterEncodingUTF-8username: rootpassword: 903213# 配置Druid数据源类型type: com.alibaba.druid.pool.DruidDataSourcedruid:initial-size: 20 # 初始连接数min-idle: 10 # 最小空闲连接数max-active: 100 # 最大连接数4、创建用户映射器接口
创建mapper子包在子包里创建UserMapper接口
package net.huawei.login.mapper;import net.huawei.login.bean.User;
import org.apache.ibatis.annotations.Mapper;
import org.apache.ibatis.annotations.Select;/*** 功能用户映射器接口* 作者华卫* 日期2024年01月14日*/
Mapper // 纳入Spring容器管理
public interface UserMapper {Select(select * from user where username #{username} and password #{password})User login(String username, String password);
}测试用户映射器接口
package net.huawei.login;import net.huawei.login.bean.User;
import net.huawei.login.mapper.UserMapper;
import org.junit.jupiter.api.Test;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.test.context.SpringBootTest;SpringBootTest
class LoginDemoApplicationTests {Autowired // 注入用户映射器Beanprivate UserMapper userMapper;Testpublic void testLogin() {// 定义用户名和MiamiString username 无心剑;String password 903213;// 调用用户映射器登录方法User user userMapper.login(username, password);// 判断是否登录成功if (user ! null) {System.out.println(恭喜[ username ]登录成功~);} else {System.err.println(遗憾[ username ]登录失败~);}}
}运行testLogin()测试方法查看结果 修改用户名再运行testLogin()测试方法查看结果
5、创建用户服务类
创建service子包在子包里创建UserService类
package net.huawei.login.service;import net.huawei.login.bean.User;
import net.huawei.login.mapper.UserMapper;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;/*** 功能用户服务类 * 作者华卫* 日期2024年01月14日*/
Service // 纳入Spring容器管理
public class UserService {Autowired // 注入用户映射器Beanprivate UserMapper userMapper;/*** 用户登录方法* * param username* param password* return 用户实体*/public User login(String username, String password) {return userMapper.login(username, password);}
}6、修改登录控制器
登录控制器 - LoginController
package net.huawei.login.controller;import net.huawei.login.bean.User;
import net.huawei.login.result.Result;
import net.huawei.login.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.util.HtmlUtils;/*** 功能登录控制器* 作者华卫* 日期2024年01月14日*/
Controller
public class LoginController {Autowired // 注入用户服务Beanprivate UserService userService;CrossOriginPostMapping(value /login)ResponseBodypublic Result login(RequestBody User requestUser) {// 获取用户名和密码String username requestUser.getUsername();String password requestUser.getPassword();// 对html标签进行转义防止XSS攻击username HtmlUtils.htmlEscape(username);// 调用用户服务对象的登录方法User user userService.login(username, password);// 判断登录是否成功if (user ! null) {return new Result(200);} else {System.out.println(用户名或密码有误);return new Result(400);}}
}四测试用户登录功能
1、启动前端项目 - login-vue
在前端项目目录里执行命令npm run serve
2、启动后端项目 - LoginDemo
运行入口类 - LoginDemoApplication
3、访问前端登录页面
访问http://localhost:8080/login
4、测试用户登录功能
输入用户名admin与密码903213 单击【登录】按钮 输入正确的用户名与密码无心剑 903213 单击【登录】按钮跳转到首页 录屏操作演示
三、实战总结
本次实战通过构建数据库用户表实现了基于Spring Boot和MyBatis的数据库登录验证功能。首先创建了包含必要字段的user表及测试数据然后在后端配置数据库连接并利用UserMapper接口与注解SQL实现用户查询。服务层封装了登录方法在控制器中调用此方法进行身份验证。前端Vue项目与后端联动输入的用户名和密码经过跨域请求传递至后端经数据库查询验证后返回结果成功构建了一个安全、实用的基于数据库用户数据的身份验证系统。
