做网站怎么找客户联系方式/好搜网

做网站怎么找客户联系方式,好搜网,域名交易网站源代码下载,wordpress菜单背景6在上一篇博客中,我们讲解了注册页面的实现。在此基础上会跳转到登录页面,今天给大家带来的是使用 SpringBoot,MyBatis,Html,CSS,JavaScript,前后端交互实现一个登录功能。 目录 一、效果 二、…

在上一篇博客中,我们讲解了注册页面的实现。在此基础上会跳转到登录页面,今天给大家带来的是使用 SpringBoot,MyBatis,Html,CSS,JavaScript,前后端交互实现一个登录功能。

目录

一、效果

二、源码

2.1 前端

2.2 后端


一、效果

用户名和密码栏输入空或没有值时,提示错误。

在数据库中有以下信息,任意挑选一条信息进行登录操作。

输入用户 lisi123 后登陆成功 

跳转到个人列表。


二、源码

2.1 前端

前端登陆页面 html 代码,login.html:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>登陆页面</title><link rel="stylesheet" href="css/common.css"><link rel="stylesheet" href="css/login.css"><script src="js/jquery.min.js"></script>
</head><body><!-- 导航栏 --><div class="nav"><img src="img/touxiang.png" alt=""><span class="title">随心日记系统</span><!-- 用来占据中间位置 --><span class="spacer"></span><a href="blog_list.html">主页</a><a href="blog_edit.html">写日记</a><a href="login.html">注册</a><!-- <a href="#">注销</a> --></div><!-- 版心 --><div class="login-container"><!-- 中间的登陆框 --><div class="login-dialog"><h3>登陆</h3><div class="row"><span>用户名</span><input type="text" id="username"></div><div class="row"><span>密码</span><input type="password" id="password"></div><div class="row"><button id="submit" onclick="doLogin()">提交</button></div></div></div><script>// 登录功能function doLogin() {// 1.非空校验var username = jQuery("#username");var password = jQuery("#password");if(username.val().trim() == "") {alert("请先输入用户名!")username.focus();return false;}if(password.val().trim() == "") {alert("请输入密码!")password.focus();return false;}// 2.将数据提交到后端jQuery.ajax({url:"/user/login",type:"GET",data:{"username":username.val(),"password":password.val()},success:function(ret) {//3.将结果展示给用户if (ret.code == 200 && ret.data == 1 ) {alert("登录成功!");location.href = "myblog_list.html";} else {alert("登录失败!"+ret.msg);}}});}</script>
</body></html>

登陆页面的样式,login.css

.login-container {width: 100%;height: calc(100% - 50px);display: flex;justify-content: center;align-items: center;
}.login-dialog {width: 400px;height: 400px;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}.login-dialog h3 {padding: 50px 0;text-align: center;
}.login-dialog .row {height: 50px;display: flex;justify-content: center;align-items: center;
}.login-dialog .row span {display: block;width: 100px;font-weight: 700;
}.login-dialog .row input {width: 200px;height: 40px;line-height: 40px;font-size: 24px;border-radius: 10px;border: none;outline: none;text-indent: 10px;
}.login-dialog button {width: 300px;height: 50px;color: white;background-color: green;border: none;border-radius: 10px;
}.login-dialog button:active {background-color: #666;
}

公共样式(注册或登录页面),common.css:

* {margin: 0;padding: 0;box-sizing: border-box;
}/* 设置整体页面高度 */
html, body {height: 100%;background-image: url(../img/cat2.png);background-position: center center;background-size: cover;background-repeat: no-repeat;
}/* 上方导航栏 */
.nav {width: 100%;height: 50px;background-color: rgba(51, 51, 51, 0.4);color: #fff;display: flex;justify-content: left;align-items: center;
}/* 导航栏中的图标 */
.nav img {width: 40px;height: 40px;margin-left: 30px;margin-right: 10px;border-radius: 50%;
}/* 导航栏中的占位器 */
.nav .spacer {width: 70%;
}/* 导航栏中的按钮 */
.nav a {color: #fff;text-decoration: none;padding: 0 10px;
}/* 页面内容容器, 版心 */
.container {/* 使用 calc 计算高度 */height: calc(100% - 50px);/* 设置版心宽度 */width: 1000px;/* 水平居中 */margin: 0 auto;/* 使用弹性布局 */display: flex;justify-content: space-between;align-items: center;
}/* 左侧部分, 用来放置用户信息 */
.container-left {height: 100%;width: 200px;
}/* 右侧部分, 用来放置正文 */
.container-right {height: 100%;/* 和左侧部分中间留出 5px 间隙 */width: 795px;/* 如果内容溢出就自动加上滚动条 */overflow: auto;background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;
}/* 展示用户信息的卡片 */
.card {background-color: rgba(255, 255, 255, 0.8);border-radius: 10px;padding: 30px;
}/* 用户头像 */
.card img {width: 140px;height: 140px;border-radius: 50%;
}/* 用户名 */
.card h3 {text-align: center;padding: 10px;
}/* 用户 github 链接 */
.card a {display: block;text-align: center;color: #999;text-decoration: none;padding: 10px;
}/* 展示文章数目的面板 */
.card .counter {padding: 5px;display: flex;justify-content: space-around;
}

2.2 后端

统一返回格式,ResultAjax 类:

/*** 统一的返回格式*/
@Data
public class ResultAjax {private int code;private String msg;private Object data;// 成功public static ResultAjax success(Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(200);resultAjax.setMsg("");resultAjax.setData(data);return resultAjax;}public static ResultAjax success(int code, String msg, Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);resultAjax.setData(data);return resultAjax;}// 失败public static ResultAjax fail(int code, String msg) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);return resultAjax;}public static ResultAjax fail(int code, String msg, Object data) {ResultAjax resultAjax = new ResultAjax();resultAjax.setCode(code);resultAjax.setMsg(msg);resultAjax.setData(data);return resultAjax;}
}

UserMapper 接口:

@Mapper
public interface UserMapper {//登录功能@Select("select * from userinfo where username=#{username}")Userinfo getUserinfoByName(@Param("username") String username);
}

UserService 类:

@Service
public class UserService {//注册接口注入进来@Autowiredprivate UserMapper userMapper;//登录功能public Userinfo getUserByName(String username) {return userMapper.getUserinfoByName(username);}
}

UserControler 类:

@RestController
@RequestMapping("/user")
public class UserController {@Autowiredprivate UserService userService; /*** 登录接口* @param userinfoVO* @return*/@RequestMapping("/login")public ResultAjax login(UserinfoVO userinfoVO, HttpServletRequest request) {// 1.参数校验if (userinfoVO == null || !StringUtils.hasLength(userinfoVO.getUsername())|| !StringUtils.hasLength(userinfoVO.getPassword())) {// 非法登录return ResultAjax.fail(-1,"非法登录!");}// 2.根据用户名查询对象,判断用户名是否错误Userinfo userinfo = userService.getUserByName(userinfoVO.getUsername());if (userinfo == null && userinfo.getId() == 0) {return ResultAjax.fail(-2,"账号或密码错误!");}// 3.使用对象中的密码和输入的密码进行对比,判断密码是否错误if (!userinfoVO.getPassword().equals(userinfo.getPassword())) {return ResultAjax.fail(-2,"账号或密码错误!");}// 4.成功后将对象存储到 session 中HttpSession session = request.getSession();session.setAttribute(ApplicationVariable.SESSION_USERINFO_KEY,userinfo);// 5.结果返回给用户return ResultAjax.success(1);}
}

上述为整个登录功能的核心代码,其中需要注意的是前端需自行映入 jQuery 依赖、在 application.properties 文件中连接数据库、创建对应的数据库。连接数据库,数据库的创建代码在上篇博客中已讲解。


本篇博客到这里就结束了,感谢各位的观看。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/73271.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

mingw工具源码编译

ming-w64 mingw编译生成的库&#xff0c;需要mingw的lib文件支持。 https://github.com/mingw-w64/mingw-w64 使用msys2的bash git checkout v8.0.3 ./configure --disable-dependency-tracking --targetx86_64-w64-mingw32 mingw32-make.exe -j4 修改makefile中的make 改成mi…

LSTM方法实践——基于LSTM的汽车销量时序建模与预测分析

Hi&#xff0c;大家好&#xff0c;我是半亩花海。本实验基于汽车销量时序数据&#xff0c;使用LSTM网络&#xff08;长短期记忆网络&#xff09;构建时间序列预测模型。通过数据预处理、模型训练与评估等完整流程&#xff0c;验证LSTM在短期时序预测中的有效性。 目录 一、实验…

Stable Diffusion教程|快速入门SD绘画原理与安装

什么是Stable Diffusion&#xff0c;什么是炼丹师&#xff1f;根据市场研究机构预测&#xff0c;到2025年全球AI绘画市场规模将达到100亿美元&#xff0c;其中Stable Diffusion&#xff08;简称SD&#xff09;作为一种先进的图像生成技术之一&#xff0c;市场份额也在不断增长&…

Webpack构建流程详解优化前端性能\Dev-Server与Proxy\网络攻击\HMR

简版 核心流程图 根据&#xff0c;Webpack的构建流程分为初始化、编译和输出三个阶段。初始化阶段读取配置、加载插件、实例化Compiler。编译阶段&#xff08;构建依赖关系&#xff09;涉及Compiler类的运行&#xff0c;生成Compilation对象&#xff0c;处理模块依赖。输出阶…

零成本搭建Calibre个人数字图书馆支持EPUB MOBI格式远程直读

文章目录 前言1.网络书库软件下载安装2.网络书库服务器设置3.内网穿透工具设置4.公网使用kindle访问内网私人书库 前言 嘿&#xff0c;各位书虫们&#xff01;今天要给大家安利一个超级炫酷的技能——如何在本地Windows电脑上搭建自己的私人云端书库。亚马逊服务停了&#xff…

【Linux 指北】常用 Linux 指令汇总

第一章、常用基本指令 # 注意&#xff1a; # #表示管理员 # $表示普通用户 [rootlocalhost Practice]# 说明此处表示管理员01. ls 指令 语法&#xff1a; ls [选项][目录或文件] 功能&#xff1a;对于目录&#xff0c;该命令列出该目录下的所有子目录与文件。对于文件&#xf…

跟踪napi_gro_receive_entry时IP头信息缺失的分析

问题描述 在使用eBPF程序跟踪napi_gro_receive_entry内核跟踪点时&#xff0c;发现获取到的IP头部字段&#xff08;如saddr、daddr、protocol&#xff09;为空值。 代码如下&#xff1a; /* 自定义结构体来映射 napi_gro_receive_entry tracepoint 的 format */ struct napi…

Android子线程更新View的方法原理

对于所有的Android开发者来说&#xff0c;“View的更新必须在UI线程中进行”是一项最基本常识。 如果不在UI线程中更新View&#xff0c;系统会抛出CalledFromWrongThreadException异常。那么有没有什么办法可以不在UI线程中更新View&#xff1f;答案当然是有的&#xff01; 一…

【Manus资料合集】激活码内测渠道+《Manus Al:Agent应用的ChatGPT时刻》(附资源)

DeepSeek 之后&#xff0c;又一个AI沸腾&#xff0c;冲击的不仅仅是通用大模型。 ——全球首款通用AI Agent的破圈启示录 2025年3月6日凌晨&#xff0c;全球AI圈被一款名为Manus的产品彻底点燃。由Monica团队&#xff08;隶属中国夜莺科技&#xff09;推出的“全球首款通用AI…

Python----计算机视觉处理(opencv:像素,RGB颜色,图像的存储,opencv安装,代码展示)

一、计算机眼中的图像 像素 像素是图像的基本单元&#xff0c;每个像素存储着图像的颜色、亮度和其他特征。一系列像素组合到一起就形成 了完整的图像&#xff0c;在计算机中&#xff0c;图像以像素的形式存在并采用二进制格式进行存储。根据图像的颜色不 同&#xff0c;每个像…

SQLiteStudio:一款免费跨平台的SQLite管理工具

SQLiteStudio 是一款专门用于管理和操作 SQLite 数据库的免费工具。它提供直观的图形化界面&#xff0c;简化了数据库的创建、编辑、查询和维护&#xff0c;适合数据库开发者和数据分析师使用。 功能特性 SQLiteStudio 提供的主要功能包括&#xff1a; 免费开源&#xff0c;可…

【软考网工-实践篇】DHCP 动态主机配置协议

一、DHCP简介 DHCP&#xff0c;Dynamic Host Configuration Protocol&#xff0c;动态主机配置协议。 位置&#xff1a;DHCP常见运行于路由器上&#xff0c;作为DHCP服务器功能&#xff1a;用于自动分配IP地址及其他网络参数给网络中的设备作用&#xff1a;简化网络管理&…

【Linux学习笔记】Linux用户和文件权限的深度剖析

【Linux学习笔记】Linux用户和文件权限的深度剖析 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;Linux学习笔记 前言 文章目录 【Linux学习笔记】Linux用户和文件权限的深度剖析前言一. Linux权限管理1.1 文件访问者的分类&#xff08;人)…

58.Harmonyos NEXT 图片预览组件架构设计与实现原理

温馨提示&#xff1a;本篇博客的详细代码已发布到 git : https://gitcode.com/nutpi/HarmonyosNext 可以下载运行哦&#xff01; Harmonyos NEXT 图片预览组件架构设计与实现原理 文章目录 Harmonyos NEXT 图片预览组件架构设计与实现原理效果预览一、组件架构概述1. 核心组件层…

Appium高级操作--从源码角度解析--模拟复杂手势操作

书接上回&#xff0c;Android自动化--Appium基本操作-CSDN博客文章浏览阅读600次&#xff0c;点赞10次&#xff0c;收藏5次。书接上回&#xff0c;上一篇文章已经介绍了appium在Android端的元素定位方法和识别工具Inspector&#xff0c;本次要介绍使用如何利用Appium对找到的元…

SpringBoot学生宿舍管理系统的设计与开发

项目概述 幽络源分享的《SpringBoot学生宿舍管理系统的设计与开发》是一款专为校园宿舍管理设计的智能化系统&#xff0c;基于SpringBoot框架开发&#xff0c;功能全面&#xff0c;操作便捷。该系统涵盖管理员、宿管员和学生三大角色&#xff0c;分别提供宿舍管理、学生信息管…

爱普生温补晶振 TG5032CFN高精度稳定时钟的典范

在科技日新月异的当下&#xff0c;众多领域对时钟信号的稳定性与精准度提出了极为严苛的要求。爱普生温补晶振TG5032CFN是一款高稳定性温度补偿晶体振荡器&#xff08;TCXO&#xff09;。该器件通过内置温度补偿电路&#xff0c;有效抑制环境温度变化对频率稳定性的影响&#x…

【原创】在高性能服务器上,使用受限用户运行Nginx,充当反向代理服务器[未完待续]

起因 在公共高性能服务器上运行OllamaDeepSeek&#xff0c;如果按照默认配置启动Ollama程序&#xff0c;则自己在远程无法连接你启动的Ollama服务。 如果修改配置&#xff0c;则会遇到你的Ollama被他人完全控制的安全风险。 不过&#xff0c;我们可以使用一个方向代理&#…

芯科科技推出的BG29超小型低功耗蓝牙®无线SoC,是蓝牙应用的理想之选

具有扩大的内存和超低功耗特性的超小型BG29是互联健康设备的理想之选 低功耗无线领域内的领导性创新厂商Silicon Labs&#xff08;亦称“芯科科技”&#xff0c;NASDAQ&#xff1a;SLAB&#xff09;今日宣布&#xff1a;推出全新的第二代无线开发平台产品BG29系列无线片上系统…

【数据挖掘】知识蒸馏(Knowledge Distillation, KD)

1. 概念 知识蒸馏&#xff08;Knowledge Distillation, KD&#xff09;是一种模型压缩和知识迁移技术&#xff0c;旨在将大型复杂模型&#xff08;称为教师模型&#xff09;中的知识传递给一个较小的模型&#xff08;称为学生模型&#xff09;&#xff0c;以减少计算成本&…