項目說明及需求

建立和維護一個的Web網站
必須有數據庫操作部分，即對錶的增改刪和瀏覽功能
要有瀏覽數據庫內容的功能
最好有分頁瀏覽功能。

設計思路

我和另外一個同學兩個人共同完成這個項目，考慮到時間的安排，以及需求，我們打算就做一個類似於淘寶的服裝銷售網站。
其次，這個方案很好的符合我們的需求，初始需要一個數據庫來構建商品目錄，且只有管理員登錄才能對該數據庫經行操作修改。
然後就是用戶的需求，需要註冊和登錄才能夠使用該平臺。用戶賬戶密碼使用數據庫經行存儲。
銷售平臺給出商品列表。

具體實現

平臺：
Eclipse Jee Neon
MySQL 5.6
Tomcat v9.0 Server

註冊界面

<%@ page language="java" import="java.util.*,java.sql.*"
contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>

<%! 
   boolean Check(String Name) {
   // 暱稱格式：限16個字符，支持中英文、數字、減號或下劃線
   String regStr = "^[a-zA-Z0-9_]{3,16}$";
   return Name.matches(regStr);
   }
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>註冊界面</title>
<style>
body{
  margin:0 15%;
}
h1{
  text-align:center;
  font-size:1.3em;
  font-family:"微軟雅黑";
  color:#ffffff;
  padding-top:40px;
}
p{
   text-align:center;
   font-family:"微軟雅黑";
}
.head img{
  float:left;
  margin-left:80px;
  margin-top:10px;
}
.middle img{
  float:left;
  margin-left:80px;
  margin-top:35px;
}
span{
  float:left;
  margin-left:40px;
  margin-top:25px;
  font-weight: bold;
  font-family:"微軟雅黑";
  letter-spacing: 0.1em;
  font-size:2em;
}
.middle {
    float: left;
    margin-top: 20px;
    width: 1000px;
    height: 400px;
    background:
        url(https://images.pexels.com/photos/192632/pexels-photo-192632.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb)
        no-repeat;
}
input{
  border-radius:5px;
  border: 1px solid #999999;
  box-shadow: 1px 1px 3px #cccccc;
}
form{
  width:320px;
  height:360px;
  background-color:rgba(113,119,116,0.3);
  margin-left:600px;
  margin-top:20px;
  text-align:center;
  position:relative;
  z-index:2;
  border-radius:5px;
}
#sub1{
   background-color:#E4393C;
   color:white;
   width:240px;
   height:30px;
   margin-left:20px;
   font-size:1em;
   font-family:"微軟雅黑";
}
#user{
   width:200px;
   height:20px;
   margin-left:8px;
   font-family:"微軟雅黑";
}
#psw{
   width:200px;
   height:20px;
   margin-left:8px;
   font-family:"微軟雅黑";
}
#sub3{
   background-color:rgb(234,227,208);
   color:rgb(181,170,141);
   width:240px;
   height:30px;
   margin-left:20px;
   margin-top:14px;
   font-size:1em;
   font-family:"微軟雅黑";
}
a[href] {
   text-decoration:none;
   font-family:"微軟雅黑";
   color:#000000;
}
a[href]:hover {
   text-decoration:underline;
   font-family:"微軟雅黑";
   color:red;  
}
 form a[href]{
    color:red;
}
.tail{
    float:left;
    margin-top:35px;
    font-size:0.4em;
    font-family:"微軟雅黑";
    width:100%;
}
footer_copyright{
    width:100%;
}
.tag1{
    float:left;
    margin-left:280px;
    width:100px;
}
.sep{
    float:left;
    margin-left:10px;
    width:5px;
    position:absolute;
}
.tag2{
    float:left;
    margin-left:50px;
    width:130px;
    position:absolute;
}
.tag3{
    float:left;
    margin-left:200px;
    position:absolute;
}
.footer_icon img{
  float:left;
  margin-left:250px;
  margin-top:13px;
}

#redone {
   text-decoration:none;
   color:rgb(234,227,208);
   font-size:1.2em;
}

</style>
</head>
<body>       
    <%StringBuilder table=new StringBuilder("");
    ResultSet rs = null;%>
    <% request.setCharacterEncoding("utf-8");
    String msg = "123";
    String user = "";
    String psw = "";
    String psw1 = "";
    String puser="";
    String connectString = "jdbc:mysql://localhost:3306/14348043"
                + "?autoReconnect=true&useUnicode=true"
                + "&characterEncoding=UTF-8"
                +"&useSSL=true";  
    if(request.getMethod().equalsIgnoreCase("post")){
        msg="789";
       try{
          Class.forName("com.mysql.jdbc.Driver");
          Connection con = DriverManager.getConnection(connectString,"user", "123");
          Statement stmt = con.createStatement();
          user = request.getParameter("user");
          psw = request.getParameter("psw");
          puser=user;
          if(user==""){
              msg="請輸入你的註冊用戶名!";%>
              <script>
              alert("請輸入你的註冊用戶名!");
              </script>
          <%}
          else if(!Check(user)) {
              msg="用戶名長度不合法";%>
              <script>
              alert("用戶名長度不合法");
              </script>
          <%}
          else if(psw==""){
              msg="請輸入你的註冊密碼!";%> 
              <script>
              alert("請輸入你的註冊密碼!");
              </script>
          <%}
          else if(!Check(psw)){
             msg="密碼只能是3-16位的數字,英文,下劃線組合!";%>
             <script>
             alert("密碼只能是3-16位的數字,英文,下劃線組合!");
            </script>
          <%}
          else{
            //String sql="select psw from customer where user = "+user;
              String fmt="insert into customer(user,psw) values('%s', '%s')";
              String sql = String.format(fmt,user,psw);               
              int cnt = stmt.executeUpdate(sql);            
              if(cnt>0){                
                msg = "保存成功!";

              }%>
              <script>
              alert("恭喜,您已經完成註冊!");
              </script>
              <%stmt.close();
          }               
              con.close();
       }catch (Exception e){
        msg="該用戶名已經被註冊,請更換用戶名!";
        out.print(e);%>
        <script>
        alert("該用戶名已經被註冊,請更換用戶名!");
        </script>
       <%}
    }%> 


     <div class="head">
    <img
            src="https://gdp.alicdn.com/imgextra/i2/556855152/TB2qKGqnbBmpuFjSZFAXXaQ0pXa_!!556855152.jpg"
            width="950px" height="123px">      
    <div class="middle"> 
    <img src="https://gdp.alicdn.com/imgextra/i2/556855152/TB2mWV4eB8kpuFjSspeXXc7IpXa_!!556855152.jpg" width="400px" height="332px">  
    <form action="http://localhost:8080/14348043/Register.jsp" method="post" name="f">
    <h1>賬戶註冊</h1>
    <p> 用 戶 名： <input id="user" name="user" type="text" placeholder="輸入6位的註冊用戶名" value=<%=puser%>></p>
    <p> 設置密碼 ：<input id="psw" name="psw" type="password" placeholder="輸入3-16位的數字英文,下劃線組合"/></p>
    <input id ="sub3" name="sub3" type="submit" value="立即註冊"> 
    <p id="redone">我已經註冊，現在就<a href="http://localhost:8080/14348043/index.jsp">登錄</a></p> 
    </form>  
    </div> 


<div class="tail">
    <div class="footer_copyright">
    <span class="tag1">Web 2017</span>
    <span class="sep">|</span>
    <span class="tag2"><a href="#">H & J</a></span>
    <span class="tag3"><a href="https://anwhere.github.io/Email/">聯繫郵箱</a></span>
    </div>
    <div class="footer_icon">
    <a href="https://anwhere.github.io/Email/"><img class="pic1" src="https://gdp.alicdn.com/imgextra/i1/556855152/TB2VyoThTcCL1FjSZFPXXXZgpXa_!!556855152.jpg" width="475x" height="83px"/></a>
    </div>
    </div>
</body>
</html>

用戶登錄

<!--   <span>歡迎登錄</span> -->
    </div>    
    <div class="middle"> 
      <div id="slideMain">
        <div class="slides">
            <a href="https://item.taobao.com/item.htm?spm=a1z10.5-c.w4002-8600903382.31.xO5MNs&id=534652504040"> <img class="slide" src="https://gdp.alicdn.com/imgextra/i3/556855152/TB27pXunkqvpuFjSZFhXXaOgXXa_!!556855152.jpg" width="400px" height="404px"></a>
            <a href="https://item.taobao.com/item.htm?spm=a1z10.5-c.w4002-8600903382.46.xO5MNs&id=547014682023"> <img class="slide" src="https://gdp.alicdn.com/imgextra/i3/556855152/TB2m48wdr_0UKFjy1XaXXbKfXXa_!!556855152.jpg" width="400px" height="404px"/></a>
            <a href="https://item.taobao.com/item.htm?spm=a1z10.5-c.w4002-8600903382.67.xO5MNs&id=548259673114"> <img class="slide" src="https://gdp.alicdn.com/imgextra/i3/556855152/TB2h52_iHFkpuFjy1XcXXclapXa_!!556855152.jpg" width="400px" height="354px"/></a>
            <a href="https://item.taobao.com/item.htm?spm=a1z10.5-c.w4002-8600903382.79.xO5MNs&id=546967300905"> <img class="slide" src="https://gdp.alicdn.com/imgextra/i1/556855152/TB2oT6CiHtlpuFjSspfXXXLUpXa_!!556855152.jpg" width="400px" height="354px"/></a>
        </div>
      </div>
    <form action="http://localhost:8080/14348043/index.jsp" method="post" name="f">
    <h1>用戶登錄</h1>
    <p> 用戶： <input id="user" name="user" type="text" placeholder="這裏輸入用戶名" value=<%= puser %>></p>
    <p> 密碼 ：<input id="psw" name="psw" type="password" placeholder="這裏輸入密碼"></p>
    <input id ="sub1" name="sub1" type="submit" value="登錄" /> 
    <input id ="sub2" name="sub2" type="button" value="註冊" onclick="location.href='http://localhost:8080/14348043/Register.jsp'"/>    
    <p id="forget"><a href="http://localhost:8080/14348043/ForgetPSW.jsp">忘記密碼？</a></p> 
    </form>   
    </div>

修改密碼

if(request.getMethod().equalsIgnoreCase("post")){
       try{
          Class.forName("com.mysql.jdbc.Driver");
          Connection con = DriverManager.getConnection(connectString,"user", "123");
          Statement stmt = con.createStatement();
          user = request.getParameter("user");
          psw = request.getParameter("psw");
          puser=user;
          if(user==""){
              msg="請輸入你的用戶名!";%>
              <script>
              alert("請輸入你的用戶名!");
              </script>
          <%}
          else if(!rexCheckuser(user)) {
              msg="用戶名長度必須爲6位!";%>
              <script>
              alert("用戶名長度必須爲6位!");
              </script>
          <%}
          else if(psw==""){
              msg="請輸入你的新密碼!";%> 
              <script>
              alert("請輸入你的新密碼!");
              </script>
          <%}
          else if(!rexCheckpsw(psw)){
             msg="密碼只能是3-16位的數字,英文,下劃線組合!";%>
             <script>
             alert("密碼只能是3-16位的數字,英文,下劃線組合!");
            </script>
          <%}
          else{
              rs=stmt.executeQuery("select user from customer where user = "+user);
              if(!rs.next()){
                msg = "用戶名不存在,請重新註冊!";%>
                 <script>
               alert("用戶名不存在,請重新註冊!");
               </script>
             <%}
              else{
                String fmt="update customer set psw='"+psw+"' where user='"+user+"'";
                int cnt = stmt.executeUpdate(fmt);
                if(cnt>0){                  
                   msg = "修改成功!";
                }
                %>
                <script>
                alert("恭喜,您已經完成密碼修改!");
                </script>
                <%stmt.close();  
              }               
          }               
              con.close();
       }catch (Exception e){
        //msg="該用戶名已經被註冊,請更換用戶名!";%>
        <script>
        alert("該用戶名已經被註冊,請更換用戶名!");
        </script>
       <%}
    }%>

商品列表

  <div class="all-goods">
<%      
    try{   
        if(!pgno.equals("1")){
            int pg=Integer.parseInt(pgno);
            pg=(pg-1)*10;
            while(pg > 0 && rs.next()){
              pg--;
            }
          }     

      while(rs.next() && (goods_num++ <= 10)){ 
%>
        <div class="goods-border">
            <div class="goods">

            <div class="p-price">
              ¥<span  class="J_price"><%=rs.getString("price")%></span>
            </div>
            <div class="p-name">

                <%=rs.getString("name")%>
              </a>
            </div>
            <div class="p-shop">
                <%=rs.getString("keeper")%>
            </div>
          </div>
          <!--goods end-->
        </div>
        <!--goods-border end--> 
<%    
      }
      stmt.close();
      con.close();
    }catch(Exception e){
      msg = e.getMessage();
    }
%>

    <div style="clear:both"></div>

    <div class="jump">
        <span class="p-num">
        <a href="list.jsp?pgno=<%=pgno_pre%>&pgcnt=2&pid1=<%=s%>">上一頁</a>
            <span><%=pgno%></span>
        <a href="list.jsp?pgno=<%=pgno_next%>&pgcnt=2&pid1=<%=s%>">下一頁</a>
      </span>
    </div>
    <!--jump end-->
  </div>
  <!--all-goods end-->

管理員登錄

 if(request.getMethod().equalsIgnoreCase("post")){
        try{
            user = request.getParameter("user");
            psw = request.getParameter("psw");  
            if(user.equals("admin")&&psw.equals("111")){
                msg="登錄成功";
                response.sendRedirect("manage.jsp");
            }
            else{
                msg="登錄失敗";%>
    <script>
                 alert("密碼錯誤,請重新輸入!");
                 </script>
<%}
        }catch (Exception e){

        }
    }
    %>

管理員操作


<div class= "main">
   <div class="header">
   <h1>系統管理員操作</h1>
   </div>
   <div class="middle">
   <a href="BlackList.jsp">是小黑屋</a>
   <a href="ItemList.jsp">服裝管理</a>
   </div>
</div>

小黑屋

if(request.getMethod().equalsIgnoreCase("post")){
        Class.forName("com.mysql.jdbc.Driver");
        Connection con = DriverManager.getConnection(connectString,"user", "123");
        Statement stmt = con.createStatement();
        try{
            id = request.getParameter("id"); 

            if(id==""){%>
                <script>
                alert("請輸入用戶ID!");
                </script>
             <%}
            else{
                rs=stmt.executeQuery("select psw from customer where id = "+id); 
                if(!rs.next()){
                     msg = "用戶名不存在!";%>
                     <script>
                   alert("用戶名不存在!");
                   </script>
                 <%}
                else{
                  String fmt="delete from customer where id = "+id;
                  int cnt = stmt.executeUpdate(fmt);
                  if(cnt>0){
                    msg = "Delete Success!";
                    %><script>
                    alert("黑名單添加成功!");
                    </script><%
                  }
                  stmt.close();
                  con.close();
                }
            }
        }catch (Exception e){
            msg="出錯";
        }
    }
    %>

管理庫存服裝

  <div class="main">
   <div class="header">
   <h1>管理庫存服裝</h1>
   </div>
   <div class="middle">
   <a href="DeleteItem.jsp">刪除商品</a>
   <a href="AddItem.jsp">添加商品</a>
   <a href="UpdateItem.jsp">更新商品信息</a>
   <a href="manage.jsp">返回管理員操作界面</a>
   </div>
   </div>

刪除、添加、更新商品信息

增加與刪除類似

數據庫信息

包括用戶信息表和商品信息表

回顧與反思

實際上這個系統的基本架構十分完整，只不過在UI和數據庫豐富度上還不夠完善，仍然有很大的修改和提升空間。

源碼下載

項目源碼
【newshop】

Web程序設計項目【附源碼】

項目說明及需求

設計思路

具體實現

註冊界面

用戶登錄

修改密碼

商品列表

管理員登錄

管理員操作

小黑屋

管理庫存服裝

刪除、添加、更新商品信息

數據庫信息

回顧與反思

源碼下載

Basics CSS

Git & Github建立與使用

CSS的樣式結合應用

APK源碼查看|反編譯

JavaScript概述

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結