【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容器配置
实现后台获取数据在前台显示
在上一篇文章中，用了一个十分简陋的界面实现登录注册的功能，本篇文章将会介绍怎样从后台获取数据库中的学生信息在前台显示；以及搜索学生信息的功能。
文章目录
前言
开发工具：HBuilderX、 IDEA、Maven、jdk1.8、Mysql。
一、页面实现
Student.vue
<template>
<div>
<el-row style="height: 700px;">
<search-bar @onSearch="searchResult" ref="searchBar"></search-bar>
<el-table :data="students" style="width: 100%">
<el-table-column label="学号" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.sno }}</span>
</template>
</el-table-column>
<el-table-column label="姓名" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.sname }}</span>
</template>
</el-table-column>
<el-table-column label="出生年月" width="180">
<template slot-scope="scope">
<i class="el-icon-time"></i>
<span style="margin-left: 10px">{{ scope.row.sbirthday }}</span>
</template>
</el-table-column>
<el-table-column label="年龄" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.sage }}</span>
</template>
</el-table-column>
<el-table-column label="家庭住址" width="180">
<template slot-scope="scope">
<span style="margin-left: 10px">{{ scope.row.saddress }}</span>
</template>
</el-table-column>
<el-table-column label="操作">
<template slot-scope="scope">
<el-button size="mini" @click="handleEdit(scope.row.sno)">编辑</el-button>
<el-button size="mini" type="danger" @click="handleDelete(scope.row.sno)">删除</el-button>
</template>
</el-table-column>
</el-table>
</el-row>
<el-row>
<el-pagination @current-change="handleCurrentChange" :current-page="currentPage" :page-size="pagesize" :total="students.length">
</el-pagination>
</el-row>
</div>
</template>
<script>
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)
}
})
}
}
}
</script>
编写一个搜索栏组件，并在Student.vue中引入
SearchBar.vue
<template>
<div style="margin-bottom: 30px;display: flex;justify-content: center;align-items: center">
<el-input
@keyup.enter.native="searchClick"
placeholder="输入学号或姓名进行搜索..."
prefix-icon="el-icon-search"
size="small"
style="width: 400px;margin-right: 10px"
v-model="keywords">
</el-input>
<el-button size="small" type="primary" icon="el-icon-search" @click="searchClick">搜索</el-button>
</div>
</template>
<script>
export default {
name: 'SearchBar',
data () {
return {
keywords: '',
books: [],
cardLoading: []
}
},
methods: {
searchClick () {
this.$emit('onSearch')
}
}
}
</script>
<style scoped>
</style>
注：在上面的界面中使用了 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
2.2、项目结构
创建SpringBoot项目vue-project02
2.3、创建实体
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、编写Controller
StudentController.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<Student> 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、编写Service
StudentService.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<Student> findAllStudents() {
return studentMapper.findAllStudents();
}
public List<Student> searchStudentsList(String keywords) {
return studentMapper.searchStudentsList(keywords);
}
}
2.7、编写Mapper
StudentMapper.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<Student> findAllStudents();
public List<Student> searchStudentsList(String keywords);
}
2.8、编写Mapper对应的xml文件
StudentMapper.xml
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
"http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.example.mapper.StudentMapper">
<select id="findAllStudents" resultType="Student">
select * from t_student
</select>
<select id="searchStudentsList" resultType="Student">
select * from t_student where sno like '%${keywords}%' or sname like '%${keywords}%'
</select>
</mapper>
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("*");
}
}
三、运行效果
总结
本篇文章创建了一个简单的学生信息表、实现了从后台获取数据后，在前台进行显示的功能；同时可以根据学号与姓名进行搜索的功能。希望能给予大家帮助。😊
1619
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
