咳咳，最近朋友找到我帮他做一个网站web项目的作业，发来了如下功能模块，因为是作业嘛，我也还是个学生，就比较茅草（马虎）的做了一下，不想去用那些对于我来说较繁琐的dao，servlet啥的，于是就只用jsp实现与数据库的连接就行，也不考虑任何程序的优化程度啥的，能跑就行哈哈哈，在网上copy了 一些网站样式啥的，具体如下：
一、
开发工具：myeclipse，mysql，tsxomc；开发语言：jsp，html（css），JavaScript；java（操作数据库部分）；项目源代码下载地址：
二、
部署开发环境：具体可以看我前面发的MyEclipse+MySQL制作简单的登录注册系统详细步骤、代码、注释(一）（二），这两篇博文中讲的比较清楚，这里就不一一解释了
三、
项目内容：
实现效果：
部分主要代码：
//main.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="zh-cn">
<!-- Added by wx --><meta http-equiv="content-type" content="text/html;charset=utf-8" />
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="referrer" content="origin" />
<meta http-equiv="Cache-Control" content="no-transform" />
<meta http-equiv="Cache-Control" content="no-siteapp" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>实训项目</title>
<link rel="stylesheet" href="js/blog-common.min9596.css" />
<link id="MainCss" rel="stylesheet" href="js/bundle-codinglife.mina985.css" />
<link type="text/css" rel="stylesheet" href="js/custom65f5.css" />
<link id="mobile-style" media="only screen and (max-width: 767px)" type="text/css" rel="stylesheet" href="js/bundle-codinglife-mobile.min59df.css" />
<link type="application/rss+xml" rel="alternate" href="" />
<link type="application/rsd+xml" rel="EditURI" href="js/rsd.xml" />
<link type="application/wlwmanifest+xml" rel="wlwmanifest" href="js/wlwmanifest.xml" />
<script type="text/javascript">
function check(){
alert("请先登录，登录后才可评论");}
function chakan(){
alert("请先登录，登录后才可查看");}
</script>
</head>
<body>
<a name="top"></a>
<div id="page_begin_html" style="height: 49px; "></div>
<!--done-->
<div id="home">
<div id="header">
<div id="blogTitle" style="height: 197px; ">
<a id="lnkBlogLogo" href="login.jsp" ><img id="blogLogo" src="js/tb.jpg" style="height: 30px; width: 36px; "/><p style="font-size:26;" align="right" >登录/注册</p></a>
<h1><a style="font-size: 30" href="main.jsp">17020组实训项目</a>
</h1>
<h2>
咿呀咿呀没有哟
</h2>
</div><!--end: blogTitle 博客的标题和副标题 -->
<div id="navigator">
<ul id="navList">
<li><a id="blog_nav_sitehome" class="menu" href="main.jsp">
个人首页</a>
</li>
<li>
<a id="blog_nav_myhome" class="menu" href="tp.jsp">
精彩图片</a>
</li>
<li>
<a id="blog_nav_newpost" class="menu" href="jbsp.jsp">
劲爆视频</a>
</li>
<li>
<a id="blog_nav_contact" class="menu" onclick="return chakan()">
文章精选</a></li>
<li>
<a id="blog_nav_rss" class="menu" onclick="return chakan()">
团队简介</a>
<!--<partial name="./Shared/_XmlLink.cshtml" model="Model" /></li>--></li>
</ul>
<div class="blogStats">
<span id="stats_article_count">文章 -
0 </span>
<span id="stats-comment_count">评论 -
0</span>
</div><!--end: blogStats -->
</div><!--end: navigator 博客导航栏 -->
</div><!--end: header 头部 -->
<div id="main">
<div id="mainContent">
<div class="forFlow">
<!--done-->
<div class="day">
<div class="dayTitle">
<a>2020年4月2日</a>
</div>
<div class="postTitle">
<a class="postTitle2" onclick="return chakan()" rel="nofollow">
你好，我是雷军
</a>
</div>
<div class="postCon">
<div class="c_b_p_desc">
摘要：雷军谈过小米手机的初心。“我在初期做小米的时候提到，零广告预算，也几乎是零渠道预算，成本定价，生产材料多少钱就定多少钱，这就是为什么我做硬件研发还必须要做零售...
<a onclick="return chakan()" class="c_b_p_desc_readmore">阅读全文</a>
</div>
</div>
<div class="clear"></div>
<div class="postDesc">
posted @ 2020-4-2 15:47已阅读 (6132) <a onclick="return check()" rel="nofollow">评论 (0) </a>
</div>
<div class="clear"></div>
</div>
<br>
<div class="day" style="height: 38px; ">
<div class="dayTitle">
<a onclick="return chakan()">更多文章>>>></a>
</div>
</div>
</div><!--end: forFlow -->
</div><!--end: mainContent 主体内容容器-->
<div id="sideBar">
<div id="sideBarMain">
</div><!--end: sideBarMain -->
</div><!--end: sideBar 侧边栏容器 -->
<div class="clear"></div>
</div><!--end: main -->
<div class="clear"></div>
<div id="footer">
</div><!--end: footer -->
</div><!--end: home 自定义的最大容器 -->
</body>
</html>//login.jsp
<!-- 2020.3.31
by xiaoxiao -->
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录案例</title>
<link rel="stylesheet"
href="store.css"
type="text/css">
</head>
<style>
body{
background-color:pink;}</style>
<body>
<div class="container">
<div style="height: 119px; "></div>
<div class="row" style="margin-top: 30px">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading" style="background-color:pink;">
登录//注册
</div>
<div class="panel-body">
<form action="check-login.jsp" method="POST" name="loginForm">
<div class="form-group">
<label for="name">用户名</label> <input type="text"
class="form-control" name="name" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="">密码</label> <input type="password"
class="form-control" name="password" placeholder="请输入密码">
</div>
<button type="submit" class="btn btn-primary"
onclick="return checkForm()"style="background-color:pink;">登录</button>
<a class="btn btn-primary"
href="./register.jsp" style="background-color:pink;">注册</a>
<a class="btn btn-primary"
href="main.jsp" style="background-color:pink;">游客</a>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
function checkForm() {
var name = loginForm.name.value;
var password = loginForm.password.value;
//alert(name + password);
if (name == "" || name == null) {
alert("请输入用户名");
loginForm.name.focus();//光标位置
return false;
} else if (password == "" || password== null) {
alert("请输入密码");
loginForm.password.focus();
return false;
}
return true;
}
</script>
</html>//check-login.jsp
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Connection conn = null;
PreparedStatement ps = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/webstore";
//定义mysql的连接，我是有一个webstore的数据库，所以最后为webstore
String username = "root";
String password = "123456";
//mysql的用户名和密码
conn = DriverManager.getConnection(url, username, password);
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
request.getSession().setAttribute("username",name);//将用户名保存在整个会话期间
String pwd = request.getParameter("password");//传递来自login页面的信息
String sql = "SELECT *FROM user WHERE name ='" + name + "'AND password = '" + pwd + "'";
ps = conn.prepareStatement(sql);
rs = ps.executeQuery();
if (rs.next()) {
response.sendRedirect("./vip.jsp");
}else{
response.sendRedirect("./false.jsp");//这里是登录失败的显示页面
}
%>//check-register.jsp
<%@page import="java.sql.*"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%
Connection conn = null;
PreparedStatement ps = null;
PreparedStatement pd = null;
ResultSet cz = null;
Class.forName("com.mysql.jdbc.Driver");
String url = "jdbc:mysql://localhost:3306/webstore";
//定义mysql的连接，我是有一个webstore的数据库，所以最后为webstore
String username = "root";
String password = "123456";
//mysql的用户名和密码
conn = DriverManager.getConnection(url, username, password);
request.setCharacterEncoding("utf-8");
String name = request.getParameter("name");
request.getSession().setAttribute("username",name);//将用户名保存在整个会话期间传递到注册成功页面展示
String sjk="select * from user where name='"+name+"';";
pd = conn.prepareStatement(sjk);
cz = pd.executeQuery();
String pwd = request.getParameter("password");
request.getSession().setAttribute("userpwd",pwd);//将密码保存在整个会话期间
String sql = "INSERT INTO user(name,password) VALUES('" + name + "','" + pwd + "');";
ps = conn.prepareStatement(sql);//PreparedStatement是预编译的,对于批量处理可以大大提高效率. 也叫JDBC存储过程
int rs=ps.executeUpdate();
if(name!=null){
if(cz.next()){
out.print("用户已经存在 "+"请<a href=\"register.jsp\">重新注册</a>");
}
else if (rs!=0) {
response.sendRedirect("./succeed.jsp");
}else{
response.sendRedirect("./false.jsp");
}
}
%>//register.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册</title>
<link rel="stylesheet"
href="store.css"
type="text/css">
<style>
body,html{
margin: 0;
padding: 0;
border: 0;
font-family: 'Nunito', sans-serif;
background-color:pink;
}
canvas{
margin: 0;
padding: 0;
display: block;
touch-action: none;
}
</style>
</head>
<body>
<canvas height="100%" width="100%" style="position: fixed; top: 0px; left: 0px; z-index: -1; opacity: 0.5;"></canvas>
<div class="container" >
<div class="row" style="margin-top: 30px">
<div class="col-md-4 col-md-offset-4">
<div class="panel panel-primary">
<div class="panel-heading"style="background-color:pink;">
注册
</div>
<div class="panel-body">
<form action="check-register.jsp" method="POST" name="loginForm">
<div class="form-group">
<label for="name">用户名</label> <input type="text"
class="form-control" name="name" placeholder="请输入用户名">
</div>
<div class="form-group">
<label for="">密码</label> <input type="password"
class="form-control" name="password" placeholder="请输入密码">
</div>
<div class="form-group">
<label for="">确认密码</label> <input type="text"
class="form-control" name="refill" placeholder="请再次输入密码">
</div>
<button style="align:center;background-color:pink;width: 125px" type="submit" class="btn btn-primary"
onclick="return checkForm()" >确定注册</button>
<button style="align:center;background-color:pink;width: 125px" class="btn btn-primary" type="reset" name=rere value="重填" >重填</button>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
<script>
var canvas = document.querySelector('canvas');
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
c = canvas.getContext('2d');
window.addEventListener('resize', function(){
canvas.height = window.innerHeight;
canvas.width = window.innerWidth;
initCanvas();
})
var mouse = {
x: undefined,
y: undefined
}
window.addEventListener('mousemove',
function (event) {
mouse.x = event.x;
mouse.y = event.y;
drawCircles();
}
)
window.addEventListener("touchmove",
function (event) {
let touch = event.touches[0];
mouse.x = touch.clientX;
mouse.y = touch.clientY;
drawCircles();
}
)
function Circle(x, y, radius, vx, vy, rgb, opacity, birth, life){
this.x = x;
this.y = y;
this.radius = radius;
this.minRadius = radius;
this.vx = vx;
this.vy = vy;
this.birth = birth;
this.life = life;
this.opacity = opacity;
this.draw = function() {
c.beginPath();
c.arc(this.x, this.y, this.radius, Math.PI * 2, false);
c.fillStyle = 'rgba(' + rgb +','+ this.opacity +')';
c.fill();
}
this.update = function(){
if (this.x + this.radius > innerWidth || this.x - this.radius < 0) {
this.vx = -this.vx;
}
if (this.y + this.radius > innerHeight || this.y - this.radius < 0) {
this.vy = -this.vy;
}
this.x += this.vx;
this.y += this.vy;
this.opacity = 1- (((frame - this.birth) * 1) / this.life);
if (frame > this.birth + this.life){
for (i == 0; i < circleArray.length; i++){
if (this.birth == circleArray[i].birth && this.life == circleArray[i].life){
circleArray.splice(i, 1);
break;
}
}
} else{
this.draw();
}
}
}
var circleArray = [];
function initCanvas() {
circleArray = [];
}
var colorArray = [
'355,85,80',
'9,80,100',
'343,81,45'
]
function drawCircles(){
for (i = 0; i < 6; i++) {
let radius = Math.floor(Math.random() * 4) + 2;
let vx = (Math.random() * 2) - 1;
let vy = (Math.random() * 2) - 1;
let spawnFrame = frame;
let rgb = colorArray[Math.floor(Math.random() * colorArray.length)];
let life = 100;
circleArray.push(new Circle(mouse.x, mouse.y, radius, vx, vy, rgb, 1, spawnFrame, life));
}
}
var frame = 0;
function animate() {
requestAnimationFrame(animate);
frame += 1;
c.clearRect(0, 0, innerWidth, innerHeight);
for (i= 0; i < circleArray.length; i++ ){
circleArray[i].update();
}
}
initCanvas();
animate();
for ( i = 1; i < 210;i++) {
(function (index) {
setTimeout(function () {
mouse.x = 100 + i * 10;
mouse.y = 100;
drawCircles();
}, i * 10);
})(i);
}</script>
<script
src="login.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous">
</script>
<script type="text/javascript">
function checkForm() {
var name = loginForm.name.value;
var password = loginForm.password.value;
var refill =loginForm.refill.value;
//alert(name + password);
if (name == " " || name == null) {
alert("请输入用户名");
loginForm.name.focus();
return false;
} else if (password == "" || password== null) {
alert("请输入密码");
loginForm.password.focus();
return false;
} else if(password!=refill){
alert("前后密码输入不一致，请重新输入！");
loginForm.refill.focus();
return false;
}
return true;
}
</script>
</html>
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
