路飛專案

一、專案分析

1、Vue

2、restframework

3、路飛邏輯

　　（1） 搭建環境    vue_cli     Django

　　　　  創建於課程相關的表結構

　　（2）建立課程元件，展示課程資訊（課程詳情）

　　（3）登入驗證

　　（4）購物車（redis）

　　（5）結算中心

　　（6）支付寶介面

　　（7）支付應用

二、思路

　　利用前後端分離的思想開發

　　1、前端伺服器       Vue_cli  (express ,  vue  ,  webpack(在VUE要build的時候使用))         

　　　　　　Vue_cli是一個腳手架，裡面內涵一套系統； 

　　　　　　JS裡有個類似django的web框架，express，裡面有專門模組來receive，send，但是中間的過程交給VUE來做，因為VUE是處理資料的框架

　　　　作用： 請求資料，展示頁面

　　2、後端口伺服器    Django (restframework)

三、搭建環境

　　1、vue create Xxxxx，手動編輯時，需要明白的是最後一步將專案建立另一名，是為了後續建立專案時選中別名繼續引用其配置

　　2、需要明白　　

　　　　（1）、後續開發大多數在src檔案

　　　　（2）、vue是單頁面開發，只有index.html一個html，其他都是元件

　　　　（3）、然後到main.js

　　　　（4）、App.vue

　　　　（5）、父子通訊，一層嵌一層

　　3、vue的一個元件簡單的資料流展示

<template>
  <div class="degreeclass">
    <h1>This is an 學位課 page</h1>
    <div v-for="item in course_list">
       <p>{{item}}</p>
        </div>
  </div>
</template>

<script>

export 
 
default {
  name: 'degreeclass',
  data: function() {
     return {
        course_list: []
     }
  },
  mounted:function(){
     alert(123)
     this.init_course()
  },
  methods:{
     init_course:function(){
        this.course_list = ['python','linux','go']
     }

  }
}
</script>

　　4、前後端通訊用axios，前端用axios發信息，

　　　　（1）、main.js

import axios from 'axios'
Vue.prototype.$http = axios

　　　　（2）、course.vue,

 var  _this=this;注意此處

<template>
  <div class="course">
    <h3>課程列表</h3>
     <div v-for="item in course_list">
          <p>{{item}}</p>
     </div>

  </div>
</template>

<script>


export default {
  name: 'course',
  data:function () {
    return {
         course_list:[]
    }
  },
  mounted:function () {
       this.init_course()
  },
  methods:{
      init_course:function () {

         var  _this=this;
        // 傳送請求
          this.$http.request({
             url:"http://127.0.0.1:8000/courses/",
             method:"get",
          }).then(function (response) {
              console.log(response);
              _this.course_list=response.data
          });

      }
  }

}
</script>

　　　　（3）、新建個django drf工程，中介軟體去解決跨域問題

1、APIView
2、跨域問題
　　obj =  HttpResponse(json.dumps(['紅樓夢','西遊記']，ensure_ascii=False))
　　obj["Access-Control-Allow-Origin"]="*"
　　return obj