Vue前端整合后端的CRUD

最新推荐文章于 2024-05-11 15:01:03 发布
最新推荐文章于 2024-05-11 15:01:03 发布
阅读量1.4k 收藏 4
点赞数 1
分类专栏： Javaweb学习笔记 文章标签： vue elementui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_48578877/article/details/127518688
版权

Vue前端整合后端的CRUD

在这里插入图片描述

用vue安装vue-router Element axios模块

Vue 快速入门https://blog.csdn.net/smilejiasmile/article/details/110819074

1.套用Element的侧边栏模板

1.1Layout.vue

<template>
<el-container>
      <!-- 页头 -->
  <el-header>
    <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
        background-color="#545c64" text-color="#fff" active-text-color="#ffd04b">
        <el-menu-item index="1">
            <el-button  icon="el-icon-s-shop">商城后台管理</el-button>
        </el-menu-item>
        <el-submenu index="2" class="fr1">
            <template slot="title">我的工作台</template>
            <el-menu-item index="2-1">选项1</el-menu-item>
            <el-menu-item index="2-2">选项2</el-menu-item>
            <el-menu-item index="2-3">选项3</el-menu-item>
        </el-submenu>

        <el-menu-item index="3" >消息中心</el-menu-item>
        <el-menu-item index="4" class="fr4"><a href="#" target="_blank">退出管理</a></el-menu-item>
        <el-menu-item index="5" class="fr5" disabled><i class="el-icon-s-custom"></i></el-menu-item>
    </el-menu>
  </el-header>

 <!-- 侧边栏 -->
  <el-container>
    <el-aside width="200px">
        <el-row class="tac">
            <el-col :span="24">
                 <!-- 侧边栏内容 -->
               
                <el-menu default-active="2" class="el-menu-vertical-demo"  @open="handleOpen" @close="handleClose" 
                    background-color="#545c64" text-color="#fff"  router active-text-color="#ffd04b">
                       
                     <!-- 头像 -->
                    <el-menu-item index="5">
                            <i class="el-icon-loading"></i>
                            <span slot="title">
                                <el-avatar src="https://img0.baidu.com/it/u=503426158,3647382765&fm=253&fmt=auto&app=138&f=JPEG?w=400&h=400">
                                </el-avatar>
                            </span>
                        </el-menu-item>
                   
                    
                    
                    <el-submenu index="1">
                        <template slot="title">
                            <i class="el-icon-location"></i>
                            <span>管理员管理</span>
                        </template>
                        <el-menu-item-group>
                            <template slot="title">操作</template>
                            <el-menu-item index="/admins" @click="clickMenu(item)">管理员列表</el-menu-item>
                            <el-menu-item index="/saveadmin" @click="clickMenu(item)">添加管理</el-menu-item>
                        </el-menu-item-group>
                    </el-submenu>


                    <el-menu-item index="/users" @click="clickMenu(item)">
                        <i class="el-icon-menu" ></i>
                        <span slot="title">用户管理</span>
                    </el-menu-item>
                    <el-menu-item index="/categorys" @click="clickMenu(item)">
                        <i class="el-icon-document"></i>
                        <span slot="title">分类管理</span>
                    </el-menu-item>
                    <el-menu-item index="/user"  @click="clickMenu(item)">
                        <i class="el-icon-setting"></i>
                        <span slot="title">商品管理</span>
                    </el-menu-item>
                      
                        
                </el-menu>
            </el-col>
        </el-row>


    </el-aside>
    <el-main>
        <!-- 在这里必须有router-view使内容在侧边栏右侧显示 -->
        <router-view />
    </el-main>
  </el-container>
</el-container>
</template>

<script>
export default {
    name: "Layout",

    methods: {
        clickMenu(item) {
            this.$router.push(//页面跳转
                {
                    name: item.name
                }
            )
        }
    }
}
</script>





<style>
.el-container {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
    bottom: 0;
}
.el-header {
    padding: 0;
    z-index: 1000;
}
/* header菜单需要靠右的添加.fr即可(如：<el-menu-item class="fr" index="3">消息中心</el-menu-item>) */
.el-header .fr4 {
    float: right;
}
.el-header .fr5 {
    float: right;
}

.el-header .el-menu {
    border-bottom: none;
}

.el-aside,
.el-main {
    padding-top: 60px;
}

.el-aside {
    background: #545c64;
}

.el-aside .el-menu {
    border-right: none;
}


</style>

1.2侧边栏内容点击内容跳转右侧显示

  • 在el-menu标签中添加router（一定要添加否则路由嵌套跳转没效果）
  • 在侧边栏的子标签index=“跳转路径” 添加 跳转函数
 <el-menu-item index="/categorys" @click="clickMenu(item)">
                        <i class="el-icon-document"></i>
                        <span slot="title">分类管理</span>
                    </el-menu-item>
  • 跳转函数
methods: {
        clickMenu(item) {
            this.$router.push(//页面跳转
                {
                    name: item.name
                }
            )
        }

1.3在router.index页面配置路由

点击侧边栏内容跳转则需要使用嵌套路由

import Vue from 'vue'
import Router from 'vue-router'



Vue.use(Router)

export default new Router({
  routes: [

    {
      path: '/',
      name: 'Layout',
      component: () => import('@/page/layout'),
      // 嵌套路由
      children: [{
        // 这里不设置值，是把main作为默认页面  当加载页面时右侧默认显示页面
        path: '/',
        name: 'Main',
        component: () => import('@/page/main'),
  
      }, 
      // 分类管理
        {
          path: '/categorys',
          name: 'categorys',
          component: () => import('@/page/category/categorys'),

        },
      ]
    }

   
  ]
})

2.在config的index页面开启跨域

//开启跨域
    proxyTable: {
      '/api':{
        target: 'http://localhost:8888/',
        changeOrigin: true,     //  开启跨域
        pathRewrite: {
          '^/api': "/"
        }
      }
    },

3.进行添加编辑删除操作

3.1新增categorys.vue插件





<template>
    <div>
        <el-row>
            <el-button type="primary" plain @click="dialogFormVisible = true">新增分类</el-button>
        </el-row>

        <!-- 新增分类 -->
        <el-dialog title="新增分类" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="类别" :label-width="formLabelWidth">
                    <el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
                </el-form-item>
                <el-form-item label="类别名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
                </el-form-item>
                <el-form-item label="类别状态" :label-width="formLabelWidth">
                    <el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
                </el-form-item>
                <!-- <el-form-item label="活动区域" :label-width="formLabelWidth">
                    <el-select v-model="form.region" placeholder="请选择活动区域">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item> -->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()"  >确 定</el-button>
            </div>
        </el-dialog>
        <!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible2" >
    <el-form :model="form">
        <el-form-item label="类别" :label-width="formLabelWidth">
            <el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
        </el-form-item>
        <el-form-item label="类别名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
        </el-form-item>
        <el-form-item label="类别状态" :label-width="formLabelWidth">
            <el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary"    @click="update()">修改</el-button>
    </div>
</el-dialog>



<!--        <el-table ref="multipleTable" tooltip-effect="dark" :data="category" height="500" border style="width: 100%" -->

        <el-table ref="multipleTable" tooltip-effect="dark" :data="category.slice((currentPage - 1) * pagesize, currentPage * pagesize)" height="500" border style="width: 100%"
            @selection-change="handleSelectionChange">



            <el-table-column type="selection" width="55">
            </el-table-column>



            <el-table-column fixed prop="cateId" label="分类id" width="150">
            </el-table-column>
            <el-table-column prop="name" label="类别" width="120">
            </el-table-column>
            <el-table-column prop="status" label="状态" width="120">
            </el-table-column>
            <el-table-column  label="操作" width="150">
                <template slot-scope="scope">

                    <el-button  @click="handleEdit(scope.row);dialogFormVisible2 = true" type="button" size="small" >编辑</el-button>
                    <el-button type="button" size="small" @click="open(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

       <!-- 分页 -->
      <el-pagination
        style="margin: 12px 0px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="category.length"
      >
      </el-pagination>

<!-- 批量删除 -->
        <el-button type="primary" size="small" @click="deleteMul()" >批量删除</el-button>
    </div>


</template>

<script>
import axios from 'axios'

export default {
    name: 'category',
    data() {
        return {
             //分页
          currentPage: 1, //初始页
          pagesize: 5, //    每页的数据
          total: 0,


            //批量删除
            category: [],
            ids: [],

            dialogFormVisible: false,
            dialogFormVisible2: false,
            form: {},

            formLabelWidth: '120px',
        }
    },

    methods: {
        //分页
      // 初始页currentPage、初始每页数据数pagesize和数据data
      handleSizeChange: function (size) {
        this.pagesize = size;
        console.log(this.pagesize); //每页下拉显示数据
      },
      handleCurrentChange: function (currentPage) {
        this.currentPage = currentPage;
        console.log(this.currentPage); //点击第几页
      },



     //添加函数
        //点击保存确定按钮，异步修改信息
        save: function () {
            // alert(123);
            var abc = this;

            console.log(abc.form);

            axios.post("api/category/saveCategory", abc.form).then(res => {
                // 调用getAll函数刷新页面
                this.getAllUsers();
                this.dialogFormVisible=false;
            })
        },



    //确定删除函数
        open(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //通过id进行删除
                // alert(row.cateId);
                console.log(row);
                axios.post("api/category/deleteById/" + row.cateId).then(res => {
                    // 刷新页面数据
                    this.getAllUsers();
                });

                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });



            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },


        //点击编辑继续修改操作
        handleEdit(row) {
            console.log(row);
            //row是该行tableData对应的一行
            this.form = row;
            //通过id获取对象
            axios.get("api/category/queryById/" + row.cateId).then(res => {
                            alert(res.data);
                          this.form = res.data;
                        });
        },




        //异步进行修改
        //点击修改按钮，异步修改信息
        update: function () {
            // alert(123);
            var abc = this;

            // console.log(abc.form);

            axios.post("api/category/updateCategory", abc.form).then(res => {
                // alert(res.data);
                this.getAllUsers();
                this.dialogFormVisible2 = false;
            })
        },



        //选择复选框
        handleSelectionChange(val) {
            this.multipleSelection = val;
            // alert(val)
            for (var i = 0; i < val.length; i++) {
                this.ids[i] = val[i].id;
            }
            alert(this.ids)
        },
        //批量删除
        deleteMul: function () {
            alert(this.ids);
            axios.post("api/user/DeleteMul", { "ids": this.ids }).then(res => {
                alert(res.data)
            });
        },


        //异步获取所有数据，钩子函数在加载时调用
        getAllUsers: function () {
            //二、vue的ajax异步获取后端数据
            // 1.安装axios和vue-axios
            // 2.在main.js中引入，在项目模块中使用模板
            var abc = this;
            axios.get("api/category/getAll").then(res => {
                console.log(res.data);
                abc.category = res.data;
            });
        }

    },


    //钩子函数加载时调用
    mounted() {
        this.getAllUsers();
    }
}
</script>

3.2新增分类

使用Element的弹出对话框模块dialogFormVisible = true代表对话框弹出dialogFormVisible = false对话框消失

  <el-row>
            <el-button type="primary" plain @click="dialogFormVisible = true">新增分类</el-button>
        </el-row>
 <!-- 新增分类 -->
        <el-dialog title="新增分类" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="类别" :label-width="formLabelWidth">
                    <el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
                </el-form-item>
                <el-form-item label="类别名称" :label-width="formLabelWidth">
                    <el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
                </el-form-item>
                <el-form-item label="类别状态" :label-width="formLabelWidth">
                    <el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="save()"  >确 定</el-button>
            </div>
        </el-dialog>

点击确认调用save（）函数

//添加函数
        //点击保存确定按钮，异步修改信息
        save: function () {
            // alert(123);
            var abc = this;

            console.log(abc.form);

            axios.post("api/category/saveCategory", abc.form).then(res => {
                // 调用getAll函数刷新页面
                this.getAllUsers();
                this.dialogFormVisible=false;
            })
        },

后端参数的传递

@PostMapping("/saveCategory")

public @ResponseBody ResponseEntity<Category> add(@RequestBody Category category) {
    return ResponseEntity.ok(this.categoryService.insert(category));
}

实现效果

在这里插入图片描述

3.3删除操作

使用Element的messageBox弹框组件

<el-button type="button" size="small" @click="open(scope.row)">删除</el-button>


//函数
//确定删除函数
        open(row) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                //通过id进行删除
                // alert(row.cateId);
                console.log(row);
                axios.post("api/category/deleteById/" + row.cateId).then(res => {
                    // 刷新页面数据
                    this.getAllUsers();
                });

                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });

后台传参

@PostMapping("/deleteById/{cateId}")
public ResponseEntity<Boolean> deleteById(@PathVariable("cateId") Integer id) {
    return ResponseEntity.ok(this.categoryService.deleteById(id));
}

3.4编辑操作

编辑操作也使用 Dialog 对话框组件

<el-button  @click="handleEdit(scope.row);dialogFormVisible2 = true" type="button" size="small" >编辑</el-button>

        <!-- 编辑 -->
<el-dialog title="编辑" :visible.sync="dialogFormVisible2" >
    <el-form :model="form">
        <el-form-item label="类别" :label-width="formLabelWidth">
            <el-input v-model="form.cateId" autocomplete="off" placeholder="int"></el-input>
        </el-form-item>
        <el-form-item label="类别名称" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" placeholder="String"></el-input>
        </el-form-item>
        <el-form-item label="类别状态" :label-width="formLabelWidth">
            <el-input v-model="form.status" autocomplete="off" placeholder="int"></el-input>
        </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible2 = false">取 消</el-button>
        <el-button type="primary"    @click="update()">修改</el-button>
    </div>
</el-dialog>

  <!-- 点击编辑按钮触发两个函数 -->
  <el-button  @click="handleEdit(scope.row);dialogFormVisible2 = true" type="button" size="small" >编辑</el-button>


  <!-- 通过id获取实体类函数 -->
  //点击编辑继续修改操作
        handleEdit(row) {
            console.log(row);
            //row是该行tableData对应的一行
            this.form = row;
            //通过id获取对象
            axios.get("api/category/queryById/" + row.cateId).then(res => {
                            alert(res.data);
                          this.form = res.data;
                        });
        },
  <!-- 修改函数 -->
//异步进行修改
        //点击修改按钮，异步修改信息
        update: function () {
            // alert(123);
            var abc = this;

            // console.log(abc.form);

            axios.post("api/category/updateCategory", abc.form).then(res => {
                // alert(res.data);
                this.getAllUsers();
                this.dialogFormVisible2 = false;
            })
        },

后台参数的传递

@GetMapping("/queryById/{id}")
public ResponseEntity<Category> queryById(@PathVariable("id") Integer id) {
    return ResponseEntity.ok(this.categoryService.queryById(id));
}

 @PostMapping("/updateCategory")
    public ResponseEntity<Category> edit(@RequestBody Category category) {
        return ResponseEntity.ok(this.categoryService.update(category));
    }

实现效果

在这里插入图片描述

3.5分页的实现

element分页模板

 <!-- 分页 -->
<el-pagination
  style="margin: 12px 0px"
  background
  @size-change="handleSizeChange"
  @current-change="handleCurrentChange"
  :current-page="currentPage"
  :page-sizes="[5, 10, 20, 40]"
  :page-size="pagesize"
  layout="total, sizes, prev, pager, next, jumper"
  :total="category.length"
>
</el-pagination>

修改表格头的数据源

data="category.slice((currentPage - 1) * pagesize, currentPage * pagesize)"

data() {
    return {
      currentPage: 1, //初始页
      pagesize: 5, //    每页的数据
      total: 0,
      }
    }

方法

 //分页
// 初始页currentPage、初始每页数据数pagesize和数据data
handleSizeChange: function (size) {
  this.pagesize = size;
  console.log(this.pagesize); //每页下拉显示数据
},
handleCurrentChange: function (currentPage) {
  this.currentPage = currentPage;
  console.log(this.currentPage); //点击第几页
},

分页效果

在这里插入图片描述

囨誌
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
Vue2管理系统一键配置crud提升效率300%
qq_42132166的博客
04-12 489
本文主要基于element-ui深度封装，旨在快速完成列表查询、增删改查、弹窗表单。可以看到下面完整示例中包含了 Vue2后台管理系统中日常基本功能，代码量却非常少，可复用性非常高，6点下班美滋滋
Vue中使用表单验证+CRUD
weixin_57504000的博客
05-12 1537
接上篇的数据表格与分页，今天我们给表格中的数据增删改查与表单验证 一、后台数据接口 public class BookAction extends DispatcherAction implements ModelDriver<Book> { private Book book=new Book(); private BookDao bookDao=new BookDao(); private ObjectMapper mapper=new ObjectMapper(); @O..
Vue3的CRUD模版（附Demo）
最新发布
码农研究僧的博客
05-11 1695
此文主要做一个回顾总结
Vue3 开发拒绝 CV, 快使用 CRUD
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
08-22 588
开发管理后台基本是企业的日常需求, 基本每个前台项目都必有一个后台项目跟着, 虽然是必需品, 但是大家好像有不是那么在意他, 毕竟只有管理员用, 今天我们讲一下"增删改查"组件:crud-vue. crud-vue通过简单的JSON配置即可实现完整的"增删改查".注意: crud-vue是基于ant-design-vue的, 所以更进一步的开发中,可直接使用ant的组件安装yarnaddcru...
Vue-CRUD-
03-18
粗鲁的 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
校园信息发布系统 vue前端 后端java 一套完整
10-20
《校园信息发布系统：Vue前端与Java后端的整合实践》 在信息技术日益发达的今天，校园信息发布系统的构建已经成为教育信息化的重要组成部分。本套系统采用Vue前端技术和Java后端技术进行开发，旨在为师生提供一个...
springboot+vue>>crud
01-02
通过以上步骤，我们可以看到Spring Boot作为强大的后端框架，与Vue.js作为现代化的前端框架相结合，能够高效地实现Web应用的CRUD功能。这样的架构提供了清晰的前后端职责划分，提高了开发效率和代码可维护性。在实际...
springboot-vue-crud
08-13
"springboot-vue-crud"项目，正如其名，旨在展示如何使用Spring Boot后端与Vue.js前端构建一个完整的 CRUD（创建、读取、更新、删除）应用。这个项目涵盖了从搭建环境到实现功能的全过程，为开发者提供了宝贵的学习...
elementUI前端CRUD页面
04-09
Element UI 是一个基于 Vue.js 的...通过查看这些文件，你可以学习如何整合上述知识点，构建出功能完备的前端页面。这不仅是一个实用的工具，也是一个很好的学习资源，可以帮助你深入理解和掌握 Element UI 的用法。
vue-springBoot：简单框架----前端：vue，后端：spring boot
02-20
Vue.js 和 Spring Boot 的组合是现代 Web 应用开发中常用的技术栈，它们分别负责前端和后端的处理。Vue.js 是一个轻量级、高性能的前端 JavaScript 框架，而 Spring Boot 是基于 Java 的后端开发框架，简化了 Spring...
Vue CRUD-基于Vue.js的REST-ful CRUD系统。 使您可以轻松创建快速应用程序，例如CMS或CRM。-Vue.js开发
05-27
Vue CRUD基于Vue.js的REST-ful CRUD系统。 Vue CRUD允许创建一种用于管理单个表的机制，也可以创建CMS或扩展CRM以及基于Vue CRUD的基于Vue.js的REST-ful CRUD系统。 Vue CRUD允许创建一种用于管理单个表的机制，还可以创建具有登录系统和模块的CMS或扩展CRM，而Vue CRUD内置的应用程序是SPA（单页应用程序），因此其运行速度比基于Wordpress的应用程序快得多，Joomla等。Vue CRUD将vue及其生态系统（Vuex，Vuetify等）一起使用。 享受世界上最流行的JS框架的好处。 应用架构进行了调整
人人开源搭建后台管理系统 & 逆向工程生成CRUD代码
lwj_07的博客
11-16 2589
具体操作如下所示： 补充改错： ！！！！！我们最好把前端的这个管理系统克隆到D盘当中去，因为我们默认克隆到桌面的话会给我们克隆到C盘上，C盘有可能会有中文的目录，因此后面启动vscode输入命令的时候有可能因为中文目录会报错，因此我们克隆到D盘去（非中文目录下，如果克隆到桌面上的话是非中文目录那么就不用克隆到D盘了直接克隆到桌面就行）： 然后我们打开刚才克隆下来的后台快速开发管理系统的文件 ：renren-fast删除掉之后，我们直接把renren-fast文件放入到我们gulimall工程文件中即
crud接口的实现、回调地狱
qq_60837087的博客
12-02 510
crud接口的实现、回调地狱
三、vue前后端交互（轻松入门vue）
热门推荐
莫安逸无风雪
06-12 3万+
Vue前后端交互六、Vue前后端交互1. 前后端交互模式2. Promise的相关概念和用法Promise基本用法**then参数中的函数返回值**基于Promise处理多个Ajax请求demoPromise常用API3. fetch进行接口调用fetch基本用法fetch请求参数fetch响应结果4. axios进行接口调用axios基本用法axios的常用API（参数传递）5. asyns/await接口调用async/await的基本用法多个异步请求的场景 六、Vue前后端交互 项目中一般结合asyn
Vue前后端交互
淘小欣的博客
04-30 1万+
Vue前后端交互 文章目录Vue前后端交互引入：Vue前后端交互一、基于jQuery的ajax前后端交互模式前端后端二、使用fetch前后端交互fetch基本用法与请求参数fetch基本用法fetch请求参数fetch前后端交互前端后端三、前后端交互之axios前端后端参考资料 引入：Vue前后端交互 一般在项目中结合async/await语法使用axios调用接口 一、基于jQuery的ajax前后端交互模式 前端 <head> <meta charset="UTF-8">
vue前端和后端交互实现（最简单）
qq_63656102的博客
06-25 1675
后端接收的话其实也很简单，后端目前比较热门的是springboot，在springboot里面的接收也比较简单，大家感兴趣可以自行去查看资料，我这里举例的是node后端接收，相信这个能看懂那么springboot也问题不大。以上所举的例子都是最简单的网络请求，但是在实际情况中，一般都是对网络请求进行封装到一个js文件里面的，这里就不举例了，大家先把最基础的学会，后面在加深了解就可以了。知道的前端和后端的基础之后，那么我们就得先知道前端该如何去请求，在前端中，最原始的请求就是去。当然大家也可以用异步的。
vue element调详情接口 请求类型为query（自己笔记勿进）
暂时还没想好博客简介
11-30 895
调详情接口 请求类型为query
Vue框架部署、项目构建与后端交互详解
2301_78150212的博客
12-30 1312
在Vue项目中，通过安装Vue Router并进行简单配置，可以实现路由的跳转和管理。本文将详细介绍如何部署Vue框架，进行项目构建，并深入讨论前后端交互的方法。文件），将模板、脚本和样式组合在一个文件中，使得代码更加模块化和可维护。Vue CLI是Vue.js的官方脚手架工具，用于快速搭建Vue项目。在开发中，前端通常运行在不同的端口或域名下，需要处理跨域。Vue项目的目录结构是一个关键因素，有助于代码的组织和维护。文件），其中包含了模板、脚本和样式，使得组件的代码更加模块化和可维护。
vue前端向后端发送数据
06-08
在Vue前端向后端发送数据，可以使用axios这个工具库来实现。具体步骤如下： 1. 在Vue项目中安装axios：`npm install axios --save` 2. 在Vue组件中引入axios：`import axios from 'axios'` 3. 在需要向后端发送数据的方法中，使用axios发送请求，例如： ```javascript axios.post('/api/user', { firstName: 'John', lastName: 'Doe' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); ``` 其中，`/api/user` 是后端接口的地址，`{firstName: 'John', lastName: 'Doe'}` 是需要发送的数据。在`then`函数中可以处理后端返回的数据，在`catch`函数中可以处理请求失败时的情况。 4. 如果需要在请求头中添加一些信息，如token等，可以使用axios的拦截器，在请求发送前添加请求头。例如： ```javascript axios.interceptors.request.use( config => { // 在发送请求之前做些什么 const token = localStorage.getItem('token'); if (token) { config.headers.Authorization = `Bearer ${token}`; } return config; }, error => { // 对请求错误做些什么 return Promise.reject(error); } ); ``` 在这个例子中，我们在请求头中添加了一个名为`Authorization`的字段，值为从localStorage中获取的token。这样在每次请求时都会带上这个token，方便后端进行身份验证。 以上就是使用axios在Vue前端向后端发送数据的基本步骤。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值