前提:本功能实现是建立在项目搭建好的基础上,即day01基础上
第一步: 将运营商管理后台的前端页面拷贝到项目的webapp目录下
第二步: service接口及实现类
接口
package com.pyg.sellergoods.service; import com.pyg.pojo.TbBrand; import entity.PageResult; import java.util.List; public interface BrandService { //查询所有品牌 public List<TbBrand> findAll();
实现类
package com.pyg.sellergoods.service.impl; import com.alibaba.dubbo.config.annotation.Service; import com.github.pagehelper.Page; import com.github.pagehelper.PageHelper; import com.pyg.mapper.TbBrandMapper; import com.pyg.pojo.TbBrand; import com.pyg.sellergoods.service.BrandService; import entity.PageResult; import org.springframework.beans.factory.annotation.Autowired; import java.util.List; @Service public class BrandServiceImpl implements BrandService { @Autowired private TbBrandMapper tbBrandMapper; @Override public List<TbBrand> findAll() { return tbBrandMapper.selectByExample(null); }
第三步: web层
import com.alibaba.dubbo.config.annotation.Reference; import com.pyg.pojo.TbBrand; import com.pyg.sellergoods.service.BrandService; import entity.PageResult; import entity.Result; import org.springframework.web.bind.annotation.RequestBody; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.RestController; import java.util.List; @RestController @RequestMapping("/brand") public class BrandController { @Reference private BrandService brandService; @RequestMapping("/findAll") public List<TbBrand> findAll(){ return brandService.findAll(); }
第四步: 前端代码(重点) 将web层的数据展示在前端页面
引入angularjs的包
指定模块控制器
编写js代码(js前端控制上面的html模块代码)
<script> var app=angular.module("pyg",["pagination"]); //这边是注入了两个参数$scope,$http,所以只有在其作用域才可以使用 app.controller("brandController",function ($scope,$http) { //获取所有,因为分页所以可以不存在了 $scope.findAll=function () { $http.get("../brand/findAll.do").success( function (response) { $scope.list=response; } ) }
</script>
循环显示js ajax中respons返回的结果
<tbody> <tr ng-repeat="brand in list"> <td><input type="checkbox" ></td> <td>{{brand.id}}</td> <td>{{brand.name}}</td> <td>{{brand.firstChar}}</td> <td class="text-center"> <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#editModal" ng-click="findOne(brand.id)" >修改</button> </td> </tr> </tbody>
初始化调用
<body class="hold-transition skin-red sidebar-mini" ng-app="pyg" ng-controller="brandController" ng-init="findAll()">