VUE添加功能的实现

曾经终败给现在 2023-10-10 23:54 27阅读 0赞

<script>
    
      import user from '@/api/user'
      export default{
        data(){
          return{
            userInfo:{}
          }
        },
    
       methods:{
          saveOrUpdate(){
             user.saveUser(this.userInfo)
                    .then(response => {
                      //提示
                      this.$message({
                        type: 'success',
                        message: '添加成功!'
                      })
                      //添加成功后跳转到数据列表页面
                      this.$router.push({path:'/user/list'})
                    }).catche(error => {
                       console.log(error)
                    })
              }
        }
     </script>

前后端交互JS:

import request from '@/utils/request'
    
    export default{
        //添加
      saveUser(userInfo){
        return request({
          url: `/api/user/saveUser`,
          method: 'post',
          data:userInfo
        })
        
       },
    
    }

页面部分：

<template>
      <div class="app-container">
        <h2>添加用户</h2>
        <el-form label-width="120px">
             <el-form-item label="姓名">
                <el-input v-model="userInfo.name"/>
             </el-form-item>
             <el-form-item label="性别">
                <el-input v-model="userInfo.sex"/>
             </el-form-item>
             <el-form-item label="年龄">
                <el-input v-model="userInfo.age"/>
             </el-form-item>
            
          </el-form>
    
      </div>
    </template>

发表评论取消回复

表情：

评论列表（有 0 条评论，27人围观）

还没有评论，来说两句吧...

相关阅读

相关使用Vue 简化用户查询/添加功能

使用Vue简化用户查询/添加功能 1. 查询功能 1.1 Vue核心对象： 1.2 brand.html： 1.3 sel

谁践踏了优雅/ 2024年03月27日 09:06/ 0 赞/ 120 阅读

相关 VUE添加功能的实现

<script> import user from '@/api/user' export default{ data

曾经终败给现在/ 2023年10月10日 23:54/ 0 赞/ 28 阅读

相关 vue 项目添加功能实现

一定义 api 模块 import request from '@/utils/request' export default {

待我称王封你为后i/ 2022年08月28日 06:56/ 0 赞/ 315 阅读

相关添加功能的实现--------疑惑？？？？

/\ 功能：在JTable 中完成：查询、修改、添加功能它的查询功能是如何完成的？？？它的修改功能是如何完成的？？？ 1.先把：界面的大致做出来

- 日理万妓/ 2022年08月03日 05:11/ 0 赞/ 202 阅读

相关添加商品功能的实现

Jsp页面设置： <formaction="$\{pageContext.request.contextPath\}/AddProdServlet" method="post

ゝ一世哀愁。/ 2022年06月17日 23:17/ 0 赞/ 210 阅读

相关黑马学习记录--Vue实现列表的添加删除以及查找功能

1.x 版本中的filterBy指令，在2.x中已经被废除： [filterBy - 指令][filterBy -] <tr v-for="item in list

柔情只为你懂/ 2022年03月19日 15:20/ 0 赞/ 509 阅读

相关 vue实现搜索，添加，删除功能（多角度）

MVVM框架 MVVM是Model-View-ViewModel,即模型-视图-视图模型。模型是后端的数据，视图是前端的页面。其设计思想是：关注Model的变化，让MVV

偏执的太偏执、/ 2022年03月19日 11:20/ 0 赞/ 416 阅读

相关 Vue项目在页面添加水印功能

Vue项目在页面添加水印功能创建watermark.js文件 let watermark = {} let setWatermark =

迷南。/ 2022年03月15日 07:40/ 0 赞/ 514 阅读

相关 Vue基于ElementUI实现Table可编辑/添加功能

文章目录效果预览前端代码添加和修改的js 效果预览 ![在这里插入图片描述][20190619134138552.gif] 前端代码

淩亂°似流年/ 2022年01月11日 02:47/ 0 赞/ 369 阅读

相关 vue中简单的添加删除功能实现

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

系统管理员/ 2021年07月24日 14:28/ 0 赞/ 655 阅读