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.         });
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/wangyawei/p/9229341.html