Vue前端框架基础+Element的使用( 四 ) _生活百科

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>

2、Element