React后台管理系統-后台接口封裝

1新建文件夾 service ，里邊建4個文件，分別是statistic-service.jsx 首頁數據統計接口, user-service.jsx用戶接口, product-service.jsx產品接口，order-service.jx訂單接口

 

2.首頁數據統計接口statistic-service

mm.jsx是封裝的ajax請求，在上一邊博客里邊有講到

1. import MUtil from 'util/mm.jsx'
2.  
3. const _mm = new MUtil();
4.  
5. class Statistic{
6.     // 首頁數據統計
7.     getHomeCount(){
8.         return _mm.request({
9.             url: '/manage/statistic/base_count.do'
10.         });
11.     }
12. }
13.  
14. export default Statistic;

3. 用戶接口user-service

1. import MUtil from 'util/mm.jsx'
2.  
3. const _mm = new MUtil();
4.  
5. class User{
6.     // 用戶登錄
7.     login(loginInfo){
8.         return _mm.request({
9.             type: 'post',
10.             url: '/manage/user/login.do',
11.             data: loginInfo
12.         });
13.     }
14.     // 檢查登錄接口的數據是不是合法
15.     checkLoginInfo(loginInfo){
16.         let username = $.trim(loginInfo.username),
17.             password = $.trim(loginInfo.password);
18.         // 判斷用戶名為空
19.         if(typeof username !== 'string' || username.length ===0){
20.             return {
21.                 status: false,
22.                 msg: '用戶名不能為空！'
23.             }
24.         }
25.         // 判斷密碼為空
26.         if(typeof password !== 'string' || password.length ===0){
27.             return {
28.                 status: false,
29.                 msg: '密碼不能為空！'
30.             }
31.         }
32.         return {
33.             status : true,
34.             msg : '驗證通過'
35.         }
36.     }
37.     // 退出登錄
38.     logout(){
39.         return _mm.request({
40.             type : 'post',
41.             url : '/user/logout.do'
42.         });
43.     }
44.     getUserList(pageNum){
45.         return _mm.request({
46.             type : 'post',
47.             url : '/manage/user/list.do',
48.             data : {
49.                 pageNum : pageNum
50.             }
51.         });
52.     }
53. }
54.  
55. export default User;

4.產品接口product-service

1. import MUtil from 'util/mm.jsx'
2.  
3. const _mm = new MUtil();
4.  
5. class Product{
6.     // 獲取商品列表
7.     getProductList(listParam){
8.         let url = '',
9.             data = {};
10.         if(listParam.listType === 'list'){
11.             url = '/manage/product/list.do';
12.             data.pageNum = listParam.pageNum;
13.         }else if(listParam.listType === 'search'){
14.             url = '/manage/product/search.do';
15.             data.pageNum = listParam.pageNum;
16.             data[listParam.searchType] = listParam.keyword;
17.         }
18.         return _mm.request({
19.             type : 'post',
20.             url : url,
21.             data : data
22.         });
23.     }
24.       // 獲取商品詳情
25.       getProduct(productId){
26.         return _mm.request({
27.             type : 'post',
28.             url : '/manage/product/detail.do',
29.             data : {
30.                 productId : productId || 0
31.             }
32.         });
33.     }
34.     // 檢查保存商品的表單數據
35.     checkProduct(product){
36.         let result = {
37.             status: true,
38.             msg: '驗證通過'
39.         };
40.         // 判斷用戶名為空
41.         if(typeof product.name !== 'string' || product.name.length ===0){
42.             return {
43.                 status: false,
44.                 msg: '商品名稱不能為空！'
45.             }
46.         }
47.         // 判斷描述不能為空
48.         if(typeof product.subtitle !== 'string' || product.subtitle.length ===0){
49.             return {
50.                 status: false,
51.                 msg: '商品描述不能為空！'
52.             }
53.         }
54.         // 驗證品類ID
55.         if(typeof product.categoryId !== 'number' || !(product.categoryId > 0)){
56.             return {
57.                 status: false,
58.                 msg: '請選擇商品品類！'
59.             }
60.         }
61.         // 判斷商品價格為數字，且大於0
62.         if(typeof product.price !== 'number' || !(product.price >= 0)){
63.             return {
64.                 status: false,
65.                 msg: '請輸入正確的商品價格！'
66.             }
67.         }
68.         // 判斷庫存為數字，且大於或等於0
69.         if(typeof product.stock !== 'number' || !(product.stock >= 0)){
70.             return {
71.                 status: false,
72.                 msg: '請輸入正確的庫存數量！'
73.             }
74.         }
75.  
76.         return result;
77.     }
78.    // 保存商品
79.    saveProduct(product){
80.     return _mm.request({
81.         type : 'post',
82.         url : '/manage/product/save.do',
83.         data : product
84.     });
85. }
86.     // 變更商品銷售狀態
87.     setProductStatus(productInfo){
88.         return _mm.request({
89.             type : 'post',
90.             url : '/manage/product/set_sale_status.do',
91.             data : productInfo
92.         });
93.     }
94.    //查找一級品類列表
95.    getCategoryList(parentCategoryId){
96.     return _mm.request({
97.         type : 'post',
98.         url : '/manage/category/get_category.do',
99.         data : {
100.             //沒有傳的話默認值就是0
101.             categoryId : parentCategoryId || 0
102.         }
103.     });
104.  
105.    }
106.      // 新增品類
107.      saveCategory(category){
108.         return _mm.request({
109.             type : 'post',
110.             url : '/manage/category/add_category.do',
111.             data : category
112.         });
113.     }
114.     // 修改品類名稱
115.     updateCategoryName(category){
116.         return _mm.request({
117.             type : 'post',
118.             url : '/manage/category/set_category_name.do',
119.             data : category
120.         });
121.     }
122. }
123.  
124. export default Product;

5.訂單接口order-service.jx

1. import MUtil from 'util/mm.jsx'
2.  
3. const _mm = new MUtil();
4.  
5. class Order{
6.     // 獲取訂單列表
7.     getOrderList(listParam){
8.         let url = '',
9.             data = {};
10.         if(listParam.listType === 'list'){
11.             url = '/manage/order/list.do';
12.             data.pageNum = listParam.pageNum;
13.         }else if(listParam.listType === 'search'){
14.             url = '/manage/order/search.do';
15.             data.pageNum = listParam.pageNum;
16.             data.orderNo = listParam.orderNo;
17.         }
18.         return _mm.request({
19.             type : 'post',
20.             url : url,
21.             data : data
22.         });
23.     }
24.     // 獲取訂單詳情
25.     getOrderDetail(orderNumber){
26.         return _mm.request({
27.             type : 'post',
28.             url : '/manage/order/detail.do',
29.             data : {
30.                 orderNo : orderNumber
31.             }
32.         });
33.     }
34.     sendGoods(orderNumber){
35.         return _mm.request({
36.             type : 'post',
37.             url : '/manage/order/send_goods.do',
38.             data : {
39.                 orderNo : orderNumber
40.             }
41.         });
42.     }
43. }
44.  
45. export default Order;

6.解決跨域問題

在webpack.config里邊 devserverr 里邊的proxy配置即可解決

7.頁面引入和使用

1. import Statistic from 'service/statistic-service.jsx'
2.  
3. const _statistic = new Statistic();
4.  
5.    _statistic.getHomeCount().then(res => {
6.             this.setState(res);
7.         }, errMsg => {
8.             _mm.errorTips(errMsg);
9.         });