品优购_day02品牌列表的功能实现

前提:本功能实现是建立在项目搭建好的基础上,即day01基础上

第一步: 将运营商管理后台的前端页面拷贝到项目的webapp目录下

品优购_day02品牌列表的功能实现

第二步: 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的包

品优购_day02品牌列表的功能实现

指定模块控制器

品优购_day02品牌列表的功能实现

编写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>

初始化调用

品优购_day02品牌列表的功能实现