综合案例 spring boot+spring mvc+spring data jpa

最新推荐文章于 2020-10-09 11:21:12 发布

少营营

最新推荐文章于 2020-10-09 11:21:12 发布

阅读量513

点赞数

本文链接：https://blog.csdn.net/weixin_35674711/article/details/95603256

版权

1. 案例需求

完成用户的查询与修改操作

前端（浏览器端）：vue

后端（服务器端）：spring boot+spring mvc+spring data jpa

Springboot：不需要在写spring的配置文件（xml），简化sprng开发。

Spring data jpa：用来操作数据库，很多方法都定义好了，不需要在sql语句，对象和数据库表的映射。

2. 数据库设计与表结构

CREATE DATABASE itcastvue;
USE itcastvue;
CREATE TABLE USER(
id INT PRIMARY KEY AUTO_INCREMENT,
age INT,
username VARCHAR(20),
password VARCHAR(50),
email VARCHAR(50),
sex VARCHAR(20)
)

导入数据：

INSERT INTO USER (username,PASSWORD,age,sex,email) VALUES ('张三','123',22,'男','zhangsan@163.com'),('李四','123',20,'女','lisi@163.com')

3. 服务器端

创建项目

2. 导入jar包

pom.xml

<?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>

    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>1.4.0.RELEASE</version>
    </parent>

    <groupId>com.itheima</groupId>
    <artifactId>vue_day01_user</artifactId>
    <version>1.0-SNAPSHOT</version>
    <packaging>war</packaging>

    <name>vue_day01_user Maven Webapp</name>
    <!-- FIXME change it to the project's website -->
    <url>http://www.example.com</url>

    <properties>
        <project.build.sourceEncoding>UTF-8</project.build.sourceEncoding>
        <maven.compiler.source>1.8</maven.compiler.source>
        <maven.compiler.target>1.8</maven.compiler.target>
    </properties>

    <dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-data-jpa</artifactId>
        </dependency>
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
        </dependency>
    </dependencies>
</project>

3. 配置文件（application.properties）

application.properties文件

spring.datasource.driverClassName=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://127.0.0.1:3306/itcastvue
spring.datasource.username=root
spring.datasource.password=root


spring.jpa.show-sql=true
spring.jpa.database=MySQL
spring.jpa.generate-ddl=true
spring.jpa.hibernate.ddl-auto=update

4. 创建springboot引导类

package com.itheima;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

@SpringBootApplication
public class MyApplication {

   public static void main(String[] args) {
      SpringApplication.run(MyApplication.class, args);
   }

}

运行起步类（main方法），会自动启动内置的tomcat服务器，方便开发。

5. 创建实体

创建包com.itheima.domain，创建类User.java

@Entity
public class User implements Serializable {
      @Id
      @GeneratedValue(strategy=GenerationType.IDENTITY)
      private Integer id;
      private String username;
      private String password;
      private String sex;
      private int age;
      private String email;
}

@Entity：表示当前类是实体类

@Id：表示该字段是主键id

@GeneratedValue：表示该主键是自增长

6. 创建Dao

创建包com.itheima.dao，创建接口UserDao.java

package com.itheima.dao;

import com.itheima.pojo.User;
import org.springframework.data.jpa.repository.JpaRepository;

public interface UserDao extends JpaRepository<User, Integer> {

}

7. 创建Service

创建包com.itheima.service，创建接口UserService.java

package com.itheima.service;

import com.itheima.pojo.User;

import java.util.List;

public interface UserService {

   public List<User> findAll();
   
   public User findOne(int id);
   
   public void update(User user);
}

创建接口的实现类，UserServiceImpl.java

package com.itheima.service.impl;

import com.itheima.dao.UserDao;
import com.itheima.pojo.User;
import com.itheima.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import java.util.List;

@Service
@Transactional
public class UserServiceImpl implements UserService {

   @Autowired
   private UserDao userDao;
   
   public List<User> findAll() {
      return userDao.findAll();
   }
   
   public User findOne(int id) {
      return userDao.findOne(id);
   }
   
   public void update(User user) {
      userDao.save(user);
   }

}

注意：如果是高版本的spring data jpa，findOne方法的调用略有变化

@Override
    public User findOne(Integer id) {
//        User user = new User();
//        user.setId(id);
//        Example<User> example = Example.of(user);
//        User u = userDao.findOne(example).get();
        return userDao.findById(id).get();
    }

使用Example用来封装查询条件

8. 创建Controller

创建包com.itheima.controller，创建类UserController.java

package com.itheima.controller;

import com.itheima.pojo.User;
import com.itheima.service.UserService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import java.util.List;

@RestController
@RequestMapping("/user")
public class UserController {

    @Autowired
    private UserService userService;

    @RequestMapping("/findAll")
    public List<User> findAll(){
        return userService.findAll();
    }

// 使用restful接收id属性值
    @RequestMapping("/findOne/{id}")
    public  User findOne(@PathVariable("id") Integer id){
        return userService.findOne(id);
    }

    @RequestMapping("/update")
    public  void update(@RequestBody User user){
        userService.update(user);
    }
    
}

9. 浏览器端

拷贝页面到resources下的static中

user.html

我们把所有的vue的内容放置到user.js中

<script src="./js/vuejs-2.5.16.js"></script>
<script src="./js/axios-0.18.0.js"></script>
<script src="./js/user.js"></script>

10. 查询所有

user.js

var vue = new Vue({
   el:'#app',
   data:{
      userList:[]
   },
   methods:{
      findAll:function(){
         var _this=this; //this代表是vue对象
         axios.get("./user/findAll").then(function(response){
//          this变成了window对象（可以使用_this或者vue）
            vue.userList = response.data;
         })
      }      
   },
   created:function(){
      this.findAll();
   }
   
})

user.html

<tr v-for="u in userList">
    <td><input name="ids" type="checkbox"></td>
    <td>{{u.id}}</td>
    <td>{{u.username}}
    </td>
    <td>{{u.password}}</td>
    <td>{{u.sex}}</td>
    <td>{{u.age}}</td>
    <td class="text-center">{{u.email}}</td>
    <td class="text-center">
        <button type="button" class="btn bg-olive btn-xs">详情</button>
        <button type="button" class="btn bg-olive btn-xs" data-toggle="modal" data-target="#myModal"  >编辑</button>
    </td>
</tr>

11. 主键查询

user.html

<td class="text-center">
    <button type="button" class="btn bg-olive btn-xs">详情</button>
    <button type="button" class="btn bg-olive btn-xs" @click="findOne(u.id)" data-toggle="modal" data-target="#myModal"  >编辑</button>
</td>

user.js

var vue = new Vue({
   el:'#app',
   data:{
      userList:[],
      user:{}
   },
   methods:{
      findAll:function(){
         var _this=this; //this代表是vue对象
         axios.get("./user/findAll").then(function(response){
//          this变成了window（可以使用_this或者vue）
            vue.userList = response.data;
         })
      },
      findOne:function(id){
         var _this=this; //this代表是vue对象
         axios.get("./user/findOne/"+id).then(function(response){
//          this变成了window，使用_this
            _this.user = response.data;
         })
      }      
   },
   created:function(){
      this.findAll();
   }
})

对应的Controller

// 使用restful接收id属性值
    @RequestMapping("/findOne/{id}")
    public  User findOne(@PathVariable("id") Integer id){
        return userService.findOne(id);
    }

方案二：或者findOne方法可以使用正常传递参数：

// get请求传递参数，方案一：
axios.get("./user/findOne",{params:{id:id}}).then(function (resposne) {
    alert(JSON.stringify(resposne.data));
    _this.user = resposne.data;
}).catch(function (error) {

})

对应的Controller

// id查询
@RequestMapping(value = "/findOne")
public User findOne(Integer id){ 
    User user = userService.findById(id);
    return user;
}

user.html

数据绑定回显。

<div id="myModal" class="modal modal-primary" role="dialog">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">用户信息</h4>
            </div>
            <div class="modal-body">

                <div class="box-body">
                    <div class="form-horizontal">


                        <div class="form-group">
                            <label class="col-sm-2 control-label">用户名:</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" v-model="user.username">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">密码:</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" v-model="user.password">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">性别:</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" v-model="user.sex">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">年龄:</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" v-model="user.age">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-2 control-label">邮箱:</label>
                            <div class="col-sm-5">
                                <input type="text" class="form-control" v-model="user.email">
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-outline" data-dismiss="modal">修改</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>

    <!-- /.modal-dialog -->
</div>
<!-- /.modal -->

12. 更新

user.html

<div class="modal-footer">
    <button type="button" class="btn btn-outline" data-dismiss="modal">关闭</button>
    <button type="button" class="btn btn-outline" @click="update()"  data-dismiss="modal">修改</button>
</div>

user.js

var vue = new Vue({
   el:'#app',
   data:{
      userList:[],
      user:{}
   },
   methods:{
      findAll:function(){
         var _this=this; //this代表是vue对象
         axios.get("./user/findAll").then(function(response){
//          this变成了window（可以使用_this或者vue）
            vue.userList = response.data;
         })
      },
      findOne:function(id){
         var _this=this; //this代表是vue对象
         axios.get("./user/findOne/"+id).then(function(response){
//          this变成了window
            _this.user = response.data;
         })
      },
      update:function(){
         var _this=this; //this代表是vue对象
         axios.post("./user/update",this.user).then(function(response){
            _this.findAll();
         }).catch(function(err){
            alert("修改失败："+err);
         })
      }
      
   },
   created:function(){
      this.findAll();
   }
   
   
   
})

访问：http://localhost:8080/user.html

少营营

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
综合案例 spring boot+spring mvc+spring data jpa

1. 案例需求完成用户的查询与修改操作前端（浏览器端）：vue后端（服务器端）：spring boot+spring mvc+spring data jpaSpringboot：不需要在写spring的配置文件（xml），简化sprng开发。Spring data jpa：用来操作数据库，很多方法都定义好了，不需要在sql语句，对象和数据库表的映射。2. 数据库...
复制链接

扫一扫