Vue结合Springboot如何实现用户列表单页面
Vue结合Springboot如何实现用户列表单页面
本篇内容主要讲解“Vue结合Springboot如何实现用户列表单页面”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Vue结合Springboot如何实现用户列表单页面”吧!
1、前端html页面编写
页面:
代码:
<!DOCTYPEhtml><html><head><metacharset="UTF-8"><title>vue系列课程</title><!--最新版本的Bootstrap核心CSS文件--><linkrel="stylesheet"href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"rel="externalnofollow"></head><body><divid="app"><div><!--标题行--><div><divclass="col-sm-6col-sm-offset-3"><h1>用户列表</h1></div></div><!--数据行--><div><divclass="col-sm-10col-sm-offset-1"><!--添加按钮--><ahref=""class="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"btn-successbtn-sm">添加</a><!--列表--><tableclass="tabletable-stripedtable-bordered"style="margin-top:10px;"><tr><td>编号</td><td>姓名</td><td>工资</td><td>年龄</td><td>个人简介</td><td>操作</td></tr><trv-for="userinusers"><td>{{user.id}}</td><td>{{user.name}}</td><td>{{user.salary}}</td><td>{{user.age}}</td><td>{{user.description}}</td><td><ahref=""class="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"btnbtn-dangerbtn-sm">删除</a><ahref=""class="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"btnbtn-infobtn-sm">修改</a></td></tr></table><!--添加和修改表单--><form><div><label>编号</label><div><p>0001</p></div></div><div><labelfor="name">姓名</label><inputtype="text"id="name"placeholder="请输入姓名"></div><div><labelfor="salary">工资</label><inputtype="text"id="salary"placeholder="请输入工资"></div><div><labelfor="age">年龄</label><inputtype="text"id="age"placeholder="请输入年龄"></div><div><labelfor="description">个人简介</label><inputtype="text"id="description"placeholder="请输入个人简介"></div><buttontype="submit"class="btnbtn-primary">Submit</button></form></div></div></div></div></body></html><!--引入axios--><scriptsrc="js/axios.min.js"></script><!--引入vue--><scriptsrc="js/vue.js"></script><script>varapp=newVue({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
packagecom.xiao;importorg.springframework.boot.SpringApplication;importorg.springframework.boot.autoconfigure.SpringBootApplication;@SpringBootApplicationpublicclassAdminApplication{publicstaticvoidmain(String[]args){SpringApplication.run(AdminApplication.class,args);}}
4、测试
2.2、连接数据库
1、创建vue_day3
数据库
CREATETABLEt_user(idINT(6)PRIMARYKEYAUTO_INCREMENT,NAMEVARCHAR(40),salaryDOUBLE(7,2),ageINT(3),desVARCHAR(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#整合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、项目完整依赖
<?xmlversion="1.0"encoding="UTF-8"?><projectxmlns="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.0http://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、编写entity层
创建user
实体类
packagecom.xiao.entity;publicclassUser{privateIntegerid;privateStringname;privateDoublesalary;privateIntegerage;privateStringdes;publicUser(){}publicUser(Integerid,Stringname,Doublesalary,Integerage,Stringdes){this.id=id;this.name=name;this.salary=salary;this.age=age;this.des=des;}publicIntegergetId(){returnid;}publicvoidsetId(Integerid){this.id=id;}publicStringgetName(){returnname;}publicvoidsetName(Stringname){this.name=name;}publicDoublegetSalary(){returnsalary;}publicvoidsetSalary(Doublesalary){this.salary=salary;}publicIntegergetAge(){returnage;}publicvoidsetAge(Integerage){this.age=age;}publicStringgetDes(){returndes;}publicvoidsetDes(Stringdes){this.des=des;}@OverridepublicStringtoString(){return"User{"+"id="+id+",name=""+name+"""+",salary="+salary+",age="+age+",des=""+des+"""+"}";}}
4、查询用户信息
4.1、后端代码编写
1、UserDAO
编写
packagecom.xiao.dao;importcom.xiao.entity.User;importjava.util.List;publicinterfaceUserDAO{//查询所有用户信息List<User>findAll();}
2、UserDAOMapper.xml
编写
在resources
下创建如下目录
代码:
<?xmlversion="1.0"encoding="UTF-8"?><!DOCTYPEmapperPUBLIC"-//mybatis.org//DTDMapper3.0//EN""http://mybatis.org/dtd/mybatis-3-mapper.dtd"><mappernamespace="com.xiao.dao.UserDAO"><!--findAll--><selectid="findAll"resultType="User">selectid,name,salary,age,desfromt_user;</select></mapper>
3、service
层编写
UserService
接口
packagecom.xiao.service;importcom.xiao.entity.User;importjava.util.List;publicinterfaceUserService{//查询所有用户方法List<User>findAll();}
UserServiceImpl
实现类
packagecom.xiao.service;importcom.xiao.dao.UserDAO;importcom.xiao.entity.User;importorg.springframework.beans.factory.annotation.Autowired;importorg.springframework.stereotype.Service;importorg.springframework.transaction.annotation.Propagation;importorg.springframework.transaction.annotation.Transactional;importjava.util.List;@Service//代表这是一个业务层组件作用:用来在spring工厂中创建一个userServiceImpl对象@Transactional//代表给类中所有的方法加入事务控制publicclassUserServiceImplimplementsUserService{@AutowiredprivateUserDAOuserDAO;@Override@Transactional(propagation=Propagation.SUPPORTS)//方法上声明事务注解publicList<User>findAll(){returnuserDAO.findAll();}}
4、进行test
测试
BasicTest
类
packagecom.xiao.test;importcom.xiao.AdminApplication;importorg.junit.runner.RunWith;importorg.springframework.boot.test.context.SpringBootTest;importorg.springframework.test.context.junit4.SpringRunner;@SpringBootTest(classes=AdminApplication.class)//指定入口类@RunWith(SpringRunner.class)//启动工厂publicclassBasicTest{}
TestUserService
类
packagecom.xiao.test;importcom.xiao.service.UserService;importorg.junit.Test;importorg.springframework.beans.factory.annotation.Autowired;publicclassTestUserServiceextendsBasicTest{@AutowiredprivateUserServiceuserService;@TestpublicvoidfindAll(){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
代码:
varapp=newVue({el:"#app",data:{msg:"vue生命周期",users:[],//定义一个users空数组,用来存贮所有用户的信息},methods:{},computed:{},created(){//执行datamethodscomputed等完成注入和校验//发送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<User>findAll();
2、UserDAOMapper.xml
<!--save--><insertid="save"parameterType="User"useGeneratedKeys="true"keyProperty="id">insertintot_uservalues(#{id},#{name},#{salary},#{age},#{des})</insert>
使用mysql
自增长序列,新插入一条数据时,怎么得到主键?
加入以下属性即可:
useGeneratedKeys=“true” keyProperty=“id”
useGeneratedKeys 取值范围true、false 默认值是:false。 含义:设置是否使用JDBC的getGenereatedKeys方法获取主键并赋值到keyProperty设置的领域模型属性中。
keyProperty 取id的key值,主要是在主键是自增的情况下,添加成功后可以直接使用主键值,其中keyProperty的值是对象的属性值,不是数据库表中的字段名。
3、service
层编写
UserService
类
//保存用户信息voidsave(Useruser);
UserServiceImpl
类
@Overridepublicvoidsave(Useruser){userDAO.save(user);}
4、UserController
控制类、
//添加员工信息接口@PostMapping("saveOrUpdate")publicvoidsaveOrUpdate(@RequestBodyUseruser){System.out.println(user);userService.save(user);}
5.2、前端代码编写
1、form
表单中添加v-model
双向绑定
</div><div><labelfor="name">姓名</label><inputtype="text"v-model="user.name"id="name"placeholder="请输入姓名"></div><div><labelfor="salary">工资</label><inputtype="text"v-model="user.salary"id="salary"placeholder="请输入工资"></div><div><labelfor="age">年龄</label><inputtype="text"v-model="user.age"id="age"placeholder="请输入年龄"></div><div><labelfor="description">个人简介</label><inputtype="text"v-model="user.des"id="description"placeholder="请输入个人简介"></div><buttontype="button"class="btnbtn-primarybtn-block"@click="saveOrUpdate">提交</button>
2、给提交按钮绑定saveOrUpdate
方法
varapp=newVue({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
类
//更新用户信息voidupdate(Useruser);//基于id查询用户信息UserfindById(Integerid);
2、UserDAOMapper.xml
<!--update--><updateid="update"parameterType="User">updatet_usersetname=#{name},age=#{age},salary=#{salary},des=#{des}whereid=#{id}</update><!--findById--><selectid="findById"parameterType="Integer"resultType="User">selectid,name,age,salary,desfromt_userwhereid=#{id}</select>
3、service
层
UserService
类
//修改用户信息voidupdate(Useruser);//基于id查询用户信息UserfindById(Integerid);
UserServiceImpl
实现类
@Overridepublicvoidupdate(Useruser){userDAO.update(user);}@Override@Transactional(propagation=Propagation.SUPPORTS)//方法上声明事务注解Propagation:事务传播属性支持事务publicUserfindById(Integerid){returnuserDAO.findById(id);}
4、control
层
在这里我们要根据前端请求的参数进行判断。如果前端请求的参数中id
为空,说明是添加操作,否则是更新操作,我们执行相对应的代码。
//添加员工信息接口@PostMapping("saveOrUpdate")publicvoidsaveOrUpdate(@RequestBodyUseruser){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查询用户信息事件
<ahref=""class="rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"rel="externalnofollow"btnbtn-infobtn-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、给提交按钮绑定修改或者添加用户信息事件
<buttontype="button"class="btnbtn-primarybtn-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、测试一下
测试成功!!!
7、删除用户信息
7.1、后端代码
1、UserDAO
接口
//基于id删除用户信息voiddelete(Integerid);
2、UserDAOMapper.xml
<!--delete--><deleteid="delete"parameterType="Integer">deletefromt_userwhereid=#{id}</delete>
3、service
层
UserService
类
//根据id删除用户信息voiddelete(Integerid);
UserServiceImpl
类
@Overridepublicvoiddelete(Integerid){userDAO.delete(id);}
4、controller
类
//根据id删除用户信息的接口@DeleteMapping("delete/{id}")publicvoiddelete(@PathVariableIntegerid){userService.delete(id);}
7.2、前端代码
1、给删除按钮绑定删除事件
<ahref="javascript:;"rel="externalnofollow"class="btnbtn-dangerbtn-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、测试一下
到此,相信大家对“Vue结合Springboot如何实现用户列表单页面”有了更深的了解,不妨来实际操作一番吧!这里是恰卡编程网网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
推荐阅读
-
vue动态添加删除输入框(springboot vue怎么让数据库显示出来)
springbootvue怎么让数据库显示出来?一般情况下是前端调阅后端接口,来获取到数据库的数据,后端哪里会把数据库的数据整理...
-
vue表格组件教程学习(vue proxytable只能在开发环境跨域吗)
vueproxytable只能在开发环境跨域吗?跨域问题来源于JavaScript的同源策略,即只有协议主机名端口号(如...
-
Vue组件的自定义事件和全局事件总线怎么使用
-
vue中消息订阅与发布如何使用
vue中消息订阅与发布如何使用这篇文章主要介绍“vue中消息订阅与...
-
Vue显示图片的方式有哪些
-
vue引入静态jquery报错如何解决
vue引入静态jquery报错如何解决这篇文章主要介绍“vue引入...
-
springboot实现基于aop的切面日志
本文实例为大家分享了springboot实现基于aop的切面日志的具体代码,供大家参考,具体内容如下通过aop的切面方式实现日志...
-
SpringBoot定时任务功能怎么实现
-
SpringBoot中的@Import注解怎么使用
-
vue-cropper怎么实现裁剪图片