【手把手教】SpringBoot+Vue开发简单的前后端分离系统

其他 2020-04-30 01:28:56 阅读次数: 0

git:https://github.com/2020GetGoodOffer/test

安装node和vue

首先安装node.js，下载地址：node.js
在这里插入图片描述
下好后.exe直接安装就行了，然后在命令行通过node -v查看是否安装成功
在这里插入图片描述
然后初始化，通过node init完成，一路按回车就行
在这里插入图片描述
然后设置一个镜像点，不然可能因为网速问题一直无法成功
在这里插入图片描述
之后下载vuenpm install -g @vue/cli

在这里插入图片描述
等待一段时间后，vue -V查看是否安装成功
在这里插入图片描述

创建vue项目

通过vue ui命令
在这里插入图片描述
然后访问localhost:8000这个地址
在这里插入图片描述
创建新工程
在这里插入图片描述

下一步，手动
下一步打开router和vuex，关闭代码校验
在这里插入图片描述
下一步，选中使用历史记录，然后完成，创建项目，不保存预设，稍微等待几分钟
在这里插入图片描述
进行测试，点击任务，serve，启动，然后输出，观察url地址
在这里插入图片描述
访问localhost:8080 ，没有问题
在这里插入图片描述
然后命令行CTRL+c退出，关闭服务

IDEA导入VUE工程

直接import刚才的工程就行，一路next和finish
在这里插入图片描述
然后需要安装一个vue的插件，如果网不好就用手机热点，多试几次。。
在这里插入图片描述
大概试了1个多小时，安装成功后，有一个app.vue
在这里插入图片描述
在命令行通过npm run serve启动
在这里插入图片描述
通过ctrl+c终止

router-link标签表示映射的视图，app.vue是主视图，可以跳到home和about
在这里插入图片描述
映射关系配置在router目录下的index.js
在这里插入图片描述

创建SpringBoot项目

选择组件
在这里插入图片描述
这里我下载不下来2.2.6，使用以前下载的2.2.1.RELEASE
在这里插入图片描述

创建数据库表

数据库叫stock，表叫stock，有四个字段表示id，股票名，当前价格和涨跌幅比率
在这里插入图片描述

配置文件

在resources下新建一个application.yml，配置你自己的数据库信息
在这里插入图片描述

创建Vue视图

在vue工程创建一个Vue组件，叫Stock
在这里插入图片描述
template就是html，script就是js，style就是css
在这里插入图片描述
编写假数据进行一个简单的测试
在这里插入图片描述

在index.js中配置路由
在这里插入图片描述
命令行启动
在这里插入图片描述
访问localhost:8080/stock，成功了
在这里插入图片描述
增加两组测试数据
在这里插入图片描述
接收结果
在这里插入图片描述
Vue是动态加载的，此时再看刚才的页面
在这里插入图片描述
更好的写法是通过循环来返回结果
在这里插入图片描述

创建实体类

回到spring boot工程，创建股票对应实体类

@Entity
@Data
public class Stock {
    @Id
    private Integer id;
    private String name;
    private Double price;
    private Double rate;
}

创建操作实体类的接口

只需要基础JpaRepository即可，第一个参数是实体类类型，第二个参数是主键类型

public interface StockRepository extends JpaRepository<Stock,Integer> {
}

在接口处右键点击goto->test，创建一个test测试类

@SpringBootTest
class StockRepositoryTest {

    @Autowired
    private StockRepository stockRepository;

    @Test
    void findAll(){
        System.out.println(stockRepository.findAll());
    }
}

插入两行测试数据
在这里插入图片描述
运行
在这里插入图片描述

测试查询

新建一个controller包，创建一个Controller

@RestController//声明基于rest的控制器
@RequestMapping("/stock")//根url配置
public class StockController {
    
    @Autowired//自动注入
    private StockRepository stockRepository;
    
    @GetMapping("/findAll")//get请求所有数据
    public List<Stock> findAll(){
        return stockRepository.findAll();
    }
    
}

启动springboot
在这里插入图片描述
访问localhost:8181/stock/findAll,OJBK
在这里插入图片描述

替换假数据

之前我们Vue里的数据是假的，是我们自己加入测试的，不是数据库中的，所以我们现在要让前端的数据请求后端的。

安装axios

回到Vue项目，在控制台CTRL+c停止服务，输入vue add axios，添加该服务
在这里插入图片描述
等待一段时间，安装成功
在这里插入图片描述

编写请求

我们希望每次刷新页面时都会加载新数据，写到初始化函数中，还是要写到export default代码块中：
then里面的回调函数表示输出当前获取的结果，由于我们的Vue项目在8080，而后端的SpringBoot在8181，因此存在一个跨域问题
在这里插入图片描述

解决跨域问题

回到SpringBoot项目
创建一个config包，一个配置类，需要实现WebMvcConfigurer接口，并重写addCorsMappings方法，允许任何跨域请求

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","HEAD","PUT","DELETE","OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

然后重新启动SpringBoot服务器，此时我们刷新刚才的vue视图，打开F12开发者模式，在其中可以发现请求数据成功了，在console中可以看到
在这里插入图片描述
然后将测试的输出语句改为替换语句，将请求结果的值赋值给stocks股票数组，created里axios代码块外的this是vue对象，而axios里的this是回调函数，所以我们通过中间变量_this存储代码块外面的this，也就是vue对象，然后才能获取stocks。
在这里插入图片描述

此时，已经显示的是数据库中的数据，35.42，而不是我们写的假数据，34.12
在这里插入图片描述

Element UI

按之前的步骤，重新创建一个Vue工程，之后，搜索element ui
在这里插入图片描述
选中并安装
在这里插入图片描述
安装成功
在这里插入图片描述
待Vue项目创建成功后，打开IDEA，导入Vue项目

在这里插入图片描述
如果打开后有这个el-button就代表成功了

在这里插入图片描述

修改App.Vue的内容为以下内容：

<template>
  <div id="app">
    <el-container style="height: 500px; border: 1px solid #eee">
      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu :default-openeds="['1', '3']">
          <el-submenu index="1">
            <template slot="title"><i class="el-icon-message"></i>导航一</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="1-1">选项1</el-menu-item>
              <el-menu-item index="1-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="1-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-4">
              <template slot="title">选项4</template>
              <el-menu-item index="1-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title"><i class="el-icon-menu"></i>导航二</template>
            <el-menu-item-group>
              <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-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="2-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="2-4">
              <template slot="title">选项4</template>
              <el-menu-item index="2-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-submenu index="3">
            <template slot="title"><i class="el-icon-setting"></i>导航三</template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="3-1">选项1</el-menu-item>
              <el-menu-item index="3-2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="3-3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="3-4">
              <template slot="title">选项4</template>
              <el-menu-item index="3-4-1">选项4-1</el-menu-item>
            </el-submenu>
          </el-submenu>
        </el-menu>
      </el-aside>

      <el-container>
        <el-header style="text-align: right; font-size: 12px">
          <el-dropdown>
            <i class="el-icon-setting" style="margin-right: 15px"></i>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item>查看</el-dropdown-item>
              <el-dropdown-item>新增</el-dropdown-item>
              <el-dropdown-item>删除</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
          <span>王小虎</span>
        </el-header>

        <el-main>
          <el-table :data="tableData">
            <el-table-column prop="date" label="日期" width="140">
            </el-table-column>
            <el-table-column prop="name" label="姓名" width="120">
            </el-table-column>
            <el-table-column prop="address" label="地址">
            </el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>

<script>
  export default {
    data() {
      const item = {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      };
      return {
        tableData: Array(20).fill(item)
      }
    }
  };
</script>

再刷新首页
在这里插入图片描述
其中的一些标签含义如下：

  • el-container 构建整个页面框架
  • el-aside 构建左侧菜单
  • el-menu 左侧菜单内容，常用属性：
    default-openeds：默认展开的菜单，通过菜单的index值来关联
    default-active：默认选中的菜单，通过菜单的index值来关联
  • el-submenu：可展开的菜单，常用属性：
    index：菜单下标，文本类型，不能是数值类型
  • template：对应el-submenu的菜单名
  • i：设置菜单图标，通过class属性
  • el-menu-item：菜单的子结点，不可再展开，常用属性
    index：菜单下标，文本类型，不能是数值类型

通过router动态构建左侧菜单

在view下创建四个Vue组件，分别为PageOne/Two/Three/Four
在这里插入图片描述
只需要修改每个h1标签中的数字即可
在这里插入图片描述
在index.jsp中，先导入四个组件
在这里插入图片描述
修改映射
在这里插入图片描述
将App.vue的main标签中的内容替换为

<router-view></router-view>

在这里插入图片描述
此时的效果
在这里插入图片描述

接着修改index.jsp中的配置

const routes = [
  {
    path:"/",
    name:"导航1",
    component:App,
    children:[
      {
        path:"/pageOne",
        name:"页面1",
        component:PageOne
      },
      {
        path:"/pageTwo",
        name:"页面2",
        component:PageTwo
      }
    ]
  },
  {
    path:"/navigation",
    name:"导航2",
    component:App,
    children:[
      {
        path:"/pageThree",
        name:"页面3",
        component:PageThree
      },
      {
        path:"/pageFour",
        name:"页面4",
        component:PageFour
      }
    ]
  }
  ]

此时的效果
在这里插入图片描述
修改el-aside标签中的内容

	<el-aside width="200px" style="background-color: rgb(238, 241, 246)">
        <el-menu>
          <el-submenu v-for="(item,index) in $router.options.routes" :index="index+''">
            <template slot="title"><i class="el-icon-message"></i>{{item.name}}</template>
            <el-menu-item v-for="(item2,index2) in item.children" :index="index+'-'+index2">{{item2.name}}</el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>

此时的效果
在这里插入图片描述

最后，只留下aside和main部分
在这里插入图片描述
此时的效果
在这里插入图片描述

设置动态路由导航栏

App.vue里只保留一行router-view标签，把内容移到新创建的Index.vue
在这里插入图片描述
在这里插入图片描述
在index.js配置映射，将app替换为刚才创建的index，因为Vue里App.vue是基础视图，其他视图相当于都在它的基础之上显示
在这里插入图片描述
此时的效果
在这里插入图片描述

接下来实现通过点击左边的页面1234切换页面的功能：

  • 给el-menu添加router属性
  • 在页面添加router-view标签
  • 设置el-menu-item的index值，即为跳转页面
    在这里插入图片描述
    此时的效果，选哪个就跳哪个
    在这里插入图片描述
    通过redirect属性设置访问loaclhost8080的默认页面
    在这里插入图片描述
    此时访问8080会默认跳到pageOne
    在这里插入图片描述
    但是没有选中效果，通过class属性指定，利用三面运算符，当route.path（浏览器url的地址）和item2.path（设置的路由地址）一样时，具有选中效果
    在这里插入图片描述

此时具有选中效果
在这里插入图片描述

前后端分离开发数据对接

复制table代码

将pageOne.vue复制为以下表单代码

<template>
    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="date"
                label="日期"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="姓名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="province"
                label="省份"
                width="120">
        </el-table-column>
        <el-table-column
                prop="city"
                label="市区"
                width="120">
        </el-table-column>
        <el-table-column
                prop="address"
                label="地址"
                width="300">
        </el-table-column>
        <el-table-column
                prop="zip"
                label="邮编"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            }
        },

        data() {
            return {
                tableData: [{
                    date: '2016-05-02',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }, {
                    date: '2016-05-04',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1517 弄',
                    zip: 200333
                }, {
                    date: '2016-05-01',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1519 弄',
                    zip: 200333
                }, {
                    date: '2016-05-03',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1516 弄',
                    zip: 200333
                }]
            }
        }
    }
</script>

在这里插入图片描述

复制分页代码

创建一个div标签，将刚才的table放进去，再加入分页代码

<el-pagination
  background
  layout="prev, pager, next"
  :total="1000">
</el-pagination>

在这里插入图片描述
此时效果
在这里插入图片描述

创建假数据

table中的数据来自data，先修改data数据
在这里插入图片描述
修改table数据，prop就是data中的属性，label是表单中的列名
在这里插入图片描述
此时效果
在这里插入图片描述

修改分页

每页3条记录，一共30条10页，点击事件为page方法
page-size前面要和total一样加上冒号，当时漏掉了
在这里插入图片描述

		page(currentPage){
                switch (currentPage) {
                    case 1:
                        this.tableData=[{
                            id: 1,
                            name: '科技股',
                            price: 45.43,
                            rate: +1.57
                        }, {
                            id: 2,
                            name: '教育股',
                            price: 35.22,
                            rate: +0.19
                        }, {
                            id: 3,
                            name: '石油股',
                            price: 45.43,
                            rate: -4.61
                        }, {
                            id: 4,
                            name: '餐饮股',
                            price: 17.43,
                            rate: -9.77
                        }];
                        break;
                    case 2:
                        this.tableData=[{
                            id: 4,
                            name: '科技股1',
                            price: 45.43,
                            rate: +1.57
                        }, {
                            id: 5,
                            name: '教育股2',
                            price: 35.22,
                            rate: +0.19
                        }, {
                            id: 6,
                            name: '石油股3',
                            price: 45.43,
                            rate: -4.61
                        }, {
                            id: 7,
                            name: '餐饮股4',
                            price: 17.43,
                            rate: -9.77
                        }];
                        break;
                }
         }

在这里插入图片描述
此时点击第二页会显示新的数据
在这里插入图片描述

实现分页查询

由于前端是分页显示，但是可以看到后端查询的数据是一次全部查出来，需要进行分页
在这里插入图片描述

先增加一点数据，然后查询，显示了全部
在这里插入图片描述
修改StockController中的方法，传入page和size，表示第几页，显示几条记录
如果第一页就是0，page=要显示的页-1

	@GetMapping("/findAll/{page}/{size}")//get请求所有数据
    public Page<Stock> findAll(@PathVariable("page")Integer page, @PathVariable("size")Integer size){
        PageRequest pageRequest=PageRequest.of(page,size);
        return stockRepository.findAll(pageRequest);
    }

重启springboot，测试，传入0和3
在这里插入图片描述
查询第二页就传1和3
在这里插入图片描述

跟之前一样，先安装axios
在这里插入图片描述
替换为真数据，跟之前一样，还是通过create参数和_this的赋值
在这里插入图片描述
此时默认显示前3条
在这里插入图片描述
修改pageOne为以下代码

<template>
    <div>
        <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                fixed
                prop="id"
                label="股票id"
                width="150">
        </el-table-column>
        <el-table-column
                prop="name"
                label="股票名"
                width="120">
        </el-table-column>
        <el-table-column
                prop="price"
                label="股票当前价格"
                width="120">
        </el-table-column>
        <el-table-column
                prop="rate"
                label="股票涨跌幅"
                width="120">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="100">
            <template slot-scope="scope">
                <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                <el-button type="text" size="small">编辑</el-button>
            </template>
        </el-table-column>
        </el-table>
        <el-pagination
                background
                layout="prev, pager, next"
                :page-size="pageSize"
                :total="total"
                @current-change="page">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        methods: {
            handleClick(row) {
                console.log(row);
            },
            page(currentPage){
                const _this=this;
                axios.get('http://localhost:8181/stock/findAll/'+(currentPage-1)+'/3').then(function (resp) {
                    _this.tableData=resp.data.content;
                    _this.pageSize=resp.data.size;
                    _this.total=resp.data.totalElements;
                })
            }
        },

        data() {
            return {
                pageSize:'',
                total:'',
                tableData:''
            }
        },
        created() {
            const _this=this;
            axios.get('http://localhost:8181/stock/findAll/0/3').then(function (resp) {
                console.log(resp);
                _this.tableData=resp.data.content;
                _this.pageSize=resp.data.size;
                _this.total=resp.data.totalElements;
            })
        }
    }
</script>

此时成功实现分页
在这里插入图片描述

添加数据

在前端添加数据

修改index.js，把之前的pageOne改为stockQuery，pageTwo改为stockUpdate
在这里插入图片描述
现在的效果
在这里插入图片描述
接下来开始完成添加数据的功能，将stockUpdate.vue修改为以下内容
model对象绑定数据，rules对象校验表单

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="股票名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="当前价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>

        <el-form-item label="股票涨跌幅" prop="rate">
            <el-input v-model="ruleForm.rate"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    price: '',
                    rate: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    price: [
                        { required: true, message: '请输入价格', trigger: 'change' }
                    ],
                    rate: [
                        {required: true, message: '请输入涨跌幅', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) { 
                //_this表示当前vue对象
                const _this=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        alert('submit!');
                    } else {
                        return false;
                    }
                });
            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            }
        }
    }
</script>

当前效果
在这里插入图片描述
接下来需要写后台保存数据的代码

在后台添加数据

给id先加上自增注解
在这里插入图片描述
在controller中增加接口

	@PostMapping("/save")//post请求提交数据
    public void save(@RequestBody Stock stock){
        stockRepository.save(stock);
    }

重启SpringBoot，回到Vue项目，添加提交逻辑
在这里插入图片描述

测试，输入数据
在这里插入图片描述

点击添加，再查询数据库
在这里插入图片描述
在这里插入图片描述
前端也可以即时查询
在这里插入图片描述

优化提示效果

使用message方法
在这里插入图片描述
此时添加会弹出提示框
在这里插入图片描述

添加成功后回跳查询页

	submitForm(formName) {
         const _this=this;
         this.$refs[formName].validate((valid) => {
             if (valid) {
                 axios.post('http://localhost:8181/stock/save',this.ruleForm).then(function (resp) {
                     _this.$alert(_this.ruleForm.name, '添加成功', '消息',{
                         confirmButtonText: '确定',
                         callback: action => {
                         }
                     });
                     //回跳
                     _this.$router.push('/StockQuery');
                 })
             } else {
                 return false;
             }
         });
     }

在这里插入图片描述
会提示添加成功，并回跳查询页面
在这里插入图片描述

修改和删除数据

这里老师的代码有点问题，还需要做如下调整：

App.vue和Index.vue

把Index.vue和App.vue的template里的内容互换
在这里插入图片描述

在这里插入图片描述

配置index.js

将之前的StockUpdate改名StockAdd，新创建一个StockUpdate，在index.js配置
在这里插入图片描述

修改查询页

当点击修改时，将股票的行号传过去
在这里插入图片描述

修改StockUpdate

<template>
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

        <el-form-item label="股票名称" prop="name">
            <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="当前价格" prop="price">
            <el-input v-model="ruleForm.price"></el-input>
        </el-form-item>

        <el-form-item label="股票涨跌幅" prop="rate">
            <el-input v-model="ruleForm.rate"></el-input>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')">添加</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    export default {
        data() {
            return {
                ruleForm: {
                    name: '',
                    price: '',
                    rate: '',
                },
                rules: {
                    name: [
                        { required: true, message: '请输入名称', trigger: 'blur' },
                    ],
                    price: [
                        { required: true, message: '请输入价格', trigger: 'change' }
                    ],
                    rate: [
                        { required: true, message: '请输入涨跌幅', trigger: 'change' }
                    ]
                }
            };
        },
        methods: {
            submitForm(formName) {
                const _this=this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://localhost:8181/stock/save',this.ruleForm).then(function (resp) {
                            _this.$alert(_this.ruleForm.name, '添加成功', '消息',{
                                confirmButtonText: '确定',
                                callback: action => {
                                }
                            });
                            _this.$router.push('/StockQuery');
                        })
                    } else {
                        return false;
                    }
                });
            },
            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },
        },created() {
            alert(this.$route.query.id);
        }
    }
</script>

先进行简单测试，例如点击第一行
在这里插入图片描述
弹出1
在这里插入图片描述
然后跳了过来
在这里插入图片描述

提供根据id查询接口

在Springboot的controller增加方法

	@GetMapping("/findById/{id}")//get请求单个数据
    public Stock findById(@PathVariable("id")Integer id){
        return stockRepository.findById(id).get();
    }

简单测试：
在这里插入图片描述
没有问题，回到StockUpdate.vue的created方法
在这里插入图片描述
此时点击修改按钮，会自动查询显示现在的最新值，为了显示id列，增加一段标签
在这里插入图片描述
增加id属性，设置为只读
在这里插入图片描述

在这里插入图片描述
此时会显示id
在这里插入图片描述

修改功能

先把按钮改为修改
在这里插入图片描述
成功
在这里插入图片描述
提供修改接口，之后重启SpringBoot服务器

	@PutMapping("/update")//put请求修改数据
    public void update(@RequestBody Stock stock){
        stockRepository.save(stock);
    }

只需要修改这三处
在这里插入图片描述
测试，给名字加上test
在这里插入图片描述
成功
在这里插入图片描述

增加删除点击事件del

在这里插入图片描述

增加删除接口del

	@DeleteMapping("/deleteById/{id}")
    public void delete(@PathVariable("id")Integer id){
        stockRepository.deleteById(id);
    }

然后重启服务器

调用接口

回到Vue项目
在这里插入图片描述
测试：
在这里插入图片描述
成功
在这里插入图片描述
如果希望删除后可以刷新，使用window.location.reload
在这里插入图片描述

END

要学好Java
原创文章 99 获赞 457 访问量 9万+
关注 私信

猜你喜欢

转载自blog.csdn.net/qq_41112238/article/details/105727188
今日推荐
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
OOP第二次作业
java web 乱码问题
android 禁止scrollview 因控件变化自动滚动到底的方法
mysql服务解压版的安装(5.7)
centos7 nginx+tomcat配置https 安装免费SSL Let’s Encrypt
使用Mosquitto遗嘱机制实现感知客户端上下线功能的方法
面向对象之------多态与多态性
开发Teams Tabs应用程序
C# 希尔排序
第2章 Jupyter Notebooks
每日归档
更多
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022