Spring+Vue增删改查实例

最新推荐文章于 2022-10-02 15:51:25 发布

忧郁者我

最新推荐文章于 2022-10-02 15:51:25 发布

阅读量147

点赞数

文章标签： vue.js spring elementui

本文链接：https://blog.csdn.net/m0_98759863/article/details/126414807

版权

本文详细介绍了如何使用Spring和Vue.js结合ElementUI进行CRUD操作。首先创建MySQL数据库，设置user_data表。然后在前端部分，通过Vue CLI创建项目，安装并使用element-ui和axios，创建HomePage、UserView、UserAdd组件。接着在后端，配置Controller、Service、DAO、Model，并处理跨域问题。最后展示运行效果，包括主页、用户列表和添加用户的功能。

摘要由CSDN通过智能技术生成

1 数据库

创建MySQL数据库。

表名为user_data，人员信息有number、name。

效果如下：

2 前端

2.1 创建项目

打开cmd，输入ui命令：

vue ui

若没有反应，可能是版本太低，需要卸载后重装：

npm uninstall vue-cli -g   #卸载
npm install @vue/cli -g    #安装

执行ui命令成功后，会出现提示：

🚀 Starting GUI... 🌠 Ready on http://localhost:8000

并会自动打开页面：

创建名为SpringAndVue-vue的项目，预设选择“手动”；功能开启 Babel、Router、Vuex、Linter/Formatter；配置选择“ESLint with error prevention only”；版本建议使用 “vue2.0”。创建新项目。

通过cd进入目录，启动项目：

npm run serve

2.2 安装插件

安装 element-ui 插件。

打开cmd，输入ui命令：

vue ui

在插件项搜索，并点击安装。

vue2.0 选择安装 “vue-cli-plugin-element”；vue3.0 选择安装 “vue-cli-plugin-element-plus”。

Terminal安装axios，每个新项目都需要安装：

# vue-cli2.0命令
npm install axios
# vue-cli3.0命令
npm add axios

2.3 添加模块

2.3.1 主页

在views文件夹下创建文件 HomePage.vue，内容如下：

<template>
    <div>
    用户列表
        <el-table
                :data="tableData"
                border
                style="width: 40%">
            <el-table-column
                    prop="number"
                    label="编号"
                    width="150">
            </el-table-column>
            <el-table-column
                    prop="name"
                    label="姓名"
                    width="150">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="160">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button @click="deleteClick(scope.row)" type="text" size="small">删除</el-button>
                </template>
            </el-table-column>
        </el-table>


        <el-pagination
                background
                layout="prev, pager, next"
                :total="total"
                page-size="2"
                @current-change="page">
        </el-pagination>

    </div>
</template>

<script>
    import axios from 'axios