Vue + Spring Boot 例子

已于 2022-03-02 09:33:18 修改
阅读量1.2k 收藏 1
点赞数
文章标签： vue.js spring boot 前端 elementui
于 2022-02-01 13:32:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43982961/article/details/122763662
版权

后端构建

 UserController



import com.aaa.repository.UserRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {
    @Autowired
    private UserRepository userRepository ;

    @GetMapping("/findAll")
    @CrossOrigin
    public List<User> findAll(){
        return userRepository.findAll();
    }

    @GetMapping("/findById/{id}")
    @CrossOrigin
    public User findById(@PathVariable("id") Integer id){
        return userRepository.findById(id);
    }
    @PostMapping("/save")
    @CrossOrigin
    public void save(@RequestBody User user){
        userRepository.save(user);

    }

    @PutMapping("/update")
    @CrossOrigin
    public void update(@RequestBody User user){
        userRepository.update(user);

    }
    @GetMapping("/delete/{id}")
    @CrossOrigin
    public void delete(@PathVariable("id") Integer id){
        userRepository.delete(id);

    }
}

实体类



import lombok.Data;

import java.util.Date;
@Data
public class User {
    private Integer id ;
    private String name ;
    private String password;
    private Double score ;
    private Date birthday ;
}

跨域处理



import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@WebFilter(urlPatterns = "/*",filterName = "handerFilter")
public class HanderFilter implements Filter {
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response= (HttpServletResponse)servletResponse;
        HttpServletRequest request =(HttpServletRequest) servletRequest ;
        response.setContentType("text/html;charset=UTF-8");
        response.setHeader("Access-Control-Allow-Origin",request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods","POST,GET,OPTIONS,DELETE");
        response.setHeader("Access-Control-Allow-Max-Age","0");
        response.setHeader("Access-Control-Allow-Headers","Origin,No-Cache, X-Requested-With,If-Modified-Since,Last-Modified,Cache-Control ,Expiress," +
                           "Content-Type,X-E4M-With,token");
        response.setHeader("Access-Control-Allow-Credentials","true");
        filterChain.doFilter(request,response);

    }

    @Override
    public void destroy() {

    }
}

Mybatis 接口


import com.aaa.entity.User;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public interface UserRepository {
    public List<User> findAll();

    public User findById(Integer id);

    public void  save(User user);

    public void delete(int id);

    public void update(User user);
}

运行文件



import org.mybatis.spring.annotation.MapperScan;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
@MapperScan("com.wujun.repository")
public class application {
    public static void main(String[] args) {
        SpringApplication.run(application.class ,args);
    }
}

Mybatis接口xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
        PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.aaa.repository.UserRepository">



    <select id="findAll" resultType="com.aaa.entity.User">
        select * from user
    </select>


    <select id="findById" parameterType="java.lang.Integer" resultType="com.aaa.entity.User">
        select * from user where id=#{id}
    </select>


    <insert id="save" parameterType="com.aaa.entity.User">
        insert into user (name, password, score, birthday)
        VALUES(#{name},#{password},#{score},#{birthday})

    </insert>

    <update id="update" parameterType="com.aaa.entity.User">
        update user set name = #{name} ,password = #{password}
        ,score = #{score},birthday = #{birthday}
        where id = #{id}
    </update>
    <delete id="delete" parameterType="java.lang.Integer">
        delete from user where id=#{id}
    </delete>
</mapper>

配置文件（yml）

spring:
  datasource:
    url: jdbc:mysql://localhost:3306/test?useSSL=true&useUnicode=true&serverTimezone=UTC&characterEncoding=utf8&rewriteBatchedStatements=true
    password: 342901
    username: root
    driver-class-name: com.mysql.cj.jdbc.Driver
mybatis:
  mapper-locations: classpath:/mapper/*xml

  #提前包名
server:
  port: 8081

依赖文件

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0"
         xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
         xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
    <modelVersion>4.0.0</modelVersion>

    <groupId>com.aaa</groupId>
    <artifactId>bloodend</artifactId>
    <version>1.0-SNAPSHOT</version>
    <parent>
        <artifactId>spring-boot-starter-parent</artifactId>
        <groupId>org.springframework.boot</groupId>
        <version>2.1.5.RELEASE</version>
    </parent>
    <dependencies>
        <!--   web 启动 jar-->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>

        <dependency>
            <groupId>org.projectlombok</groupId>
            <artifactId>lombok</artifactId>
            <version>1.18.22</version>
        </dependency>

        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>easyexcel</artifactId>
            <version>2.2.6</version>
        </dependency>

        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-thymeleaf</artifactId>
        </dependency>

        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <version>8.0.18</version>
        </dependency>

        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.0</version>
        </dependency>

    </dependencies>

    <build>
        <plugins>
            <plugin>
                <groupId>org.springframework.boot</groupId>
                <artifactId>spring-boot-maven-plugin</artifactId>
            </plugin>
        </plugins>
    </build>
</project>

Vue 前端文件

Index

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="score"
      label="分数"
      width="120">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="生日"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>

<!-- 操作按钮 -->
    <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete( scope.row)">删除</el-button>
      </template>
    </el-table-column>


  
  </el-table>
</template>


<script>
export default {
    name:'FindAll',
    methods:{
      
      handleEdit(row){
       this.$router.push({ name: 'update', params: { id: row.id ,name: row.name,score:row.score ,password:row.password ,birthday:row.birthday } })
      }
    
    ,
      handleDelete(row){
        let _this = this ;
        this.$confirm('是否删除用户'+row.name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get('http://localhost:8081//user/delete/'+row.id).then(function(resp){
            if(resp){
              _this.$alert(row.name+'删除成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
                // this.$message({
                //   type: 'info',
                //   message: `action: ${ action }`
                // });
          }
        });
             
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    created(){
      let _this = this ;
      axios.get('http://localhost:8081/user/findAll').then(function (resp) {
          console.log(resp.data)
          _this.tableData = resp.data
      })
      // axios.get('http://localhost:8081/user/findAll').then(function (resp) {
      //     console.log(resp.data)
      //     _this.tableData = resp.data
      // })
    }
    ,
    

    data() {
      return {
        tableData:[]
      }
    }

}

</script>

<style>

</style>

update

<template>
<div style="width:300px">
    <el-form ref="form" :model="sizeForm" label-width="80px" size="mini">
        <el-form-item label="id">
            <el-input v-model="sizeForm.id" readonly></el-input>
        </el-form-item>

        <el-form-item label="name">
            <el-input v-model="sizeForm.name"></el-input>
        </el-form-item>

        <el-form-item label="密码">
            <el-input v-model="sizeForm.password"></el-input>
        </el-form-item>
          
        <el-form-item label="分数">
            <el-input v-model="sizeForm.score"></el-input>
        </el-form-item>

        <el-form-item label="生日">
            <el-input v-model="sizeForm.birthday"></el-input>
        </el-form-item>
 
  <el-form-item size="large">
    <el-button type="primary" @click="onSubmit()">立即创建</el-button>
    <el-button>取消</el-button>
  </el-form-item>
</el-form>
</div>
</template>

<script>
import Vue from 'vue';
export default {
    name: 'update',
    
    created(){
        let _this = this
        this.$route.params.id
        this.sizeForm=this.$route.params;
        
        
        console.log(this.$route.params)
        
       
    },
    data() {
      return {
        sizeForm: {
          id: '',//this.$route.params.id,
          name:'',// this.$route.params.name,
          password: '',//this.$route.params.password,
          score:'',// this.$route.params.score,
          birthday:'',//this.$route.params.birthday
        }
      };
    },
    methods: {
      onSubmit(){
        let _this = this
        this.$route.params.id
        this.sizeForm=this.$route.params;
        
        
        console.log(' onSubmit()')
        console.log(this.sizeForm)
         axios.put('http://localhost:8081/user/update',this.$route.params).then(function(resp){
            if(resp){
              _this.$alert('修改成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
              location.href="./Index"; 
                // this.$message({
                //   type: 'info',
                //   message: `action: ${ action }`
                // });
          }
        });
             
            }
          })
        
      }
    }

}
</script>

<style>

</style>

在点击事件方法处理上不够完美

 onSubmit(){
        let _this = this
        this.$route.params.id
        this.sizeForm=this.$route.params;
        
        
        console.log(' onSubmit()')
        console.log(this.sizeForm)
         axios.put('http://localhost:8081/user/update',this.$route.params).then(function(resp){
            if(resp){
              _this.$alert('修改成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
              location.href="./Index"; 
                );
          }
        });
             
            }
          })
        
      }

添加 Add.vue

<template>
  <el-table :data="tableData" border style="width: 100%">
    <el-table-column
      fixed
      prop="id"
      label="编号"
      width="150">
    </el-table-column>
    <el-table-column
      prop="name"
      label="姓名"
      width="120">
    </el-table-column>
    <el-table-column
      prop="password"
      label="密码"
      width="120">
    </el-table-column>
    <el-table-column
      prop="score"
      label="分数"
      width="120">
    </el-table-column>
    <el-table-column
      prop="birthday"
      label="生日"
      width="300">
    </el-table-column>
    <el-table-column
      prop="zip"
      label="邮编"
      width="120">
    </el-table-column>

<!-- 操作按钮 -->
    <el-table-column
      fixed="right"
      label="操作"
      width="300">
      <template slot-scope="scope">
        <el-button
          size="mini"
          @click="handleEdit(scope.row)">编辑</el-button>
        <el-button
          size="mini"
          type="danger"
          @click="handleDelete( scope.row)">删除</el-button>
      </template>
    </el-table-column>


  
  </el-table>
</template>


<script>
export default {
    name:'FindAll',
    methods:{
      
      handleEdit(row){
       this.$router.push({ name: 'update', params: { id: row.id ,name: row.name,score:row.score ,password:row.password ,birthday:row.birthday } })
      }
    
    ,
      handleDelete(row){
        let _this = this ;
        this.$confirm('是否删除用户'+row.name, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axios.get('http://localhost:8081//user/delete/'+row.id).then(function(resp){
            if(resp){
              _this.$alert(row.name+'删除成功', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                location.reload()
                // this.$message({
                //   type: 'info',
                //   message: `action: ${ action }`
                // });
          }
        });
             
            }
          })
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    },
    created(){
      let _this = this ;
      axios.get('http://localhost:8081/user/findAll').then(function (resp) {
          console.log(resp.data)
          _this.tableData = resp.data
      })
      // axios.get('http://localhost:8081/user/findAll').then(function (resp) {
      //     console.log(resp.data)
      //     _this.tableData = resp.data
      // })
    }
    ,
    

    data() {
      return {
        tableData:[]
      }
    }

}

</script>

<style>

</style>

weixin_43982961
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue+springboot小案例
weixin_43500896的博客
05-18 257
springboot+vue的前后端分离小案例，适用于学习和练手
MeetingRoom:基于Vue + Spring Boot开发的会议室管理系统
03-11
《深入探讨基于Vue和Spring Boot构建的会议管理系统：MeetingRoom实战指南》 在当今的企业环境中，高效的会议室管理是必不可少的一部分，它涉及到资源调度、预定确认、使用情况统计等多方面工作。本文将带您走进一...
Vue + Spring Boot 项目实战（十三）：使用 Shiro 实现用户信息加密与登录认证
热门推荐
Evan 的博客
10-27 5万+
如题，希望这篇文章能解答你对 shiro 的一些疑问。
vue+spring boot上传文件（图片）
chd_sun的博客
08-28 3068
1.spring boot 中后台接收 这里以图片上传为例 1.1.在前台上传图片之后，核心思想就是把前台的文件存储到本地之中，文件的路径存储在数据库之中。 下面是在spring boot框架下，后台完成的接收图片和存地址到数据库之中的方法。 package com.financeloan.vue.controller; import java.io.File; import java.io.I...
入门vue+springboot项目
qq_45612211的博客
04-19 4753
介绍 为了应付毕业设计，花了一个多月学习了vue+springboot做一个项目。现在把项目的一些架构和重点整理一下。 1.vue前端 vue主要还是配置问题，我在项目中用到的ajax和element ui是需要自己安装的。然后就是配置问题，主要是应对跨域还有请求头中添加token。 import Vue from 'vue' import App from './App' import router from './router' import ElementUI from 'element-ui' im
Vue + Spring Boot 项目实战（三）：使用IntelliJ IDEA快速生成 Vue.js 项目
Gblfy_Blog
01-14 4238
文章目录一、使用idea Vue插件生成项目结构1.1. Create New Project1.2. 设置项目地址1.3. 确认项目名称1.4. 项目描述1.5. 作者信息1.6. 编译模板1.7. 安装路由二、安装node_modules模块三、启动项目四、Vue 项目结构分析4.1. 概览4.2. index.html4.3. App.vue4.4. main.js4.5. 项目源码 一、使...
Vue + Spring Boot 项目实战:人事管理系统——(1)登录页面及方法实现
weixin_45331887的博客
05-12 1733
这里写目录标题登录页面及效果实现：前端代码：新建Vue项目后端代码实现：实体类(1.User)实体类(2.Token)工具类(3.ResultUtil)控制层(AuthController)服务层(UserService)Dao层(UserMapper)Mapper文件： 登录页面及效果实现： 实现登录的功能 前端代码： 新建Vue项目 新建vue项目网上有很多教程，就不再这里举例了，不清楚的可以百度康康教程。这里我采用的vue脚手架，在cmd命令行首先切换你想要新建项目的路径(cd xx盘)，然后输入
教你如何制作vue+springboot项目
xc9711的博客
12-05 3万+
以本人制作的学生成绩管理系统的基础上，从头到尾教大家如何构建vue+springboot项目
vue与Spring boot数据交互例子【简单版】
hac1322的博客
04-26 1149
官网解释：Vue 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。
系统架构之springboot+vue
qq_44899022的博客
07-18 7499
前端：Vue+Element-plus+axios后端：Springboot+Mybatis-plus数据库：MySql+Redis开发工具可以根据自己喜好：我使用的是IDEA+WebStorm下载nodejs，具体教程其他帖子有vue-cli：vue的脚手架工具，nodejs安装完毕后，npm安装cli本地如果有yarn，可以用命令yarn安装cmd打开命令行，直接用命令行开始，我用的npm可能出现情况，报错4048，解决方案如下。
springboot+vue+mysq 后台管理
11-11
标题 "springboot+vue+mysq 后台管理" 描述了一个使用现代技术栈构建的后台管理系统，其中涉及的关键技术包括Spring Boot、Vue.js以及MySQL。这个系统实现了前后端分离，意味着前端负责用户界面和用户体验，而后端则...
springboot+vue+elementui实现增删改查和分页查询
09-20
它整合了Spring Boot、Vue.js和Element UI，这三个组件分别在后端、前端和UI设计方面发挥关键作用，实现了基本的数据操作和展示功能。 首先，Spring Boot是Java生态系统中的一个框架，它简化了创建独立的、生产级别...
spring boot vue 博客
04-14
本项目“Spring Boot Vue 博客”就是一个典型的例子，它融合了Java后端技术和前端Vue.js框架，构建了一个功能完善的博客系统。下面我们将深入探讨该项目涉及的技术栈及其重要知识点。 1. **Spring Boot** Spring ...
若依前后的分离版SpringBoot+Vue+MybatisPlus
06-05
版本：v3.8.5 新改权限 部门管理 加入了是否可以新增、修改、删除判断，后端根据当前登录人的所属部门赋予权限；...4、SwaggerApi使用加入到部门管理作为例子 官方的代码质量....呵呵（笑笑） 改后新写法参考部门管理
vue实现电子签名、图片合成、及预览功能
weixin_58572700的博客
07-23 1431
本文介绍了电子签名、图片合成、及预览功能
vue+element 根据父容器动态设置table高度出滚动条
最新发布
xu_duo_i的博客
08-02 268
vue+element 根据父容器动态设置table高度出滚动条
VUE实现TAB切换不同页面
weixin_43159039的博客
08-02 308
SignList这三个页面就是需要切换的页面。
vue3中 provide/inject用法详解
红烧咸咸鱼
08-02 495
vue3中 provide/inject用法详解
Vue和Spring Boot的跨域配置
04-06
Vue和Spring Boot都支持跨域请求，为了实现跨域请求，需要在代码中进行配置。 Vue的跨域配置： 在Vue项目中，可以在`vue.config.js`文件中进行跨域配置。以下是一个例子： ```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, pathRewrite: { '^/api': '' } } } } } ``` 上述配置中，将所有以`/api`开头的请求代理到`http://localhost:8080`，并且将请求地址中的`/api`替换为空。 Spring Boot的跨域配置： 在Spring Boot项目中，可以在`WebMvcConfigurer`中进行跨域配置。以下是一个例子： ```java @Configuration public class WebMvcConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "POST", "PUT", "DELETE") .allowedHeaders("*") .allowCredentials(true) .maxAge(3600); } } ``` 上述配置中，允许所有域名的请求，允许的请求方法包括GET、POST、PUT和DELETE。同时，允许所有请求头，并且允许携带Cookie。最后，设置缓存时间为3600秒。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值