vue+element+axios+vuex后台管理系统(父子组建嵌套)

本文介绍了一种基于Vue的弹窗组件设计方法,详细阐述了如何在弹窗中加载表单,以及如何通过Vuex和Storage进行数据传递,确保组件的复用性和业务逻辑的清晰分离。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

仅用于记录,使用方法笔记:详情:

设计思路:

弹出层里面加载Froma表单(应需求里面表单都是弹出层)
设计要点:
一般建议子组件里面不进行任何业务操作(业务逻辑操作,建议在父组件中使用),这样便于组建的复用性
组建拆分越简单越好,子组建中的参数传递到最外层组建(父组件)方法可以用vuex来过度 数据或者stroage(不建议一层一层传递)
GIT:https://github.com/Apache-Ra/vue-admin/blob/vue-element-admin
本框架是为了快速搭建后台管理系统而写(希望大佬们多多提意见)
本框架分为不带UI的vue-admin和 vue+elemenu-admin后期会加上iview的
本框架集成了vuex.Axios,LocalStroage,router·······常用的工具类(可以更具实际项目需求,稍做变动,即可直接使用)

父组件:
<dialogBar :dialogData="dialogData" v-if="showUpdateDiaLog" @handleDiaLog="handleDiaLogConfirm"></dialogBar>
---------------------------------------------参数--------------------------------------------
      /**
       * @type {default.methods}
       * @dialog: dialog的开启或者是关闭
       * @title: dialog提示内容(title)
       * @type:dialog的类型(用于区分多个dialog)
       * @multiple:select是否多选,默认为单选
       */
      let vue = this
      // 开启dialog
      vue.showUpdateDiaLog = true
      let formObj = {
        dialog: true,
        title: '创建用户',
        type: 'create',
        formData: {
          formList:[
            {type: 'input', inputType: 'text', disabled: false, inputLabel: '用户名称', modelName: 'userName', placeholder: '请输入用户名', required: true, defaultValue: null},
            {type: 'input', inputType: 'password', disabled: false, inputLabel: '用户密码', modelName: 'userPwd', placeholder: '请输入密码', required: true, defaultValue: null},
            {type: 'select', inputType: 'select', disabled: true, inputLabel: '用户级别', modelName: 'userLevel', placeholder: '请输入选择用户级别', options: [{value: '0', label: '超级管理员'}, {value: '1', label: '测试管理员'}], required: true, defaultValue: null},
            {type: 'textarea', inputType: 'textarea', disabled: false, inputLabel: '用户描述', modelName: 'userDescription', placeholder: '请输入用户描述', required: false, defaultValue: null}
          ]
        }
      };
      vue.dialogData.dialog = true;
      vue.dialogData = formObj;
--------------------------------------------handleDiaLogConfirm方法-------------------------------------------
    // 处理dialog弹窗确定
    handleDiaLogConfirm (item, type) {
      let vue = this
      // 区分是创建还是修改
      if (type=='exit') {
        vue.handleDiaLogExitConfirm(item);
      } else if (type= 'create') {
        vue.handleDiaLogCreatedConfirm (item);
      }
--------------------------------------------子组建--------------------------------------------handleDiaLogConfirm

<template>
  <el-dialog
    :title="dialogData.title"
    :visible.sync="dialogData.dialog" class="dialogBar">
    <!--Form表单组件-->
    <FormBar
      :FormData="dialogData.formData"></FormBar>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogData.dialog = false">取 消</el-button>
      <el-button type="primary" @click="confirm(dialogData.type)">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import FormBar from './formBar'
import _ from 'lodash'
export default {
  name: "buttonBar",
  components: {FormBar},
  props: {
    dialogData: {
      type: Object,
      twoWay: true
    }
  },
  data() {
    return {}
  },
  created() {
  },
  mounted() {
  },
  methods: {
    // 点击确定按钮
    confirm (type) {
      let vue = this;
      // 获取双向绑定的值 循环取值
      let itemObj = {}
      _.forEach(vue.dialogData.formData.formList, (item) =>{
        itemObj[item.modelName] = item.defaultValue;
        // 如果还存在值的潜逃
        if (item.groupList) {
         _.forEach(item.groupList, (group_item) =>{
           itemObj[group_item.modelName] = group_item.defaultValue;
         })
        }
        // 如果modelName是数组(时间选择器)
      });
      // 把对象形式传递带父组件
     vue.$emit('handleDiaLog', itemObj, type)
      // 关闭弹出组件
      setTimeout(() =>{
        vue.dialogData.dialog = false
      },100)
    }
  }
}
</script>

<style scoped>
.el-select{width: 100%}
</style>
--------------------------------------------子子组建--------------------------------------------
 <el-form
      :model="formBarForm"
      :label-width="FormData.labelWidth || '80px'"
      :label-position="FormData.labelPosition || 'left'">
      <!--input-->
      <el-form-item v-for="(inputItem, key) in FormData.formList"
                    :key="key"
                    :required="inputItem.required"
                    v-if="inputItem.type == 'input'"
                    :label="inputItem.inputLabel">
        <el-input
          :ref="inputItem.modelName"
          :type="inputItem.inputType"
          :disabled="inputItem.disabled"
          :placeholder="inputItem.placeholder"
          v-model="inputItem.defaultValue"></el-input>
      </el-form-item>
      <!--select-->
      <el-form-item v-for="(inputItem, key) in FormData.formList"
                    :key="key"
                    :required="inputItem.required"
                    v-if="inputItem.type == 'select'"
                    :label="inputItem.inputLabel">
        <el-select v-model="inputItem.defaultValue"
                   :multiple=inputItem.multiple?true:false
                   :disabled="inputItem.disabled"
                   :placeholder="inputItem.placeholder">
          <el-option v-for="(item, key) in inputItem.options"
                     :key="key" :value="item.value"
                     :label="item.label">
          </el-option>
        </el-select>
      </el-form-item>
  </el-form>
--------------------------------------------子子组建--------------------------------------------

### 实现Vue前端与SpringBoot后端集成中的评论回复功能 #### 一、项目结构设计 为了实现高效的前后端交互,在构建Vue和Spring Boot项目的评论回复功能时,合理的项目架构至关重要。通常情况下,会将整个应用程序分为前端(Vue.js)和服务端(Spring Boot),两者通过RESTful API 或 WebSocket 进行通信。 #### 二、服务端配置 (Spring Boot) 创建一个新的控制器用于管理评论操作: ```java @RestController @RequestMapping("/api/comments") public class CommentController { @Autowired private CommentService commentService; // 获取所有评论及其子评论 @GetMapping("/{id}") public ResponseEntity<List<Comment>> getComments(@PathVariable Long id){ List<Comment> comments = this.commentService.getCommentTree(id); return new ResponseEntity<>(comments, HttpStatus.OK); } // 添加新评论或回复 @PostMapping("/") public ResponseEntity<Comment> addComment(@RequestBody CommentDTO dto){ Comment savedComment = this.commentService.save(dto); return new ResponseEntity<>(savedComment, HttpStatus.CREATED); } } ``` 定义`CommentEntity`实体类来表示数据库表字段,并设置父子关系以便支持多级嵌套评论[^1]。 对于复杂的业务逻辑如权限验证等,则可以在实际开发过程中加入相应的中间件或者AOP切面编程技术加以完善。 #### 三、客户端页面展示 (Vue.js + Element UI) 安装并初始化Element UI组件库之后,就可以利用其提供的Table组件轻松完成列表渲染工作了: ```html <template> <el-table :data="tableData"> <!-- 显示用户名 --> <el-table-column prop="username" label="User"></el-table-column> <!-- 展示评论内容 --> <el-table-column prop="content" label="Content"></el-table-column> <!-- 子评论区域 --> <el-table-column width="200px"> <template slot-scope="scope"> <div v-for="(reply,index) in scope.row.replies" :key="index">{{ reply.content }}</div> <!-- 输入框用于新增回复 --> <el-input placeholder="Type your reply here..." v-model="newReplyText" @keyup.enter.native="submitReply(scope.$index)"> </el-input> </template> </el-table-column> ... </el-table> </template> <script> export default { data() { return { tableData: [],//存储从服务器获取的数据, newReplyText:'',//新的回复文本 }; }, methods:{ submitReply(index){ let parentId=this.tableData[index].id; axios.post('/api/comments/',{parentId,content:this.newReplyText}) .then(response=>{ console.log('提交成功'); // 更新本地状态机 this.tableData[index].replies.push({content:newReplyText}); // 清空输入框 this.newReplyText=''; }) .catch(error=>console.error(error)); } fetchComments(){ axios.get(`/api/comments/${this.articleId}`) .then((response)=>{ this.tableData=response.data; }); } }, mounted(){ this.fetchComments(); }, }; </script> ``` 上述代码片段展示了如何使用Axios发起HTTP请求并与远程API对接;同时也包含了简单的事件绑定机制用来监听用户的键盘动作从而触发特定方法执行[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值