网站seo设计方案案例市场调查报告
列表 :
列表包含 :
模糊查找 + 分页
列表jsp页面 :
一 :导入外部文件
(举例 : 用户点进来就可以看到菜单,这是预加载属于,使用文档就绪函数实现)
二 : body 上
① : 文档就绪函数 ${ function()
//获取条件查询的字段
//组装对象
//调用文档就绪函数
}
② : 封装ajax方法{
$.ajax({
- 请求路径
- 请求方法
- 数据传递
- 解析
- 成功回调函数
- 打印
- 因为有分页添加分页
let arr = res.data; //首页
let prevPage = res.prevPage; //上一页
let nextPage = res.nextPage; //下一页
let totalPage = res.totalPage; //尾页
3.清空表
4.追加表头
5.使用循环追加数据
(因为有分页 用上面的arr)
for (let x of arr)
- 在循环外面追加分页按钮 colspan居中
<td colspan="100">
<input type="button" value="首页" οnclick="doPage(1)">
- 失败回调函数{
给出提示
}
})
}
body 中间
三 : 搜索框 inp
四 : 搜索按钮 button
五 : 列表 table
六 : body 下写脚本 script
- 给搜索按钮绑定一个点击事件{
//获取条件查询的字段
//组装对象
//调用文档就绪函数
}
- 分页 给分页写一个function方法{
//获取条件查询的字段
//组装对象
//调用文档就绪函数
//多加一个pageNum
}
Controller:
一 : @WebServlet("/menu/*")
MenuVo menuVo = JSONObject.parseObject(reqInfos, MenuVo.class);
//将转换后的对象传给Service
PageResult<MenuVo> list= service.menuList(menuVo);
//将转换后的结果响应给用户
resp.getWriter().println(JSONObject.toJSONString(list));
//调用到层方法获取所有数据
List<MenuVo> list = dao.menuList(menuVo);
//调用到层方法,获取总条数
int count = dao.getCount(menuVo);
//Integer pageNum, Integer totalNum, Integer pageSize, List<T> data
PageResult<MenuVo> menuVoPageResult = new PageResult<>(menuVo.getPageNum(), count, menuVo.getPageSize(), list);
return menuVoPageResult;
二 : ser {
全局变量
- 接参
- 将json对象转换成java对象
- 将转换后的对象传给service
- 将处理后的结果响应给用户
}
Service:
① : 调用dao层方法获取所有数据 (参数放vo类的)
List<MenuVo> list = dao.menuList(menuVo);
② : 定义总条数的方法
int count = dao.getCount(menuVo);
③ : 点进去分页工具类 调用方法 (将参数粘过来对着写) 得到返回值
④ : 返回返回值
Dao:
一 : 1.定义sql语句 :
- 根据名字模糊查找
- 打印sql语句
- 分页sql语句
sql+=" limit ?,?";
- 分页公式 : 起始下标 = (当前页数 - 1)*条数
int index=(menuVo.getPageNum()-1)*menuVo.getPageSize();
- 分页公式
处理返回结果
添加 :
添加Jsp页面:
一 :导入外部文件
(举例 : 用户点进来就可以看到菜单,这是预加载属于,使用文档就绪函数实现)
二 : body 上
① : 文档就绪函数 ${ function()
//调用下拉框的function方法
//关闭异步
}
② : 封装ajax方法{
$.ajax({
- 请求路径
- 请求方法
- 数据传递
- 解析
- 成功回调函数{
① : 打印
② : 循环追加数据{
//追加数据 :
1.是下拉框的数据
2.头追的是外键的ID
3.value : 外键的ID
4.option中间方法的是 外键的名字
for (let x of res) {
//追加数据
$("#typeId").append(`
<option value="\${x.typeId}">\${x.typeName}</option>
- 失败回调函数 { 给出提示 }
三 : body 中间
- 添加文本框
文本框用 : text 下拉框 : <select> <option>
下拉框的ID给的是主表里外键的字段 追加的是外键的主键和外面的名称字段
下俩框示例 : 类型ID: <select id="typeId">
<option value="">请选择</option>
</select><br>
图片实例 :
上传图片: <img src="" alt="" width="35" height="35" id="imgUrl">
<input type="file" id="file" onchange="showImg(this)">
- 添加的按钮
- Body下面写 <script>
①先给图片绑定点击事件
- 获取选中图片的路径
- 创建文件阅读器
- 读取文件图片路径
- 加载给src内容给service赋值{
- 给图片赋值
}
图片绑定事件案例
function showImg(obj) {
//获取选中图片的路径(和绑定事件里的实参使用一个单词) 加载图片内容给Service赋值
let file = obj.files[0];
//创建文件阅读器
let reader = new FileReader();
//读取图片路径
reader.readAsDataURL(file);
//加载src内容给Service赋值
reader.onload=function () {
//给图片赋值
$("#imgUrl").attr("src",reader.result)
}
}
- 给添加按钮绑定单击事件
①将res的路径给imgUrl 添加的点击事件里.ajax外
②创建formDate对象
③获取选中的图片
④将图片放到创建的formData中
⑤图片的ajax{
在成功回调函数里:将res的路径给imgUrl
}
⑥取值 (添加框字段的值)
⑦非空校验
⑧组装对象
⑨添加的ajax{
在成功回调函数里:添加后跳转list.jsp}
FileController
一 : 上传图片的方法 (上传图片单词 : upload)
①调用图片方法
②将处理后的结果响应给用户
上传图片示例 :
protected void upload(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//调用图片方法
String image = UploadUtil.uploadImage(req, resp);
//将处理后的结果响应给用户
resp.getWriter().println(JSONObject.toJSONString(image));
}
二:展示图片方法 showIng
①传参
②使用工具类调用方法
展示图片方法示例 :
protected void showImg(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
//传参
String imgUrl = req.getParameter("imgUrl");
//使用工具类调用方法
UploadUtil.showImg(imgUrl,resp);
}
Controller :
上传图片的方法 : upload
1.调用工具类图片方法
2.响应
展示图片的方法 :showImg
3.传参
4.使用工具类调用方法
添加方法 {
- 接参
- 将json对象转换成Java对象
- 将转换后的对象传给service
- 处理返回值(返200)
}
Service :
①不需要显示的字段设置默认值
②调用dao层方法 没有返回值直接走
Dao :
- : 定义sql
- : 执行sql
修改 :
删除 :