1.html部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
<script src="vue.min.js"></script>
<link rel="stylesheet" href="showstu.css">
<script src="axios.js"></script>
</head>
<body>
<div id="app">
<div class="insert">
<div v-show="show1">
学号:<input type="text" v-model="adddata.id"><br>
姓名:<input type="text" v-model="adddata.name"><br>
年龄:<input type="text" v-model="adddata.age"><br>
爱好:<input type="text" v-model="adddata.hobit"><br>
<button @click="add()">提交</button>
</div>
<div class="update" v-show="show">
学号:<input type="text" v-model="adddata.id"><br>
姓名:<input type="text" v-model="adddata.name"><br>
年龄:<input type="text" v-model="adddata.age"><br>
爱好:<input type="text" v-model="adddata.hobit"><br>
<button @click="updateok()">更新数据</button>
</div>
</div>
<table class="table">
<tr class="tr">
<th>ID</th>
<th>姓名</th>
<th>年龄</th>
<th>爱好</th>
<th>操作一</th>
<th>操作二</th>
</tr>
<tr v-for="(value,index) in msg">
<td class="td">{{msg[index].id}}</td>
<td>{{msg[index].name}}</td>
<td>{{msg[index].age}}</td>
<td>{{msg[index].hobit}}</td>
<td><a href="#" @click="del(index)">删除</a></td>
<td><a href="#" @click="update(index)">更新</a></td>
</tr>
</table>
</div>
<script src="showstu.js"></script>
</body>
</html>
2.css美化部分
*{
margin: 0;
padding: 0;
}
body {
background-color: #FFF0F5;
background-size: cover;
}
body a {
color: #03515d;
text-decoration: none;
}
.table th:nth-child(even) {
background-color: #D1BBFF;
}
.table th:nth-child(odd) {
background-color: #E8CCFF;
}
.table{
margin-top: 50px;
margin-right:255px;
border: 1px dashed #E8CCFF;
width: 50%;
height: 305px;
overflow-x: hidden;
overflow-y: auto;
font-size: 22px;
border-collapse: collapse;
text-align: center;
float: right;
}
.table td:hover {
background-color: #FFDEAD;
}
.tr{
border-collapse: collapse;
height: 60px;
background: url("./tab/images/bg.gif");
border: 2px dashed #E8CCFF;
text-align: center;
font-size: 20px;
}
.td {
height: 40px;
word-wrap: break-word;
max-width: 300px;
text-align: center;
vertical-align: middle;
border: 2px dashed #E8CCFF;
}
.insert{
margin: 10px;
float: left;
font-size: 20px;
line-height: 70px;
letter-spacing:3px;
}
3.js部分
new Vue({
el:'#app',
data(){
return{
msg :null,
adddata:{
id:"",
name:"",
age:"",
hobit:""
},
show:false,
show1:true,
index1:""
}
},
mounted(){
axios
.get('/servletstudy_war_exploded/vueStu')
.then(response=>(this.msg = response.data))
.catch(function (error) {
console.log(error);
});
},
methods:{
del:function(index){
if(confirm("确定删除吗")){
this.msg.splice(index,1);
}
},
update:function(index){
this.show=true;
this.show1=false;
let data1={};
data1={...this.msg[index]};
this.adddata=data1;
this.index1=index;
},
updateok:function(){
this.msg[this.index1]=this.adddata;
this.show1=true;
this.show=false;
this.adddata={};
},
add:function(){
if (this.adddata.name==""||this.adddata.age=="") {
alert("数据不完整");
return;
}
let data={};
data={...this.adddata};
this.msg.push(data);
this.adddata.id="";
this.adddata.name="";
this.adddata.age="";
this.adddata.hobit="";
}
}
})
4.后端部分
@WebServlet("/vueStu")
public class VueTest extends HttpServlet {
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
}
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
resp.setContentType("text/html;charset=utf-8");
resp.setContentType("application/json");
List<VueStu> vueStus = JdbcTools3.queryBeanList("select * from vuestu", VueStu.class);
String res = JSON.toJSONString(vueStus);
System.out.println("后端json格式的字符串 = " + res);
PrintWriter writer = resp.getWriter();
writer.write(res);
writer.flush();
writer.close();
}
}
5.更多操作知识
在下方附有菜鸟教程网址,其中有关于vue更多操作的详细讲解,想了解的可以多看看