Vue+SpringBoot（二）实现后台获取数据在前台显示 |
您所在的位置：网站首页 › 前端怎么获取数据渲染页面 › Vue+SpringBoot（二）实现后台获取数据在前台显示 |
Vue+SpringBoot（二）实现后台获取数据在前台显示
|
【SpringBoot总结】历史文章 SpringBoot总结（一）——第一个SpringBoot项目 SpringBoot总结（二）——Spring Boot的自动配置 SpringBoot总结（三）——SpringBoot的配置文件 SpringBoot总结（四）——@Value和@ConfigurationProperties的区别 SpringBoot总结（五）——@PropertySource注解与@ImportResource注解 SpringBoot总结（六）——SpringBoot配置文件占位符 SpringBoot总结（七）——Profile的使用 SpringBoot总结（八）——配置文件的加载位置 SpringBoot总结（九）——@Conditional注解与自动配置报告 SpringBoot总结（十）——SpringBoot+Mybatis实现数据库的CRUD(从创建到实现【超详细附代码】) SpringBoot总结（十一）——SpringBoot的静态资源映射规则 SpringBoot总结（十二）——登录界面的实现 SpringBoot总结（十三）——修改嵌入式Servlet容器配置 实现后台获取数据在前台显示在上一篇文章中，用了一个十分简陋的界面实现登录注册的功能，本篇文章将会介绍怎样从后台获取数据库中的学生信息在前台显示；以及搜索学生信息的功能。 文章目录 实现后台获取数据在前台显示前言一、页面实现1.1、 Element的简单使用 二、后端的实现2.1、数据库表结构2.2、项目结构2.3、创建实体2.4、结果集的封装2.5、编写Controller2.6、编写Service2.7、编写Mapper2.8、编写Mapper对应的xml文件2.9、配置文件2.10、解决跨域问题 三、运行效果总结 前言开发工具：HBuilderX、 IDEA、Maven、jdk1.8、Mysql。 一、页面实现Student.vue {{ scope.row.sno }} {{ scope.row.sname }} {{ scope.row.sbirthday }} {{ scope.row.sage }} {{ scope.row.saddress }} 编辑 删除 import SearchBar from './SearchBar' export default { name: 'Students', components: { SearchBar }, data() { return { students: [], currentPage: 1, pagesize: 18 } }, mounted: function() { this.loadStudents() }, methods: { loadStudents() { var _this = this this.$axios.get('/student/findAllStudents').then(resp => { if (resp.data.code === 200) { _this.students = resp.data.data } }) }, handleCurrentChange: function(currentPage) { this.currentPage = currentPage }, searchResult() { var _this = this // alert(this.$refs.searchBar.keywords) //测试输入框中的内容 this.$axios //向后端发送数据 .get('/student/search?keywords=' + this.$refs.searchBar.keywords, {}).then(resp => { if (resp && resp.data.code === 200) { _this.students = resp.data.data } }) }, //编辑 handleEdit(sno) { console.log(sno); this.$router.push({path:'/EditStudent',query:{sno:sno}}); }, //删除 handleDelete(sno) { var _this = this this.$axios //向后端发送数据I .post('/student/delete?sno=' + sno, {}).then(resp => { if (resp && resp.data.code === 200) { _this.students = resp.data.data //重新刷新数据 this.$message.warning(resp.data.message) } }) } } }编写一个搜索栏组件，并在Student.vue中引入 SearchBar.vue 搜索 export default { name: 'SearchBar', data () { return { keywords: '', books: [], cardLoading: [] } }, methods: { searchClick () { this.$emit('onSearch') } } }注：在上面的界面中使用了 Element组件，可以使我们的界面更加的美观； 1.1、 Element的简单使用Element官方链接地址：http://element-cn.eleme.io/#/zh-CN 安装方法： 用cd命令进入项目文件夹下。执行命令：npm i element-ui -S在main.js文件中引入Element import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 二、后端的实现后端同样使用了SpringBoot与Mybatis的整合来进行操作数据库。 2.1、数据库表结构表名为t_student
创建SpringBoot项目vue-project02
Student.java package com.example.entity; /** * @author 2017810402084 */ public class Student { private int sno; private String sname; private String sage; private String sbirthday; private String saddress; public int getSno() { return sno; } public void setSno(int sno) { this.sno = sno; } public String getSname() { return sname; } public void setSname(String sname) { this.sname = sname; } public String getSage() { return sage; } public void setSage(String sage) { this.sage = sage; } public String getSbirthday() { return sbirthday; } public void setSbirthday(String sbirthday) { this.sbirthday = sbirthday; } public String getSaddress() { return saddress; } public void setSaddress(String saddress) { this.saddress = saddress; } } 2.4、结果集的封装Result.java package com.example.response; /** * @author 2017810402084 */ public class Result { private int code; private String message; private Object data; public Result() { } public Result(int code, String message, Object data) { this.code = code; this.message = message; this.data = data; } public int getCode() { return code; } public void setCode(int code) { this.code = code; } public String getMessage() { return message; } public void setMessage(String message) { this.message = message; } public Object getData() { return data; } public void setData(Object data) { this.data = data; } }ResultCode.java package com.example.response; /** * @author 2017810402084 */ public enum ResultCode { SUCCESS(200), FAIL(400), UNAUTHORIZED(401), NOT_FOUND(404), INTERNAL_SERVER_ERROR(500); public int code; ResultCode(int code) { this.code = code; } }ResultFactory.java package com.example.response; /** * @author 2017810402084 */ public class ResultFactory { public static Result buildSuccessResult(Object data) { return buildResult(ResultCode.SUCCESS, "成功", data); } public static Result buildFailResult(String message) { return buildResult(ResultCode.FAIL, message, null); } public static Result buildResult(ResultCode resultCode, String message, Object data) { return buildResult(resultCode.code, message, data); } public static Result buildResult(int resultCode, String message, Object data) { return new Result(resultCode, message, data); } } 2.5、编写ControllerStudentController.java package com.example.controller; import com.example.entity.Student; import com.example.response.Result; import com.example.response.ResultFactory; import com.example.service.StudentService; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.web.bind.annotation.*; import java.util.List; /** * @author 2017810402084 */ @RestController @RequestMapping("/student") @CrossOrigin public class StudentController { @Autowired private StudentService studentService; @CrossOrigin @RequestMapping(value = "/findAllStudents", method = RequestMethod.GET) public Result findAllStudentsList() { List booksList = studentService.findAllStudents(); return ResultFactory.buildSuccessResult(booksList); } @CrossOrigin @RequestMapping(value = "/search", method = RequestMethod.GET) public Result searchBooksList(@RequestParam String keywords) { if ("".equals(keywords)) { return ResultFactory.buildSuccessResult(studentService.findAllStudents()); } else { return ResultFactory.buildSuccessResult(studentService.searchStudentsList(keywords)); } } } 2.6、编写ServiceStudentService.java package com.example.service; import com.example.entity.Student; import com.example.mapper.StudentMapper; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import java.util.List; /** * @author 2017810402084 */ @Service public class StudentService { @Autowired private StudentMapper studentMapper; public List findAllStudents() { return studentMapper.findAllStudents(); } public List searchStudentsList(String keywords) { return studentMapper.searchStudentsList(keywords); } } 2.7、编写MapperStudentMapper.java package com.example.mapper; import com.example.entity.Student; import org.apache.ibatis.annotations.Mapper; import java.util.List; /** * @author 2017810402084 */ @Mapper public interface StudentMapper { public List findAllStudents(); public List searchStudentsList(String keywords); } 2.8、编写Mapper对应的xml文件StudentMapper.xml select * from t_student select * from t_student where sno like '%${keywords}%' or sname like '%${keywords}%' 2.9、配置文件application.properties #配置端口号 server.port=8082 spring.datasource.username=root spring.datasource.password=123 spring.datasource.url=jdbc:mysql://localhost:3306/vue-project02?serverTimezone=UTC&useUnicode=true&characterEncoding=utf-8&serverTimezone=Asia/Shanghai spring.datasource.driver-class-name=com.mysql.jdbc.Driver spring.thymeleaf.cache=false mybatis.type-aliases-package=com.example.entity mybatis.mapper-locations=classpath:mybatis/mapper/*.xml 2.10、解决跨域问题下面是用配置类的方式。 package com.example.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; //解决跨域问题 @Configuration public class MyConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("*") .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") .allowCredentials(true) .maxAge(3600) .allowedHeaders("*"); } } 三、运行效果
本篇文章创建了一个简单的学生信息表、实现了从后台获取数据后，在前台进行显示的功能；同时可以根据学号与姓名进行搜索的功能。希望能给予大家帮助。😊 |
【本文地址】
公司简介
联系我们
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |