Vue结合Springboot实现用户列表单页面(前后端分离) Vue结合Springboot实现用户列表单

用户列表页面开发

项目介绍

1、前端html页面编写

2、springboot框架搭建

2.1、项目创建
2.2、连接数据库
2.3、项目完整依赖

3、编写entity层

4、查询用户信息

4.1、后端代码编写
4.2、前端代码编写

5、添加用户信息

5.1、后端代码编写
5.2、前端代码编写

6、修改用户信息

6.1、后端代码
6.2、前端代码

7、删除用户信息

7.1、后端代码
7.2、前端代码

用户列表页面开发
项目介绍
用户列表页面开发，可以实现简单的查询，删除，修改，和添加用户信息功能。前端使用vue框架，后端使用springboot框架，一个简单的vue+springboot前后端分离小项目。
本项目主要模块及技术点如图

文章图片

项目源码+笔记+资料
vue-springboot_jb51.rar

1、前端html页面编写页面：

文章图片

代码：

vue系列课程 - 锐客网用户列表添加
编号姓名工资年龄个人简介操作
{{user.id}} {{user.name}} {{user.salary}} {{user.age}} {{user.description}} 删除修改
编号0001
姓名工资年龄个人简介

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

文章图片

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

2、springboot框架搭建
2.1、项目创建
1、新建maven项目，取名为vue_day3_admin

文章图片

2、引入sprinboot-web依赖

org.springframework.bootspring-boot-starter-web

3、编写启动类AdminApplication

package com.xiao; import org.springframework.boot.SpringApplication; import org.springframework.boot.autoconfigure.SpringBootApplication; @SpringBootApplicationpublic class AdminApplication {public static void main(String[] args) {SpringApplication.run(AdminApplication.class,args); }}

4、测试

文章图片

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.bootmybatis-spring-boot-starter2.1.3mysqlmysql-connector-java5.1.38com.alibabadruid1.2.1

3、application.properties配置文件编写

server.port=8990# 整合mybatisspring.datasource.type=com.alibaba.druid.pool.DruidDataSourcespring.datasource.driver-class-name=com.mysql.jdbc.Driverspring.datasource.url=jdbc:mysql://localhost:3306/vue_day3?characterEncoding=utf-8spring.datasource.username=rootspring.datasource.password=root# 指定mapper出现的位置mybatis.mapper-locations=classpath:com/xiao/mapper/*.xmlmybatis.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、启动测试一下

文章图片

没有任何问题。

2.3、项目完整依赖

4.0.0org.examplevue_day3_admin1.0-SNAPSHOTorg.springframework.bootspring-boot-starter-parent2.5.0org.springframework.bootspring-boot-starter-weborg.mybatis.spring.bootmybatis-spring-boot-starter2.1.3mysqlmysql-connector-java5.1.38com.alibabadruid1.2.1org.springframework.bootspring-boot-starter-test1.5.12.RELEASEtest

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; }@Overridepublic 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下创建如下目录

文章图片

代码：

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{@Autowiredprivate UserDAO userDAO; @Override@Transactional(propagation = Propagation.SUPPORTS) //方法上声明事务注解public List findAll() {return userDAO.findAll(); }}

4、进行test测试

文章图片

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

测试成功！！！

文章图片

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

文章图片

测试成功！！！

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类

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

文章图片

测试成功！！！

6、修改用户信息
6.1、后端代码
1、UserDAO类

//更新用户信息void update(User user); //基于id查询用户信息User findById(Integer id);

2、UserDAOMapper.xml

update t_usersetname = #{name},age = #{age},salary = #{salary},des = #{des}where id = #{id}selectid,name,age,salary,desfrom t_userwhere id = #{id}

3、service层
UserService类

//修改用户信息void update(User user); //基于id查询用户信息User findById(Integer id);

UserServiceImpl实现类

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

文章图片

测试成功！！！

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类

@Overridepublic 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用户列表内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！