Vue + Spring Boot 例子

Vue + Spring Boot 例子 后端构建

 

 UserController

import com.wujun.entity.User;
import com.wujun.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 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.wujun.entity.User;
import org.springframework.stereotype.Service;

import java.util.List;
@Service
public interface UserRepository {
    public List 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

    
        select * from user
    


    
        select * from user where id=#{id}
    


    
        insert into user (name, password, score, birthday)
        VALUES(#{name},#{password},#{score},#{birthday})

    

    
        update user set name = #{name} ,password = #{password}
        ,score = #{score},birthday = #{birthday}
        where id = #{id}
    
    
        delete from user where id=#{id}
    

配置文件（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

依赖文件

    4.0.0

    com.wujun
    bloodend
    1.0-SNAPSHOT
    
        spring-boot-starter-parent
        org.springframework.boot
        2.1.5.RELEASE
    
    
        
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.projectlombok
            lombok
            1.18.22
        

        
            com.alibaba
            easyexcel
            2.2.6
        

        
            org.springframework.boot
            spring-boot-starter-thymeleaf
        

        
            mysql
            mysql-connector-java
            8.0.18
        

        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.0
        

    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

Vue 前端文件

Index

update

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

 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('修改成功', '提示', {
              /confirm/iButtonText: '确定',
              callback: action => {
              location.href="./Index"; 
                );
          }
        });
             
            }
          })
        
      }