初识javaWeb:纯JSP+CSS+JS构建一个简单的电商平台

github地址：https://github.com/yaodebian/GoGoLe

初识java web，想在后端用java有一技之长。注：以下仅是自己的一个程序记录。

首先java web的动态页面是通过jsp来实现，但是由于近些年来，各种前端框架的流行，比如说最近中国内陆兴起的vuejs，它们都提供了很方便快捷的功能，故而仍然用java来编写动态网站看起来已经不切实际了，java更多的应该是用于服务器后台的编写。

本人处于好奇，接触了就了解下jsp的使用，故而拿这样一个简单的小项目来练练手。

一.需求分析

现在进入主题，首先我们做的是一个电商平台，那么这样一个平台由哪些东西组成呢？

由于我们这里只是用来练练手，故而我们这里的需求相对简单一些。

二.界面UI设计

有了需求分析，知道我们需要什么，我们可以将项目大致地构画出来，这里我们选择使用mockplus来进行设计。当然以下的设计仅仅是将简单的结构构话出来，我们这里因为是拿来练手的，实际上不会这么做，故而我们这里只设计三个页面，分别是登录页面、注册页面、首页。

首先，设计登录注册页面：

接着，就是设计首页，首页主要有三部分组成，用户账户状态、商品展示栏、购物车栏：

三.详细设计(逻辑设计)

首先我们需要数据才能进行各种业务逻辑的实现，故而我们先设计两张数据表：

用户表(user):

商品表(product)

然后就是一个逻辑结构的设计：

1.首先，我们需要设计的是用户的注册与登录逻辑：

上面还漏了一个东西，就是当我们登录成功时，我们将用户的信息设置为session保存下来，这是为了防止我们刷新浏览器之后用户的登录状态丢失，我们可以通过判断是否设置了session而对用户的登录状态进行设置。

2.首页的业务逻辑

首页的业务逻辑这里我分了四部分：账户操作、商品列表操作、购物车操作、支付操作

四.编码

根据之前的相关需求设计，我们准备四个文件：index.jsp、login.jsp、reg.jsp、check.jsp，由于是针对JSP的练习，这里也不用servlet，所有ui呈现和逻辑都用jsp来完成。

index.jsp:平台首页，

reg.jsp:注册页面，

check.jsp:针对login和reg中的表单数据进行逻辑校验并进行反馈。

接下来，就是一步一步地将每一个页面都构建好：

首先，根据ui设计图将我们地ui界面写出来(不包括逻辑)：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><style>body{background:#baf404;}.head{text-align:center;}.login{width:300px;display:flex;flex-direction:column;margin:100px auto;padding:20px;}</style><script type="text/javascript"></script>
</head>
<body><form action="check.jsp" method="post" class="login" id="login"><h1 class="head">购购乐</h1><p>用户名：<input name="nick" type="text" id="user"></p><p>密 码：<input name="pass" type="password" id="psw"></p><p style="height:20px;line-height:20px;"><input type="checkbox" name="isAuto" value="autoLogin"><span style="font-size:12px;vertical-align:top;">下次自动登录</span></p><input type="submit" value="登录"></form>
</body>
</html>

其展示页面如下：

reg.jsp:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><style>body{background:#baf404;}.head{text-align:center;}.reg{width:300px;display:flex;flex-direction:column;margin:100px auto;padding:20px;}</style><script type="text/javascript"></script>
</head>
<body><form action="check.jsp" method="post" class="reg" id="reg"><h1 class="head">注册购购乐</h1><p>用户名：<input name="nick" type="text" id="user"></p><p>密 码：<input name="pass" type="password" id="psw"></p><input type="submit" value="注册"></form>
</body>
</html>

效果图如下：

index.jsp:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>一起购物吧</title><link rel="stylesheet" href="css/shop.css"><script src="js/shop.js"></script>
</head>
<body><header id="header"><p id="logo">购购乐</p><p><span id="login">登录</span><span id="register">注册</span></p></header><div id="content"><section id="lists"><p class="title">商品列表</p><div class="listItem"><p class="name">时尚板鞋</p><div class="detail"><div class="pContent"><img class="pImg" src="img/shoe.jpg" alt="">    <p class="desc">New Balance 和 J.Crew 带来这款全新的联名鞋款，选用 New Balance 997 的创作雏形，宛如牛奶糖般的焦糖色泽作主配色，以及贯穿深棕色和奶油色系添增分明层次，以高规格的美制水准搭配牛巴革、麂皮和皮革等上乘材质作为鞋身用料，质感满满。</p></div>                <div class="list-side"><button class="goCart">加入购物车</button><div class="pInfo"><p><span class="pPrice">400</span>元</p><p>剩余库存<span class="pCount">300</span>件</p></div></div>            </div></div><div class="pageDiv"><span class="pre go" onclick="pre()">上一页</span><span id="page">1</span>页<span class="next go" onclick="next()">下一页</span></div></section><aside id="shopCart"><p class="title">购物车</p><div class="listItem"><p class="name">时尚板鞋</p><div class="cartCon"><p><img class="cartImg" src="img/shoe.jpg" alt=""></p><div class="op"><p><input class="count" id="count" type="number" value="1"><span class="unit">件</span><button class="del">删除</button></p><p class="price">金额:210元</p></div>   </div></div><p class="allCount">总金额:210元</p><p class="finalOp"><button class="clearCart">清空购物车</button><button class="pay">支付</button></p></aside></div><footer id="footer"><p>了解购购乐 | 购购乐资讯 | 帮助中心 | 联系我们 | 合作伙伴</p><p>购购乐 赣ICP备18002046号</p></footer>
</body>
</html>

效果图如下：

上面的效果图其实是基本完成的ui设计，但是在编写的过程中可能会优先进行功能的实现，ui的优化尽量前期简单，以可以编写逻辑功能代码为基础，而后期进行详细的ui界面优化。

接下来，进行逻辑代码的实现，首先我们的思路是：注册业务逻辑-->登录业务逻辑-->主页业务逻辑

按照这种思路，我们首先从注册和登录着手：

注册：这里我们要实现的即通过注册功能将用户的账户信息存储在数据库中，注册的表单代码为：

 <form action="check.jsp" method="post" class="reg" id="reg"><h1 class="head">注册购购乐</h1><p>用户名：<input name="nick" type="text" id="user"></p><p>密 码：<input name="pass" type="password" id="psw"></p><input type="submit" value="注册"></form>

接下来，我们可能会按照正常的顺序，即先进行数据格式的校验，即通过正则表达式用js代码实现表单数据格式的校验，不过，这里我们先实现主要逻辑功能，即先转到check.jsp

登录：同注册，我们先将视线转移到check.jsp

其表单代码为：

<form action="check.jsp" method="post" class="login" id="login"><h1 class="head">购购乐</h1><p>用户名：<input name="nick" type="text" id="user"></p><p>密 码：<input name="pass" type="password" id="psw"></p><p style="height:20px;line-height:20px;"><input type="checkbox" name="isAuto" value="autoLogin"><span style="font-size:12px;vertical-align:top;">下次自动登录</span></p><input type="submit" value="登录">
</form>

那么现在我们单独将check.jsp来进行分析：

首先想想我们的思路是什么？注册登录页面的数据传过来之后，我们要将他们与数据库中的数据进行相应的比对，那么需要哪些东西：1.数据库连接操作；2.传过来的表单数据；3.数据比对操作；

我们按照上面的顺序来进行编写：

数据库连接-->

     //定义数据库 驱动程序public static final String dbDriver="org.gjt.mm.mysql.Driver";//数据库连接地址public static final String dbUrl="jdbc:mysql://localhost:3306/loginmanage";public static final String dbUser="root";public static final String dbPass="1111";

     Connection conn=null;  //数据库连接对象PreparedStatement pstmt=null; //声明数据库操作ResultSet rs=null;    //声明数据结果集

     String prePath=request.getHeader("Referer");String fileName="";String nick=request.getParameter("nick");String password=request.getParameter("pass");if(prePath!=null){fileName=prePath.substring(27);//这里是获取发送请求的页面的文件名}

//根据文件名，我们进行不同的处理
if(fileName.equals("login.jsp")){//校验登录昵称与密码//这里填写的是针对登录的相关数据校验
}
if(fileName.equals("reg.jsp")){//校验登录昵称与密码//这里填写的是针对注册的相关数据校验
}

针对上面一块逻辑，我们根据是登录还是注册，我们进行不同的处理：

登录处理：

         try{Class.forName(dbDriver);//加载驱动程序conn=DriverManager.getConnection(dbUrl,dbUser,dbPass);//取得数据库连接String sql="select password,userId from user where nick='"+nick+"'";pstmt=conn.prepareStatement(sql); //实例化数据库操作对象rs=pstmt.executeQuery();  //执行查询String isAuto=request.getParameter("isAuto");//获取是否下次自动登录if(rs.next()){if(isAuto!=null&&isAuto.equals("autoLogin")){//如果登录框中勾选了下次自动登录，那么我们就要进行相关信息的cookie存储Cookie c1=new Cookie("user",nick);Cookie c2=new Cookie("userId",""+rs.getInt("userId"));c1.setMaxAge(60);//设置cookie储存时间，过了时间之后，cookie失效c2.setMaxAge(60);response.setCharacterEncoding("UTF-8");response.addCookie(c1);response.addCookie(c2);}if(rs.getString(1).equals(password)){//判断是否验证成功，若成功，则跳转到主页，然后用session保存登录状态信息response.sendRedirect("index.jsp");session.setAttribute("isLogin", "ok");//登录状态session.setAttribute("user", nick);//用户名session.setAttribute("userId", ""+rs.getInt("userId"));//用户id,通过这个实现从数据库中读取数据}}else{//校验失败，则返回登录页response.sendRedirect("login.jsp");}}catch(Exception e){e.printStackTrace();}finally{//别忘了将相应的操作close()if(rs!=null) {rs.close();}if(pstmt!=null) {pstmt.close();}if(conn!=null) {conn.close();}}

注册处理：

         try{Class.forName(dbDriver);//加载驱动程序conn=DriverManager.getConnection(dbUrl,dbUser,dbPass);//取得数据库连接String sql="insert into user (nick,password) values('"+nick+"','"+password+"')";pstmt=conn.prepareStatement(sql); //实例化数据库操作对象int flag=pstmt.executeUpdate();  //执行数据 插入out.println(flag);if(flag==1){response.sendRedirect("index.jsp");session.setAttribute("isLogin", "ok");session.setAttribute("user", nick);rs=pstmt.getGeneratedKeys();//获取插入数据库的相应id以便将其存储到session中int id=0;if(rs.next()){id=rs.getInt("userId");session.setAttribute("userId", ""+id);}}else{response.sendRedirect("reg.jsp");}}catch(Exception e){e.printStackTrace();}finally{if(rs!=null) {rs.close();}if(pstmt!=null) {pstmt.close();}if(conn!=null) {conn.close();}}

另外值得注意的是，如果有人直接访问check.jsp怎么办：

同样的，请求页面既不是login.jsp,也不是reg.jsp,那么首先我们先判断用户是否已经登录：

     if(session.getAttribute("isLogin")!=null&&session.getAttribute("isLogin").equals("ok")){response.sendRedirect("index.jsp");}

如果没用登录的情况下，我们执行“response.sendRedirect("login.jsp");”跳转到登录页面。

这个时候，我们已经登录到了首页。

主页业务逻辑：

首先我们这里要准备一些东西：

     //定义数据库 驱动程序 这里的数据连接是为了之后能够进行相应的购物车操作public static final String dbDriver="org.gjt.mm.mysql.Driver";//数据库连接地址public static final String dbUrl="jdbc:mysql://localhost:3306/loginmanage";public static final String dbUser="root";public static final String dbPass="111111";Connection conn=null;   //数据库连接对象PreparedStatement pstmt=null; //声明数据库操作ResultSet rs=null;    //声明数据结果集

     int pageIndex=1;//商品列表页码int cartPrice=0;//购物车总价格//这里的登录注销字符串是展示在登录状态展示区中的字段String loginStr="登录";String regStr="注销";

现在进行登录状态的判断：

     int isLogin=0;if(session.getAttribute("isLogin")!=null&&session.getAttribute("isLogin").equals("ok")){//判断是否已经登录isLogin=1;loginStr=(String)session.getAttribute("user");regStr="注销";}else{//判断是否需要自动登录账号Cookie c[]=request.getCookies();if(c!=null){for(int i=0;i<c.length;i++){if(c[i].getName().equals("user")){isLogin=1;loginStr=c[i].getValue();regStr="注销";session.setAttribute("isLogin", "ok");session.setAttribute("user", c[0].getValue());}if(c[i].getName().equals("userId")){session.setAttribute("userId", c[i].getValue());}}System.out.println(isLogin);}if(isLogin==0){loginStr="登录";regStr="注册";}}

接下来将登录状态信息展示在页面中：（下面的onclick事件触发之后再讲）

 <header id="header"><p id="logo">购购乐</p><p><span id="login" onclick="login(<%=isLogin%>)"><%=loginStr %></span><span id="register" onclick="reg(<%=isLogin%>)"><%=regStr %></span></p></header>

既然用户已经登录，登录状态也已经展示在页面中，那么肯定还要有登出动作，由于页面的点击事件是由js来进行相应的监听与实现的，那么我们这里这样做（在事件处理函数中通过向页面post数据，页面通过接收这些数据进行相应的操作），在js代码中编写如下：

window.onload=function(){//登录处理login=function(flag){if(flag==1){}else{location.href="login.jsp";}}//注册处理reg=function(flag){if(flag==1){ajax({method : 'post',url : 'index.jsp',data : {'logout' : "ok"},success : function (text) {alert(text);},async : true});location.reload();}else{location.href="reg.jsp";}}//创建XhttpRequest对象function createXHR() {if (typeof XMLHttpRequest != 'undefined') {return new XMLHttpRequest();} else if  (typeof ActiveXObject != 'undefined') {var versions = ['MSXML2.XMLHttp.6.0','MSXML2.XMLHttp.3.0','MSXML2.XMLHttp'];for (var i = 0; i < versions.length; i ++) {try {return new ActiveXObject(version[i]);} catch (e) {//跳过} }} else {throw new Error('您的浏览器不支持XHR对象！');}}//ajax操作function ajax(obj) {var xhr = new createXHR();obj.url = obj.url + '?rand=' + Math.random();obj.data = params(obj.data);console.log(obj.data);if (obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;if (obj.async === true) {xhr.onreadystatechange = function () {if (xhr.readyState == 4) callback();};}xhr.open(obj.method, obj.url, obj.async);if (obj.method === 'post') {xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send(obj.data);} else {xhr.send(null);}if (obj.async === false) {callback();}function callback () {if (xhr.status == 200) {obj.success(xhr.responseText);         //回调} else {alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);}}}//名值对编码function params(data) {var arr = [];for (var i in data) {arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));}return arr.join('&');}
}

这样的话，整个登录注册登出的流程都已经实现，接下来就是具体的商品操作流程：

首先是商品列表，我们需要准备一个list变量将这些东西储存起来：

     public class Pro{//商品对象public int pId;public String pName;public int pCount;public int price;public String img;public String desc;}ArrayList<Pro> pros=new ArrayList<Pro>();//商品列表

商品展示如下：(将商品列表从数据库中取出，并相应的填充在各元素中)

     <section id="lists"><p class="title">商品列表</p><%if(request.getParameter("page")!=null){pageIndex=Integer.parseInt(request.getParameter("page"));}int index=(pageIndex-1)*4;try{Class.forName(dbDriver);//加载驱动程序conn=DriverManager.getConnection(dbUrl,dbUser,dbPass);//取得数据库连接String sql="select * from product order by pId asc limit "+index+",4";pstmt=conn.prepareStatement(sql); //实例化数据库操作对象rs=pstmt.executeQuery();   //执行查询while(rs.next()){%><div class="listItem"><p class="name"><%=rs.getString(2)%></p><div class="detail"><div class="pContent"><img class="pImg" src="<%=rs.getString(5) %>" alt="">    <p class="desc"><%=rs.getString(6) %></p></div>             <div class="list-side"><button class="goCart" onclick="intoCart(<%=rs.getRow()-1%>)">加入购物车</button><div class="pInfo"><p><span class="pPrice"><%=rs.getString(4)%></span>元</p><p>剩余库存<span class="pCount"><%=rs.getString(3) %></span>件</p></div></div>          </div></div><%Pro item=new Pro();item.pId=rs.getInt("pId");item.pName=rs.getString("pName");item.price=rs.getInt("price");item.pCount=rs.getInt("pCount");item.img=rs.getString("img");item.desc=rs.getString("desc");pros.add(item);}}catch(Exception e){e.printStackTrace();}finally{if(rs!=null) {rs.close();}if(pstmt!=null) {pstmt.close();}if(conn!=null) {conn.close();}}%><div class="pageDiv"><span class="pre go" onclick="pre()">上一页</span><span id="page"><%=pageIndex%></span>页<span class="next go" onclick="next()">下一页</span></div></section>

接下来，我们要做的是分页：

上面我们看到有这样的语句（jsp代码开头）：

         if(request.getParameter("page")!=null){pageIndex=Integer.parseInt(request.getParameter("page"));}

实际上也是同刚刚的对登录状态进行操作一样，然后我们在js中添加如下代码：

 //上一页pre=function(){var pageElement=document.getElementById("page").innerHTML;var page=parseInt(pageElement)-1;if(page>=1){getList(page);location.reload();}else{alert("已经是第一页了哦");}}//下一页next=function(){var pageElement=document.getElementById("page").innerHTML;var page=parseInt(pageElement)+1;getList(page);location.reload();}//商品列表刷新getList=function(page){ajax({method : 'post',url : 'index.jsp',data : {'page' : page},success : function (text) {alert(text);},async : true});}

然后是加入购物车：

这里我们先在页面开头添加：

ArrayList<Pro> carts=new ArrayList<Pro>();//购物车列表
ArrayList<Integer> cartCount=new ArrayList<Integer>();//购物车商品数量列表

然后在首页中添加如下Java代码：

         if(request.getParameter("listIndex")!=null){int cartIndex=Integer.parseInt(request.getParameter("listIndex"));int tempIndex=carts.indexOf(pros.get(cartIndex));if(tempIndex==-1){carts.add(pros.get(cartIndex));cartCount.add(1);}else{Integer item=cartCount.get(tempIndex);cartCount.set(tempIndex,(item+1));}}

js中加入：

 //加入购物车intoCart=function(index){ajax({method : 'post',url : 'index.jsp',data : {'listIndex' : index},success : function (text) {alert(text);},async : true});location.reload();}

商品添加成功之后，就是将商品在购物车中进行展示：

     <aside id="shopCart"><p class="title">购物车</p><%cartPrice=0;for(int i=0;i<carts.size();i++){%>  <div class="listItem"><p class="name"><%=carts.get(i).pName%></p><div class="cartCon"><p><img class="cartImg" src="<%=carts.get(i).img%>" alt=""></p><div class="op"><p><input class="count" id="count" type="number" value="<%=cartCount.get(i)%>" onchange="couCh(<%=i %>)"><span class="unit">件</span><button class="del" onclick="delCart(<%=i%>)">删除</button></p><p class="price">金额:<%=cartCount.get(i)*carts.get(i).price%>元</p></div> </div></div><%cartPrice+=cartCount.get(i)*carts.get(i).price;}%><p class="allCount">总金额:<%=cartPrice %>元</p><p class="finalOp"><button class="clearCart" onclick="clearCart()">清空购物车</button><button class="pay" onclick="pay(<%=isLogin %>)">支付</button></p></aside>

可以看到，在购物车中我们有如下操作：改变商品数量、删除、清空购物车和支付。

对于前三项操作，我们只要在购物车商品展示之前，加入：

         if(request.getParameter("cartIndex")!=null){cartCount.set(Integer.parseInt(request.getParameter("cartIndex")),Integer.parseInt(request.getParameter("count")));}if(request.getParameter("delIndex")!=null){carts.remove(Integer.parseInt(request.getParameter("delIndex")));cartCount.remove(Integer.parseInt(request.getParameter("delIndex")));}if(request.getParameter("isClear")!=null){System.out.println(request.getParameter("isClear"));carts.clear();cartCount.clear();}

js中加入：

 //商品数量变化couCh=function(index){let count=document.getElementById("count").value;ajax({method : 'post',url : 'index.jsp',data : {'count' : count,'cartIndex':index},success : function (text) {alert(text);},async : true});location.reload();}//将商品从购物车中移出delCart=function(index){ajax({method : 'post',url : 'index.jsp',data : {'delIndex':index},success : function (text) {alert(text);},async : true});location.reload();}//清空购物车clearCart=function(){ajax({method : 'post',url : 'index.jsp',data : {'isClear':"ok"},success : function (text) {alert(text);},async : true});location.reload();}

支付操作，我们在支付按钮后面进行添加：

             if(request.getParameter("isPay")!=null){String userId=(String)session.getAttribute("userId");try{Class.forName(dbDriver);//加载驱动程序conn=DriverManager.getConnection(dbUrl,dbUser,dbPass);//取得数据库连接String sql="update user set account=account-"+cartPrice+" where userId="+userId;pstmt=conn.prepareStatement(sql); //实例化数据库操作对象int flag=pstmt.executeUpdate();    if(flag==1){for(int i=0;i<carts.size();i++){sql="update product set pCount=pCount-"+cartCount.get(i)+" where pId="+carts.get(i).pId;pstmt=conn.prepareStatement(sql);flag=pstmt.executeUpdate();    if(flag!=1){break;}}carts.clear();cartCount.clear();}}catch(Exception e){e.printStackTrace();}finally{if(rs!=null) {rs.close();}if(pstmt!=null) {pstmt.close();}if(conn!=null) {conn.close();}}}

js中添加：

 //支付pay=function(isLog){if(isLog){ajax({method : 'post',url : 'index.jsp',data : {'isPay' : "ok"},success : function (text) {alert("支付成功！！！");},async : false});location.reload();}else{alert("亲爱的用户，你好，请先登录后进行支付操作哦！！！")}}

最后，不要忘记登录页面和注册页面的格式正则校验：

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>登录</title><style>body{background:#baf404;}.head{text-align:center;}.login{width:300px;display:flex;flex-direction:column;margin:100px auto;padding:20px;}</style><script type="text/javascript">window.onload=function(){//表单提交formSub=function(){//isAuto();let user=document.getElementById("user").value;let psw=document.getElementById("psw").value;let form=document.getElementById("login");let pswCheck=new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,13}$","g");if(user!=""&&psw!=""){if(psw.search(pswCheck)!=-1){form.submit();}else{alert("密码为6-14位，且以a-zA-Z的字母开头！");}   }else{alert("用户名、密码不能为空！");}}}</script>
</head>
<body><%       if(session.getAttribute("isLogin")!=null&&session.getAttribute("isLogin").equals("ok")){response.sendRedirect("index.jsp");} %><form action="check.jsp" method="post" class="login" id="login"><h1 class="head">购购乐</h1><p>用户名：<input name="nick" type="text" id="user"></p><p>密 码：<input name="pass" type="password" id="psw"></p><p style="height:20px;line-height:20px;"><input type="checkbox" name="isAuto" value="autoLogin"><span style="font-size:12px;vertical-align:top;">下次自动登录</span></p><input type="button" value="登录" onclick="formSub()"></form>
</body>
</html>

reg.jsp:

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>注册</title><style>body{background:#baf404;}.head{text-align:center;}.reg{width:300px;display:flex;flex-direction:column;margin:100px auto;padding:20px;}</style><script type="text/javascript">window.onload=function(){formSub=function(){let user=document.getElementById("user").value;let psw=document.getElementById("psw").value;let form=document.getElementById("reg");let pswCheck=new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,13}$","g");if(user!=""&&psw!=""){if(psw.search(pswCheck)!=-1){form.submit();}else{alert("密码为6-14位，且以a-zA-Z的字母开头！");}    }else{alert("用户名、密码不能为空！");}}}</script>
</head>
<body><%       if(session.getAttribute("isLogin")!=null&&session.getAttribute("isLogin").equals("ok")){response.sendRedirect("index.jsp");} %><form action="check.jsp" method="post" class="reg" id="reg"><h1 class="head">注册购购乐</h1><p>用户名：<input name="nick" type="text" id="user"></p><p>密 码：<input name="pass" type="password" id="psw"></p><input type="button" value="注册" onclick="formSub()"></form>
</body>
</html>

值得注意的是，其实按理来说，我们刷新了页面之后，页面应该跟刚打开页面是一样的，但是很明显的是，当我们刷新页面，index.jsp中的相关变量的值并没有进行初始化。

初识javaWeb:纯JSP+CSS+JS构建一个简单的电商平台相关推荐

html+css+js实现一个简单的电商商城首页
文章目录 2021.05.17更新 2020.11.24更新声明:慕课网学习时的web大作业,题目慕课网老师给出,总算是成功实现. 1. 静态网页源码 1.1 index.html: 1.2 ind ...
如何使用aframe.js构建一个简单的VR播放器
在当今这个信息化的时代,虚拟现实(VR)已经开始逐渐成为一种新的生活方式.作为一名前端开发工程师,在学习和探索VR技术方面,aframe.js是一个非常有趣和有用的工具.在本文中,我将介绍如何使用af ...
使用 Vue.js 制作一个简单的调查问卷平台
使用 Vue.js 制作一个简单的调查问卷平台原文 https://github.com/pramper/Demos/tree/master/Vue-Demos/Questionnaire 主题 ...
如何构建一个好的电商搜索引擎？
‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 分享嘉宾:邢少敏第四范式架构师编辑整理:刘员京出品平台:DataFunTalk ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍ 导读:机器学习算法的不断进步,搜索引擎巧妙的 ...
【Elasticsearch】如何构建一个好的电商搜索引擎？
1.概述转载:https://mp.weixin.qq.com/s/eLhPMI38miBWlWxuMPv-2A 建议看原文,这个是防丢失转载这篇文章的原因是,这篇文章详细的解释了如何做一个电商搜 ...
微信罕见出手，再造一个万能的电商平台！
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者:电商君来源:电商报(ID:kandiansh ...
通过一个简单的电商零售数据集，了解数据分析流程
目录数据分析流程 1.数据分析真实项目流程 2.数据分析方法 3.零售消费数据数据集介绍 4.分析内容明确分析的目的案例分析实战 1理解数据 2数据清洗 3数据分析和可视化 1.购买商品前十的国 ...
电商创业项目：如何打造一个成功的电商平台
随着互联网的飞速发展,电商在近几年已经成为了市场上的一股重要力量.越来越多的人选择通过电商平台来进行购物和出售,这也让电商创业项目成为了一项备受关注的商业领域.在本文中,我们将会探讨如何打造一个成功的 ...
利用大数据构建用户画像为电商平台提供精准营销
在大数据的时代下,电商平台就像一个储量丰富.数据精准的数据金矿,在电商平台我们利用数据更加精准的营销着,把用户精准化得到用户画像,通过用户画像角度分析,帮助决策者做精准的营销活动,可见用户画像的重要性 ...

初识javaWeb:纯JSP+CSS+JS构建一个简单的电商平台

初识javaWeb:纯JSP+CSS+JS构建一个简单的电商平台相关推荐

最新文章

热门文章