vue thinkphp 项目记录

最新推荐文章于 2024-11-04 09:02:48 发布

原创最新推荐文章于 2024-11-04 09:02:48 发布 · 307 阅读

0 ·

CC 4.0 BY-SA版权

项目记录专栏收录该内容

1 篇文章

订阅专栏

本文记录了一个前端开发者在一个月内使用Vue和ThinkPHP进行项目开发的经历。面对前端架构的挑战，作者在同事的帮助下完成了基础架构。项目目前进行到一半，主要功能包括实时音视频、支付、登录和即时通讯。前端技术栈包括Vue、vue-cli、Element、axios和qs，后端采用ThinkPHP和MySQL。目前存在的问题是代码复用不足，如请求文件的API.js过大，作者计划将其优化为一个生成所需方法的工厂模式，同时后端也有类似的问题需要改进。

vue thinkphp

**
刚来公司老板就给了一个大项目，要求一个月完成。
对于一个前端app已经完成，就差数据库与后端管理的事情，以及刚好手里没什么余钱我就认了。
对于一个会后端与前端但是不会前端架构的我来说，这是一个挑战，而我恰恰喜欢挑战。
虽然前端的架构我不太熟悉，但是凭着我这几年经验以及请求同事的帮助下，完成了基本的架构。
现如今，这个项目还只做了一半，但是时间也悄悄的走过去一半了。距离剩下的时间只有十五天左右的时间。
这个项目涉及很多，但其中的主要业务只有几个小小的功能，实时音视频、支付、登录功能和即时通讯。

现在前端使用：vue、vue-cli、element、axios、qs；
后端： thinkphp 、 mysql；

就现在来看，设计不是很合理，很多的东西都是可以复用的。

就拿我封装的请求文件，里的请求方法以及链接。


```javascript
//***********************MemberType************************ */

  export const AdminSelMemberType =  function (data) {
    return xwRequest({
      url: 'Admin/MemberType/SelMemberType',
      method: 'post',
      data: Qs.stringify(data),
    })
  }

  export const AdminFindWhereMemberType =  function (data) {
    return xwRequest({
      url: 'Admin/MemberType/FindWhereMemberType',
      method: 'post',
      data: Qs.stringify(data),
    })
  }

  export const AdminAddMemberType =  function (data) {
    return xwRequest({
      url: 'Admin/MemberType/AddMemberType',
      method: 'post',
      data: Qs.stringify(data)
    })
  }

  export const AdminDelMemberType =  function (data) {
    return xwRequest({
      url: 'Admin/MemberType/DelMemberType',
      method: 'post',
      data: Qs.stringify(data)
    })
  }

  export const AdminUpdMemberType =  function (data) {
    return xwRequest({
      url: 'Admin/MemberType/UpdMemberType',
      method: 'post',
      data: Qs.stringify(data)
    })
  }

每一个方法都是同样的操作，除了方法名以及请求的 url 地址不同，其它的相同，而其它的同源，都是同一个模板刻出来的。导致这个 api.js 这个文件很大。
所以，，今天我准备把它做成一个工厂，它可以生成我想要的方法。现在如今方法可以大致分为四种方法，其它而外的方法不再考虑。
对于后端也是一样的，它们获取的数据虽然不是一样的，但是获取数据的代码是由一个模板而来的。