- 首页 > 生活百科 > >
Vue前端框架基础+Element的使用( 三 )
修改视图
<div id="app"><a href="https://www.huyubaike.com/biancheng/addBrand.html"><input type="button" value="https://www.huyubaike.com/biancheng/新增"></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><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.status}}</td><td><a href="https://www.huyubaike.com/biancheng/#">修改</a> <a href="https://www.huyubaike.com/biancheng/#">删除</a></td></tr></table></div>完整代码展示
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="app"><a href="https://www.huyubaike.com/biancheng/addBrand.html"><input type="button" value="https://www.huyubaike.com/biancheng/新增"></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><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.status}}</td><td><a href="https://www.huyubaike.com/biancheng/#">修改</a> <a href="https://www.huyubaike.com/biancheng/#">删除</a></td></tr></table></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/js/axios-0.18.0.js"></script><script>new Vue({el:"#app",data(){return{// 注意此处为数组brands:[]}},// 当前页面加载完成后发送AJAX请求，查询数据mounted(){// Axios无法直接使用原生的thisvar _this = this;axios({method: "get",url: "http://localhost:8080//brand-demo-ajax/selectAll"}).then(function (resp) {// 接收后台给到的数据，为JSON串，可自动反序列化为JavaScriptObjects_this.brands = resp.data;})}})</script></body></html>1.5.3 添加功能1.5.3.1 实现方式
- 点击提交按钮，发送ajax请求 ， 携带表单JSON数据 ， 使用
v-model
- 后台接收请求，查询接收到的品牌数据
- 调用对应的service方法添加数据
- 响应成功标识
- 获取数据，判断是否添加成功，跳转到查询所有数据页面
1.5.3.2 编码
- 引入Vue的JS文件（不再赘述）
- 创建Vue对象
new Vue({el: "#app",data(){return {brand:{}}},methods: {// 发送AJAX请求submitFrom() {// Axios无法直接使用原生的thisvar _this = this;axios({method: "post",url: "http://localhost:8080/brand-demo-ajax/add",// Axios传递参数时会自动将JavaScriptObject序列化为JSON串data: _this.brand}).then(function (resp){// 判断响应数据是否为 successif (resp.data =https://www.huyubaike.com/biancheng/="success") {// 重定向到查询所有页面location.href = "http://localhost:8080/brand-demo-ajax/brand.html";}})}}}) - 修改视图
<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="https://www.huyubaike.com/biancheng/0">禁用<input type="radio" name="status" v-model="brand.status" value="https://www.huyubaike.com/biancheng/1">启用<br><input type="button" id="btn" @click="submitFrom" value="https://www.huyubaike.com/biancheng/提交"></form></div> - 页面完整代码
<!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="https://www.huyubaike.com/biancheng/0">禁用<input type="radio" name="status" v-model="brand.status" value="https://www.huyubaike.com/biancheng/1">启用<br><input type="button" id="btn" @click="submitFrom" value="https://www.huyubaike.com/biancheng/提交"></form></div><script src="https://www.huyubaike.com/biancheng/js/vue.js"></script><script src="https://www.huyubaike.com/biancheng/js/axios-0.18.0.js"></script><script>new Vue({el: "#app",data(){return {brand:{}}},methods: {// 发送AJAX请求submitFrom() {// Axios无法直接使用原生的thisvar _this = this;axios({method: "post",url: "http://localhost:8080/brand-demo-ajax/add",// Axios传递参数时会自动将JavaScriptObject序列化为JSON串data: _this.brand}).then(function (resp){// 判断响应数据是否为 successif (resp.data =https://www.huyubaike.com/biancheng/="success") {// 重定向到查询所有页面location.href = "http://localhost:8080/brand-demo-ajax/brand.html";}})}}})</script></body></html>
推荐阅读
-
-
-
-
-
-
笔记本电脑怎么投屏到投影仪，笔记本电脑怎么投屏到电视
-
-
-
-
北京倡导13日居家办公14日15日居家休息：居家办公细则怎么制定？
-
2021年瘦西湖夜游 2023瘦西湖夜游有哪些好玩的
-
excel怎么核对两个表格的名字相同 两个excel表快速核对重复名字
-
-
彼岸花的花语是什么可以养家里吗 彼岸花的花语是什么,象征了什么??
-
-
-
-
为什么手机usb连不上电脑 为什么手机usb连不上液晶电视
-
奥运冠军吴敏霞官宣二胎！ 疑 怀胎超4个月，挺孕肚看比赛激动尖叫 ...
-
高速公路快车道停车追尾后谁的责任 死亡 高速公路快车道停车追尾后谁的责任
