若依框架前后端分离Vue如何做自定义的组件

若依框架前后端分离Vue如何做自定义的组件

在vue页面中用到了大量的组件,比如选择用户组件,下面咱们自己做一个组件。就拿用户选择组件作为例子。

1、创建组件WmsUserSelect

在vue项目目录src→components→WmsUserSelect目录下创建该组件目录及index.vue文件。
请添加图片描述

该index.vue文件的详细代码:

<template>
  <el-select placeholder="请选择用户" clearable v-model="customer">
    <el-option
      v-for="customer in userList"
      :key="customer.id"
      :label="customer.nickName"
      :value="customer.userId"
    ></el-option>
  </el-select>
</template>
<script>
import { mapGetters } from 'vuex';
export default {
  props: ['value','size'],
  data() {
    return {

    }
  },
  computed: {
    ...mapGetters(['userList']),
    customer: {
      get() {
        return this.value;
      },
      set(v) {
        this.$emit('input', v);
      }
    }
  },
  created() {
  },
  methods: {
  }
}
</script>

2、userList的配置

这里所说的userList指的是组件WmsUserSelect中的 …mapGetters([‘userList’]),中的关于用户列表配置。

这里用到了store文件夹下的相关文件配置。

2.1、getter.js配置

主要展示与我们例子相关的配置

const getters = {
  // userSelet组件相关
  userList: state => state.wms.userList,
  userMap: state=> state.wms.userMap,
  },

export default getters

2.2 、wms.js配置

主要展示与我们例子相关的配置

import {listUser} from "@/api/system/user";
const state = {
  userList: [],
  userMap: new Map()
}
const mutations = {
  SET_USERS(state, list) {
    state.userList = list;
    state.userMap = new Map();
    list.forEach((user) => {
      state.userMap.set(user.userId, user.nickName)
    })
  },
}
const actions = {
  
  getUser({ commit }) {
    return listUser({}, { page: 0, size: 1000 })
      .then(res => {
        console.log("getUser: ",res);
        const { rows } =res
        commit('SET_USERS', rows);
      })
  },
}
export default {
  namespaced: true,
  state,
  mutations,
  actions
}

2.3、index配置

导入wms.js配置

import Vue from 'vue'
import Vuex from 'vuex'
import app from './modules/app'
import user from './modules/user'
import tagsView from './modules/tagsView'
import permission from './modules/permission'
import settings from './modules/settings'
import getters from './getters'
// wms
import wms from './modules/wms'
import dict from './modules/dict'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    app,
    user,
    tagsView,
    permission,
    settings,
    dict,
    wms
  },
  getters
})

export default store

3、main.js中配置注册挂载组件

import WmsUserSelect from '@/components/WmsUserSelect'

Vue.component('WmsUserSelect',WmsUserSelect)

4、页面表格中选用该组件

<el-form-item label="测试员" prop="customerId" >
   <WmsUserSelect v-model="form.customerId"></WmsUserSelect>
</el-form-item>

5、效果展示

请添加图片描述

### 若依框架前后端分离架构中添加自定义项目的教程 #### 创建新模块 为了在若依框架Vue版本中创建新的功能模块,需遵循其目录结构和编码规范。假设要增加一个名为`customProject`的新模块。 - **前端部分** 首先,在`src/views/custom-project/`下建立文件夹并构建基本视图组件: ```bash src/ └── views/ ├── custom-project/ │ ├── index.vue # 主页入口 │ ├── components/ # 组件存放位置 ``` `index.vue` 文件内容可以简单设计成如下形式: ```html <!-- src/views/custom-project/index.vue --> <template> <div class="app-container"> <el-card shadow="never"> <h3>欢迎来到自定义项目</h3> <p>这里是您新增加的功能页面。</p> </el-card> </div> </template> <script> export default { name: 'CustomProject', data() { return {}; }, }; </script> <style scoped lang="scss"> .app-container { padding: 20px; } </style> ``` - **后端部分** 对应地,在服务器端也需要准备相应的API接口来支持这个新特性。通常是在Spring Boot应用里新建控制器类,并配置好对应的业务逻辑处理方法[^1]。 ```java // com.ruoyi.project.customproject.controller.CustomProjectController.java @RestController @RequestMapping("/api/v1/custom-project") public class CustomProjectController { private final Logger logger = LoggerFactory.getLogger(this.getClass()); /** * 获取自定义项目列表数据. */ @GetMapping(value = "/list") public AjaxResult getList(@RequestParam Map<String, Object> params) { try { List<CustomProjectVo> result = customService.getList(params); return R.ok().put("data", result); } catch (Exception e) { logger.error(e.getMessage(), e); throw new RuntimeException(e); } } /* 更多CRUD API... */ } ``` #### 路由注册与权限控制 为了让新加入的内容能够被正确访问,还需要更新路由表以及设定必要的权限验证机制。通过V-hasPermi指令实现基于角色或菜单级别的细粒度授权管理[^3]。 ```javascript // router/modules/custom-project.js { path: '/custom-project', component: Layout, redirect: 'noRedirect', alwaysShow: true, // will always show the root menu meta: { title: '自定义项目', icon: 'example' }, children: [ { path: 'index', component: () => import('@/views/custom-project/index'), name: 'CustomProjectIndex', meta: { title: '首页', noCache: false, affix: true, permission: ['admin'] }, // 设置所需权限 } ] } ``` 最后一步就是把上述定义好的子路由追加到全局路由配置当中去,确保整个应用程序能识别这些路径映射关系。 #### 测试与部署 完成以上开发工作之后,务必进行全面测试以确认各项功能正常运作无误。接着按照官方文档指引进行打包发布流程即可让改动生效。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值