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

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

用户列表

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





 

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

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
 

用户列表-html代码

电商项目开发-----前后台交互_第1张图片

用户列表-css

电商项目开发-----前后台交互_第2张图片电商项目开发-----前后台交互_第3张图片
后台代码查询所有的用户列表,略。。

用户列表-弹出新增框html

电商项目开发-----前后台交互_第4张图片

用户列表-弹出新增框css

电商项目开发-----前后台交互_第5张图片
其他样式复用登录页面的,略。。。
Js:
电商项目开发-----前后台交互_第6张图片
电商项目开发-----前后台交互_第7张图片

用户列表-js

电商项目开发-----前后台交互_第8张图片

登录

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
电商项目开发-----前后台交互_第9张图片

登录-html代码

电商项目开发-----前后台交互_第10张图片

登录-css代码

电商项目开发-----前后台交互_第11张图片
电商项目开发-----前后台交互_第12张图片

你可能感兴趣的:(电商,Java)