图解路由请求

路由解析.jpg

微信项目路由机制总结

基于express.js的路由配置

// 1.一个简单的路由解析
module.exports = {
  '/recruit/list-company': {
    'get': {
      'api': 'post:/front/res/recruit/query',
      'params': (query) => {
        const params = Object.assign({
          pageSize: 8,
          pageNO: 1,
          recruitStatus: 1
        }, query);
        return params;
      },
      'view': 'recruit/list-company'
    }
  },
  '/api/recruit/list-company': {
    'get': {
      'api': 'post:/front/res/recruit/query',
      'params': (query) => {
        const params = Object.assign({
          pageSize: 8,
          pageNO: 1,
          recruitStatus: 1
        }, query);
        return params;
      }
    }
  }
};

解析路由：

1. 当我们在浏览器中输入了相应的路径后/recruit/list-company 浏览器输入地址后，只能是get请求，注意post的转换

2. 路由配置就可以通过后端请求的方法，例如get

3. 配置了后端的请求方法后，可以通过api(post:/front/res/recruit/query),api可以是数组，对象，字符串等

   // 1.字符串形式
   '路径':{
    'get'：{
        api：'post:/front/res/recruit/query',  //后端路径，并且规定了post请求
       params(){},
       handle(){},
       'view': '视图渲染' 
    }
   }
   // 2.数组的形式
   '路径':{
    'get'：{
        api：[
         {url:'/user/getUserInfo',name:'userInfo'},
         {url:'/res/resinfo/managereslist/1',name:'managereslist'}
        ],  
       handle(res,req){
           const userInfo = result.userInfo.data;
           const managereslist = result.managereslist.data;
           result = result.managereslist;
           result.data = {
             rtId: req.query.rtId,
             userInfo,
             managereslist
           };
           return result;
       },// 响应数据res在前面，请求打包数据req在后面
       'view': '视图渲染' 
   }
   // 3.对象的形式   params接受路径定义的参数/:name/:id等
   '路径'：{
    'get':{
      api(params){
        const apiArr = ['/user/getUserInfo'];
        if(params.id){
          apiArr.push({
            url:'/res/resinfo/reseditinfo',
            name:'info',
            query(){'resId':params.id}});
        }
        return apiArr;
      },
      handle(data,req){}  
    } 
   }
   

4. query()/params()方法对路径的参数进行处理或处理后端需要的参数，以便于能够得到数据

   //query()和params()方法接受2个参数，一个是查询参数query或params,一个是打包的请求req
   query(query,req){
     return {'相应的参数对'}
   }
   params(params,req){
     return {'相应的参数对'}          
   }
   

5. handle()方法处理得到的数据

   //handle(res,req)方法接受2个参数，一个数返回的数据，一个是请求的打包
   //如果请求的后端接口有多个，handle得到的数据res是一个对象，key值是对应的name值
   handle(res,req){
     //对应的name值是 userInfo manager
     const userInfo = res.userInfo.data;
     const  managereslist = res.managereslist.data;
     res = res.managereslist;
     res.data = {
       rtId: req.query.rtId,
       userInfo,
       managereslist
     };
     return result; //注意return给view层
   }
   

6. 第六步分2种情况

   • 一种是需要渲染到视图的数据，就需要view层(可以是对象/字符串)

     view: 'recruit/apply'  //对应的html模板
     view(data, req) {
       if (req.browser.mobile) {
         return 'payment/status-app';
       }
       return 'payment/status';
     }
     

   • 第二种是js异步请求到的数据，是需要返回到js中，然后给js处理数据，得到相应的效果

     '/api/payBillAdjust': {
       post: {
         api: '/payment/bill/payBillAdjust'
       }
     },
       // 我们通过js请求这个路径，由于路由配置，它会向后端post请求，同时规定了自身的
     api.post('/api/recruit/apply', params).then((res) => {
         location.href = '/recruit/download?' + $.serialize(res.data);
     }, (data) => {
         $.toast(data.message);
     });
     

     ​