项目一众筹网04_1_角色维护-分页_角色列表的页面搭建__同步异步的探讨实际应用_完美获取前端元素_异步中数据追加的问题_关键词模糊查询功能完成引入外部js文件

Posted 2022-01-07 平凡加班狗

系列文章目录

文章目录

• 系列文章目录
• 07-角色维护-分页-过渡-点超链接跳转到页面
• • 角色列表的页面搭建
• 08-角色维护-分页-前端-准备工作
• • 创建外部的JavaScript文件
  • 引入外部js文件：注意引入的路径
  • 同步异步的探讨实际应用
• 09-角色维护-分页-前端-函数getPageInfoRemote()
• • ==完美获取前端元素==
• 10-角色维护-分页-前端-函数fillTableBody()
• • 异步中数据追加的问题
• 11-角色维护-分页-前端-函数generateNavigator( )和paginationCallBack( )
• 12-角色维护-关键词搜索
• 13-角色维护-新增-目标和思路（引入模态框）（下一篇）

07-角色维护-分页-过渡-点超链接跳转到页面

点超链接跳转到角色列表页面的时候不需要带参数，我们就直接在 view-controller 里面维护就好了

角色列表的页面搭建

=角色（分页）列表的页面还是去看模型，但是直接查看源代码来改造代码是不方便的

我们直接这样 选择检查


跟以前一样，这样去复制
页面有大量的假数据，留1条做模板。其余的都删掉
页面跳转的链接待会改一下

然后设置好view-controller

08-角色维护-分页-前端-准备工作

设置全局变量有什么好处，好处就是以后我们要修改的话，就只要修改这个地方就行了

创建外部的javascript文件

引入外部js文件：注意引入的路径

然后在js里面写一些方法


可参考Admin里面是怎么写的，不过Admin是同步，这里是异步，晚上一样不可能，但是基本上还是一样的，道理是相同的


这样就完成了所有的js大概骨架，我们实现这个功能就把它拆分成一个一个的小模块来逐个处理

同步异步的探讨实际应用

怎么改？ 把pageInfo的声明放到里面来，并且把填充的方法也放他后面如下：

方式二：改成同步你不管怎么样都要先等我先执行完（例子可以看前面我的同步异步的探讨）

方式三：玩出花

09-角色维护-分页-前端-函数getPageInfoRemote()

故意写错，造成后端错误，看看前端会打印什么


根据最官方靠谱的做法其实是根据状态码（status）来进行判断

完美获取前端元素

尽量复制，手输入容易出错

最终如下


然后就可以接着往下写了

注意：js里面没有equals 直接用用双等于即可

为了避免写错，尽量复制
下面这个类是我们为统一返回JSON格式数据所做的工具类，我们来这里面复制,这个工具类在别的项目中也可以使用


两方面我们都排除了
再往下就一定是成功了

10-角色维护-分页-前端-函数fillTableBody()

扯回来
数据我们要在tbody标签里面去显示

同理，另外3个按钮也是这样做

异步中数据追加的问题

注意，异步跟我们之前的同步有一个最大的区别就是，异步是无刷新的，
我们之前的管理员维护是同步的，仔细看，页面是会刷新的
这样就会有一个问题，我们点击页码导航条的时候，比如点一下下一页
，因为没有刷新，旧数据一直在，所以就会导致，数据一直追加

所以我们在前面还得做一个操作
注意清空旧数据的位置，是方法的最前面，每次调用才去清空，不要写在for循环里面，不然就永远只有最后一条数据了


重启服务，看下效果，有问题及时处理

下面是分页页码导航条

11-角色维护-分页-前端-函数generateNavigator( )和paginationCallBack( )

在前一个方法里面一定得先去调用一下


这里也可以参考我们之前的Admin，管理员/用户维护的分页页码是怎么写的





从前端也可以看出来

这里可以复制admin-page.jsp 页面的代码来，注意区分他们的不同之处，
也是同步的写法和异步的写法的区别

注意，跟同步的区别，异步不需要跳转页面

检查一下是否漏掉了css和js

效果如下：

12-角色维护-关键词搜索

13-角色维护-新增-目标和思路（引入模态框）（下一篇）

14-角色维护-新增-代码：前端
15-角色维护-新增-代码：后端
16-角色维护-新增-小结
17-角色维护-更新-目标和思路
18-角色维护-更新-代码：前端-给铅笔按钮绑定单击响应函数
19-角色维护-更新-代码：前端-打开模态框
20-角色维护-更新-代码：前端-执行更新
21-角色维护-更新-代码：后端-执行更新
22-角色维护-删除-目标和思路
23-角色维护-删除-代码：后端
24-角色维护-删除-代码：前端-打开模态框
25-角色维护-删除-代码：前端-执行删除
26-角色维护-删除-代码：前端-单条删除
27-角色维护-删除-代码：前端-批量删除-全选全不选功能
28-角色维护-删除-代码：前端-批量删除-收集要删除的信息
29-角色维护-删除-小结