文章目錄

• 商品分類管理
• • 實現功能
  • • 實體類
    • controller
    • service
    • mapper
    • 跨域問題(cors)
• 品牌查詢
• • • controller
    • • PageResult
    • Service
  • 異步查詢工具axios
  • • axios的全局配置
    • 項目中使用
  • 完成分頁和過濾
• 品牌管理
• 商品規格管理
• 商品管理

商品分類管理

商城的核心自然是商品，而商品多了以后，肯定要進行分類，并且不同的商品會有不同的品牌信息，我們需要依次去完成：商品分類、品牌、商品的開發。

• 導入數據(sql)

實現功能

商品分類使用了樹狀結構，而這種結構的組件vuetify并沒有為我們提供，這里自定義了一個樹狀組件。不要求實現或者查詢組件的實現，只要求可以參照文檔使用該組件即可：

在瀏覽器頁面點擊“分類管理”菜單：

根據這個路由路徑到路由文件（src/route/index.js），可以定位到分類管理頁面：

由路由文件知，頁面是src/pages/item/Category.vue

實體類

在leyou-item-interface中添加Category實體類：

@Table(name="tb_category") public class Category {@Id@GeneratedValue(strategy=GenerationType.IDENTITY)private Long id;private String name;private Long parentId;private Boolean isParent; // 注意isParent生成的getter和setter方法需要手動加上Isprivate Integer sort;// getter和setter略 }

controller

編寫一個controller一般需要知道四個內容：

- 請求方式：決定我們用GetMapping還是PostMapping - 請求路徑：決定映射路徑 - 請求參數：決定方法的參數 - 返回值結果：決定方法的返回值

在剛才頁面發起的請求中，我們就能得到絕大多數信息：

• 請求方式：Get，插敘肯定是get請求
• 請求路徑：/api/item/category/list。其中/api是網關前綴，/item是網關的路由映射，真實的路徑應該是/category/list
• 請求參數：pid=0，根據tree組件的說明，應該是父節點的id，第一次查詢為0，那就是查詢一級類目
• 返回結果：？？
  根據前面tree組件的用法我們知道，返回的應該是json數組：對應的java類型可以是List集合，里面的元素就是類目對象了。也就是List
  ResponseEntity

@Controller @RequestMapping("category") public class CategoryController {@Autowiredprivate CategoryService categoryService;/*** 根據父id查詢子節點* @param pid* @return*/@GetMapping("list")public ResponseEntity<List<Category>> queryCategoriesByPid(@RequestParam("pid") Long pid) {if (pid == null || pid.longValue() < 0) {// 響應400，相當于ResponseEntity.status(HttpStatus.BAD_REQUEST).build();return ResponseEntity.badRequest().build();}List<Category> categories = this.categoryService.queryCategoriesByPid(pid);if (CollectionUtils.isEmpty(categories)) {// 響應404return ResponseEntity.notFound().build();}return ResponseEntity.ok(categories);} }

service

一般service層我們會定義接口和實現類，不過這里我們就偷懶一下，直接寫實現類了：

@Service public class CategoryService {@Autowiredprivate CategoryMapper categoryMapper;/*** 根據parentId查詢子類目* @param pid* @return*/public List<Category> queryCategoriesByPid(Long pid) {Category record = new Category();record.setParentId(pid);return this.categoryMapper.select(record);} }

mapper

我們使用通用mapper來簡化開發：

public interface CategoryMapper extends Mapper<Category> { }

要注意，我們并沒有在mapper接口上聲明@Mapper注解，那么mybatis如何才能找到接口呢？

我們在啟動類上添加一個掃描包功能：

@SpringBootApplication @EnableDiscoveryClient @MapperScan("com.leyou.item.mapper") // mapper接口的包掃描 public class LeyouItemServiceApplication {public static void main(String[] args) {SpringApplication.run(LeyouItemServiceApplication.class, args);} }

跨域問題(cors)

跨域問題(cors)](https://blog.csdn.net/chenhangx/article/details/105413599)

品牌查詢

路由路徑：/item/brand

根據路由文件知，對應的頁面是：src/pages/item/Brand.vue

`tb_brand`ENGINE=InnoDB AUTO_INCREMENT=325400 DEFAULT CHARSET=utf8 COMMENT='品牌表，一個品牌下有多個商品（spu），一對多關系';

這里需要注意的是，品牌和商品分類之間是多對多關系。因此我們有一張中間表，來維護兩者間關系：

CREATE TABLE `tb_category_brand` (`category_id` bigint(20) NOT NULL COMMENT '商品類目id',`brand_id` bigint(20) NOT NULL COMMENT '品牌id',PRIMARY KEY (`category_id`,`brand_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COMMENT='商品分類和品牌的中間表，兩者是多對多關系';

但是，你可能會發現，這張表中并沒有設置外鍵約束，似乎與數據庫的設計范式不符。為什么這么做？

• 外鍵會嚴重影響數據庫讀寫的效率
• 數據刪除時會比較麻煩

在電商行業，性能是非常重要的。我們寧可在代碼中通過邏輯來維護表關系，也不設置外鍵。

controller

編寫controller先思考四個問題，參照前端頁面的控制臺

• 請求方式：查詢，肯定是Get
• 請求路徑：分頁查詢，/brand/page
• 請求參數：根據我們剛才編寫的頁面，有分頁功能，有排序功能，有搜索過濾功能，因此至少要有5個參數：
  • page：當前頁，int
  • rows：每頁大小，int
  • sortBy：排序字段，String
  • desc：是否為降序，boolean
  • key：搜索關鍵詞，String
• 響應結果：分頁結果一般至少需要兩個數據
  • total：總條數
  • items：當前頁數據
  • totalPage：有些還需要總頁數

PageResult

這里我們封裝一個類，來表示分頁結果：

public class PageResult<T> {private Long total;// 總條數private Integer totalPage;// 總頁數private List<T> items;// 當前頁數據public PageResult() {}public PageResult(Long total, List<T> items) {this.total = total;this.items = items;}public PageResult(Long total, Long totalPage, List<T> items) {this.total = total;this.totalPage = totalPage;this.items = items;}public Long getTotal() {return total;}public void setTotal(Long total) {this.total = total;}public List<T> getItems() {return items;}public void setItems(List<T> items) {this.items = items;}public Long getTotalPage() {return totalPage;}public void setTotalPage(Long totalPage) {this.totalPage = totalPage;} }

另外，這個PageResult以后可能在其它項目中也有需求，因此我們將其抽取到leyou-common中，提高復用性：
不要忘記在leyou-item-service工程的pom.xml中引入leyou-common的依賴：

<groupId>com.leyou.common</groupId><artifactId>leyou-common</artifactId>

Service

@Service public class BrandService {@Autowiredprivate BrandMapper brandMapper;/*** 根據查詢條件分頁并排序查詢品牌信息** @param key* @param page* @param rows* @param sortBy* @param desc* @return*/public PageResult<Brand> queryBrandsByPage(String key, Integer page, Integer rows, String sortBy, Boolean desc) {// 初始化example對象Example example = new Example(Brand.class);Example.Criteria criteria = example.createCriteria();// 根據name模糊查詢，或者根據首字母查詢if (StringUtils.isNotBlank(key)) {criteria.andLike("name", "%" + key + "%").orEqualTo("letter", key);}// 添加分頁條件PageHelper.startPage(page, rows);// 添加排序條件if (StringUtils.isNotBlank(sortBy)) {example.setOrderByClause(sortBy + " " + (desc ? "desc" : "asc"));}List<Brand> brands = this.brandMapper.selectByExample(example);// 包裝成pageInfoPageInfo<Brand> pageInfo = new PageInfo<>(brands);// 包裝成分頁結果集返回return new PageResult<>(pageInfo.getTotal(), pageInfo.getList());} }

異步查詢工具axios

異步查詢數據，自然是通過ajax查詢，大家首先想起的肯定是jQuery。但jQuery與MVVM的思想不吻合，而且ajax只是jQuery的一小部分。因此不可能為了發起ajax請求而去引用這么大的一個庫。
Vue官方推薦的ajax請求框架叫做：axios
axios的Get請求語法：

axios.get("/item/category/list?pid=0") // 請求路徑和請求參數拼接.then(function(resp){// 成功回調函數}).catch(function(){// 失敗回調函數}) // 參數較多時，可以通過params來傳遞參數 axios.get("/item/category/list", {params:{pid:0}}).then(function(resp){})// 成功時的回調.catch(function(error){})// 失敗時的回調

axios的POST請求語法：

比如新增一個用戶

axios.post("/user",{name:"Jack",age:21}).then(function(resp){}).catch(function(error){})

注意，POST請求傳參，不需要像GET請求那樣定義一個對象，在對象的params參數中傳參。post()方法的第二個參數對象，就是將來要傳遞的參數

PUT和DELETE請求與POST請求類似

axios的全局配置

而在我們的項目中，已經引入了axios，并且進行了簡單的封裝，在src下的http.js中：
http.js中對axios進行了一些默認配置：

import Vue from 'vue' import axios from 'axios' import config from './config' // config中定義的基礎路徑是：http://api.leyou.com/api axios.defaults.baseURL = config.api; // 設置axios的基礎請求路徑 axios.defaults.timeout = 2000; // 設置axios的請求時間Vue.prototype.$http = axios;// 將axios賦值給Vue原型的$http屬性，這樣所有vue實例都可使用該對象

項目中使用

我們在組件Brand.vue的getDataFromServer方法，通過$http發起get請求，測試查詢品牌的接口，看是否能獲取到數據：



可以看到，在請求成功的返回結果response中，有一個data屬性，里面就是真正的響應數據。

響應結果中與我們設計的一致，包含3個內容：

• total：總條數，目前是165
• items：當前頁數據
• totalPage：總頁數，我們沒有返回

完成分頁和過濾

品牌管理

商品規格管理

商品管理

總結

以上是生活随笔為你收集整理的乐优商城之后台管理系统的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。