品优购电商系统06------完成品牌管理功能

1 品牌列表查询

1.1 需求分析

实现品牌列表的查询(不用分页和条件查询)效果如下:


1.2 前端代码

1.2.1 引入js


1.2.2 指定模块和控制器


ng-app 指令中定义的就是模块的名称

ng-controller 指令用于为你的应用添加控制器。

在控制器中,你可以编写代码,制作函数和变量,并使用 scope 对象来访问。

1.2.3 编写Js代码


1.2.4 循环显示表格数据


1.2.5 初始化调用

2 品牌列表分页查询

2.1 需求分析


2.2 后端代码

2.2.1 分页结果实体

2.2.2 服务接口层


2.2.3 服务实现层


注意:PageHelperMyBatis分页插件

5.2.4 控制层


2.3 前端代码

2.3.1 HTML


2.3.2 Js代码



3 增加品牌

3.1 需求分析


3.2 后端代码

3.2.1 服务接口层

3.2.2 服务实现层

3.2.3 服务实现层

3.3 前端代码

3.3.1 Js代码


3.3.2 HTML

绑定表单元素,我们用ng-model指令,绑定按钮的单击事件我们用ng-click


4 修改品牌

4.1 需求分析

点击列表的修改按钮,弹出窗口,修改数据后点保存执行保存操作


4.2 后端代码

4.2.1 服务接口层

4.2.2 服务实现层


4.2.3 服务实现层


4.3 前端代码

4.3.1 实现数据绑定


4.3.2 保存数据

修改JSsave方法


5 删除品牌

5.1 需求分析

点击列表前的复选框,点击删除按钮,删除选中的品牌。


5.2 后端代码

5.2.1 服务接口层


5.2.2  服务实现层


5.2.3 数据访问层

5.2.5 控制层

5.3 前端代码

5.3.1 JS代码

主要思路:我们需要定义一个用于存储选中ID的数组,当我们点击复选框后判断是选择还是取消选择,如果是选择就加到数组中,如果是取消选择就从数组中移除。在点击删除按钮时需要用到这个存储了ID的数组。

这里我们补充一下JS的关于数组操作的知识:

(1)数组的push方法:向数组中添加元素

(2)数组的splice方法:从数组的指定位置移除指定个数的元素 ,参数1为位置 ,参数2移除的个数

3)复选框的checked属性:用于判断是否被选中

5.3.2 HTML


6. 品牌多条件分页查询

6.1 需求分析

实现品牌条件查询功能,输入品牌名称、首字母后查询,并分页。


6.2  后台代码

6.2.1 服务接口层

6.2.2 服务实现层

6.2.3 数据访问层


6.2.4 控制层

6.3 前端代码

6.3.1 JS代码


6.3.2 HTML

添加搜索条件框:

7.Intellj Idea设置取消显示形参名提示



猜你喜欢

转载自blog.csdn.net/qq_32939679/article/details/80700412