简单的金苑宾馆客房系统前端与后端的开发（html+css+jsp+数据库）---河北金融19计科一班结课设计（一）

本文主要是介绍简单的金苑宾馆客房系统前端与后端的开发（html+css+jsp+数据库）---河北金融19计科一班结课设计（一），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

今天是2020年12月12日，课设设置了已经有一周多的时间了，直到昨天晚上才明白了前端与后端的交互（课设是jsp后端的开发，HTML+css前端没学过，最近看了一些教程视频才多少有点了解，其实只有后端开发结课设计就算合格了，但是本着精益求精的精神，还是打算做点美化）所以开个帖子简单记录一下这个小系统的制作。
课程要求：在这里插入图片描述

首先说下思：
用DW套用模板做前端，jsp写代码做后端连接数据库，然后把DW写的html和css导入到jsp中在通过跳转完成前端与后端的交互

目前代码完成情况：已完成管理员与用户的登录，用户的注册，以及下订单时填写信息都可以连接到数据库。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 阿里巴巴矢量图标库--><link rel="stylesheet" href="https://at.alicdn.com/t/font_1757504_k6qar61imrp.css"><link rel="stylesheet" href="index.css"><title>Login</title>
</head>
<body  ><div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">    
<img src="images/timg.jpg" height="100%" width="100%"/>    
</div> <div class="from_wrapper"><div class="header">金苑招待中心</div><form  action="http://localhost:8080/binguan/testlogin.jsp" method="post">  <div class="input_wrapper"><div class="broder_wrapper"><input type="text" name="username" placeholder="username" class="broder_item"></div><div class="broder_wrapper"><input type="password" name="password" placeholder="password" class="broder_item">       </div><div class="active"><input type="submit" class="btn" value="登录"></div></div></form><form  action="http://localhost:8080/binguan/register." method="post">  <div class="input_wrapper"><div class="active"><input type="submit" class="btn" value="注册"></div></div></form><div class="icon_wrapper"><!-- 阿里巴巴矢量图标库图标--><i class="iconfont icon-weixin"></i><i class="iconfont icon-weibo"></i><i class="iconfont icon-GitHub"></i></div></div></body>
</html>

/* CSS Document */#BodyBg{ width: 100%;  height: 100%;  position: absolute;  left: 0px;  top: 0px;  z-index: 0; 
} .stretch { width:100%; height:100%; 
} 
*{padding: 0;margin: 0;
}html{height: 100%;
}body{height: 100%;display:flex;align-items: center;justify-content: center;background-color: #1e90ff;
}.from_wrapper{width: 300px;background-color: #2f3542;color: #fff;border-radius: 2px;padding: 50px;
}.from_wrapper .header{text-align: center;font-size: 35px;text-transform: uppercase;line-height: 100%;
}.from_wrapper .input_wrapper{margin-top: 30px;
}.from_wrapper .input_wrapper input{background-color: #2f3542;border: 0;width: 100%;text-align: center;font-size: 15px;color: #fff;outline: none;
}.from_wrapper .input_wrapper input::placeholder{text-transform: uppercase;
}/* 渐变边框 思路：下边做一个渐变图层，上边再做一个小一圈的输入框*/
.from_wrapper .input_wrapper .broder_wrapper{background-image: linear-gradient(to right,#e8198b,#0eb4dd);width: 100%;height: 50px;margin-bottom: 20px;border-radius: 30px;display: flex;align-items: center;justify-content: center;
}.from_wrapper .input_wrapper .broder_wrapper .broder_item{height: calc(100% - 4px);width: calc(100% - 4px);border-radius: 30px;
}.from_wrapper .active{display: flex;justify-content: center;
}
.from_wrapper .active .btn{width: 60%;text-transform: uppercase;border: 2px solid #1e90ff;text-align: center;line-height: 50px;border-radius: 30px;cursor: pointer;transition: .2s;
}.from_wrapper .active .btn:hover{background-color: #1e90ff;
}.from_wrapper .icon_wrapper{text-align: center;width: 60%;margin: 0 auto;margin-top: 20px;border-top: 1px dashed rgb(146, 146, 146);padding: 20px;
}.from_wrapper .icon_wrapper i{font-size: 20px;color: rgb(187, 187, 187);cursor: pointer;border: 1px solid #fff;padding: 5px;border-radius: 20px;
}

testlogin.jsp


<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%@ page import="java.sql.*" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head><base href="<%=basePath%>"><title>My JSP 'testLogin.jsp' starting page</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0">    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body><% String username = request.getParameter("username");String password = request.getParameter("password");Connection conn = null;PreparedStatement pstmt = null;ResultSet rs = null;try{Class.forName("com.microsoft.sqlserver.jdbc.SQLServerDriver");conn=DriverManager.getConnection("jdbc:sqlserver://127.0.0.1:1433;DatabaseName=binguan","sa","123456");String sql="select * from zhanghao where username=? and password=?";pstmt=conn.prepareStatement(sql);pstmt.setString(1,username);pstmt.setString(2,password);rs = pstmt.executeQuery();if(rs.next()){String sql1="select ID from zhanghao where username=?";pstmt.setString(1,username);rs = pstmt.executeQuery();if(username.equals("admin")){response.sendRedirect("adsuccess.jsp");}else{response.sendRedirect("http://localhost:8080/qianduan/jieshao.html");}}else{response.sendRedirect("http://localhost:8080/qianduan/denglu.html");}rs.close();pstmt.close();conn.close();}catch(ClassNotFoundException e){e.printStackTrace();}catch(SQLException e){e.printStackTrace();}%></body>
</html>