zoukankan      html  css  js  c++  java
  • 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.         });
  • 相关阅读:
    CSS盒子模型
    getContextPath、getServletPath、getRequestURI、request.getRealPath的区别
    MYSQL中的CASE WHEN END AS
    单点登录的精华总结
    git&github
    June 21st 2017 Week 25th Wednesday
    June 20th 2017 Week 25th Tuesday
    June 19th 2017 Week 25th Monday
    June 18th 2017 Week 25th Sunday
    June 17th 2017 Week 24th Saturday
  • 原文地址:https://www.cnblogs.com/wangyawei/p/9229341.html
Copyright © 2011-2022 走看看