后台管理-----内容区域表单优化（针对页面不同数据的处理）

要成为光的女人

已于 2022-08-23 12:07:43 修改

阅读量358

点赞数

分类专栏：项目搭建规范文章标签：前端

于 2022-08-23 12:03:47 首次发布

本文链接：https://blog.csdn.net/weixin_51614564/article/details/126454433

版权

项目搭建规范专栏收录该内容

25 篇文章 2 订阅

订阅专栏

第1 步：我们可以将原来在页面写入表单的相关的配置单独抽出来，放入一个ts 文件中(content.config.ts) ：表示这个是属于用户页面表单相关的配置

第2步：在将这个配置文件（content.config.ts）引入到user页面中，在通过v-bind 全部传给子组件

第3步：我们可以把以下这个组件可以在次单独抽出来

第4步：在新建compontents/page-content 内容展示区这个文件专门放置内容区页面

第5步：在再user 页面进行引入使用

第6步：user 网络请求的代码最好不要写在最大的父组件user.vue 里面，会引起层级悖论。

6.1 因为user 组件里面引用了 PageContent 组件,PageContent 组件里面引用引用了HyTable组件

6.2 在别人使用PageContent 页面时，别人传进来一个pageName

例如：给user页面传进来 pageName="user",到时候pageContent 帮助去vuex请求数据，帮助去vuex 里面去拿到数据，就是将网络请求这部分的相关逻辑放到PageContent ,到时候只传一个字符串就可以了。到时候pageContent 拿到数据交给 HyTable 组件做一个展示。

第7步：将网络请求的代码放到page-content组件里面去

1.拿到useStore 和引入computed

2. 将网络请求的代码也移到这边来

3.之后在这个组件里面引入hyTabel 组件

<script lang="ts">
import { defineComponent,computed } from 'vue'
import {useStore} from '@/store'
import HyTable from '@/base-ui/table'
export default defineComponent({
  components:{
    HyTable
  },
  // 接收父组件传过来的数据
  props:{
    contentTableConfig:{
      type:Object,
      required:true
    }
   },
  setup () {
  const store=useStore()  //拿到store
    // 这里是发送请求的代码
 store.dispatch('system/getPageListAction',{
 pageUrl:'/users/list',
     queryInfo:{
       offset:0, //偏移,在分页里使用的
       size:10  //这一页请求多少条数据
     }
    })
  //拿到我们的用户的数据
    const userList=computed(()=>
     store.state.system.userList)  //拿到用户数据
    return {
    userList
    }
  }
})
</script>

4.我们现在先暂时将网络请求相关的在page-content 的写死的

第8步：来到vuex 里面

我们可以看到我们请求接口的一般都是pageUrl ：/user/list 用户接口，如果请求用户商品接口 role/list, 如果请求商品接口就是这样的 goods/list ,一般来说这种接口是比较规范的。

第9 步：如果公司里面不是正规的

1.首先我们可以从这里改起，别人在dispatch 的调用actions 的时候，让别人最好不要传入pageUrl 了，可以让别人传入一个pageName, 这个pageName 是什么呢？如果这里是一个请求用户列表这里就传入一个users, 如果是请求角色列表这里 role

2. 为什么用pageName？原因很简单，因为多个页面都会用到pageContent, 到时候给出传入pageName ,到时候这里会传入pageName，这里就会接收到一个pageName 属性,

注意：这里的pageName 不是写死的，是从setup 里面传入的props 里面去拿的。

3.然后是可以在vuex /actions payload 里面拿到这个pageName 的

如果公司里的接口是写的比较规范的话，这个接口是可以拼出来的

如果公司不是规范的话有变化的话，可以使用swich 来做条件判断

例如向这种类似不规范的：

let pageUrl=' '

switch (pageName){

case 'users':

pageUrl='api/users/abc/list'

break

case 'role':

pageUrl='api/role/bac/list'

}
 //  方法1；
  // let pageUrl='' //默认是一个空的字符串
  //  switch (pageName){
  //   case 'users':  //如果是这一个值
  //   pageUrl='/users/list'
  //   break
  //   case 'role':
  //   pageUrl='/role/list'
  //  }
4.把获取好的url 传进来，和queryInfo 发起请求

5.拿到请求结果并进行处理

6.将数据存储到state 中进行commit 提交

7.在mutations 里面进行修改

8.之后在user 页面使用只需要传入对应的pageName 就可以了。

9.到时候page-content 组件，就可以通过在setup 里面传入props 拿到一层组件传入的pageName 了。

第10步：获取数据

这个是在page-content.vue 是这样获取的：

相当于直接去拿store.state.system 这个模块里面的userList的数据
//拿到我们的用户的数据
 //const userList=computed(()=>store.state.system.userList)
优化：

现在我们通过vuex 里面的getters 属性，封装一些getter,让getter 间接的去获取上面的state 里面的数据。

到时候getters 里面会去返回我们获取到的数据

1.这个getters 首先会第一个传进来一个state

2.getter 本身是可以返回一个函数的，并且这个函数会有一个参数，到时候传进来一个pageName,它就会给你返回一个具体的数据