• 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.         });
  • 相关阅读:
    Redis 思维导图 (解析版)
    一张图片了解redis
    Redis 思维导图
    计算机网络协议
    IT笔面试题
    Hadoop集群搭建
    天涯论坛只看楼主
    齐秦&r大约在冬季现场版
    郁可唯茶汤现场版
    MTK平台电路设计01
  • 原文地址:https://www.cnblogs.com/wangyawei/p/9229341.html
Copyright © 2020-2023  润新知