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...") })
3、axios：封装好的ajax模块
下载axios：cnpm install --save axios
引入axios：import axios from "axios";
下载sever.js：npm install server
开启sever.js：nodemon ./sever.js
下载XXX:npm install XXX
