2. 程式人生 > 實用技巧 >vue框架之前後端互動等相關內容-112

vue框架之前後端互動等相關內容-112

阿新 • • 發佈：2020-12-16

0 購物車案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
​
<div id="box">
​
  <input type="checkbox" v-model="isAll" @change="handleCheck"> 全選/全不選
​
  <div></div>
  <ul>
    <!--<li v-for="item in datalist">商品名字：{{item.name}},商品數量：{{item.number}}</li>-->
    <li v-for="item in datalist">
      <input type="checkbox" :value="item" v-model="checkgroup" @change="handleOne">
       {{item}}
      <button @click="item.number++">增</button>
       {{item.number}}
      <button @click="handleJ(item)">減</button>
    </li>
  </ul>
  <br>
   當前價格是：{{getPrice()}}
  <br>
   {{checkgroup}}
</div>
​
</body>
<script>
  var vm = new Vue({
    el: '#box',
    data: {
      datalist: [
         {name: '特斯拉', price: 10, number: 1, id: '1'},
         {name: '蘋果', price: 3, number: 4, id: '2'},
         {name: '香蕉', price: 80, number: 6, id: '3'}
       ],
      checkgroup: [],
      isAll:false,
​
     },
    methods:{
      getPrice(){
        var sum_price=0
        for(i in this.checkgroup){
          sum_price+=this.checkgroup[i]['number']*this.checkgroup[i]['price']
         }
        return sum_price
​
       },
      handleCheck(){
        // console.log('xxx')
        if(this.checkgroup.length>0){
          this.checkgroup=[]
         }else {
          this.checkgroup=this.datalist
         }
       },
      handleOne(){
        console.log('選中',this.checkgroup.length)
        console.log('總資料',this.datalist.length)
        if(this.checkgroup.length==this.datalist.length){
          this.isAll=true
         }else {
          this.isAll=false
         }
       },
      handleJ(item){
        if(item.number<=1){
          alert('不能再少了')
          item.number=1
         }else {
          item.number--
         }
       }
     }
   })
</script>
</html>

1 v-model之lazy,number,trim

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="box">
  <input type="text" v-model.lazy="mytext">||{{mytext}}
  <br>
  <input type="number" v-model.number="mynumber">||{{mynumber}}
  <br>
  <input type="text" v-model.trim="mytrim">||{{mytrim}}||
</div>
</body>
<script>
  var vm = new Vue({
    el: '#box',
    data: {
      mytext:'',
      mynumber:'',
      mytrim:'',
​
     },
   })
</script>
​
</html>

2 fetch

1 vue專案跟後端互動，可以使用ajax
​

2.1 通過jq的ajax實現

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
​
<div id="box">
  <button @click="handleClick">點我載入美女資料</button>
   美女你好：{{mytext}}
</div>
</body>
<script>
  var myajax=$
  var vm = new Vue({
    el: '#box',
    data: {
      mytext:'',
     },
    methods:{
      handleClick(){
        myajax.ajax({
          url:'http://127.0.0.1:5000/',
          method:'get',
          success: (data)=> {
            console.log(data)
            this.mytext=data
           }
         })
       }
     }
​
   })
</script>
</html>
 
from flask import Flask,make_response
app=Flask(__name__)
@app.route('/')
def index():
  print('請求來了')
  res=make_response('hello world')
  res.headers['Access-Control-Allow-Origin'] = '*'
  return res
if __name__ == '__main__':
  app.run()

2.2 fetche向後端傳送請求

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
<div id="box">
  <button @click="handleClick">點我載入美女資料</button>
   從後端載入的資料：
  <br>
   使用者名稱：{{name}}
  <br>
   年齡：{{age}}
</div>
</body>
<script>
  var vm = new Vue({
    el: '#box',
    data: {
      name: '',
      age:''
     },
    methods: {
      handleClick() {
        fetch('http://127.0.0.1:5000/').then(response => {
          return response.json()
         }).then(json => {
          console.log('從後端獲取的json資料', json)
          this.name=json.name
          this.age=json.age
​
         }).catch(ex => {
          console.log('出異常', ex)
         })
       }
     }
   })
</script>
​
</html>
from flask import Flask,make_response,jsonify
app=Flask(__name__)
​
@app.route('/')
def index():
  res=jsonify({'name':'lqz','age':18})
  # 這兩行程式碼處理跨域
  res=make_response(res)
  res.headers['Access-Control-Allow-Origin'] = '*'
  return res
if __name__ == '__main__':
  app.run()

3 axios

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <title>Title</title>
</head>
<body>
<div id="box">
  <button @click="handleClick">點我載入電影資料</button>
  <ul>
    <li v-for="item in datalist">
      <p>電影名：{{item.name}}</p>
      <p>導演：{{item.director}}</p>
      <img :src="item.poster">
    </li>
  </ul>
​
</div>
​
</body>
<script>
  var vm = new Vue({
    el: '#box',
    data: {
      datalist:[],
     },
    methods: {
      handleClick() {
         axios.get("http://127.0.0.1:5000/film").then(res=>{
          console.log(res.data)
           if(res.data.status==0){
            this.datalist=res.data.data.films
           }
         })
​
       }
     }
​
   })
</script>
​
</html>
from flask import Flask, make_response, jsonify
import json
app = Flask(__name__)
​
@app.route('/film')
def film():
  with open('film.json', 'rt', encoding='utf-8') as f:
    dic = json.load(f)
  res = jsonify(dic)
​
  # 這兩行程式碼處理跨域
  res = make_response(res)
  res.headers['Access-Control-Allow-Origin'] = '*'
  return res
​
if __name__ == '__main__':
  app.run()

4 計算屬性

4.1 通過計算屬性來實現人名首字母大寫

1 直接再{{}}中寫js程式碼    html中儘量少寫jsdiamond
2 使用函式  {{函式()}}    使用多次會執行多次
3 使用計算屬性        當作變數來使用，多次使用只會執行一次

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
​
<div id="box">
  <p>{{name}}</p>
  <p>{{name.substring(0,1).toUpperCase()+name.substring(1)}}</p>
  <!--  <p>{{upperName()}}</p>-->
  <!--  <p>{{upperName()}}</p>-->
  <!--  <p>{{upperName()}}</p>-->
​
  <p>{{getName}}</p>
  <p>{{getName}}</p>
  <p>{{getName}}</p>
  <p>{{getName}}</p>
</div>
​
</body>
<script>
  var vm = new Vue({
    el: '#box',
    data: {
      name: 'asdfasdf'
     },
    methods: {
      upperName() {
        console.log('我執行了')
        return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
       }
     },
    computed: {
      getName() {
        console.log('我執行了')
        return this.name.substring(0, 1).toUpperCase() + this.name.substring(1)
       },
     }
​
   })
</script>
​
</html>

4.2 通過計算屬性重寫過濾小案例

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
​
<div id="box">
  <input type="text" v-model="myinput" @input="handleChange">  {{myinput}}
  <br>
  <div>
    <p v-for="data in new_arr">{{data}}</p>
  </div>
</div>
​
</body>
<script>
  var vm = new Vue({
    el: '#box',
    data: {
      myinput:'',
      arr: ['aabbc', 'abc', 'aabcd','ccdd','bbcc'],
     },
    computed:{
      new_arr(){
        return this.arr.filter(item=>{
          return item.indexOf(this.myinput) >-1
         })
       }
     }
​
   })
​
</script>
</html>

5 虛擬dom與diff演算法 key的作用

1 vue有虛擬dom，跟真實dom做替換，使用的演算法是diff演算法
2 幾種方案
    -分層級比較
  -同key值比較（迴圈中儘量加key）
  -元件或標籤的比較去替換

6 元件化開發基礎

1 元件是什麼
    擴充套件 HTML 元素，封裝可重用的程式碼，目的是複用
    -例如：有一個輪播，可以在很多頁面中使用，一個輪播有js，css，html
    -元件把js，css，html放到一起，有邏輯，有樣式，有html
2 分類
    -全域性元件
  -區域性元件
3 工程化以後
    一個元件就是一個 xx.vue
  
4 element ui 其實就是寫了一堆好看的元件，以後我們直接拿過來用就可以了

6.1 定義全域性元件並使用

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="js/vue.js"></script>
  <title>Title</title>
</head>
<body>
​
<div id="box">
​
  <div @click="handleClick">我是根元件的div</div>
  <child></child>
  <ul>
    <li v-for="i in 4">{{i}}</li>
  </ul>
  <div>
    <child></child>
  </div>
​
​
​
</div>
​
​
</body>
<script>
  //建立元件物件(全域性元件)
  Vue.component('child', {
    template: `
      <div>
        <div style="background: red" @click="handleClick">我是頭部</div>
        <div v-if="isShow">顯示消失</div>
      </div>
    `,
    methods:{
      handleClick(){
        console.log('我被點選了')
        this.isShow=!this.isShow
       }
     },
    data(){
      return {
        isShow:true
       }
     },
   })
  var vm = new Vue({
    el: '#box',
    data: {
      isShow:true,
     },
    methods:{
       handleClick(){
        console.log('根元件我被點選了')
       }
     }
​
   })
​
​
</script>
</html>

相關推薦

vue框架之前後端互動等相關內容-112

0 購物車案例 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><script src=\"js/vue.js\"></script><title>Title</title></head><body

vue框架前後端分離專案之框架介紹及前後端配置等相關內容-116

1 軟體開發規範2 pip換源1、檔案管理器檔案路徑位址列敲：%APPDATA% 回車，快速進入 C:\\Users\\電腦使用者\\AppData\\Roaming 資料夾中2、新建 pip 資料夾並在資料夾中新建 pip.ini 配置檔案3、新增 pip.ini 配置檔

django框架之引入及介紹等相關內容-59

1 web應用 1 用瀏覽器訪問的應用程式2 優點：-不需要客戶端-更新直接在服務端更新，客戶端感知不到-跨平臺性好3 缺點：-強調瀏覽器的適用性-使用者的資料都儲存在軟體廠商那邊

前端之css選擇器等相關內容-52

1.css介紹 一 什麼是CSSCSS全稱Cascading Style Sheet層疊樣式表，是專用用來為HTML標籤新增樣式的。​樣式指的是HTML標籤的顯示效果，比如換行、寬高、顏色等等​層疊屬於CSS的三大特性之一，我們將在後續內容中介紹

前端之css屬性設定等相關內容-53

CSS屬性設定 1.字型屬性 1.1 font-weight：文字粗細 取值描述 normal 預設值，標準粗細

django之單表查詢等相關內容-67

1 常用和非常用欄位和引數概覽 # 常用欄位-IntegerField整數-AutoField-BooleanField-CharField-DateField-DateTimeField-DecimalField-FileField上傳檔案，本質是varchar-ImageField圖片，本質是varchar，繼承了Fil

vue框架前後端分離專案之跨域問題及首頁搭建等相關內容-117

1 跨域問題 1 同源策略：瀏覽器的安全策略，不允許去另一個域載入資料2 域：ip或者埠都必須一致3 前後端分離專案會出現跨域4 不使用第三方，自己處理5 CORS：後端技術，跨域資源共享，服務端只要做配置，（本身瀏覽器

vue框架前後端分離專案之git分支合併及首頁登陸註冊介面等相關內容-120

1 版本管理工具2 git init# 當前目錄被管理起來3 git log# 檢視版本管理日誌4 git status # 綠色，紅色5 git add 檔名 # 把檔案提交到暫存區6 git commit -m \'註釋\' # 把暫存區內容提交到版本庫7 git reset --hard

vue框架前後端分離專案之登入註冊頁面及多方式登入、手機號驗證碼介面等相關內容-121

1 登入註冊前端頁面 1.1 Login.vue <template><div class=\"login\"><div class=\"box\"><i class=\"el-icon-close\" @click=\"close_login\"></i><div class=\"content\"><

vue框架前後端分離專案之課程介面、頁面、前臺等相關內容-127

1 課程介面 1 課程表設計（關聯關係是欄位和欄位的關係，而不是表和表的關係）-課程分類表：跟課程一對多(一個課程分類下很多課程)-實戰課表（一個課程有很多章節）-課程章節表（一個章節，有很多課時）-課時表-老師

vue框架前後端分離專案之課程頁面前端、課程表分析、編寫及資料錄入等相關內容-126

1 課程頁面前端 <script>import Header from \"@/components/Header\"// import Footer from \"@/components/Footer\"​export default {name: \"Course\",data() {return {category: 0,}},components: {Heade

vue框架前後端分離專案之上線等相關內容-132

1 購買阿里雲伺服器 1 2核4g按流量計費2 centos7.9 2 伺服器配置，軟體安裝 2.1 前置配置

django框架前後端混合專案之註冊、登入功能及頁面搭建、圖片驗證碼等相關內容-78

0 頭像的上傳 # models.py中不需要動avatar = models.FileField(upload_to=\'avatar/\', default=\'avatar/default.png\')# setting中配置MEDIA_ROOT=os.path.join(BASE_DIR,\'media\')# 由於FileField會自動儲存檔案

django框架前後端混合專案之首頁輪播圖、主頁、後臺管理、頭像顯示等相關內容-79

1 首頁頁面搭建（輪播圖） 前端 <div class=\"lbt\"><div id=\"carousel-example-generic\" class=\"carousel slide\" data-ride=\"carousel\"><!-- Indicators --><ol class=\"carousel-indic

django框架前後端混合專案之側邊欄及點贊點踩功能等相關內容-80

1 側邊欄展示 #查詢當前站點下所有分類下的文章數# python是解釋型語言，做垃圾回收# python的cpython直譯器存在，jpython ,pypy​### 三個分組查詢res_category =models.Category.objects.filter(blog=user.blog).a

vue框架之基礎語法等相關內容-111

1 條件渲染 1.1 通過v-if和v-for實現購物車 <!DOCTYPE html><html lang=\"en\"><head><meta charset=\"UTF-8\"><script src=\"./js/vue.js\"></script><style>.red {back

vue框架之元件通訊及插槽簡介等相關內容-113

1 定義區域性元件 2 元件編寫方式與Vue例項的區別 1 自定義元件需要有一個root element，一般包裹在一個div中,跟vue例項一樣2 父子元件的data是無法共享3 元件可以有data，methods,computed....,但是data 必須是一個

vue框架之swiper、自定義指令、過濾器及單檔案元件等相關內容-114

1 生命週期 1 mounted用的最多：向後端傳送請求，定時器初始化2 destroyed：元件銷燬--->給元件寫一個定時器-->元件銷燬，定時器清除

前後端分離開發之虛擬環境搭建、目錄更改、資料庫配置等相關內容-115

1 企業軟體開發流程 1 網際網路軟體公司-網際網路產品，上網使用者-產品經理-產品需求：來自於產品經理-設計產品原型（axure，墨刀，ui部門）---》原型圖-後端：技術選型，架構設計，資料庫設計，分任務開發（你們處

03 Vue前後端互動

1.前後端互動模式 1.1 介面呼叫方式 列舉 原生ajax 基於jq的ajax fetch axios 1.2 URL地址格式