项目历程
1.对整个网页进行页面设计 Axure mockitt
2.静态网页 Html Css Javascript
3.动态网页 与用户的交互窗口 Jsp
4.创建数据库并且连接数据库 Mysql Navicat Javabean Servlet eclipse
目录
第一阶段 网页设计
需求分析
- 市面上的电脑品类众多，类型复杂，小白在选购电脑时很难做到让电脑的各项指标都符合心意。同时跨平台选购很难做到多个笔记本电脑的性能的对比，基于此我们开发本网站，为选购电脑的新手小白指路。
-
系统功能结构图
注：实际情况中 由于不可抗力我们的后台只做出了一个数据管理
业务实体的属性和操作
| 用户 个人信息； 收藏； | 讨论 发布； |
| 用户浏览操作流 搜索； 筛选； 对比； | 管理员管理操作流 发帖监督； |
第二部分 静态网页设计
静态网页部分一共有8个页面 常见的BootStrap Jquery组件
- 首页 后序重新改过一遍（这里先不放） 使用轮播图
- 登录注册页面
- 科普区
- 讨论区
- 筛选区
- 对比商品页面
- 商品详细参数页面
- 管理员页面
这里是四个功能区的图放在上面
筛选区 科普区 讨论区 商品参数区
第三部分 动态网页
-
动态网页主要实现的与服务器互动
- 登陆注册后的提交验证表单
- 点击筛选完成后提交表单
- 提交form表单 action forword等动作
-
筛选区互动功能核心代码段
<div id="wrap">
<section id="section">
<ul id="type">
<form action="done.jsp" >
品牌:
<div class="RadioStyle">
<input type="radio" name="brand" value="惠普" id="b1"><label for="b1">惠普</label>
<input type="radio" name="brand" value="联想" id="b2"><label for="b2">联想</label>
<input type="radio" name="brand" value="华为" id="b3"><label for="b3">华为</label>
<input type="radio" name="brand" value="戴尔" id="b4"><label for="b4">戴尔</label>
<input type="radio" name="brand" value="华硕" id="b5"><label for="b5">华硕</label>
<input type="radio" name="brand" value="机械师" id="b6"><label for="b6">机械师</label>
</div>
<div class="clear"></div>
尺寸：<br>
<div class="RadioStyle">
<input type="radio" name="size" value=11 id="sg1"><label for="sg1">11</label>
<input type="radio" name="size"value=14.5 id="sg2"><label for="sg2">14.5</label>
<input type="radio" name="size" value=15.6 id="sg3"><label for="sg3">15.6</label>
<input type="radio" name="size" value=16 id="sg4"><label for="sg4">16</label>
</div>
<div class="clear"></div>
价格：<br>
<div class="RadioStyle">
<input type="radio" name="price" value="3000" id="p1"><label for="p1">3000</label>
<input type="radio" name="price" value="3000-4000" id="p2"><label for="p2">3000-4000</label>
<input type="radio" name="price" value="4000-8000" id="p3"><label for="p3">4000-8000</label>
<input type="radio" name="price" value="10000+" id="p4"><label for="p4">10000+</label>
</div>
<input type ="submit" class="btn btn-default" style="text-align:right" class="btn btn-white btn-sm"style='color:#FFFFFF;' value="筛选完成"/>
</form>
</ul>
</section>
</div>
-
jsp处理提交的表单
<%
javaSqlite sql=new javaSqlite();
ArrayList<Commodity> array=new ArrayList<Commodity>();
ArrayList<Commodity> list=new ArrayList<Commodity>();
array=sql.getArrayListComm();
String brand=request.getParameter("brand");
String size=request.getParameter("size");
String price=request.getParameter("price");
//String ram=request.getParameter("ram");
int i=0;
for (;i<array.size();i++) {
Commodity c=null;
c=array.get(i);
String b=c.getCommodityBrand().toString().strip();
//String s=c.getCommoditySize().toString();
if (b.equals(brand)){// && s.equals(size)){
//& c.getCommoditySize().equals(size)&& c.getCommodityRAM().equals(ram)
list.add(c);
}};
// out.println("你的选择有 1.brand :"+brand+"2尺寸："+size+"3价格"+price+"\n");
out.println("得到数据"+list.size()+"条");
%>
<form action="../Vs/vs.jsp" method="post">
<select id="select1" name="select1">
<option>--请选择--</option>
<% for (int j=0;j<list.size();j++){
Commodity c=list.get(j);
%> <option value=<%=array.indexOf(c) %> ><%=c.getCommodityName().toString() %></option>
<% }%>
</select>
<select id="select2"name="select2">
<option>--请选择--</option>
<% for (int j=0;j<list.size();j++){
Commodity c=list.get(j);
%> <option value=<%=array.indexOf(c) %> ><%=c.getCommodityName().toString() %></option>
<% }%>
</select>
<input type ="submit" class="btn btn-default" style="text-align:right" class="btn btn-white btn-sm"style='color:#FFFFFF;' value="开始对比"/>
</form>
<%
for (int j=0;j<list.size();j++){
Commodity c=list.get(j);
%>
<div class="container">
<div class="row clearfix">
<div class="col-md-4 column">
<img alt="100x140" src="img/<%=c.getCommodityPicture() %>" width="300" height="300"/>
<div class="computer">
<br>
<br>
<div class="btn-group">
<div id="neon-btn">
</div>
<a href="../Vs/商品详情.jsp?id=<%=array.indexOf(c)%>"> <button class="btn one">商品详情</button></a>
</a>
          
<aod1>
<aodd>
<div>
<button class="btn two"><%=c.getCommodityName().toString()%></button>
</div>
</aodd>
</aod1>
</div>
</div>
</div>
<br>
<br><br>
<br>
<%
if (j<list.size()-1){
j++;
c=list.get(j);
%>
<div class="col-md-4 column">
<img alt="140x140" src="img/<%=c.getCommodityPicture()%>" width="300" height="300" />
<div class="computer">
<br>
<br>
<div class="btn-group">
<a href="../Vs/商品详情.jsp?id=<%=array.indexOf(c)%>"> <button class="btn one">商品详情</button></a>
           
<aodd>
<div>
<button class="btn two"><%=c.getCommodityName().toString()%></button>
</div>
</aodd>
</aod1>
</div>
</div>
</div>
<%
}
if (j<list.size()-1){
j++;
c=list.get(j);
%>
<div class="col-md-4 column">
<img alt="140x140" src="img/<%=c.getCommodityPicture() %>" width="300" height="300" />
<div class="computer">
<br>
<br>
<div class="btn-group">
<a href="../Vs/商品详情.jsp?id=<%=array.indexOf(c)%>"> <button class="btn one">商品详情</button></a>
           
<aod1>
<aodd>
<div>
<button class="btn two"><%=c.getCommodityName().toString()%></button>
</div>
</aodd>
</aod1>
</div>
</div>
</div>
<div>
<br>
<br>
</div>
</div>
</div>
<%
}
}
%>
-
建立数据库数据表
第四部分 实现所有与数据库连接的功能
建立数据库并与数据库连接
这里的与数据库连接 大多是用JavaBean 组件 jdbc jar包和navicat连接的
@@有部分直接写，有部分用Javabean 比较乱也没有统一
实现所有需要数据库连接的功能
登陆注册
用户发布讨论
- 用户收藏商品
- 用户筛选和对比商品
- 管理员审核帖子
总结部分
整个过程中由于能力的原因我们并没有使用什么框架 太菜了实在是 这里放个链接 是整个项目的文件 链接：https://pan.baidu.com/s/1Xif7qJ3FKRhTkhyEHWsMMQ
提取码：nn2u
项目目录
文章出处登录后可见！
已经登录？立即刷新
