9、数据双向绑定(v-model)、前后数据交互（http、axios、router）

jasmine_qiqi

已于 2022-04-11 14:38:44 修改

阅读量2.5k

点赞数 1

分类专栏： Vue基础知识文章标签： vue.js 前端

于 2022-04-11 14:13:51 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124096516

版权

Vue基础知识专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1、通过`v-model`指令在文本输入框中创建双向数据绑定

表单元素类型	作用
`select`	选项
`raido`	单选框
`checkbox`	复选框

<template>
  <div id="app">
    <!-- 1、ajax实现表单的提交 -->
    <form @submit.prevent="postData">
      <div>
        <label for="">用户名</label>
        <input type="text" v-model="formData.username" />
      </div>
      <div>
        <label for="">密码：</label>
        <input type="password" v-model="formData.password" />
      </div>
      <!-- select选项 -->
      <div>
        <label for="">爱好：</label>
        <select v-model="formData.hobby">
          <option value="painting">画画</option>
          <option value="running">跑步</option>
        </select>
      </div>
      <!-- raido单选框 -->
      <div>
        <label for="">性别：</label>
        <label for="">男</label>
        <input type="radio" value="男" v-model="formData.sex" />
        <label for="">女</label>
        <input type="radio" value="女" v-model="formData.sex" />
      </div>
      <!-- checkbox复选框 -->
      <div>
        <label for="">技能：</label>
        <label for="">Html</label>
        <input type="checkbox" value="Html" v-model="formData.skill" />
        <label for="">Css</label>
        <input type="checkbox" value="Css" v-model="formData.skill" />
        <label for="">Javascript</label>
        <input type="checkbox" value="Javascript" v-model="formData.skill" />
        <label for="">Vue</label>
        <input type="checkbox" value="Vue" v-model="formData.skill" />
      </div>
      <button>提交表单</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formData: {
        username: "",
        password: "",
        hobby: "",
        sex: "",
        skill: [],
      },
    };
  },
  methods: {
    postData() {
      console.log(
        this.formData.username,
        this.formData.password,
        this.formData.hobby,
        this.formData.sex,
        this.formData.skill
      );
    },
  },
};
</script>

<style></style>

2、数据交互（查询、添加、删除）

http协议：前端（浏览器）发出请求，服务器给予响应
请求方法：get（查询）、post（添加）、put（修改）、delete（删除）
ajax：不刷新页面与后台交互数据
axios：封装好的ajax模块
koa：基于node的web框架

在这里插入图片描述
App.vue:

<template>
  <div id="app">
    <!-- 1、ajax实现表单的提交 -->
    <div class="case1">
      <form @submit.prevent="postData">
        <div>
          <label for="">用户名</label>
          <input type="text" v-model="formData.username" />
        </div>
        <div>
          <label for="">密码：</label>
          <input type="password" v-model="formData.password" />
        </div>
        <!-- select选项 -->
        <div>
          <label for="">爱好：</label>
          <select v-model="formData.hobby">
            <option value="painting">画画</option>
            <option value="running">跑步</option>
          </select>
        </div>
        <!-- raido单选框 -->
        <div>
          <label for="">性别：</label>
          <label for="">男</label>
          <input type="radio" value="男" v-model="formData.sex" />
          <label for="">女</label>
          <input type="radio" value="女" v-model="formData.sex" />
        </div>
        <!-- check复选框 -->
        <div>
          <label for="">技能：</label>
          <label for="">Html</label>
          <input type="checkbox" value="Html" v-model="formData.skill" />
          <label for="">Css</label>
          <input type="checkbox" value="Css" v-model="formData.skill" />
          <label for="">Javascript</label>
          <input type="checkbox" value="Javascript" v-model="formData.skill" />
          <label for="">Vue</label>
          <input type="checkbox" value="Vue" v-model="formData.skill" />
        </div>
        <button>提交表单</button>
      </form>
    </div>
    <!-- 案例二:提交数据 -->
    <div class="case2">
      <form @submit.prevent="postUserList">
        <label for="">用户名</label>
        <input type="text" v-model="user" />
        <button>提交表单</button>
      </form>
      <table border="1px;">
        <thead>
          <th>用户名</th>
          <th>操作</th>
        </thead>
        <tbody>
          <tr v-for="(value, index) of userList" :key="index">
            <td>{{ value }}</td>
            <td><button @click="deleteUserList(index)">删除</button></td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  created() {
    this.getUserList();
  },
  data() {
    return {
      // 案例一:v-model数据交互
      formData: {
        username: "",
        password: "",
        hobby: "",
        sex: "",
        skill: [],
      },
      // 案例二:提交数据
      user: "",
      userList: [],
    };
  },
  methods: {
    // 案例一:v-model数据交互
    postData() {
      console.log(
        this.formData.username,
        this.formData.password,
        this.formData.hobby,
        this.formData.sex,
        this.formData.skill
      );
    },
    // 案例二:提交数据
    // 1、查询用户列表
    getUserList() {
      axios.get("http://127.0.0.1:3000/user").then((res) => {
        this.userList = res.data;
      });
    },
    // 2、添加用户列表
    postUserList() {
      axios
        .post("http://127.0.0.1:3000/user", { user: this.user })
        .then((res) => {
          console.log(res.data);
          this.getUserList();
        });
    },
    // 3、删除用户列表
    deleteUserList(index) {
      axios.delete(`http://127.0.0.1:3000/user/${index}`).then((res) => {
        console.log(res.data);
        this.getUserList();
      });
    },
  },
};
</script>

<style>
#app {
  display: flex;
  justify-content: space-around;
}
</style>

server.js:

const Koa = require('koa');
// 获取post请求数据
const parser = require('koa-parser');
// 设置路由
const Router = require('koa-router')
const router = new Router();
// 允许跨域
const cors = require("koa2-cors");
const app = new Koa();

// 引入中间键
app.use(cors({
	origin: function (ctx) {
		// return "*"; // 允许来自所有域名请求
		// return ctx.header.origin;// 当*无法使用时，使用这句,同样允许所有跨域
		// return 'http://localhost:8080'; //单个跨域请求
		// 允许多个跨域
		var allowCors = ['http://localhost:8080', 'http://localhost:8081'];
		return allowCors.indexOf(ctx.header.origin) > -1 ? ctx.header.origin : '';
	},
	exposeHeaders: ['WWW-Authenticate', 'Server-Authorization'],
	maxAge: 5,
	credentials: true,
	allowMethods: ['GET', 'POST', 'DELETE'],
	allowHeaders: ['Content-Type', 'Authorization', 'Accept'],
}))
app.use(parser());
app.use(router.routes());

// 模拟数据
const userList = ["jasmine", "jasmine_qiqi", "qiqi"];

// get方法：获取userList列表
router.get("/user", async ctx => {
	ctx.body = userList;
})

// post方法：添加user信息
router.post("/user", async ctx => {
	// request：请求响应数据
	let user = ctx.request.body.user;
	userList.push(user);
	ctx.body = true;
})

// delete方法：删除user信息列表
router.delete("/user/:index", async ctx => {
	let index = ctx.params.index;
	// splice:删除行
	userList.splice(index, 1);
	ctx.body = true;
})

app.listen(3000, () => {
	console.log("server is running...")
})