- 首页 > 生活百科 > >
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>
推荐阅读
-
在古代人们尊称对方妻子叫什么 在古代人们尊称对方的妻子叫什么?
-
-
-
-
-
-
-
-
洪城一卡通可以挂失/补办/退款吗？具体条件及所需材料一览
-
浙江大佳幕墙装饰有限公司_工商信用信息_经营范围期限状态_法人_地址_注册资本_怎么样
-
-
柳州机动车临时行驶车如何办理手续 柳州机动车临时行驶车如何办理
-
灵活就业人员怎么交社保 支付宝上灵活就业人员怎么交社保
-
-
-
-
windows7两台电脑怎么共享 win7两台电脑如何共享文件
-
-
-
