day06——前后端交互

2024-08-20 17:52
文章标签 交互 day06

本文主要是介绍day06——前后端交互，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

一、计算属性

计算属性就是基于现有的数据推算出来的新属性，只要依赖的数据变化，新属性就会自动更新，而且计算属性多次调用的情况下只会计算一次，效率非常高

简化写法

const app = new Vue({
el: '#app',
data: {},
methods: {//跟data平级函数名(){return 计算结果} 
}, 
computed:{//跟data平级计算属性名(){return 计算结果} 
}
})

完整写法

计算属性的值默认情况下是不能直接进行修改的，如果非要修改，就必须使用计算属性的完整写法（表格全选情况会用到，下篇文章案例中会出现）

const app = new Vue({el: '#app',data: {},computed:{//跟data平级计算属性名:{get(){返回计算属性的值}set(val){提供修改的逻辑}} }
})

二、Vue周期

三、axios发送请求

四、前后端交互案例

接口文档地址： 查询我的账单列表 - 传智教育-vue基础案例接口

功能需求：

        1.基本渲染

        2.合计根据页面数据变化

        3. 添加功能

        4. 删除功能

初始代码：

<!DOCTYPE html>
<html lang="en">
​
<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><link href="./css/bootstrap.min.css" rel="stylesheet"><script src="./js/vue-2.6.12.js"></script><script src="./js/axios-0.20.0.js"></script><style>.red {color: red !important;}
​.search {width: 300px;margin: 20px 0;}
​.my-form {display: flex;margin: 20px 0;}
​.my-form input {flex: 1;margin-right: 20px;}
​.table> :not(:first-child) {border-top: none;}
​.contain {display: flex;padding: 10px;}
​.list-box {flex: 1;padding: 0 30px;}
​.list-box a {text-decoration: none;}
​.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}
​tfoot {font-weight: bold;}
​@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}
​.list-box {width: 100%;}
​.echarts-box {margin-top: 30px;}}</style>
</head>
​
<body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box">
​<!-- 添加资产 --><form class="my-form"><input type="text" class="form-control" placeholder="消费名称" /><input type="text" class="form-control" placeholder="消费价格" /><button type="button" class="btn btn-primary">添加账单</button></form>
​<table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr><td>1</td><td>帽子</td><td>99</td><td><a href="javascript:;">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计： 298.00</td></tr></tfoot></table></div></div></div><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 删除功能*/const app = new Vue({el: '#app',data: {},methods: {},created() {}})</script>
</body>
​
</html>

网页初始界面如图所示：

1、基本渲染：

        （1）定义一个发送请求的查询数据的方法（在vue初始化后，渲染前执行）

        （2）查询句式：

                axios.get("地址？Query参数变量名=参数值").then(res=>{

                        res.data.data

                })

        （3）在vue对象的data{}中，定义一个数组接收数据

        （4）在html的body代码中利用v-for遍历数组数据，展现在页面上

该部分代码实现：
<tr v-for="(item,index) in orders"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><a href="javascript:;">删除</a></td>
</tr>
<script>const app = new Vue({el: '#app',data: {orders:[]},methods: {//1、定义一个发送请求查询数据的方法findAll() {axios.get("https://applet-base-api-t.itheima.net/bill?creator=zhangsan").then(res=>{this.orders = res.data.data})}},created() {//vue初始化后，渲染之前执行this.findAll()}})
</script>

效果图：

2、合计根据页面数据变化

        （1）在vue对象中使用计算属性，实现总计效果

        （2）写一个total()方法，定义sum存储结果，遍历数组，获取每条数据的价格相加，然后返回sum

        （3）在html的body代码中，将写死的数据，换成插值表达式{{total}}

该部分代码实现：
<tr><td colspan="4">消费总计：{{total}}</td>
</tr>
<script>const app = new Vue({el: '#app',data: {orders:[]},methods: {//1、定义一个发送请求查询数据的方法findAll() {axios.get("https://applet-base-api-t.itheima.net/bill?creator=zhangsan").then(res=>{this.orders = res.data.data})}},created() {//vue初始化后，渲染之前执行this.findAll()},computed: {total(){let sum = 0this.orders.forEach(element => {sum += element.price})return sum}}})
</script>

效果图：

3、添加功能

        （1）在vue对象的data{}中，定义一个对象 saveOrder:{}，用于存储要存入的数据

        （2）通过v-model双向绑定输入框与vue对象

        （3）给“添加账单”按钮绑定事件add()

        （4）在vue对象的methods{}中实现add()方法

                （a）设置账单的创建者

                （b）发送请求到服务端保存

                        添加句式：

                                axios.post("地址",添加对象).then(res=>{}

                （d）判断保存是否成功

                （e）页面的数据列表重新加载

                （f）清空输入框

该部分代码实现：
<form class="my-form"><input type="text" class="form-control" placeholder="消费名称"  v-model="saveOrder.name"/><input type="text" class="form-control" placeholder="消费价格"  v-model="saveOrder.price"/><button type="button" class="btn btn-primary" @click="add()">添加账单</button>
</form>
<script>const app = new Vue({el: '#app',data: {orders:[],saveOrder:{}},methods: {//1、定义一个发送请求查询数据的方法findAll() {axios.get("https://applet-base-api-t.itheima.net/bill?creator=zhangsan").then(res=>{this.orders = res.data.data})},add(){//设置账单的创建者this.saveOrder.creator="zhangsan"//发送请求到服务端保存axios.post("https://applet-base-api-t.itheima.net/bill",this.saveOrder).then(res=>{//判断保存是否成功if(res.data.message=="ok"){alert("添加成功")//页面的数据列表重新加载this.findAll()//清空输入框this.saveOrder={}}})}},created() {//vue初始化后，渲染之前执行this.findAll()},computed: {total(){let sum = 0this.orders.forEach(element => {sum += element.price})return sum}}})
</script>

效果图：

4、 删除功能

        （1）给“删除”按钮绑定事件del()，需要根据id删除，所以需要传入参数item.id

        （2）在vue对象的methods{}中实现del()方法

                （a）发送请求,删除数据

                        删除句式：

                                axios.delete("地址" + id).then(res=>{

                                        console.log(res)

                                 )}

                （b）判断响应的message是否ok

                （d）页面的数据列表重新加载

该部分代码实现：
<td><a href="javascript:;" @click="del(item.id)">删除</a></td>
<script>const app = new Vue({el: '#app',data: {orders:[],saveOrder:{}},methods: {//1、定义一个发送请求查询数据的方法findAll() {axios.get("https://applet-base-api-t.itheima.net/bill?creator=zhangsan").then(res=>{this.orders = res.data.data})},add(){//设置账单的创建者this.saveOrder.creator="zhangsan"//发送请求到服务端保存axios.post("https://applet-base-api-t.itheima.net/bill",this.saveOrder).then(res=>{//判断保存是否成功if(res.data.message=="ok"){alert("添加成功")//页面的数据列表重新加载this.findAll()//清空输入框this.saveOrder={}}})},del(id){//根据id删除// 发送请求,删除数据axios.delete("https://applet-base-api-t.itheima.net/bill/" + id).then(res=>{console.log(res)// 判断响应的message是否okif(res.data.message=="ok"){alert("删除成功")this.findAll()}})}},created() {//vue初始化后，渲染之前执行this.findAll()},computed: {total(){let sum = 0this.orders.forEach(element => {sum += element.price})return sum}}})
</script>

效果图：

完整代码： 

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title><!-- CSS only --><link href="./css/bootstrap.min.css" rel="stylesheet"><script src="./js/vue-2.6.12.js"></script><script src="./js/axios-0.20.0.js"></script><style>.red {color: red !important;}.search {width: 300px;margin: 20px 0;}.my-form {display: flex;margin: 20px 0;}.my-form input {flex: 1;margin-right: 20px;}.table> :not(:first-child) {border-top: none;}.contain {display: flex;padding: 10px;}.list-box {flex: 1;padding: 0 30px;}.list-box a {text-decoration: none;}.echarts-box {width: 600px;height: 400px;padding: 30px;margin: 0 auto;border: 1px solid #ccc;}tfoot {font-weight: bold;}@media screen and (max-width: 1000px) {.contain {flex-wrap: wrap;}.list-box {width: 100%;}.echarts-box {margin-top: 30px;}}</style>
</head><body><div id="app"><div class="contain"><!-- 左侧列表 --><div class="list-box"><!-- 添加资产 --><form class="my-form"><input type="text" class="form-control" placeholder="消费名称"  v-model="saveOrder.name"/><input type="text" class="form-control" placeholder="消费价格"  v-model="saveOrder.price"/><button type="button" class="btn btn-primary" @click="add()">添加账单</button></form><table class="table table-hover"><thead><tr><th>编号</th><th>消费名称</th><th>消费价格</th><th>操作</th></tr></thead><tbody><tr v-for="(item,index) in orders"><td>{{item.id}}</td><td>{{item.name}}</td><td>{{item.price}}</td><td><a href="javascript:;" @click="del(item.id)">删除</a></td></tr></tbody><tfoot><tr><td colspan="4">消费总计：{{total}}</td></tr></tfoot></table></div></div></div><script>/*** 接口文档地址：* https://www.apifox.cn/apidoc/shared-24459455-ebb1-4fdc-8df8-0aff8dc317a8/api-53371058* * 功能需求：* 1. 基本渲染* 2. 添加功能* 3. 删除功能*/const app = new Vue({el: '#app',data: {orders:[],saveOrder:{}},methods: {//1、定义一个发送请求查询数据的方法findAll() {axios.get("https://applet-base-api-t.itheima.net/bill?creator=zhangsan").then(res=>{this.orders = res.data.data})},add(){//设置账单的创建者this.saveOrder.creator="zhangsan"//发送请求到服务端保存axios.post("https://applet-base-api-t.itheima.net/bill",this.saveOrder).then(res=>{//判断保存是否成功if(res.data.message=="ok"){alert("添加成功")//页面的数据列表重新加载this.findAll()//清空输入框this.saveOrder={}}})},del(id){//根据id删除// 发送请求,删除数据axios.delete("https://applet-base-api-t.itheima.net/bill/" + id).then(res=>{console.log(res)// 判断响应的message是否okif(res.data.message=="ok"){alert("删除成功")this.findAll()}})}},created() {//vue初始化后，渲染之前执行this.findAll()},computed: {total(){let sum = 0this.orders.forEach(element => {sum += element.price})return sum}}})</script>
</body></html>

这篇关于day06——前后端交互的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1090764。

相关文章

uniapp设置微信小程序的交互反馈

uniapp设置微信小程序的交互反馈

链接：uni.showToast(OBJECT) | uni-app官网 (dcloud.net.cn) 设置操作成功的弹窗： title是我们弹窗提示的文字 showToast是我们在加载的时候进入就会弹出的提示。 2.设置失败的提示窗口和标签 icon：'error'是设置我们失败的logo 设置的文字上限是7个文字，如果需要设置的提示文字过长就需要设置icon并给
阅读更多...
Kubernetes 之 kubelet 与 CRI、CNI 的交互过程

Kubernetes 之 kubelet 与 CRI、CNI 的交互过程

序言 当一个新的 Pod 被提交创建之后，Kubelet、CRI、CNI 这三个组件之间进行了哪些交互？ Kubelet -> CRI -> CNI 如上图所示： Kubelet 从 kube-api-server 处监听到有新的 pod 被调度到了自己的节点且需要创建。Kubelet 创建 sandbox 并配置好 Pod 的环境，其中包括： Kubelet 通过 gRPC 调用 C
阅读更多...
【SpringMVC学习07】SpringMVC与前台的json数据交互

【SpringMVC学习07】SpringMVC与前台的json数据交互

json数据格式在接口调用中、html页面中比较常用，json格式比较简单，解析也比较方便，所以使用很普遍。在springmvc中，也支持对json数据的解析和转换，这篇文章主要总结一下springmvc中如何和前台交互json数据。 1. 两种交互形式 　springmvc和前台交互主要有两种形式，如下图所示： 可以看出，前台传过来的方式有两种，一种是传json格式的数据过来，另一种
阅读更多...
【Qt】Qt与Html网页进行数据交互

【Qt】Qt与Html网页进行数据交互

前言：此项目使用达梦数据库，以Qt制作服务器，Html制作网页客户端界面，可以通过任意浏览器访问。 1、Qt与网页进行数据交互 1.1、第一步：准备qwebchannel.js文件 直接在qt的安装路径里复制即可 1.2、第二步：在Qt的.pro文件加载webchannel组件 在.pro文件添加如下组件： QT += core gui sql webchannel wi
阅读更多...
鸿蒙开发入门day06-ArkUI简介

鸿蒙开发入门day06-ArkUI简介

(创作不易，感谢有你，你的支持，就是我前行的最大动力，如果看完对你有帮助，还请三连支持一波哇ヾ(＠^∇^＠)ノ） 目录 ArkUI简介 基本概念 两种开发范式 不同应用类型支持的开发范式 UI开发（ArkTS声明式开发范式）概述 特点 整体架构 开发布局 布局结构 布局元素的组成 布局位置 对子元素的约束 ArkUI简介 ArkUI（方舟UI框架）为应用
阅读更多...
android 的webView加载h5，和h5的交互（java和JavaScript的交互）

android 的webView加载h5，和h5的交互（java和JavaScript的交互）

Android提供了一个很强大的WebView控件用来处理Web网页，而在网页中，JavaScript又是一个很举足轻重的脚本。本文将介绍如何实现Java代码和Javascript代码的相互调用。（通俗点说就是，点击那个Web页面的按钮啥的，可以传到原生app;或者原生app调用Web页面的js方法） 如何实现 实现Java和js交互十分便捷。通常只需要以下几步。 WebView
阅读更多...
Java-IDEA模拟一个Redis服务器，与Redis客户端进行一次简单的交互。默认端口号：6379

Java-IDEA模拟一个Redis服务器，与Redis客户端进行一次简单的交互。默认端口号：6379

首先要了解Redis的交互协议。 摘抄： 简单字符串（Simple Strings）: 以 “+” 开头，例如 “+OK\r\n” 表示一个成功的响应。错误（Errors）: 以 “-” 开头，例如 “-ERR unknown command\r\n” 表示一个错误响应。整数（Integers）: 以 “:” 开头，例如 “:1000\r\n” 表示整数1000。批量字符串（Bulk St
阅读更多...
Result 和 自定义异常 在前后端交互中的作用

Result 和 自定义异常 在前后端交互中的作用

Result 和自定义异常在前后端交互中扮演着重要的角色。它们可以帮助我们规范化接口返回值,提高错误处理的可读性和可维护性。 Result的作用 Result通常是一个封装了请求结果的类，它包含了请求的状态码、消息和数据。在前端和后端的交互中，Result的作用主要体现在以下几个方面： 统一返回格式：通过Result类，后端可以将请求的结果统一封装成一个固定的格式返回给前端，这样前端可以更
阅读更多...
使用Node-API实现跨语言交互开发流程

使用Node-API实现跨语言交互开发流程

一、前言         使用Node-API实现跨语言交互，首先需要按照Node-API的机制实现模块的注册和加载等相关动作。 ArkTS/JS侧：实现C++方法的调用。代码比较简单，import一个对应的so库后，即可调用C++方法。 Native侧：.cpp文件，实现模块的注册。需要提供注册lib库的名称，并在注册回调方法中定义接口的映射关系，即Native方法及对应的JS/ArkT
阅读更多...
flutter的入口和原生交互

flutter的入口和原生交互

从今天起，笔者要开始从flutter列表页面向原生页面跳转了 首先遇到了N个No such module "Flutter" 因为笔者的公司其实是从前往后改造Flutter的，所以也不需要引擎组，但是笔者搞不懂，只能照着葫芦画瓢，以后等笔者Flutter技术日渐精进，一定回过来更新怎么单个页面嵌入flutter。 在Appdelegate里还有很多_lifeCycleDelega
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2