vue的初識與簡單使用---前后端分離通過接口調取數據

vue的安裝

#### 1、環境搭建
'''
- 安裝node

```
官網下載安裝包，傻瓜式安裝：https://nodejs.org/zh-cn/
```

- 安裝cnpm

```
npm install -g cnpm --registry=https://registry.npm.taobao.org
```

- 安裝腳手架

```
cnpm install -g @vue/cli
```

- 清空緩存處理

```
npm cache clean --force
```

#### 2、項目的創建

- 創建項目

```js
vue creat 項目名
// 要提前進入目標目錄(項目應該創建在哪個目錄下)
// 選擇自定義方式創建項目，選取Router, Vuex插件
```

- 啟動/停止項目

```js
npm run serve / ctrl+c
// 要提前進入項目根目錄
```

- 打包項目

npm run build
//要在項目根目錄下進行打包操作
'''

1. vue 是簡單的布置前端頁面的框架

在vue項目里面 views 里面放入的是跳轉的頁面組件

2.
在vue項目里面 App.vue 是主要的頁面組件,如果創建新的頁面組件就需要添加

<div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>|
      <router-link to="/freecourse">FreeCourse</router-link>    #這個是新增加的組件
</div>

3.
在vue項目里面 router.js 路由里面寫路徑:

import FreeCourse from './views/freecourse.vue'     #加載

        {
            path: '/freecourse',
            name: 'freecourse',
            component: FreeCourse
        },
       #添加路由地址

4.
新增的組件讓他生效做配置

<template>
    <div class="about">
        <h1>這是免費課程</h1>
        {{course_list}}         # {{*****}} 是動態渲染用的
        <p v-for="course in course_list">{{course}}</p>     #這里是用for語句循環顯示渲染出來的內容
    </div>

</template>
######## template 是專門寫渲染踹的內容

<script>
    export default {
        name: 'freecourse',     #這里的name指向的是路由的名字
        data: function () {     #data 是讓他渲染出來列表中的數據顯示
            return {
                course_list: ['python課程', 'linux', 'go語言']
            }
        }
    }
</script>
########script 是專門寫策略的好讓他可以在頁面渲染出來想要的內容

 

5.
使用vue的ajax的發送請求方法

  安裝: npm install axios  安裝好了在package.json 可以看到

    在 main.js 中配置:
        //導入axios
        import axios from 'axios'
        //把axios對象付給$http
        Vue.prototype.$http=axios

    在組件的js代碼中寫:

<template>
    <div class="about">
        <h1>這是免費課程</h1>
        <!--{{course_list}}-->
        <p v-for="course in course_list">{{course}}</p>
        <button @click="init">點我</button>       #就是ajax請求,點擊觸發
    </div>
    <!--{{course_list}}-->
</template>
#############模板顯示內容

<script>
    export default {
        name: 'freecourse',
        data: function () {
            return {
                course_list: []             #這里設置為空就可以,數據驅動頁面
            }
        },
        methods: {                          #這里就是axios 發送請求的實現
            'init': function () {
                var _this = this            #這里 吧this 賦值給_this
                this.$http.request({
                //向下面的地址發送get請求
                url:'http://127.0.0.1:8078/course/',        #url 指向的是后端發送請求的接口
                method:'get'                        #設置請求模式
            }).then(function (response) {
                //response.data才是真正的數據
                console.log(response.data)
                _this.course_list=response.data     #前面賦值給_this 拿到的數據給到course_list
            })
            }

        },
         mounted: function () {      //這段代碼就是不需要點擊事件了,當頁面跳轉到指定的,自動渲染頁面了
            this.init()

        }
    }
</script>

6.

后端:
解決跨域問題:
創建一個文件 MyMiddle.py

from django.utils.deprecation import MiddlewareMixin


class MyMiddleware(MiddlewareMixin):
    def process_response(self, request, response):
        # 處理了簡單請求
        response['Access-Control-Allow-Origin'] = '*'
        # 處理非簡單請求
        if request.method == 'OPTIONS':
            response['Access-Control-Allow-Headers'] = '*'
            # response['Access-Control-Allow-Methods']='PUT,PATCH'
            response['Access-Control-Allow-Methods'] = '*'

        return response

在settings內添加解決跨域問題

MIDDLEWARE = [
    'app.MyMiddle.MyMiddleware'
]


在視圖函數中創建簡單的一個數據信息:
from  rest_framework.views import APIView
from  rest_framework.response import Response

class Course(APIView):
    def get(self,request):
        return  Response(['python課程', 'linux', 'go語言','dasfdasfdasf'])

 

7.

后端開放用戶上傳圖片接口:

    -開放media路徑
        -創建meidia文件夾（在根路徑下）
        -在setting中配置：
            MEDIA_ROOT=os.path.join(BASE_DIR,'media')
        -在urls.py中
            from django.views.static import serve
            from luffy_city import settings
            urlpatterns = [
                url(r'^media/(?P<path>.*)', serve,{'document_root':settings.MEDIA_ROOT}),
            ]