Vue Springboot 와 결합 하여 사용자 목록 단일 페이지 구현(앞 뒤 분리)

29387 단어 VueSpringboot사용자 목록앞 뒤 분리
사용자 목록 페이지 개발
프로젝트 소개
사용자 목록 페이지 개발 은 간단 한 조회,삭제,수정,사용자 정보 추가 기능 을 실현 할 수 있 습 니 다.전단 은 vue 프레임 워 크 를 사용 하고 백 엔 드 는 springboot 프레임 워 크 를 사용 하 며 간단 한 vue+springboot 앞 뒤 단 은 작은 항목 을 분리 합 니 다.
본 프로젝트 의 주요 모듈 및 기술 점 은 그림 과 같다.

프로젝트 원본+노트+자료
vue-springboot_jb51.rar
1.전단 html 페이지 작성
페이지:
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-NUszDfUe-1626677532963)(Vue用户列表页面开发.assets/image-20210715163139071.jpg)]
코드:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue    </title>
    <!--       Bootstrap    CSS    -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="external nofollow" >
</head>
<body>
    <div id="app">

        <div class="container-fluid">
            <!--   -->
            <div class="row">
                <div class="col-sm-6 col-sm-offset-3"><h1 class="text-center">    </h1></div>
            </div>
            <!--   -->
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1">
                    <!--    -->
                    <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn-success btn-sm">  </a>
                    <!--  -->
                    <table class="table table-striped table-bordered" style="margin-top: 10px;">
                        <tr>
                            <td>  </td>
                            <td>  </td>
                            <td>  </td>
                            <td>  </td>
                            <td>    </td>
                            <td>  </td>
                        </tr>
                        <tr v-for="user in users">
                            <td>{{user.id}}</td>
                            <td>{{user.name}}</td>
                            <td>{{user.salary}}</td>
                            <td>{{user.age}}</td>
                            <td>{{user.description}}</td>
                            <td>
                                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn btn-danger btn-sm">  </a>
                                <a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn btn-info btn-sm">  </a>
                            </td>
                        </tr>

                    </table>
                    <!--         -->
                    <form>
                        <div class="form-group">
                            <label class="control-label">  </label>
                            <div >
                                <p class="form-control-static">0001</p>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="name">  </label>
                            <input type="text" class="form-control" id="name" placeholder="     ">
                        </div>
                        <div class="form-group">
                            <label for="salary">  </label>
                            <input type="text" class="form-control" id="salary" placeholder="     ">
                        </div>
                        <div class="form-group">
                            <label for="age">  </label>
                            <input type="text" class="form-control" id="age" placeholder="     ">
                        </div>
                        <div class="form-group">
                            <label for="description">    </label>
                            <input type="text" class="form-control" id="description" placeholder="       ">
                        </div>

                        <button type="submit" class="btn btn-primary">Submit</button>
                    </form>
                </div>
            </div>
        </div>

    </div>
</body>
</html>
<!--  axios-->
<script src="js/axios.min.js"></script>
<!--  vue-->
<script src="js/vue.js"></script>
<script>
    var app = new Vue({
        el: "#app",
        data:{
            msg:"vue     ",
            users:[],
        },
        methods:{

        },
        computed:{

        },
        created(){
            //  axios  
            /*axios.get("http://localhost:8989/users").then(res=>{
               this.users = res.data;
            });*/
            this.users =[{id:1,name:"  ",age:23,salary:2300,description:"      !!!"}]
        },
    });
</script>
html 페이지 를 다음 위치 에 놓 습 니 다:

js 디 렉 터 리 에 vue 와 axios 자원 파일 을 저장 합 니 다.
2.springboot 프레임 워 크 구축
2.1 프로젝트 생 성
1.maven 프로젝트 를 신 설 하고 vue_day3_admin 프로젝트 로 이름 을 지 었 습 니 다.

2.sprinboot-web 의존 도입

<dependencies>
    <!--  springboot-web  -->
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-web</artifactId>
    </dependency>
</dependencies>
3.시작 클래스 AdminApplication 작성

package com.xiao;

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

@SpringBootApplication
public class AdminApplication {
    public static void main(String[] args) {
        SpringApplication.run(AdminApplication.class,args);
    }
}
4.테스트
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RudlBSAU-1626677532964)(Vue用户列表页面开发.assets/image-20210715175029350.jpg)]
2.2 데이터베이스 연결
1.vue_day3 데이터 베 이 스 를 만 듭 니 다.

CREATE TABLE t_user(
	id INT(6) PRIMARY KEY AUTO_INCREMENT,
	NAME VARCHAR(40),
	salary DOUBLE(7,2),
	age INT(3),
	des VARCHAR(200)
);
2.데이터베이스 관련 의존 도입

<!--  mybatis     -->
<dependency>
    <groupId>org.mybatis.spring.boot</groupId>
    <artifactId>mybatis-spring-boot-starter</artifactId>
    <version>2.1.3</version>
</dependency>
<!--mysql-->
<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <scope>5.1.38</scope>
</dependency>
<!--druid-->
<dependency>
    <groupId>com.alibaba</groupId>
    <artifactId>druid</artifactId>
    <version>1.2.1</version>
</dependency>
</dependencies>
3.application.properties 프로필 작성

server.port=8990

#   mybatis

spring.datasource.type=com.alibaba.druid.pool.DruidDataSource
spring.datasource.driver-class-name=com.mysql.jdbc.Driver
spring.datasource.url=jdbc:mysql://localhost:3306/vue_day3?characterEncoding=utf-8
spring.datasource.username=root
spring.datasource.password=root

#   mapper     
mybatis.mapper-locations=classpath:com/xiao/mapper/*.xml
mybatis.type-aliases-package=com.xiao.entity

#        sql  
logging.level.com.xiao.dao=debug
4.springboot 연결 mysql 데이터베이스
4.1,Data Sources and Deivers 를 열 어 데이터베이스 user 와 password 를 입력 하고 연결 할 데이터 베 이 스 를 선택 합 니 다.

4.2 시간 대 를 UTC 로 설정

5.테스트 시작
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BASB2gjK-1626677532966)(Vue用户列表页面开发.assets/image-20210715201122304.jpg)]
아무 문제 없습니다.
2.3 프로젝트 완전 의존

<?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>org.example</groupId>
    <artifactId>vue_day3_admin</artifactId>
    <version>1.0-SNAPSHOT</version>

    <!--  springboot   -->
    <parent>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-parent</artifactId>
        <version>2.5.0</version>
    </parent>
    <dependencies>
        <!--  springboot-web  -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--  mybatis     -->
        <dependency>
            <groupId>org.mybatis.spring.boot</groupId>
            <artifactId>mybatis-spring-boot-starter</artifactId>
            <version>2.1.3</version>
        </dependency>
        <!--mysql-->
        <dependency>
            <groupId>mysql</groupId>
            <artifactId>mysql-connector-java</artifactId>
            <scope>5.1.38</scope>
        </dependency>
        <!--druid-->
        <dependency>
            <groupId>com.alibaba</groupId>
            <artifactId>druid</artifactId>
            <version>1.2.1</version>
        </dependency>
        <!--    -->
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <version>1.5.12.RELEASE</version>
            <scope>test</scope>
        </dependency>
    </dependencies>
</project>
3.엔 터 티 계층 작성user 실체 클래스 만 들 기

package com.xiao.entity;

public class User {
    private Integer id;
    private String name;
    private Double salary;
    private Integer age;
    private String des;

    public User() {
    }

    public User(Integer id, String name, Double salary, Integer age, String des) {
        this.id = id;
        this.name = name;
        this.salary = salary;
        this.age = age;
        this.des = des;
    }

    public Integer getId() {
        return id;
    }

    public void setId(Integer id) {
        this.id = id;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Double getSalary() {
        return salary;
    }

    public void setSalary(Double salary) {
        this.salary = salary;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String getDes() {
        return des;
    }

    public void setDes(String des) {
        this.des = des;
    }

    @Override
    public String toString() {
        return "User{" +
                "id=" + id +
                ", name='" + name + '\'' +
                ", salary=" + salary +
                ", age=" + age +
                ", des='" + des + '\'' +
                '}';
    }
}
4.사용자 정보 조회
4.1 백 엔 드 코드 작성
1.UserDAO 작성

package com.xiao.dao;

import com.xiao.entity.User;

import java.util.List;

public interface UserDAO {

    //        
    List<User> findAll();
}
2.UserDAOMapper.xml 작성resources 에서 다음 디 렉 터 리 를 만 듭 니 다.
****
코드:

<?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.xiao.dao.UserDAO">
    <!--findAll-->
    <select id="findAll" resultType="User">
        select id,name,salary,age,des from t_user;
    </select>
</mapper>
3.service 층 의 작성UserService 인터페이스

package com.xiao.service;

import com.xiao.entity.User;
import java.util.List;

public interface UserService {
    //        
    List<User> findAll();
}
UserServiceImpl 실현 류

package com.xiao.service;

import com.xiao.dao.UserDAO;
import com.xiao.entity.User;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;
import org.springframework.transaction.annotation.Propagation;
import org.springframework.transaction.annotation.Transactional;

import java.util.List;

@Service //              ：   spring       userServiceImpl  
@Transactional //                
public class UserServiceImpl implements UserService{

    @Autowired
    private UserDAO userDAO;

    @Override
    @Transactional(propagation = Propagation.SUPPORTS) //         
    public List<User> findAll() {
        return userDAO.findAll();
    }
}
4.test 테스트 실시
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pfLCSqdg-1626677532967)(Vue用户列表页面开发.assets/image-20210716180343384.jpg)] BasicTest 류

package com.xiao.test;
import com.xiao.AdminApplication;
import org.junit.runner.RunWith;
import org.springframework.boot.test.context.SpringBootTest;
import org.springframework.test.context.junit4.SpringRunner;
@SpringBootTest(classes = AdminApplication.class) //     @RunWith(SpringRunner.class)  //    public class BasicTest {}
TestUserService 류

package com.xiao.test;
import com.xiao.service.UserService;
import org.junit.Test;
import org.springframework.beans.factory.annotation.Autowired;
public class TestUserService extends BasicTest 
{
    @Autowired private UserService userService;
    @Test public void findAll() {
        userService.findAll().forEach(user -> System.out.println(user));
    }
}
테스트 성공!!
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-irJbdJfR-1626677532969)(Vue用户列表页面开发.assets/image-20210716180457334.jpg)]
4.2 전단 코드 작성
1.created() 함수 에 axios 요청 추가
\#생명주기 갈고리:생명주기 함수
초기 화 단계
1.beforeCreate vue 인 스 턴 스 자체 이벤트 수명 주기 초기 화
2.created 사용자 정의 data methods computed 주입 및 검증 추천 완료
3.beforeMount 는 el 을 html 로 템 플 릿 으로 컴 파일 했 지만 템 플 릿 주입 이 완료 되 지 않 았 습 니 다.
4.mounted 는 컴 파일 템 플 릿 을 데이터 주입 하고 완성 템 플 릿 을 주입 하여 가상 dom 교체 el 을 원시 dom 로 가리킨다.
코드:

var app = new Vue({
    el: "#app",
    data:{
        msg:"vue     ",
        users:[], //    users   ，           
    },
    methods:{

    },
    computed:{

    },
    created(){ //   data methods computed         
        //  axios  
        axios.get("http://localhost:8990/users").then(res=>{
            console.log(res.data);
            this.users = res.data;
        }); //es6        ：          this     function(){} //    this
    },
});
2.테스트
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ERkeDKUK-1626677532969)(Vue用户列表页面开发.assets/image-20210716181201722.jpg)]
테스트 성공!!
5.사용자 정보 추가
5.1 백 엔 드 코드 작성
1.UserDAO 인터페이스 층

//        
List<User> findAll();
2、 UserDAOMapper.xml 

<!--save-->
<insert id="save" parameterType="User" useGeneratedKeys="true" keyProperty="id">
    insert into t_user values (#{id},#{name},#{salary},#{age},#{des})
</insert>
mysql 자체 성장 시퀀스 를 사용 하여 데 이 터 를 새로 삽입 할 때 메 인 키 를 어떻게 얻 습 니까?
아래 속성 을 추가 하면 됩 니 다:useGeneratedKeys=“true” keyProperty=“id”useGenerated Keys 수치 범위 true,false 기본 값 은 false 입 니 다.의미:JDBC 의 getGenereatedKeys 방법 을 사용 하여 메 인 키 를 가 져 오고 key Property 가 설정 한 영역 모델 속성 에 할당 할 지 설정 합 니 다.
keyproperty 는 id 의 key 값 을 가 져 옵 니 다.주로 메 인 키 가 증가 한 상황 에서 추가 에 성공 하면 메 인 키 값 을 직접 사용 할 수 있 습 니 다.그 중에서 keyperty 의 값 은 대상 의 속성 값 이지 데이터베이스 시트 의 필드 이름 이 아 닙 니 다.
3.service 층 의 작성UserService 류

//      
void save(User user);
UserServiceImpl 류

@Override
public void save(User user) {
    userDAO.save(user);
}
4.UserController 제어 류,

//        
@PostMapping("saveOrUpdate")
public void saveOrUpdate(@RequestBody User user){
    System.out.println(user);
    userService.save(user);
}
5.2 전단 코드 작성
1.form 폼 에 v-model 양 방향 바 인 딩 을 추가 합 니 다.

</div>
<div class="form-group">
    <label for="name">  </label>
    <input type="text" class="form-control" v-model="user.name" id="name" placeholder="     ">
</div>
<div class="form-group">
    <label for="salary">  </label>
    <input type="text" class="form-control" v-model="user.salary" id="salary" placeholder="     ">
</div>
<div class="form-group">
    <label for="age">  </label>
    <input type="text" class="form-control" v-model="user.age" id="age" placeholder="     ">
</div>
<div class="form-group">
    <label for="description">    </label>
    <input type="text" class="form-control" v-model="user.des" id="description" placeholder="       ">
</div>
<button type="button" class="btn btn-primary btn-block" @click="saveOrUpdate">  </button>
2、제출 버튼 에 saveOrUpdate 귀속 방법

    var app = new Vue({
        el: "#app",
        data:{
            msg:"vue     ",
            users:[], //    users   ，           
            user:{},  //       json  
        },
        methods:{
            saveOrUpdate(){ //        
                //       
                console.log(this.user);
                axios.post("http://localhost:8990/saveOrUpdate",this.user).then(res=>{
                    this.user={}; //    ，    
                    alert('        !');
                    //         
                    this.findAll(); //      
                }).catch(err=>{
                    alert('        !')
                });
            },
            findAll(){
                //  axios  
                axios.get("http://localhost:8990/users").then(res=>{
                    console.log(res.data);
                    this.users = res.data;
                }); //es6        ：          this     function(){} //    this
            }
        },
3.테스트 해 보기
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-XUAecTFJ-1626677532970)(Vue用户列表页面开发.assets/image-20210717111531326.jpg)]
테스트 성공!!
6.사용자 정보 수정
6.1 백 엔 드 코드
1.UserDAO 류

//      
void update(User user);

//  id      
User findById(Integer id);
2、 UserDAOMapper.xml 

<!--update-->
<update id="update" parameterType="User">
    update t_user
    set
    name = #{name},
    age = #{age},
    salary = #{salary},
    des = #{des}
    where id = #{id}
</update>

<!--findById-->
<select id="findById" parameterType="Integer" resultType="User">
    select
    id,name,age,salary,des
    from t_user
    where id = #{id}
</select>
3,service 층UserService 류

//      
void update(User user);

//  id      
User findById(Integer id);
UserServiceImpl 실현 류

@Override
public void update(User user) {
    userDAO.update(user);
}

@Override
@Transactional(propagation = Propagation.SUPPORTS) //           Propagation:           
public User findById(Integer id) {
    return userDAO.findById(id);
}
4,control 층
여기 서 우 리 는 전단 에서 요청 한 매개 변수 에 따라 판단 해 야 한다.전단 에서 요청 한 인자 중 id 이 비어 있 으 면 추가 작업 임 을 설명 합 니 다.그렇지 않 으 면 업데이트 작업 입 니 다.저 희 는 해당 하 는 코드 를 실행 합 니 다.

//        
@PostMapping("saveOrUpdate")
public void saveOrUpdate(@RequestBody User user){
    log.info("       ：{}",user);
    //      id
    //  ：              id：     
    if(StringUtils.isEmpty(user.getId())){ //    
        log.info("      ......");
        userService.save(user);  //  
    }else{
        log.info("      ......");
        userService.update(user);
    }

}
6.2 전단 코드
수정 단 추 를 누 르 면 사용자 정 보 를 표시 합 니 다.
1.저 희 는 먼저 수정 단 추 를 id 에 따라 사용자 정 보 를 조회 하 는 이 벤트 를 추가 합 니 다.

<a href="" class=" rel="external nofollow"  rel="external nofollow"  rel="external nofollow"  rel="external nofollow" btn btn-info btn-sm" @click.prevent="userEditDetail(user.id)">  </a>
2、 userEditDetail(id) 

userEditDetail(id){  //                   
    axios.get("http://localhost:8990/user/"+id).then(res=>{
        this.user = res.data;  //      
    });
},
3.제출 버튼 바 인 딩 수정 또는 사용자 정보 이벤트 추가

<button type="button" class="btn btn-primary btn-block" @click="saveOrUpdate">  </button>
4、 saveOrUpdate() 

saveOrUpdate(){ //        
    if(!this.user.name){
        alert("      !");
        return ;
    }
    console.log(this.user);
    axios.post("http://localhost:8990/saveOrUpdate",this.user).then(res=>{
        this.user={}; //    ，    
        alert('        !');
        //         
        this.findAll(); //      
    }).catch(err=>{
        alert('        !')
    });
},
},
findAll(){
    //  axios  
    axios.get("http://localhost:8990/users").then(res=>{
        console.log(res.data);
        this.users = res.data;
    }); //es6        ：          this     function(){} //    this
},
5.테스트 해 보기
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-bsz7p8mt-1626677532970)(Vue用户列表页面开发.assets/image-20210717175122673.jpg)]
테스트 성공!!
7.사용자 정보 삭제
7.1 백 엔 드 코드
1.UserDAO 인터페이스

//  id      
void delete(Integer id);
2、 UserDAOMapper.xml 

<!--delete-->
<delete id="delete" parameterType="Integer">
    delete from t_user where id = #{id}
</delete>
3,service 층UserService 류

//  id      
void delete(Integer id);
UserServiceImpl 류

@Override
public void delete(Integer id) {
    userDAO.delete(id);
}
4.controller 류

//  id         
@DeleteMapping("delete/{id}")
public void delete(@PathVariable Integer id){
    userService.delete(id);
}
7.2 전단 코드
1、삭제 버튼 바 인 딩 삭제 이벤트

<a href="javascript:;" rel="external nofollow"  class="btn btn-danger btn-sm" @click="delUser(user.id)">  </a>
2.delUser(id) 사용자 삭제 방법

delUser(id){ //      
    //      
    if(window.confirm("           ？")){
        axios.delete("http://localhost:8990/delete/"+id).then(res=>{
            alert("        !");
            this.findAll();       
        }).catch(err=>{
            alert("        !");
        });
    }
}
3.테스트 해 보기
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-1SQbhCIt-1626677532972)(Vue用户列表页面开发.assets/image-20210717202211642.jpg)]
정보 삭제 성공!!
Vue 가 Springboot 와 결합 하여 사용자 목록 단일 페이지(앞 뒤 분리)를 실현 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 Vue 와 Springboot 사용자 목록 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!
Asp.net 드 롭 다운 트 리 의 실현 과정
Asp.Mvc 2.0 사용자 의 편집 및 삭제 인 스 턴 스 설명(5)

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage