案例尚硅谷-web书城

1、WEB 知识目录一.HTML/CSS/JavaScript/JS DOM/jQuery二.WEB QuickStart三.XML四.五.六.七.八.九.十.ServletJSPEL 表达式JSTL与 sesMy tagFilter十一.十二.十三.十四.Listener文件上传I18NAjax1). 使用DIV+CSS完成整体布局2). 使用实现主内容界面的动态显示1). 用户的Form表单:提交按钮username/password/password2/1). 用户登陆的Form表单:username / password /登陆提交按钮1.3. 完成登陆页面:login.html1.2.

2、完成页面:regist.html1.1. 完成应用的前台主页面:index.html1). 用户名: 长度为6到12位, 只能输入数字和英文和下划线/w6,12$/: 长度为6位, 只能输入数字和英文2)./a-zA-Z0-96$/3). 确认: 必须与相同4). 邮箱:格式必须正确, 可以不输入/(a-zA-Z0-9_.-)+(a-zA-Z0-9-)+.)+(a-zA-Z0-92,4)+$/1.5.总结HTML+CSS+Javascript1.2.DIViframeformtableinputaCSS:a)选择器:名/id/classb)效果: width/height/backgroudc

3、olor/font-size/float/border text-decoration /text-align Jquery选择器操作(CRUD, 事件)正则表达式3.1.4. 完成表单的 javascript 验证(使用 Jquery)bookstoreusersSucs.html error.html获取请求参数 username封装成一个 user 对象us.regist(user)根据结果转向到成功或失败的页面Servlet do t() us.regist(u)UsergetUserByName(name) addUser(user)UserServiceregist(user) g

4、etUserByName(n)/判断 addUser(user)Regist.html2.1. 分析 web 应用的结构db2.2. 搭建应用1). 导入需要的jar包2). 创建应用的包结构com.atuigu.bookstore.servlet.c ntRegistServletLoginServlet com.atuigu.bookstore.servlet.manager com.atuigu.bookstore.serviceUserSerivce com.atuigu.bookstore.service.implUserServiceImpl com.atuigu.bookstor

5、e.User com.atuigu.bookstore.implUserImplBase com.atuigu.bookstore.User com.atuigu.bookstore.utilJDBCUtils junit.testUserServiceTestHibernateJDBCUtils实体类页面(html/jsp)ServiceServletSpringStruts22.3. 创建定义数据库和表的 sql(bookstore.sql)1). 创建数据库 : bookstore2). 创建表 : users2.4. 创建 users 表对应的实体类 User2.5. 创建 c3p0

6、连接池的的配置文件(src/c3p0-config.xml)jdbc:/localhost:3306/web_bookstorecom.jdbc.Driverrootpublic claser private String id; private String username; private String password; private String;#users 用户表 CREATE TABLE users (id VARCHAR(40) PRIMARY KEY, #主键username VARCHAR(20) UNIQUE, #用户名 PASSWORD VARCHAR(30), #

7、VARCHAR(40) #邮箱);2.6. 创建数据库的帮助类 JDBCUtils(使用连接池)2.7. 创建操作表数据的所有 类的基类 Base2.8. 完成功能1). View 层:regist.html: 用户信息表单1.1).成功后自动跳转到此页1.2). login.html:失败后自动跳转到此页面1.3). regist_error.html:2).Controller 层:2.1). Severlet类: RegistServlet2.2). 配置: url-pattern=/cnt/RegistServletroot530105153). Service 层:3.1). 接口:

8、 UserService(定义处理用户相关业务的方法)regist(User user)3.2). 实现类: UserServiceImpl(实现处理用户相关业务的方法)在regist()方法中调用User的对象操作users表数据层:4).4.1). 接口: User(定义操作users表数据的方法)User getByName(String username)void insert(User user);4.2). 实现类: User(实现操作users表数据的方法)getByName(): 调用Base的query()insert(): 调用Base的update()2.9. 完成登陆功

9、能1). View 层:1.1). login.html: 用户登陆信息表单s.html: 登陆成功后自动跳转到此页面,显示:登1.2). login_suc陆成功1.3). login_error.html: 登陆失败后自动跳转到此页面, 显示:用户名或不正确2). Controller 层:2.1). 处理登陆请求的Servlet: LoginServlet2.2). 配置: url-pattern=/cnt/LoginServlet3). Service 层:3.1). 接口: UserServicelogin(String name, String pwd)3.2).实现类: User

10、ServiceImpl在login()方法中调用User的对象操作users表数据层:4).4.1). 接口: UserUser getByNameAndPwd(String name, String pwd)4.2). 实现类: User在getByNameAndPwd()中调用Base的query()2.10. 总结:功能结构图View视图HTML/JSPresult.jsp控制器ControllerServletMService登陆结构图接口与类的定义UserServiceregist(User user)login(Sting username, String password)Use

11、rUser getByName(String name)void insert(User user)User getByNameAndPwd(String name, String password)所有实现类的基类Baseupdate(String sql, Object params)/CUDDMLT query(String sql, Object params)/RDQLListqueryForList(String sql, Object params) /RDQLJDBCUtilsConection getConection()releaseConn(Connection conn

12、)1).欢迎页面: index.jsp(自动跳转到cnt/cnt.jsp)2).应用前台主面: cnt.jsp3.1. 将 html 页面改为 jsp 页面页面: regist.jsp3).4).登陆页面: login.jsp5).登陆成功页面: login_sucs.jsp功能:1).1.1). 成功: 转发到login.jsp, 并显示:成功, 可以登陆了!1.2). 失败: 转发到regist.jsp, 显示:失败, 此用户名已存在!2). 登陆功能:2.1). 成功: 重定向到login_suc并显示: 登陆成功!s.jsp,2.2). 失败: 转发到login.jsp, 显示: 登陆

13、失败,用户名或错误!3). 失败返回页面后, 输入框的自动回显分析:1). 应用中的所有对Servlet的请求都需要添加一个请求参数用户 UserServletdotstruts2登陆 /bookstore/ UserServlet? method =login显示用户列表 /bookstore/ UserServlet? method =”list”书 BookServletbooks订单 OrderServlet /bookstore/ UserServlet?method=regist3.3. 实现一个 Servlet 处理多个请求3.2. 改善请求处理后的跳转及显示method=2).

14、 创建一个应用中的所有Servlet类的基类: BaseServlet,利用反射调用method参数值所对应的方法3). 在应用的Servlet类中, 只需要定义处理请求的方法:注意:方法必须是public的,且与method请求参数值同名,BaseServlet不需要在web.xml文件中配置3.4. 实现对请求参数到实体类对象的自动收集封装 WebUtils T request2Bean(request, Class beanClass)总结 :href=/cnt/user/regist.jsp页面如果需要动态显示一些信息1. 请求的转发(不能重定向)2. 转发之前: request.se

15、tribute(msg, 提示的内容)3. 在Jsp中: 页面回显input name=usernamevalue=一个 Servlet 处理多个请求1. 页面的请求: UserServlet?method=(方法名)2. abstract class BaseServlet extends HttpServlet String methodName = req.getparameter(method);/通过反射调用实现子类的对应的处理请求的方法3. claserServlet extends BaseServlet /处理的请求public void regist(req, resp) /

16、处理登陆的请求public void login(req, resp) 自动收集请求参数并封装成实体类对象?beanUtilscopyProperty(bean, propertyName, value)区别: 类对象与 Class 对象class.classClass.forName(“com.atguigu.bean.”).newInstance()1. 在内存找对应的Class对象(通过全类名)?a)找到了, clazz.newInstance()b) 找不到, 去classpath下找对应的class文件?i.找到了1.将对应的class文件加载到内存中2.生成包含class文件所有信

17、息的一个对象(Class)3.clazz.newInstance();ii.没有找到1.抛出ClaotFoudExceptionClass Field Construtor Methodc.getMethod().invoke()1). 显示提示信息2). 失败返回界面后, 输入框的自动回显1). 与前台cnt.jsp的结构相同设计表:设计整体结构Categoryinsert(Category c) getAll()update(Category c) deleteById(id)Controller(Servlet)CategoryServletadd()list() update() de

18、lete()ServiceCategoryServiceadd(Category c) getAll()update(Category c) delete(String id)View(jsp)add.jsp list.jspresult.jspCREATE TABLE categorys (id varchar(40) PRIMARY KEY,NAME varchar(30) default NULL)4.3. 实现分类的CRUD 功能4.2. 搭建应用的主页面(/manager/manager.jsp)4.1. 使用 EL 表达式完善页面1). 分类的添加2). 分类的列表显示3). 分类

19、名称的修改4). 分类的删除1). 转发到/result.jsp页面, 并显示以message为name的指定信息void forwordMessageUI(request, response, msg)2). 转发请求到指定页面,并在请求域中保存指定属性void forword(request,response,path,name,value)设计表:#books表 CREATE TABooks (id VARCHAR(40) PRIMARY KEY , #主键 NAME VARCHAR(50), #书名author VARCHAR(20), #作者 price FLOAT, #价格sale

20、samount(11) NOT NULL DEFAULT 0,#已售数量5.2. 实现信息的CRUD 操作:5.1. 使用 JSTL: 完善分类列表的显示4.4. 转发请求到页面显示提示信息功能的封装 WebUtils设计整体结构bookscategorys信息的添加(暂时不提交1).)2). 所有信息的列表显示信息的修改3).信息的删除4).CategoryServiceList getAllCategorys()CategorygetAll()Bookinsert(Book b) getAll()getById(String id) update(Book b) deleteById(id

21、)Controller(Servlet)BookServlettoAddUI() add()list() toUpdateUI() update() delete()View(jsp)add.jsp list.jspupdate.jspService BookServicevoid addBook( book) geAllBooks()Book getBook(id) updateBook(Book) deleteBook(id)JavaBean : Bookstorenumber(11) NOT NULL, #库存数量 imagepath VARCHAR(100), #路径categorys

22、id VARCHAR(40), #此对应的分类ID(是一个外键)CONSTRAcategorysid_FK FOREIGN KEY(categorysid) REFERENcategorys(id);5.3. 前台列表的分页显示:Page(面象)List/显示的对象的集合pageNum /第几页totalPageCount;/总页数totalRecord; /录PageIndex /连续显示的第一个页码lastPageIndex /连续显示的最后一页码bookCount; /页面显示几本书pageIndexCount; /连续显示的页码数量View list.jspServiceBookSer

23、viceController BookServletgetAllCategorys() getBooks()1). 分页信息的封装: Page2). 查询条件信息的封装: ConditionBook3). 完成多条件查询分页的功能:3.1). View 层: books.jsp取出请求域中的page对象数据, 利用JSTL+EL+HTML来显示3.2). Controller 层: BookServletvoid getBooks(req, resp): 得到请求参数数据, 调用bookService的getPage()得到当前页数据的page对象3.3). Service 层: BookSe

24、rvice / BookServiceImplPage getPage(ConditionBook cb)3.4).层: Book/ BookImpllong getTotalRecord(minPrice,maxPrice,String categorysid)List getBooks(,count,minPrice,maxPrice, String categorysid)1). 显示的浏览(最多显示4条, 最后浏览的面)2). 可以清空浏览BookServletshowBook() getHistory()clearHistory()book_id1name1 book_id2name

25、2 book_id3name3区别查看书的和别的所有Viewbook/list.jsp history.jsp book/book.jsp6.1. 使用技术: 显示浏览6.2. 使用 ses 技术: 三个相关功能1). 用户的登陆与登出的2).3). 购物车的操作添加一本书到购物车3.1).3.2).显示购物车中所有的购物项3.3).修改某个购物项的书的数量3.4).删除某个购物项cartCartItemCartSes对象Cart 对象CartServiceaddBook() updateCartItem() deleteCartItem() clearCart()CartServletadd

26、() updateCount()delete() clear()6.3.综合应用: 用户的自动登陆cUser=user 信息cUser=user 信息jsesid=sid从 request 中获取以cUser 为 name 的得到它 value(user 信息)创建一个 user 对象放到 ses对象(“sUser”, user)新的 Ses对象c = new(“cUser”, user 信息) c.setMaxage(正数)res.add(c);Ses(“sUser”, user)Sess(“Suser”,user)jsesid=sid为什么关闭浏览器不可能得到原来的 Ses对象功能描述:

27、分类的删除按钮在该分类下有时可以操作,否则不能操作.1). 在购物车页面: 去结算2). 在地址页面: 添加当前用户的收货人地址信息#address 地址表CREATE TABLE address (id VARCHAR(40) PRIMARY KEY,#主键NAME VARCHAR(20),#收货人location VARCHAR(100),#地址8.1. 实现前台的订单操作:7.1. 利用自定义实现功能:3). 在地址页面: 展示当前用户的所有收货地址4). 在地址页面: 生成订单# orderitems 订单项 cartitemCREATE TABLE orderitems (id VA

28、RCHAR(40) PRIMARY KEY,#主键ty,#数量 price FLOAT,#单价ordersid VARCHAR(40),#对应订单的ID booksid VARCHAR(40),#对应书的IDCONSTRAordersid_FK FOREIGN KEY(ordersid) REFERENorders(id),CONSTRAbooksid_FK FOREIGN KEY(booksid) REFERENbooks(id);#orders 订单表 cartCREATE TABLE orders (id VARCHAR(40) PRIMARY KEY, #主键number VARCHA

29、R(50),#订单号SUSDEFAULT FALSE,#状态, 标识是否发货price FLOAT,#价格ordertime TIMEST,#下单时间 usersid VARCHAR(40),#对应用户的ID addreVARCHAR(40),#对应的地址IDCONSTRAusersid_FK1 FOREIGN KEY(usersid) REFERENusers(id),CONSTRAaddre_FK FOREIGN KEY(addre) REFERENaddre);VARCHAR(20),#usersid VARCHAR(40),#所对应用户的idCONSTRAusersid_FK FOREIGN KEY(usersid) REFERENusers(id);users/categorys/books/add