win10做网站,怎么网站建设多少钱,抖音流量推广神器软件,足球比赛直播平台app这里是建立建立web项目#xff1a;Maven如何创建Java web项目#xff08;纯干货版#xff09;#xff01;#xff01;#xff01;_明天更新的博客-CSDN博客
我们主要演示如何连接数据库验证登录。
1.在webapp目录下创建我们的登录页面#xff1a;index.jsp 还需要再…这里是建立建立web项目Maven如何创建Java web项目纯干货版_明天更新的博客-CSDN博客
我们主要演示如何连接数据库验证登录。
1.在webapp目录下创建我们的登录页面index.jsp 还需要再写一个验证登录成功的页面如果页面跳转成功就代表登录成功 内容如下你可以简单写一下我们的主要功能是验证登录
%--Created by IntelliJ IDEA.User: adminDate: 2023/8/14Time: 9:52To change this template use File | Settings | File Templates.
--%
% page contentTypetext/html;charsetUTF-8 languagejava %
html
headmeta charsetutf-8 /meta nameviewport contentwidthdevice-width,initial-scale1.0 /title用户登录/titlelink relstylesheet hrefindex_log.css /link hrefhttps:/cdn.staticfile.org/layui/2.8.0/css/layui.css relstylesheetstyle typetext/css* {/*初始化 清除页面元素的内外边距*/padding: 0;margin: 0;/*盒子模型*/box-sizing: border-box;}body {/*弹性布局 让页面元素垂直水平居中*/display: flex;justify-content: center;align-items: center;/*让页面始终占浏览器可视区域总高度*/height: 100vh;/*背景渐变色*/background: linear-gradient(#141e30, #243b55);/* background-image: url(https://img0.baidu.com/it/u2635618108,3973101288fm253fmtautoapp120fJPEG?w500h281); */background-repeat: no-repeat;}.login {/*弹性布局 让子元素称为弹性项目*/display: flex;/*让弹性项目垂直排列 原理是改变弹性盒子的主轴方向父元素就是弹性盒子 现在改变后的主轴方向是向下了*/flex-direction: column;/*让弹性项目在交叉轴方向水平居中 现在主轴的方向是向下交叉轴的方向是与主轴垂直 交叉轴的方向是向右*/align-items: center;width: 400px;padding: 40px;background-color: rgba(0, 0, 0, 0.2);box-shadow: 0 15px 25px rgba(0, 0, 0, 0.4);}.login h2 {color: #fff;margin-bottom: 30px;}.login .login_box {/*相对定位*/position: relative;width: 100%;}.login .login_box input {/*清除input框自带的边框和轮廓*/outline: none;border: none;width: 100%;padding: 10px 0;margin-bottom: 30px;color: #fff;font-size: 16px;border-bottom: 1px solid #fff;/*背景颜色为透明色*/background-color: transparent;}.login .login_box label {position: absolute;top: 0;left: 0;padding: 10px 0;color: #fff;/*这个属性的默认值是auto 默认是这个元素可以被点击但是如果我们写了none 就是这个元素不能被点击就好像它可见但是不能用可望而不可及*//*这个就是两者的区别*/pointer-events: none;/*加个过度*/transition: all 0.5s;}/*: focus 选择器是当input获得焦点是触发的样式 是相邻兄弟选择器去找与input相邻的兄弟label*//*valid 选择器是判断input 框的内容是否合法如果合法会执行下面的属性代码不合法就不会执行我们刚开始写布局的时候给input框写了required 我们删掉看对比当没有required的话 input框的值就会被认为一直合法所以一直都是下方的样式但是密码不会密码框的值为空那么这句话就不合法required不能为空当我们给密码框写点东西的时候才会执行以下代码*/.login .login_box input:focuslabel,.login .login_box input:validlabel {top: -20px;color: #03e9f4;font-size: 12px;}.login a {/*overflow: hidden;*/position: relative;padding: 10px 20px;color: #03e9f4;/*取消a表现原有的下划线*/text-decoration: none;/*同样加个过渡*/transition: all 0.5s;}.login a:hover {color: #fff;border-radius: 5px;background-color: #03e9f4;box-shadow: 0 0 5px #03e9f4, 0 0 25px #03e9f4, 0 0 50px #03e9f4, 0 0 100px #03e9f4;}.login a span {position: absolute;}.login a span:first-child {top: 0;left: -100%;width: 100%;height: 2px;/*to right 就是往右边 下面的同理*/background: linear-gradient(to right, transparent, #03e9f4);/*动画 名称 时长 linear是匀速运动 infinite是无限次运动*/animation: move1 1s linear infinite;}.login a span:nth-child(2) {right: 0;top: -100%;width: 2px;height: 100%;background: linear-gradient(transparent, #03e6f4);/*这里多了个0.25s其实是延迟时间*/animation: move2 1s linear 0.25s infinite;}.login a span:nth-child(3) {right: -100%;bottom: 0;width: 100%;height: 2px;background: linear-gradient(to left, transparent, #03e9f4);animation: move3 1s linear 0.5s infinite;}.login a span:last-child {left: 0;bottom: -100%;width: 2px;height: 100%;background: linear-gradient(#03e9f4, transparent);animation: move4 1s linear 0.75s infinite;}/*写一下动画 */keyframes move1 {0% {left: -100%;}50%,100% {left: 100%;}}keyframes move2 {0% {top: -100%;}50%,100% {top: 100%;}}keyframes move3 {0% {right: -100%;}50%,100% {right: 100%;}}keyframes move4 {0% {bottom: -100%;}50%,100% {bottom: 100%;}}#mybutton {background: transparent;border-width: 0px;outline: none;font-size: 22px;color: white;}/style/headbodyform actionhome.jsp methodpostdiv classloginh2用户登录/h2div classlogin_box!-- required就是不能为空 必须在css效果中有很大的作用 --input typetext nameusername idname required / label forname用户名/label/divdiv classlogin_boxinput typepassword namepassword idpwd requiredrequiredlabel forpwd密码/label/divdiv classlogin_boximg alt srcindex.jsp onclickrefresh()br/divdiv classlayui-form-itemdiv classlayui-rowdiv classlayui-col-xs7div classlayui-input-wrapdiv classlayui-input-prefixi classlayui-icon layui-icon-vercode/i/divinput typetext namecaptcha value lay-verifyrequired placeholder验证码lay-reqtext请填写验证码 autocompleteoff classlayui-input lay-affixclearstylecolor: white; background-color: #141f30;/div/divdiv classlayui-col-xs5div stylemargin-left: 10px;img srchttps://www.oschina.net/action/user/captchaonclickthis.srchttps://www.oschina.net/action/user/captcha?t new Date().getTime();/div/div/div/diva href后台界面.html input typesubmit value登录 idmybutton span/spanspan/span span/span span/span/a/div/form
scriptlayui.use(function () {var form layui.form;var layer layui.layer;// 提交事件form.on(submit(demo-login), function (data) {var field data.field; // 获取表单字段值// 显示填写结果仅作演示用layer.alert(JSON.stringify(field), {title: 当前填写的字段值});// 此处可执行 Ajax 等操作// …return false; // 阻止默认 form 跳转});});
/script
/body/html验证登录成功后的界面
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlescript src./1.js/script!-- 引入 layui.css --link hrefhttps://unpkg.com/layui2.8.0/dist/css/layui.css relstylesheet!-- 引入 layui.js --script srchttps://unpkg.com/layui2.8.0/dist/layui.js/scriptstyle.main {/* display: flex; */border: 1px solid #000;height: 670px;width: 100%;background-image: -webkit-linear-gradient(left, #35283d, #cbac7a);justify-content: space-between;}.top {/* display: inline-block; */position: relative;display: block;border: 1px solid #aaa;height: 50px;width: 100%;display: flex;top: 0px;transition: all .3s linear;}.top:hover{top: -2px;box-shadow: 0 0 10px 0 #8aff54;}.top p {color: white;font-size: 25px;padding-top: 5px;}.tleft {height: 48px;/* border: 1px solid #c3ef3f; */width: 50%;}.tleft p {color: white;font-size: 25px;padding-top: 5px;}.tright {height: 48px;/* border: 1px solid #c3ef3f; */width: 50%;}.layui-form-item {padding-top: 5px;margin-left: 60%;}#i1 {padding-left: 20px;padding-top: 4px;}.down {position: relative;display: inline-block;/* position: relative;top: 53px; *//* border: 1px solid #f00; */height: 610px;width: 100%;display: flex;/* justify-content: center; */top: 0px;transition: all .3s linear;}.down:hover{top: -2px;box-shadow: 0 0 10px 0 #8aff54;}.left {position: relative;display: inline-block;border: 1px solid #666;height: 610px;width: 18%;top: 0px;transition: all .3s linear;}.left:hover{top: -2px;box-shadow: 0 0 10px 0 #8aff54;}.layui-collapse{border-bottom: 0px;border-top: 0px;border: 0px;}.right {display: inline-block;position: relative;top: 0px;width: 82%;height: 610px;/* border: 1px solid #0a0; */transition: all .3s linear;}.right:hover{top: -2px;box-shadow: 0 0 10px 0 #8aff54;}.rtop {display: flex;justify-content: space-around;margin-top: 10px;}.left1 {position: relative;top: 0px;/* border: 1px solid #000; */width: 20%;height: 200px;transition: all .3s linear;}.left1:hover{top: -2px;box-shadow: 0 0 10px 0 #8aff54;}.center {/* border: 1px solid #f0f; */height: 280px;}.center1 {/* border: 1px solid #f0f; */height: 310px;margin-top: 20px;}.left2 {position: relative;top: 0px;/* border: 1px solid #1ec431; */width: 30%;height: 250px;margin-top: 20px;background-color: #794e4d;transition: all .3s linear;}.left2:hover{top: -2px;box-shadow: 0 0 10px 0 #8aff54;}.small1 {/* border: 1px solid #ec2727; */height: 22%;background-color: #473c3b;}.small1 p {color: #aaa;font-size: 25px;padding-top: 5px;text-align: center;}.small2 {/* border: 1px solid #ec2727; */height: 56%;background-color: #3e3234;}.small2 .p1 {/* margin-top: 10px; */color: #999;font-size: 40px;padding-top: 5px;text-align: center;}.small2 .p2 {color: #aaa;font-size: 16px;padding-top: 5px;text-align: center;}.small3 {/* border: 1px solid #ec2727; */height: 22%;background-color: #352b2a;}.small3 p {color: #aaa;font-size: 16px;padding-top: 10px;/* text-align: center; */}.layui-input{background-color: #bea075;}/style
/headbody
div classmaindiv classtopdiv classtleftp欢迎来到我的主场/p/divdiv classtrightdiv classlayui-form-itemdiv classlayui-input-groupinput typetext placeholder带任意后置内容 classlayui-inputdiv classlayui-input-split layui-input-suffix stylecursor: pointer;i classlayui-icon layui-icon-search/i/divi classlayui-icon layui-icon-tabs idi1/ii classlayui-icon layui-icon-user idi1/i/div/div/div/divdiv classdowndiv classleftdiv classlayui-collapse styleheight: 610px;div classlayui-colla-itemdiv classlayui-colla-title stylebackground-color: transparent; color: white;CollapseTitle 1nbsp;nbsp;nbsp;i classlayui-icon layui-icon-face-smile/i /divdiv classlayui-colla-contentpContent 1/p/div/divdiv classlayui-colla-itemdiv classlayui-colla-title stylebackground-color: transparent; color: white;CollapseTitle 2/divdiv classlayui-colla-contentpContent 2/p/div/divdiv classlayui-colla-itemdiv classlayui-colla-title stylebackground-color: transparent; color: white;CollapseTitle 3/divdiv classlayui-colla-contentulliContent list/liliContent list/li/ul/div/divdiv classlayui-colla-itemdiv classlayui-colla-title stylebackground-color: transparent; color: white;折叠面板的标题/divdiv classlayui-colla-contentp折叠面板的内容/p/div/div/div/divdiv classrightdiv classcenterdiv classtop styleborder: 0px;p我做的还不错吧/p/divdiv classrtopdiv classleft1div classsmall1pOne/p/divdiv classsmall2p classp1$21.5K/pp classp2上升⬆3% form tengxun nwes/p/divdiv classsmall3pWelocme to family/p/div/divdiv classleft1div classsmall1p classp1Two/p/divdiv classsmall2p classp1$30K/pp classp2上升⬆5% form baidu nwes/p/divdiv classsmall3pWelocme to family/p/div/divdiv classleft1div classsmall1pThree/p/divdiv classsmall2p classp1$27K/pp classp2上升⬆14% form huofu nwes/p/divdiv classsmall3pWelocme to family/p/div/divdiv classleft1div classsmall1pFour/p/divdiv classsmall2p classp1$25.5K/pp classp2上升⬆8% form baidu nwes/p/divdiv classsmall3pWelocme to family/p/div/div/div/divdiv classcenter1div classrtopdiv classleft2 idmain/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main));//*****从这开始复制粘贴*****// 指定图表的配置项和数据option {xAxis: {type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun]},yAxis: {type: value},series: [{data: [150, 230, 224, 218, 135, 147, 260],type: line}]};//结束位置// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/scriptdiv classleft2 idmain1/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main1));//*****从这开始复制粘贴*****// 指定图表的配置项和数据option {tooltip: {trigger: axis,axisPointer: {type: shadow}},grid: {left: 3%,right: 4%,bottom: 3%,containLabel: true},xAxis: [{type: category,data: [Mon, Tue, Wed, Thu, Fri, Sat, Sun],axisTick: {alignWithLabel: true}}],yAxis: [{type: value}],series: [{name: Direct,type: bar,barWidth: 60%,data: [10, 52, 200, 334, 390, 330, 220]}]};//结束位置// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/scriptdiv classleft2 idmain2/divscript typetext/javascript// 基于准备好的dom初始化echarts实例var myChart echarts.init(document.getElementById(main2));//*****从这开始复制粘贴*****// 指定图表的配置项和数据option {title: {text: Referer of a Website,subtext: Fake Data,left: center},tooltip: {trigger: item},legend: {orient: vertical,left: left},series: [{name: Access From,type: pie,radius: 50%,data: [{ value: 1048, name: Search Engine },{ value: 735, name: Direct },{ value: 580, name: Email },{ value: 484, name: Union Ads },{ value: 300, name: Video Ads }],emphasis: {itemStyle: {shadowBlur: 10,shadowOffsetX: 0,shadowColor: rgba(0, 0, 0, 0.5)}}}]};//结束位置// 使用刚指定的配置项和数据显示图表。myChart.setOption(option);/script/div/div/div/div
/div
/body/html
2.建立Java文件继承HttpServlet利用jdbc连接数据库。
这里有如何连接数据库可以作为参考JDBC连接数据库如何实现你会吗_明天更新的博客-CSDN博客 代码如下:
/** Copyright (c) 2020, 2023, All rights reserved.**/
package cn.scl;import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.sql.*;/*** pProject: jdbctest1 - Dome/p* pPowered by scl On 2023-08-14 09:48:20/p* p描述p** author 孙臣龙 [1846080280qq.com]* version 1.0* since 17*/
WebServlet(/home)
public class Dome extends HttpServlet {Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding(utf-8);try {String usernamereq.getParameter(username);String passwordreq.getParameter(password);Class.forName(com.mysql.cj.jdbc.Driver);Connection con DriverManager.getConnection(jdbc:mysql:/db1?userroot);String sqlselect count(*) from user where username? and password ?;PreparedStatement ps con.prepareStatement(sql);ps.setString(1,username);ps.setString(2,password);ResultSet rs ps.executeQuery();rs.next();if (rs.getInt(1)0){System.out.println(登录成功);}} catch (ClassNotFoundException e) {throw new RuntimeException(e);} catch (SQLException e) {throw new RuntimeException(e);}}
} 主要是将我们之前学习过的maven和连接数据库结合起来使用。。
