今天是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="https://bbs.csdn.net/topics/index.css">
<title>Login</title>
</head>
<body ><div id="Layer1" style="position:absolute; width:100%; height:100%; z-index:-1">
<img src="https://img.uj5u.com/2020/12/13/158905130320513.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="https://bbs.csdn.net/topics/登錄">
</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="https://bbs.csdn.net/topics/注冊">
</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="https://bbs.csdn.net/topics/">
<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="https://bbs.csdn.net/topics/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>
后面就復制代碼了，幾次test檢測的代碼大同小異。
附一張資料庫的圖
uj5u.com熱心網友回復：
PS:form表單提交時方式為post，為的是保護賬號密碼個人資訊等轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/233704.html
標籤：基礎類