Vue案例
Vue案例
使用Vue简化品牌列表数据查询和添加功能
查询所有
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<a href="addBrand.html"><input type="button" value="新增"></a><br>
<hr>
<table id="brandTable" border="1" cellspacing="0" width="100%">
<tr>
<th>序号</th>
<th>品牌名称</th>
<th>企业名称</th>
<th>排序</th>
<th>品牌介绍</th>
<th>状态</th>
<th>操作</th>
</tr>
<!--
使用v-for遍历tr
-->
<tr v-for="(brand, i) in brands" align="center">
<td>{{i+1}}</td>
<td>{{brand.brandName}}</td>
<td>{{brand.companyName}}</td>
<td>{{brand.ordered}}</td>
<td>{{brand.description}}</td>
<td>{{brand.statusStr}}</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
<!-- <tr align="center">
<td>2</td>
<td>优衣库</td>
<td>优衣库</td>
<td>10</td>
<td>优衣库，服适人生</td>
<td>禁用</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>
<tr align="center">
<td>3</td>
<td>小米</td>
<td>小米科技有限公司</td>
<td>1000</td>
<td>为发烧而生</td>
<td>启用</td>
<td><a href="#">修改</a> <a href="#">删除</a></td>
</tr>-->
</table>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "\#app",
data() {
return {
brands: []
}
},
mounted() {
// 页面加载完成后，发送异步请求，查询数据
var _this = this;
axios({
method: "get",
url: "http://localhost:8080/brand-demo-ajax/selectAllServlet"
}).then(function (resp) {
_this.brands = resp.data;
});
}
});
/*// 1. 当前页面加载完成后，发送ajax请求
window.onload = function (){
// 2. 发送ajax请求
axios({
method: "get",
url:"http://localhost:8080/brand-demo-ajax/selectAllServlet"
}).then(function (resp){
// 获取数据
let brands = resp.data;
let tableData = "<tr>\n" +
" <th>序号</th>\n" +
" <th>品牌名称</th>\n" +
" <th>企业名称</th>\n" +
" <th>排序</th>\n" +
" <th>品牌介绍</th>\n" +
" <th>状态</th>\n" +
" <th>操作</th>\n" +
" </tr>";
for (let i = 0; i < brands.length; i++) {
let brand = brands[i];
tableData +="<tr align=\"center\">\n" +
" <td>"+(i+1)+"</td>\n" +
" <td>"+brand.brandName+"</td>\n" +
" <td>"+brand.companyName+"</td>\n" +
" <td>"+brand.ordered+"</td>\n" +
" <td>"+brand.description+"</td>\n" +
" <td>"+brand.status+"</td>\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">删除</a></td>\n" +
" </tr>";
}
// 设置表格数据
document.getElementById("brandTable").innerHTML = tableData;
});
}*/
</script>
</body>
</html>
新增品牌
代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加品牌</title>
</head>
<body>
<div id="app">
<h3>添加品牌</h3>
<form action="" method="post">
品牌名称：<input id="brandName" v-model="brand.brandName" name="brandName"><br>
企业名称：<input id="companyName" v-model="brand.companyName" name="companyName"><br>
排序：<input id="ordered" v-model="brand.ordered" name="ordered"><br>
描述信息：<textarea rows="5" cols="20" id="description" v-model="brand.description" name="description"></textarea><br>
状态：
<input type="radio" name="status" v-model="brand.status" value="0">禁用
<input type="radio" name="status" v-model="brand.status" value="1">启用<br>
<input type="button" id="btn" @clike="submitForm" value="提交">
</form>
</div>
<script src="js/axios-0.18.0.js"></script>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "\#app",
data(){
return{
brand:{}
}
},
methods:{
submitForm(){
// 发送ajax请求，完成添加的功能
var _this = this
axios({
method:"post",
url:"http://localhost:8080/brand-demo-ajax/addServlet",
data:_this.brand
}).then(function (resp){
// 3. 判断响应数据是否为success
if (resp.data == "success"){
location.href = "http://localhost:8080/brand-demo-ajax/brand.html"
}
})
}
}
});
/*// 1. 给按钮绑定单击事件
document.getElementById("btn").onclick = function (){
// 将表单的数据转为JSON
var formData = {
brandName: "",
companyName:"",
ordered: "",
description: "",
status: ""
};
// 获取表单数据
let brandName = document.getElementById("brandName").value;
// 设置数据
formData.brandName = brandName;
// 获取表单数据
let companyName = document.getElementById("companyName").value;
// 设置数据
formData.companyName = companyName;
// 获取表单数据
let ordered = document.getElementById("ordered").value;
// 设置数据
formData.ordered = ordered;
// 获取表单数据
let description = document.getElementById("description").value;
// 设置数据
formData.description = description;
let status = document.getElementsByName("status");
for (let i = 0; i < status.length; i++) {
if (status[i].checked){
//
formData.status = status[i].value;
}
}
console.log(formData);
// 2. 发送ajax请求
axios({
method:"post",
url:"http://localhost:8080/brand-demo-ajax/addServlet",
data:formData
}).then(function (resp){
// 3. 判断响应数据是否为success
if (resp.data == "success"){
location.href = "http://localhost:8080/brand-demo-ajax/brand.html"
}
})
}*/
</script>
</body>
</html>