电商项目开发-----前后台交互

电商项目开发-----前后台交互

用户列表

1.新建user.jsp、在WebContent中放入bootstrap的文件
2.在user.jsp引入jquery、bootstrap

<link href="${pageContext.request.contextPath }/public.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="${pageContext.request.contextPath }/css/bootstrap-theme.min.css" type="text/css" rel="stylesheet" />
<script src="${pageContext.request.contextPath }/js/jquery.min.js" type="text/javascript"></script>
<script src="${pageContext.request.contextPath }/js/bootstrap.min.js" type="text/javascript"></script> 

3.引入jstl的C标签（展示列表会用到c:foreach）

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" /> 

用户列表-html代码

用户列表-css

后台代码查询所有的用户列表，略。。

用户列表-弹出新增框html

用户列表-弹出新增框css

其他样式复用登录页面的，略。。。
Js：

用户列表-js

登录

1.Jsp目录改下地址，放到webContent下，因为写的样式也打算放在这里，路径短点
写一个美丽的login.jsp页面
2.引入img文件夹
3.写登录页面的html代码：Form表单（前台向后台传值两种方式：fom提交、ajax提交）
4.写登录页面的样式：新建public.css
5.写后台login.do方法：根据用户名、密码查询user表；向前台返回结果：主页面或者给登录页面一个提示
6.启动、测试
注意：可以在项目的WebContent下面添加一个index.jsp页面，自动跳转到login.jsp

登录-html代码

登录-css代码