关于分层架构的思想
问题:在写用户登录模块的时候,要请求相应的接口,这时接口的封装涉及到分层架构
解决:
1.工具层:封装ajax请求的公共方法
2.数据层:根据不同的模块,对应封装不同的请求接口
3.业务层:调用相应的接口函数,传相应的参数
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | class MUtil { request(param){ return new Promise((resolve,reject) =>{ $.ajax({ type : param.type || 'get' , url : param.url || '' , dataType : param.dataType || 'json' , data : param.data || null , success : res => { //请求成功 if (res.status === 0){ typeof resolve === 'function' && resolve(res.data,res.msg) //resolve为true,执行后面的语句 } //未登录 else if (res.status === 10){ this .doLogin(); } else { typeof reject === 'function' && reject(res.msg || res.data) //resolve为true,执行后面的语句 } }, err : err => { typeof reject === 'function' && reject(err.statusText) } }); }) } //跳转登录 doLogin(){ window.location.href = '/login?redirect=' + encodeURIComponent(window.location.pathname) ; //处理特殊字符,安全处理 } } export default MUtil; |
1 2 3 4 5 6 7 8 9 10 11 12 13 | import Mutil from 'util/mm.jsx' ; const _mm = new Mutil(); class User{ login(loginInfo){ return _mm.request({ type: 'post' , url : '/manage/user/login.do' , data:loginInfo }) } } export default User; |
1 2 3 4 5 6 7 8 9 10 11 | onSubmit(){ _user.login({ username: this .state.username, password: this .state.password }) .then((res)=>{ }, (err)=>{ }) } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步