路飞项目学习

　　　　　　　　　　　　　　　　　　路飞项目

一、项目分析

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

扫描二维码关注公众号，回复： 4624316 查看本文章

　　　　（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