javaweb用eclipse连接数据库后，表格不出现
问题遇到的现象和发生背景
不显示名字，只显示代码
问题相关代码，请勿粘贴截图
<div id="addBook">
<table class="table">
<tr>
<td colspan="2">信息管理系统-书籍新增</td>
</tr>
<tr>
<td>书名</td>
<td>
<input type="text" v-model = "book.bookName" class="form-control" >
</td>
</tr>
<tr>
<td>作者</td>
<td>
<input type="text" v-model = "book.author" class="form-control">
</td>
</tr>
<tr>
<td>大类</td>
<td>
<select v-model="book.daLeiId" @change="changeDaLei">
<option v-for="daLei in daLeis" v-bind:value="daLei.id">
{{ daLei.name }}
</option>
</select>
</td>
</tr>
<tr>
<td>小类</td>
<td>
<select v-model="book.xiaoLeiId" >
<option v-for="xiaoLei in xiaoLeis" v-bind:value="xiaoLei.id">
{{ xiaoLei.name }}
</option>
</select>
</td>
</tr>
<tr>
<td>价格</td>
<td>
<input type="number" v-model = "book.price" class="form-control">
</td>
</tr>
<!-- <tr>
<td>入库时间</td>
<td>
<input type="datetime" v-model = "book.enterTime" class="form-control" >
</td>
</tr> -->
<!-- <tr>
<td>出库时间</td>
<td>
<input type="datetime" v-model = "book.outDate" class="form-control" name="weight">
</td>
</tr>
<tr>
<td>备注</td>
<td>
<input type="text" v-model = "book.temp" class="form-control" >
</td>
</tr>
<tr>
<td>状态</td>
<td>
<!-- <input type="text" readonly="readonly" v-model="bookTemp.status" class="form-control" > -->
<!-- <select v-model="book.status" >
<option v-for="s in ss" v-bind:value="s.id">
{{ s.name }}
</option>
</select>
</td> -->
</tr>
<tr>
<td colspan="2">
<button type="button" class="btn btn-primary" @click="editBook()">添加</button>
<a class="btn btn-primary" href="javascript:history.go(-1)">后退</a>
</td>
</tr>
</table>
</div>
</body>
<script>
let v=new Vue({
data:{
ss:[
{id:1,name:'在库'},
{id:2,name:'借出'},
{id:3,name:'废弃'}
],
bookTemp:{
id: 0,
name:'',
authro:'',
daLeiName:'',
xiaoLeiName:'',
price:0,
enterTime:'',
status: '',
outDate: '',
temp: ''
},
book:{
bookName: undefined,
author: undefined,
daLeiId: undefined,
xiaoLeiId: undefined,
price: undefined
},
bookName:'',
daLeis:[
{
id:1,
name: '11'
},
{
id:2,
name: '12'
},
{
id:3,
name: '13'
}
],
xiaoLeis:[
],
daLeiId: '',
xiaoLeiId:'',
bookId: ''
// daLeis:[]
},
created() {
this.queryDaLei();
// this.query();
// this.bookId = ${requestScope.bookId};
// console.log(this.bookId)
},
methods:{
query:function(){
axios.get("/proForC1/BookManage", {params:{
method: 'bookId'
}}).then(rs=>{
console.log(rs.data)
this.book = rs.data
this.bookTemp.id = rs.data.id;
this.bookTemp.name = rs.data.bookName;
this.bookTemp.author = rs.data.author;
this.bookTemp.daLeiName = rs.data.daLei.name;
this.bookTemp.xiaoLeiName = rs.data.xiaoLei.name;
this.bookTemp.price = rs.data.price;
this.bookTemp.enterTime = rs.data.enterTime;
this.bookTemp.outDate = rs.data.outDate;
if(rs.data.status==1){
this.bookTemp.status = '在库'
}else if(rs.data.status==2){
this.bookTemp.status = '借出'
}else{
this.bookTemp.status = '废弃'
}
this.bookTemp.temp= rs.data.temp
// if(rs.data.LoginState&&rs.data.statusdesc=="登陆成功"){
// location.href="./bookshop-info.html";
// }else{
// this.errorMsg = "密码错误！";
// }
});
},
editBook(){
console.log(typeof this.book.author)
if(this.book.author===undefined || this.book.bookName === undefined || this.book.daLeiId === undefined ||
this.book.xiaoLeiId === undefined || this.book.price === undefined ){
alert("请正确填写信息！")
}else{
if(confirm("确定添加该记录？")){
console.log(this.book)
axios.get("/proForC1/BookManage", {params:{
method: 'addBookR',
book: JSON.stringify(this.book)
}}).then(rs=>{
alert("添加成功")
location.reload()
});
}
}
},
deleteBook(id){
if(confirm("确定要删除该记录？")){
axios.get("/proForC1/BookManage", {params:{
method: 'delete',
bookId: id
}}).then(rs=>{
this.query();
});
}
},
addBook:function(){
axios.get("/proForC1/BookManage", {params:{
method: 'add',
}});
},
queryDaLei:function(){
axios.get("/proForC1/LeiManage", {params:{
method: 'query',
}}).then(rs=>{
console.log(rs.data)
this.daLeis = rs.data
// if(rs.data.LoginState&&rs.data.statusdesc=="登陆成功"){
// location.href="./bookshop-info.html";
// }else{
// this.errorMsg = "密码错误！";
// }
});
},
changeDaLei(){
this.daLeis.forEach(daLei=>{
if(daLei.id==this.book.daLeiId){
this.xiaoLeis = daLei.xiaoLeis;
console.log(daLei.xiaoLeis);
return;
}
})
}
},
}).$mount("#addBook");
</script>
我想要达到的结果
这种还用问吗？右键审查元素，console控制台肯定报错，你这很可能是vue.js并没有成功引入，注意一下路径问题即可解决