河北省重大需求徵集開發進度（一）
阿新 • • 發佈：2020-03-03
對之前佈置得作業進行了重構，自己套用了一套後臺管理介面的html
從中學得的感悟：
①html與jsp頁面的操作不一樣，簡單來說在jsp可以直接的獲取後臺的session物件，為登入的使用者提供姓名
然而在html頁面是不可以直接沿用jsp裡的方式，我得從js裡呼叫ajax來訪問後臺的session資料，然後反還給前臺的html來獲取使用者的姓名
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>後臺佈局</title>
<link rel="stylesheet" href="layui/layui.css" >
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
var username;
$(function(){
$.ajax({
url:"login_user",
type:"post",
dataType:"text",
success:function(data){
document.getElementsByTagName('b')[0].innerHTML=data;
username=data;
$("b").css("font-family","楷體");
},
error:function(data){
alert("系統出錯");
}
});
});
function updatepwd()
{
var password=prompt("請輸入修改後的密碼：");
if(password!=""&&password!=null)
{
$.post(
"updatepsw",
{
name:username,
password:password
},
function(data)
{
if(data=="yes")
alert("修改成功！");
else
alert("修改失敗！");
},
"text"
);
}
}
</script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
<div class="layui-header">
<div class="layui-logo">後臺佈局</div>
<!-- 頭部區域（可配合layui已有的水平導航） -->
<ul class="layui-nav layui-layout-left">
<li class="layui-nav-item"><a href="">控制檯</a></li>
<li class="layui-nav-item"><a href="">商品管理</a></li>
<li class="layui-nav-item"><a href="">使用者</a></li>
<li class="layui-nav-item">
<a href="javascript:;">其它系統</a>
<dl class="layui-nav-child">
<dd><a href="">郵件管理</a></dd>
<dd><a href="">訊息管理</a></dd>
<dd><a href="">授權管理</a></dd>
</dl>
</li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item">
<a href="javascript:;">
<img src="http://t.cn/RCzsdCq" class="layui-nav-img">
<b></b>
</a>
<dl class="layui-nav-child">
<dd><a href="">基本資料</a></dd>
<dd><a href="">安全設定</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="login.jsp">退出</a></li>
</ul>
</div>
<div class="layui-side layui-bg-black">
<div class="layui-side-scroll">
<!-- 左側導航區域（可配合layui已有的垂直導航） -->
<ul class="layui-nav layui-nav-tree" lay-filter="test">
<li class="layui-nav-item ">
<a class="" href="#">需求彙總</a>
<dl class="layui-nav-child">
<dd><a href="collect.jsp" target="frame">需求徵集</a></dd>
<dd><a href="getallxuqiu" target="frame">瀏覽需求</a></dd>
<dd><a href="checkxq" target="frame">需求稽核</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="register.jsp" target="frame">使用者註冊</a></li>
<li class="layui-nav-item"><a href="#" onclick="updatepwd()">修改密碼</a></li>
</ul>
</div>
</div>
<div class="layui-body">
<!-- 內容主體區域 -->
<div style="padding: 0px" >
<iframe id="righFrame" name="frame" width="100%" height="800px" scrolling="no" style="border:1px solid #CCC;"></iframe>
</div>
</div>
</div>
<script src="layui/layui.all.js"></script>
<script>
//JavaScript程式碼區域
layui.use('element', function(){
var element = layui.element;
});
</script>
</body>
</html>
login_user
package servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class login_user
*/
@WebServlet("/login_user")
public class login_user extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public login_user() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String name=(String)request.getSession().getAttribute("name");
System.out.println(name);
out.write(name);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}②其次就是：一些必要的東西不用深度學習但要會用（例如：驗證碼的使用與獲取）
login.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
<script src="js/bootstrap.js"></script>
<title>使用者登入</title>
</head>
<body>
<%
Object message = request.getAttribute("message");
if (message != null && !"".equals(message)) {
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%
}
%>
<div align="center">
<h1>使用者登入</h1>
</div>
<div align="center">
<form class="form-horizontal" role="form" name="form1" action="login_do" method="post" onsubmit="return check(form1)">
<div class="form-group">
<label for="name" class="col-sm-5 control-label">使用者名稱</label>
<div class="col-sm-2">
<input type="text" class="form-control" name="name" id="name" placeholder="請輸入名字">
</div>
</div>
<div class="form-group">
<label for="password" class="col-sm-5 control-label">密碼</label>
<div class="col-sm-2">
<input type="password" class="form-control" name="password" id="password" placeholder="請輸入密碼">
</div>
</div>
<div class="form-group">
<label for="cord" class="col-sm-5 control-label">驗證碼</label>
<div class="col-sm-1">
<input type="text" class="form-control" name="code" id="code" placeholder="">
</div>
<div class="col-sm-1">
<img id="imageCode" src="CodeServlet" onclick="changeImage()">
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-8">
<button type="submit" class="btn btn-success">登入</button>
<button type="button" class="btn btn-warning" href="register.jsp">註冊</button>
</div>
</div>
</form>
</div>
<script type="text/javascript">
function check(form)
{
var name=form.name.value;
var password=form.password.value;
var code=form.code.value;
if(name==""||password==""||code=="")
{
alert("請將資訊補充完整！");
return false;
}
}
function changeImage()
{
document.getElementById("imageCode").src="CodeServlet?"+new Date().getTime();
}
</script>
</body>
</html>呼叫驗證碼的CodeServlet：
package servlet;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.image.BufferedImage;
import java.io.BufferedReader;
import java.io.FileInputStream;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.ArrayList;
import java.util.List;
import java.util.Random;
import javax.imageio.ImageIO;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
@WebServlet("/CodeServlet")
public class CodeServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
public CodeServlet() {
super();
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int width = 120;
int height = 36;
// 步驟一 繪製一張記憶體中圖片
BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
// 步驟二 圖片繪製背景顏色 ---通過繪圖物件
Graphics graphics = bufferedImage.getGraphics();// 得到畫圖物件 --- 畫筆
// 繪製任何圖形之前 都必須指定一個顏色
graphics.setColor(getRandColor(200, 250));
graphics.fillRect(0, 0, width, height);
// 步驟三 繪製邊框
graphics.setColor(Color.WHITE);
graphics.drawRect(0, 0, width - 1, height - 1);
// 步驟四 四個隨機數字
Graphics2D graphics2d = (Graphics2D) graphics;
// 設定輸出字型
graphics2d.setFont(new Font("宋體", Font.BOLD, 18));
Random random = new Random();// 生成隨機數
// 取隨機產生的認證碼(4位數字)
String word = "";
for (int i = 0; i < 4; i++) {
String rand = String.valueOf(random.nextInt(10));
word += rand;
}
// 定義x座標
int x = 10;
for (int i = 0; i < word.length(); i++) {
// 隨機顏色
graphics2d
.setColor(new Color(20 + random.nextInt(110), 20 + random.nextInt(110), 20 + random.nextInt(110)));
// 旋轉 -30 --- 30度
int jiaodu = random.nextInt(60) - 30;
// 換算弧度
double theta = jiaodu * Math.PI / 180;
// 獲得字母數字
char c = word.charAt(i);
// 將c 輸出到圖片
graphics2d.rotate(theta, x, 20);
graphics2d.drawString(String.valueOf(c), x, 20);
graphics2d.rotate(-theta, x, 20);
x += 30;
}
// 將驗證碼內容儲存session作用域
request.getSession().setAttribute("checkcode_session", word);
// 步驟五 繪製干擾線
graphics.setColor(getRandColor(160, 200));
int x1;
int x2;
int y1;
int y2;
for (int i = 0; i < 30; i++) {
x1 = random.nextInt(width);
x2 = random.nextInt(12);
y1 = random.nextInt(height);
y2 = random.nextInt(12);
graphics.drawLine(x1, y1, x1 + x2, x2 + y2);
}
// 將上面圖片輸出到瀏覽器 ImageIO
graphics.dispose();// 釋放資源
ImageIO.write(bufferedImage, "jpg", response.getOutputStream());
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse
* response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
private Color getRandColor(int fc, int bc) {
// 取其隨機顏色
Random random = new Random();
if (fc > 255) {
fc = 255;
}
if (bc > 255) {
bc = 255;
}
int r = fc + random.nextInt(bc - fc);
int g = fc + random.nextInt(bc - fc);
int b = fc + random.nextInt(bc - fc);
return new Color(r, g, b);
}
}
登陸時的驗證碼的驗證servlet：login_do
package servlet;
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.Cookie;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import Bean.User;
import service.userservice;
/**
* Servlet implementation class login_do
*/
@WebServlet("/login_do")
public class login_do extends HttpServlet {
private static final long serialVersionUID = 1L;
userservice service=new userservice();
/**
* @see HttpServlet#HttpServlet()
*/
public login_do() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
request.setCharacterEncoding("utf-8");
String name=request.getParameter("name");
String password=request.getParameter("password");
User bean=new User(name,password);
String ncode=(String)request.getSession().getAttribute("checkcode_session");
if(ncode.equals(request.getParameter("code")))
{
if(service.isPsw(bean))
{
User b=service.findbyname(name);
request.getSession().setAttribute("name", name);
response.sendRedirect("main.html");
}else {
request.setAttribute("message", "密碼或使用者名稱錯誤");
request.getRequestDispatcher("login.jsp").forward(request, response);
}
}else
{
request.setAttribute("message", "驗證碼錯誤");
request.getRequestDispatcher("login.jsp").forward(request, response);
}
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
③搜尋框的動態重新整理：實現按名字模糊查詢和時間範圍內查詢
通過標籤庫的<c:if>的使用實現根據狀態的不同，更新不同的操作
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- 上述3個meta標籤*必須*放在最前面，任何其他內容都*必須*跟隨其後！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- jQuery (Bootstrap 的所有 JavaScript 外掛都依賴 jQuery，所以必須放在前邊) -->
<script src="js/jquery-1.11.3.min.js"></script>
<!-- 載入 Bootstrap 的所有 JavaScript 外掛。你也可以根據需要只加載單個外掛。 -->
<script src="js/bootstrap.js"></script>
<title>瀏覽需求</title>
</head>
<body style="background-color: #87CEFA">
<%
Object message = request.getAttribute("message");
if (message != null && !"".equals(message)) {
%>
<script type="text/javascript">
alert("<%=request.getAttribute("message")%>");
</script>
<%
}
%>
<div align="center">
<h1>河北省重大需求徵集清單</h1>
<br>
技術需求名稱<input type="text" id="name" name="name">
填報日期<input type="date" id="btime" name="btime">-<input type="date" id="etime" name="etime">
<button type="button" class="btn btn-info" onclick="findxq()">查詢</button>
<button type="button" class="btn btn-info" onclick="getall()">顯示全部</button>
<br><br>
<table class="table">
<thead>
<tr bgcolor="#1E90FF">
<th>需求編號</th>
<th>技術需求名稱</th>
<th>填報時間</th>
<th>狀態</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${xuqius}" var="item">
<tr class="active">
<td>${item.id}</td>
<td>${item.name}</td>
<td>${item.date}</td>
<td>${item.state2}</td>
<c:if test="${item.state2 == '未稽核' }">
<td>
<a href="lookself?id=${item.id }">檢視</a>
<a href="updateself?id=${item.id }">修改</a>
<a href="getallxuqiu" onclick="del(this)" type="${item.name }">刪除</a>
</td>
</c:if>
<c:if test="${item.state2 == '通過'||item.state2=='未通過' }">
<td>
<a href="lookcheck?id=${item.id }">檢視稽核</a>
</td>
</c:if>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<script type="text/javascript">
var state="${item.state2}";
if(state!="")
alert(state);
function del(data)
{
var c = confirm("確定刪除嗎");
//判斷
var name=data.type;
if(c=="確定"){
$.post(
"delxq",
{
name:name
},
function(data)
{
if(data=="yes")
alert("刪除成功！");
else
alert("刪除失敗！");
},
"text"
);
}
}
function findxq()
{
var name=document.getElementById("name").value;
var btime=document.getElementById("btime").value;
var etime=document.getElementById("etime").value;
if(name==""&&(btime==""&&etime==""))
{
alert("名字或者時間區間至少寫一個！");
return ;
}
else
{
window.location.href = "findxuqiu?name="+name+"&btime="+btime+"&etime="+etime;
}
}
function getall()
{
window.location.href="getallxuqiu";
}
</script>
</body>
</html>
目前的實現：
後臺的需求徵集
需求的瀏覽與查詢：
需求的稽核：只會顯示未稽核的需求
當點選稽核後：會比新增需求多出兩個：一個是意見，另一個是選擇是否通過，通過後就不會再稽核介面再顯示
改進：把介面在完善，學會套用一些好看的模板，之後在加一些需求的分頁瀏覽和個人使用者的介面，以上為管理員的瀏覽介面
&n