Vue前后端交互、生命周期、组件化开发

一、Vue用axios与后端交互

​ 如果用jQuery与后端交互的话,我们用Ajax发请求,那么用Vue做前端,需要做前后端分离,与后端做交互。这个时候Vue也提供了独立的方法叫Axios,其实Ajax也是没问题的但是同时使用两个框架写前端项目,有点大材小用了,或者而且也会影响项目执行效率。因此咱的Vue也提供了单独的交互的Axios。Axios 是一个基于 promise 的 HTTP 库,还是基于XMLHttpRequest封装的那么接下来我们就用axios的方式实现前后端交互。那么我们通过展示新上市电影的例子来诠释前后端交互吧

'''后端代码'''
# 1.导入模块
from django.urls import path, include
from app01 import views
from rest_framework.routers import SimpleRouter # 2.实例化对象
router = SimpleRouter() # 3.注册路由
router.register('film', views.FilmList, 'film') # 4.最后一步添加到这里,拼路由
urlpatterns = [
path('api/v1/', include(router.urls)), # http://127.0.0.1:8000/api/v1/film/film
] from rest_framework.viewsets import ViewSet
from rest_framework.decorators import action
import json
from rest_framework.response import Response class FilmList(ViewSet):
@action(methods=['GET', ], detail=False)
def film(self, request):
with open(r'film.json', 'r', encoding='utf-8') as f:
res = json.load(f)
return Response(headers={'Access-Control-Allow-Origin':'*'}, data=res)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="js/vue.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/1.3.2/axios.min.js"></script>
</head>
<body>
<div id="app">
<h1>Hot films list</h1>
<ul>
<li v-for="item in dataList">
<h2>Film Name:{{item.name}}</h2>
<h3>Director:{{item.director}}</h3>
<h3>Category:{{item.category}}</h3>
<p>Desc:{{item.synopsis}}</p>
<img :src="item.poster" alt="" height="300px" width="200px">
</li>
<button @click="handleClick">Wanna see then press here</button>
</ul>
</div>
</body>
<script>
let vm = new Vue({
el: '#app',
data: {
dataList: []
},
methods: {
handleClick() {
axios.get('http://127.0.0.1:8000/api/v1/film/film/').then(res => {
this.dataList = res.data.data.films
})
}
},
mounted() {
axios.get('http://127.0.0.1:8000/api/v1/film/film/').then(res => {
console.log(res)
this.dataList = res.data.data.films
})
}
})
</script>
</html>

二、Vue的生命周期

​ Vue其实有它的生命周期的,从vue实例创建开始,到实例被销毁,总共会经历8个生命周期钩子[只要写了就会执行]钩子函数【反序列化验证】扩展以下知识面吧,顺便get以下两个专业学名 面向切面编程(AOP)、面向对象编程(OOP)、那么咱咱说的8个生命周期具体指什么呢》咱一起来列一下!

序号 英文称呼 个人理解 何时调用
1 beforeCreate 创建之前 创建Vue实例之前调用
2 created 创建实例 创建Vue实例成功后调用
3 beforeMount 安装之前 渲染DOM之前调用
4 mounted 安装实例 渲染DOM之后调用
5 beforeUpdate 更新之前 重新渲染之前调用
6 updated 更新实例 重新渲染完成之后调用
7 beforeDestroy 销毁之前 销毁之前调用
8 destroyed 销毁实例 销毁之后调用

三、组件化开发

​ 在基础部分我们用spa的形式学习了Vue,但是实际上当前普遍使用组件化开发。那么接下来,咱的研究主题是大名鼎鼎的组件化开发;嘿嘿嘿准备好了吗?!那为何组件化开发呢?原因也很简单类似于咱的Python里面的装饰器、类、函数一样写好以后可以重复使用,减小代码量。提高开发效率,毕竟编程开发本身就是被那些智商超高的聪明懒人发明的嘛,他们会想方设法的少写代码而多干活哈哈哈,讲到这里我很荣幸也能接触编程领域,每天都很充实,不断进步,不断提高,简直是我梦寐以求的人生!话说回来,组件分为两种,一是全局组件、二是局部组件。下面详细介绍如何使用如何定义组件。

定义组件的方法



组件就是:扩展 HTML 元素,封装可重用的代码,目的是复用

例如:有一个轮播图,可以在很多页面中使用,一个轮播有js,css,html

组件把js,css,html放到一起,有逻辑,有样式,有html

<script>
// 全局组件-----》在任意组件中都可以使用
// 跟之前学的没有区别
Vue.component('child', {
template: `
<div>
<button>Back</button>
<span style="font-size: 40px">Home Page--{{ name }}</span>
<button @click="handleFor"> Forward</button>
<lqz1></lqz1>
</div>`,// 里面写html内容,必须包在一个标签中
data() { // data必须是方法 因为这个组件是可以多次使用,返回对象
return {
name: '阿丽米热',
t: null
}
},
methods: {
handleFor() {
this.name = 'mire'
}
},
components: {
'mire1': {
template: `
<div>
<h1>Local component---{{ age }}</h1>
</div>`,
data() {
return {
age: 19
}
}
}, } })
Vue.component('child3', {
template: `
<div>
<button>back</button>
</div>`, }) let foo={
template: `
<div>
<h1>Local component---{{ age }}</h1>
</div>`,
data() {
return {
age: 19
}
}
}
var vm = new Vue({
el: '.app',
data: {
show: false
},
methods: {
handleShow() {
this.show = !this.show
}
},
components: {
foo } })
</script>

Vue前后端交互、生命周期、组件化开发的更多相关文章

  1. 三、vue前后端交互(轻松入门vue)

    轻松入门vue系列 Vue前后端交互 六.Vue前后端交互 1. 前后端交互模式 2. Promise的相关概念和用法 Promise基本用法 then参数中的函数返回值 基于Promise处理多个A ...

  2. 前端笔记之Vue(三)生命周期&CSS预处理&全局组件&自定义指令

    一.Vue的生命周期 生命周期就是指一个对象的生老病死的过程. 用Vue框架,熟悉它的生命周期可以让开发更好的进行. 所有的生命周期钩子自动绑定 this 上下文到实例中,因此你可以访问数据,对属性和 ...

  3. vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然 ...

  4. vue组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了一下的内容.首先会对使用Vue进行开发的一些前期需要的技术储备进行简单 ...

  5. SpringBoot 和Vue前后端分离入门教程(附源码)

    作者:梁小生0101 juejin.im/post/5c622fb5e51d457f9f2c2381 推荐阅读(点击即可跳转阅读) 1. SpringBoot内容聚合 2. 面试题内容聚合 3. 设计 ...

  6. Flask + vue 前后端分离的 二手书App

    一个Flask + vue 前后端分离的 二手书App 效果展示: https://blog.csdn.net/qq_42239520/article/details/88534955 所用技术清单 ...

  7. Vue 入门之组件化开发

    Vue 入门之组件化开发 组件其实就是一个拥有样式.动画.js 逻辑.HTML 结构的综合块.前端组件化确实让大的前端团队更高效的开发前端项目.而作为前端比较流行的框架之一,Vue 的组件和也做的非常 ...

  8. Servlet实现前后端交互的原理及过程解析

    在日常调试项目时,总是利用tomcat去启动项目,并进行前后端联调,但对于前后端的请求响应的交互原理及过程并不是特别清晰. 为什么在前端发出相应请求,就能跳转到后端通过程序得到结果再响应到前端页面呢? ...

  9. day69:Vue:组件化开发&Vue-Router&Vue-client

    目录 组件化开发 1.什么是组件? 2.局部组件 3.全局组件 4.父组件向子组件传值 5.子组件往父组件传值 6.平行组件传值 Vue-Router的使用 Vue自动化工具:Vue-Client 组 ...

  10. vue(9)—— 组件化开发 - webpack(3)

    前面两个终于把webpack相关配置解析完了.现在终于进入vue的开发了 vue组件化开发预热 前期准备 创建如下项目: app.js: footer.js: main.js: webpack.con ...

随机推荐

  1. UBOOT编译--- include/config/auto.conf、 include/config/auto.conf.cmd、 include/generated/autoconf.h (二)

    1. 前言 UBOOT版本:uboot2018.03,开发板myimx8mmek240. 2. 背景 在编译构建目标时(如 make xxx),顶层 Makefile 的 dot-config 变量值 ...

  2. PDF、视频格式缩略图获取(pdf2img)

    PDF.视频格式缩略图获取(pdf2img) 获取pdf缩略图 导入依赖: <dependency> <groupId>org.apache.pdfbox</groupI ...

  3. flutter系列之:在flutter中使用流式布局

    目录 简介 Flow和FlowDelegate Flow的应用 总结 简介 我们在开发web应用的时候,有时候为了适应浏览器大小的调整,需要动态对页面的组件进行位置的调整.这时候就会用到flow la ...

  4. day 19 分组查询 & having和where区别

    day19 分组查询group by having用法 用于分组关键字(group by)后面 用于对分组之后的结果集进行筛选 having关键字后面可以使用聚合函数 having和where的区别 ...

  5. java 如何正确使用接口返回对象Result

    1. Result的使用 Result的使用,是java项目中开发接口的必备,它经常被我们用作接口的返回对象,方便前端或者其他程序的远程调用后处理业务.它一般包括以下几个属性: code:一般根据系统 ...

  6. layui table 表头抖动

    原本table超出页面宽度(即table有横向滚动条)的情况下,缩放页面然后再设置定时器定时更新表单,会发现数据不变的时候table头部会左右抖动 而且th td比设置的minWidth 或者cell ...

  7. Cannot resolve module 'net' in stompjs

    解决方案1 stompjs 不支持客户端环境下运行需要作为开发依赖安装 npm install stompjs --save 解决方案2 webpack.config.js 增加这段 resolve: ...

  8. django serializer.is_valid()总是返回False({'invalid': '无效数据。期待为字典类型,得到的是 {datatype} 。'})

    在调用添加接口时,一值失败,调试后发现传入的数据并没有问题,但是数据验证时一直返回False,此时使用  serializer.error_messages查看,所返回如下问题: 再往上看显示: 发现 ...

  9. Mybatis-9.28

    Mybatis-9.28 环境: JDK1.8 Mysql 5.7 maven 3.6.1 IDEA 回顾: JDBC Mysql Java基础 Maven Junit SSM框架:配置文件的. 最好 ...

  10. CH579(Cortex-M0)网络IAP升级介绍及问题解答--(持续更新) 网络升级

    CH579网络IAP升级的源码可以从码云(Gitee)上git clone下来. 码云地址:https://gitee.com/maji19971221/wch-ch57x 以下是一个朋友问的几个常见 ...