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.         });