大橙子网站建设,新征程启航
为企业提供网站建设、域名注册、服务器等服务
本篇内容主要讲解“Vue结合Springboot如何实现用户列表单页面”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue结合Springboot如何实现用户列表单页面”吧!
10年积累的成都网站设计、做网站经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先做网站设计后付款的网站建设流程,更有屏边免费网站建设让你可以放心的选择与我们合作。
页面:
代码:
vue系列课程
我们将html页面放到如下位置:
js目录下存放vue和axios资源文件。
1、新建maven
项目,取名为vue_day3_admin
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、测试
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,并选择要连接的数据库。
4.2、设置时区为UTC
5、启动测试一下
没有任何问题。
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
创建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 + """ + "}"; } }
1、UserDAO
编写
package com.xiao.dao; import com.xiao.entity.User; import java.util.List; public interface UserDAO { //查询所有用户信息 ListfindAll(); }
2、UserDAOMapper.xml
编写
在resources
下创建如下目录
代码:
3、service
层编写
UserService
接口
package com.xiao.service; import com.xiao.entity.User; import java.util.List; public interface UserService { //查询所有用户方法 ListfindAll(); }
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 ListfindAll() { 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)); } }
测试成功!!!
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、测试
测试成功!!!
1、UserDAO
接口层
//查询所有用户信息 ListfindAll();
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); }
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、测试一下
测试成功!!!
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}
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); } }
我们点击修改按钮,显示用户信息。
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、测试一下
测试成功!!!
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); }
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如何实现用户列表单页面”有了更深的了解,不妨来实际操作一番吧!这里是创新互联网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!