蓬溪网站制作公司

Vue结合Springboot怎么实现用户列表单页面

本篇内容主要讲解“Vue结合Springboot怎么实现用户列表单页面”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“Vue结合Springboot怎么实现用户列表单页面”吧!

网站建设哪家好，找创新互联！专注于网页设计、网站建设、微信开发、微信平台小程序开发、集团企业网站建设等服务项目。为回馈新老客户创新互联还提供了横县免费建站欢迎大家使用！

用户列表页面开发

项目介绍

用户列表页面开发，可以实现简单的查询，删除，修改，和添加用户信息功能。前端使用vue框架，后端使用springboot框架，一个简单的vue+springboot前后端分离小项目。

本项目主要模块及技术点如图

Vue结合Springboot怎么实现用户列表单页面

项目源码+笔记+资料

vue-springboot_jb51.rar

1、前端html页面编写

页面：

Vue结合Springboot怎么实现用户列表单页面

代码：



    
    vue系列课程
    
    


    

        

            
            

                
用户列表

            

            
            

                
                    
                    添加
                    
                    
                        
                            编号
                            姓名
                            工资
                            年龄
                            个人简介
                            操作
                        
                        
                            {{user.id}}
                            {{user.name}}
                            {{user.salary}}
                            {{user.age}}
                            {{user.description}}
                            
                                删除
                                修改
                            
                        

                    
                    
                    

                        

                            
                            
                                
0001

                            

                        

                        

                            姓名
                            
                        

                        

                            工资
                            
                        

                        

                            年龄
                            
                        

                        

                            个人简介
                            
                        


                        Submit
                    
                
            
        
    

我们将html页面放到如下位置：

Vue结合Springboot怎么实现用户列表单页面

js目录下存放vue和axios资源文件。

2、springboot框架搭建

2.1、项目创建

1、新建maven项目，取名为vue_day3_admin

Vue结合Springboot怎么实现用户列表单页面

2、引入sprinboot-web依赖


    
    
        org.springframework.boot
        spring-boot-starter-web
    

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、测试

Vue结合Springboot怎么实现用户列表单页面

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、引入数据库相关依赖



    org.mybatis.spring.boot
    mybatis-spring-boot-starter
    2.1.3



    mysql
    mysql-connector-java
    5.1.38



    com.alibaba
    druid
    1.2.1

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，并选择要连接的数据库。

Vue结合Springboot怎么实现用户列表单页面

4.2、设置时区为UTC

Vue结合Springboot怎么实现用户列表单页面

5、启动测试一下

Vue结合Springboot怎么实现用户列表单页面

没有任何问题。

2.3、项目完整依赖



    4.0.0

    org.example
    vue_day3_admin
    1.0-SNAPSHOT

    
    
        org.springframework.boot
        spring-boot-starter-parent
        2.5.0
    
    
        
        
            org.springframework.boot
            spring-boot-starter-web
        
        
        
            org.mybatis.spring.boot
            mybatis-spring-boot-starter
            2.1.3
        
        
        
            mysql
            mysql-connector-java
            5.1.38
        
        
        
            com.alibaba
            druid
            1.2.1
        
        
        
            org.springframework.boot
            spring-boot-starter-test
            1.5.12.RELEASE
            test
        
    

3、编写entity层

创建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 findAll();
}

2、UserDAOMapper.xml编写

在resources下创建如下目录

Vue结合Springboot怎么实现用户列表单页面

代码：




    
    
        select id,name,salary,age,des from t_user;
    

3、service层编写

UserService 接口

package com.xiao.service;

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

public interface UserService {
    //查询所有用户方法
    List 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 findAll() {
        return userDAO.findAll();
    }
}

4、进行test测试

Vue结合Springboot怎么实现用户列表单页面

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));
    }
}

测试成功！！！

Vue结合Springboot怎么实现用户列表单页面

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、测试

Vue结合Springboot怎么实现用户列表单页面

测试成功！！！

5、添加用户信息

5.1、后端代码编写

1、UserDAO接口层

//查询所有用户信息
List findAll();

2、UserDAOMapper.xml



    insert into t_user values (#{id},#{name},#{salary},#{age},#{des})

使用 mysql 自增长序列，新插入一条数据时，怎么得到主键？

加入以下属性即可：

useGeneratedKeys=“true” keyProperty=“id”

useGeneratedKeys 取值范围true、false 默认值是：false。 含义：设置是否使用JDBC的getGenereatedKeys方法获取主键并赋值到keyProperty设置的领域模型属性中。

keyProperty 取id的key值，主要是在主键是自增的情况下，添加成功后可以直接使用主键值，其中keyProperty的值是对象的属性值，不是数据库表中的字段名。

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双向绑定


    姓名
    




    工资
    




    年龄
    




    个人简介
    


提交

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、测试一下

Vue结合Springboot怎么实现用户列表单页面

测试成功！！！

6、修改用户信息

6.1、后端代码

1、UserDAO类

//更新用户信息
void update(User user);

//基于id查询用户信息
User findById(Integer id);

2、UserDAOMapper.xml



    update t_user
    set
    name = #{name},
    age = #{age},
    salary = #{salary},
    des = #{des}
    where id = #{id}




    select
    id,name,age,salary,des
    from t_user
    where id = #{id}

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查询用户信息事件

修改

2、userEditDetail(id)

userEditDetail(id){  //用来在表单中将当前点击用户信息进行回显
    axios.get("http://localhost:8990/user/"+id).then(res=>{
        this.user = res.data;  //完成数据回显
    });
},

3、给提交按钮绑定修改或者添加用户信息事件

提交

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、测试一下

Vue结合Springboot怎么实现用户列表单页面

测试成功！！！

7、删除用户信息

7.1、后端代码

1、UserDAO接口

//基于id删除用户信息
void delete(Integer id);

2、UserDAOMapper.xml



    delete from t_user where id = #{id}

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、给删除按钮绑定删除事件

删除

2、delUser(id)删除用户方法

delUser(id){ //删除用户方法
    //友情提醒删除
    if(window.confirm("您确定要删除这条记录吗？")){
        axios.delete("http://localhost:8990/delete/"+id).then(res=>{
            alert("用户信息删除成功!");
            this.findAll(); 调用查询所有
        }).catch(err=>{
            alert("用户信息删除失败!");
        });
    }
}

3、测试一下

Vue结合Springboot怎么实现用户列表单页面

删除信息成功！！！

到此，相信大家对“Vue结合Springboot怎么实现用户列表单页面”有了更深的了解，不妨来实际操作一番吧！这里是创新互联网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！


标题名称：Vue结合Springboot怎么实现用户列表单页面
路径分享：http://scpengxi.com/article/ppgjeg.html

其他资讯