本文档展示了一个使用Vue.js前端框架、SpringBoot后端框架、Axios进行数据交互、Oracle数据库存储的图书查询系统的实现。通过在pom.xml中添加Oracle驱动依赖，配置application.yml文件，以及设置Vue组件和axios请求，实现了图书信息的查询功能。当用户输入书名并点击按钮，系统会从后台获取数据并显示在表格中。如果未找到书籍，则会显示错误信息。
vue+springboot+axios+bootstrap+oracle
图书查询系统
springboot项目搭建好后：
在pom.xml里添加ojdbc6
<dependency>
<groupId>com.oracle</groupId>
<artifactId>ojdbc6</artifactId>
<version>11.2.0.3</version>
</dependency>
application.yml里配置：
server:
port: 258
servlet:
context-path: / #项目发布路径
spring:
#配置视图解析器
mvc: #引入mvc配置
view:
prefix: # / 默认代表根目录 src/main/webapp
suffix: .html
datasource:
driver-class-name: oracle.jdbc.driver.OracleDriver
url: jdbc:oracle:thin:@111.231.228.126:1521:array
username: array
password: 916437
webapp里添加bootstrap、axios、jquery、vue的引用文件
index.html内容如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="范佳鑫">
<meta name="Keywords" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0, user-scalable=no">
<title>axios测试</title>
<script src="js/jquery-1.8.3.js"></script>
<script src="js/axios.min.js"></script>
<script src="js/vue.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css" />
<style>
table {text-align: center;}
tr,td,th {text-align: center}
[v-cloak] {display: none; }
</style>
</head>
<body>
<div id="app">
<div >
<input class="input-large" type='text' v-model='a' placeholder='输入书名' @keyup.enter='huoqu()' />
<button class="btn" @click='huoqu()'>获取数据</button>
</div>
<br>
<!-- 对于v-if出现闪屏的情况,在style里加入[v-cloak]的样式 然后在使用v-if时加上v-cloak的命令 -->
<b v-show='showi' v-cloak>{{errorMessage}}</b>
<table style='width:100%' v-show='show' v-cloak class="table table-striped table-bordered table-hover table-condensed">
<tr>
<th style='padding-left:0px'>id</th>
<th style='padding-left:0px'>ISBN</th>
<th style='padding-left:0px'>书名</th>
<th style='padding-left:0px'>类型</th>
<th style='padding-left:0px'>作者</th>
</tr>
<tr >
<td style='padding-left:0px'>{{returnData.id}}</td>
<td style='padding-left:0px'>{{returnData.isbn}}</td>
<td style='padding-left:0px'>{{returnData.bookName}}</td>
<td style='padding-left:0px'>{{returnData.type}}</td>
<td style='padding-left:0px'>{{returnData.author}}</td>
</tr>
<tr>
<th style='padding-left:0px'>出版社</th>
<th style='padding-left:0px'>出版时间</th>
<th style='padding-left:0px'>价格</th>
<th style='padding-left:0px'>楼层</th>
<th style='padding-left:0px'>书架</th>
</tr>
<tr>
<td style='padding-left:0px'>{{returnData.publish}}</td>
<td style='padding-left:0px'>{{returnData.publishTime}}</td>
<td style='padding-left:0px'>{{returnData.price}}</td>
<td style='padding-left:0px'>{{returnData.floor}}</td>
<td style='padding-left:0px'>{{returnData.bookShelf}}</td>
</tr>
<tr><th style='padding-left:0px;'>简介</th><td colspan='9' style='text-align: left;padding-left:0px'>{{returnData.introduce}}</td></tr>
</table>
</div>
</body>
<script>
new Vue({
el:'#app',
data:{
a:'',
show:false,
showi:false,
returnData:{
id:'',
isbn:'',
bookName:'',
type:'',
author:'',
publish:'',
publishTime:'',
price:'',
floor:'',
bookShelf:'',
introduce:''
},
errorMessage:''
},
methods:{
huoqu(){
axios.get("/yz",{params:{name:this.a}})
.then(response=>{
console.log(response.data);
if(response.data){
this.returnData=response.data;
this.show=true;
this.showi=false;
}
if(!response.data){
this.errorMessage="图书馆暂时还没有上架这本书";
this.show=false;
this.showi=true;
}
})
.catch(error=>{
this.errorMessage="网不好 再试下";
this.show=false;
this.showi=true;
});
}
}
})
</script>
</html>
A.java：
@Controller
@RequestMapping("/")
public class A {
public String index() {
return "index";
}
@Autowired
private BookServiceImp bimp;
@ResponseBody
@RequestMapping("yz")
public BookInfo yz(String name) {
System.out.println(name);
BookInfo queryOne = bimp.queryOne(name);
return queryOne;
}
}
BookInfo.java：
@NoArgsConstructor
@AllArgsConstructor
public class BookInfo {
private Integer id;
private String isbn;
private String bookName;
private String type;
private String author;
private String publish;
private String publishTime;
private String price;
private String floor;
private String bookShelf;
private String introduce;
public Integer getId() {
return id;
}
public void setId(Integer id) {
this.id = id;
}
public String getIsbn() {
return isbn;
}
public void setIsbn(String isbn) {
this.isbn = isbn;
}
public String getBookName() {
return bookName;
}
public void setBookName(String bookName) {
this.bookName = bookName;
}
public String getType() {
return type;
}
public void setType(String type) {
this.type = type;
}
public String getAuthor() {
return author;
}
public void setAuthor(String author) {
this.author = author;
}
public String getPublish() {
return publish;
}
public void setPublish(String publish) {
this.publish = publish;
}
public String getPublishTime() {
return publishTime.substring(0,4)+"年"+publishTime.substring(5,7)+"月"+publishTime.substring(8,10)+"日";
}
public void setPublishTime(String publishTime) {
this.publishTime = publishTime;
}
public String getPrice() {
return price;
}
public void setPrice(String price) {
this.price = price;
}
public String getFloor() {
return floor;
}
public void setFloor(String floor) {
this.floor = floor;
}
public String getBookShelf() {
return bookShelf;
}
public void setBookShelf(String bookShelf) {
this.bookShelf = bookShelf;
}
public String getIntroduce() {
return introduce;
}
public void setIntroduce(String introduce) {
this.introduce = introduce;
}
@Override
public String toString() {
return "BookInfo [id=" + id + ", isbn=" + isbn + ", bookName=" + bookName + ", type=" + type + ", author="
+ author + ", publish=" + publish + ", publishTime=" + publishTime.substring(0,4)+"年"+publishTime.substring(5,7)+"月"+publishTime.substring(8,10)+"日, price=" + price + ", floor="
+ floor + ", bookShelf=" + bookShelf + ", introduce=" + introduce + "]";
}
}
BookService.java：
public interface BookService {
BookInfo queryOne(String name);
}
BookMapper.java：
@Mapper
public interface BookMapper {
@Select("select * from books where bookname=#{name}")
BookInfo queryOne(String name);
}
BookServiceImp.java：
@Service
public class BookServiceImp implements BookService{
@Autowired
private BookMapper bookMapper;
@Override
public BookInfo queryOne(String name) {
return bookMapper.queryOne(name);
}
访问：
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
