Servlet项目实战---水果库存后台管理系统

一、显示所有的水果信息

1.路径问题

Servlet项目实战---水果库存后台管理系统_第1张图片
如果项目的架构如上图所示,对于login.html,引入login.css时,相对路径为:…/css/login.css
绝对路径为:http://localhost:8080/pro10/css/login.css

开发中,建议使用绝对路径
在普通的html页面中(未使用thymeleaf)加上:
作用是:当前页面上的所有路径都以这个为基础,因此
直接写是一个绝对路径。

在thymeleaf渲染的页面上:
th:href=“@{}” 表示以项目路径作为根目录
就直接写根目录就可以了,不用再找绝对路径了,访问地址栏上也不会出现一大串路径。

在thymelea中写路径用的是
th:href=“@{}”

2.显示所有的水果信息的步骤

大体按照这个顺序写,都是随机穿插着修改:
Servlet项目实战---水果库存后台管理系统_第2张图片

(1)先准备html框架

(2)在DAO接口中规范抽象方法

传入空值,返回的是Fruit的List

(3)在DAO实现类中实现抽象方法

getFruitList(),用到的工具类差不多会写就行了,后面会被其他的工具类代替。

(4)Servlet,业务方法

数据库实现,要跳转到哪里(/index),都写在这里。
先跳到/index组件这里,这个组件服务器内部转发跳到index.html

首先实例化DAO实现类,通过这个对象来获取数据库中的所有数据。将所有数据保存到session中,指明key为fruitList,前端就可以通过这个session作用域的key来获取session作用域的值。
Servlet项目实战---水果库存后台管理系统_第3张图片

(5)完善html

Servlet项目实战---水果库存后台管理系统_第4张图片

想让thymeleaf解析的内容就用 ${} 包起来
标签中

th:href="@{/edit.do(fid=${fruit.fid})} 要跳转的Servlet组件是/edit.do
/edit.do?fid都是字符串,是不需要被解析的,key=value这种写法,用括号包起来,如果有多个,用逗号隔开
fid=数据库查到的fid 左边是key

二、查看特定的水果信息

(1)在index.html中:

把当前记录的fruid.fid获取到,传给key fid
Servlet项目实战---水果库存后台管理系统_第5张图片

(2)/edit.do组件中:

通过key fid查到fruit。保存的key是fruit
Servlet项目实战---水果库存后台管理系统_第6张图片

(3)页面中:

Servlet项目实战---水果库存后台管理系统_第7张图片

三、更新特定的水果信息

(1)直接在查看的页面上修改

Servlet项目实战---水果库存后台管理系统_第8张图片

(2)update.do中

根据name把输入的值更新到数据库中
Servlet项目实战---水果库存后台管理系统_第9张图片

四、删除一条记录

index.html页面上:
先在session域里拿到fruit,得到fid。
Servlet项目实战---水果库存后台管理系统_第10张图片

thymeleaf的语法:
||中加的是字符串,同时会解析${}里的内容

js方法:获取到fruit的id,这个方法请求del.do组件,并把页面中的fid传给key fid。Servlet就可以得到这个fid(通过key得到的值)(get方法是在地址栏拿到的值)。

function delFruit(fid){
    if (confirm('是否确认删除?')){
        window.location.href='del.do?fid='+fid;
    }
}

del.do Select:通过fid删就OK啦,再重定向index上。

五、添加一条库存记录

看一下整体的逻辑:
注意最下面那行,不要直接在页面上写 先请求一个组件服务器内部转发到add.html,再添加的时候请求post,添加到数据库。
Servlet项目实战---水果库存后台管理系统_第11张图片
index.html中:
add.skip中就写了一个内部转发到add.html
在这里插入图片描述
add.html中:
add.do中通过name获取页面上的信息,然后封装成一个fruit对象,然后加到数据库中。
Servlet项目实战---水果库存后台管理系统_第12张图片

只分析逻辑,需要代码请留言~

你可能感兴趣的:(Servlet,JavaWeb,servlet,java)