5,Vue-vuex和axios-restful規範

5,Vue-vuex和axios-restful規範

vue項目：-- npm install @vue/cli -g-- 新建目錄-- vue create 項目名稱-- 測試啓動項目 npm run serve-- npm i element-ui-- npm i vue-router-- 註冊路由-- 新建router.js-- 導入vue 以及vue-router-- Vue.use(VueRouter);-- export default new VueRouter({routes: []})-- 在main.js 中導入 new VueRouter 的實例化對象-- 註冊到Vue實例化對象中 

 

vuex就是一個,來協助公共通訊的,

 

 

能夠在一個空目錄下建立,

vue項目：
        -- npm install @vue/cli -g
        -- 新建目錄
        -- vue create 項目名稱
        -- 測試啓動項目 npm run serve
        -- npm i element-ui
        -- npm i vue-router
        -- 註冊路由
            -- 新建router.js
            -- 導入vue 以及vue-router
            -- Vue.use(VueRouter);
            -- export default new VueRouter({
                routes: []
            })
            -- 在main.js 中導入 new VueRouter 的實例化對象
            -- 註冊到Vue實例化對象中

 

整理筆記

Vuex
        -- 集中式狀態管理架構
        -- 配置
            -- npm install vuex 
            -- import vuex from "vuex"
            -- Vue.use(vuex)
            -- let store = new vuex.Store({
                    state: {
                        xxx: xxx
                    },
                    getters: {
                        xxx: function(state, getters){
                            return 處理後的數據
                        }
                    },
                    mutations: {}
            })    
            -- const app = new Vue({
                el: "#app",
                store: store
            })
        -- 獲取vuex中的數據
            -- this.$store.state.xxx
            -- this.$store.getters.xxx
        -- 更改vuex中的數據
            -- this.$store.commit("事件名稱",data)
            -- mutations: {
                "事件名稱": function(state, data){
                        state.xxx = data
                }
            }
    Axios
        -- 配置
            -- npm install axios
            -- import axios from "axios"
            -- Vue.prototype.$axios = axios
        -- this.$axios.request({
            url: "api....",
            method: "get",
            data: {},
            params: {}
        }).then(function(data){
            注意this
        }).catch(function(data){

        })
        -- 跨域問題
    restful
        -- REST 表徵性狀態轉移 （資源狀態轉移）
            -- 資源
            -- URI 統一資源標誌符
               URL 統一資源定位符
            -- 統一資源接口
                -- 對資源只開放一個接口
                -- 根據HTTP請求方式的不一樣對資源進行不一樣的操做
                -- 必定要遵循HTTP請求方式的語義
            -- 先後端傳遞的是資源的表述 並非資源的自己
                -- Accept
                    -- 我可以解析的數據類型
                -- ContentType
                    -- 給你響應的數據類型
            -- 資源的狀態
            -- 經過超連接的指引來告訴用戶還有哪些資源狀態能夠進入
        -- restful
            -- 只要遵循這個REST風格 咱們就叫作restful架構
        -- 規範 10條
            -- 核心思想
                -- 面向資源去編程 url儘可能用名詞 不要用動詞
                -- 根據method不一樣對資源進行不一樣操做
            -- 在url中體現
                -- 版本
                -- api
                -- 過濾條件
                -- https
            -- 返回的要求
                -- 攜帶狀態碼
                -- 返回值
                    -- get 返回查看全部數據
                    -- post 返回新增的數據
                    -- put/patch 返回更新這條數據
                    -- delete 返回值爲空
                -- 返回攜帶錯誤信息
                -- 攜帶超連接

 

 

 restful規範

 

 

1. restful 規範（建議）
    
    2. django rest framework框架
    
內容詳細：
    0. FBV、CBV
        CBV，基於反射實現根據請求方式不一樣，執行不一樣的方法。
        原理：
            url -> view方法 -> dispatch方法（反射執行其餘：GET/POST/DELETE/PUT）
            
        流程：
            class StudentsView(View):
                def dispatch(self, request, *args, **kwargs):
                    print('before')
                    ret = super(StudentsView,self).dispatch(request, *args, **kwargs)
                    print('after')
                    return ret

                def get(self,request,*args,**kwargs):
                    return HttpResponse('GET')

                def post(self, request, *args, **kwargs):
                    return HttpResponse('POST')

                def put(self, request, *args, **kwargs):
                    return HttpResponse('PUT')

                def delete(self, request, *args, **kwargs):
                    return HttpResponse('DELETE')
    
        繼承（多個類共用的功能，爲了不重複編寫）：
            from django.views import View


            class MyBaseView(object):
                def dispatch(self, request, *args, **kwargs):
                    print('before')
                    ret = super(MyBaseView,self).dispatch(request, *args, **kwargs)
                    print('after')
                    return ret

            class StudentsView(MyBaseView,View):

                def get(self,request,*args,**kwargs):
                    print('get方法')
                    return HttpResponse('GET')

                def post(self, request, *args, **kwargs):
                    return HttpResponse('POST')

                def put(self, request, *args, **kwargs):
                    return HttpResponse('PUT')

                def delete(self, request, *args, **kwargs):
                    return HttpResponse('DELETE')

            class TeachersView(MyBaseView,View):

                def get(self,request,*args,**kwargs):
                    return HttpResponse('GET')

                def post(self, request, *args, **kwargs):
                    return HttpResponse('POST')

                def put(self, request, *args, **kwargs):
                    return HttpResponse('PUT')

                def delete(self, request, *args, **kwargs):
                    return HttpResponse('DELETE')
    
        面試題：
            1. django中間件
                - process_request
                - process_view
                - process_response
                - process_exception
                - process_render_template
            2. 使用中間件作過什麼？
                - 權限
                - 用戶登陸驗證
                - django的csrf是如何實現？
                    process_view方法
                        - 檢查視圖是否被 @csrf_exempt （免除csrf認證）
                        - 去請求體或cookie中獲取token
            3. 
                狀況一：
                    MIDDLEWARE = [
                        'django.middleware.security.SecurityMiddleware',
                        'django.contrib.sessions.middleware.SessionMiddleware',
                        'django.middleware.common.CommonMiddleware',
                        'django.middleware.csrf.CsrfViewMiddleware', # 全站使用csrf認證
                        'django.contrib.auth.middleware.AuthenticationMiddleware',
                        'django.contrib.messages.middleware.MessageMiddleware',
                        'django.middleware.clickjacking.XFrameOptionsMiddleware',
                    ]
                    
                    
                    from django.views.decorators.csrf import csrf_exempt
                    @csrf_exempt # 該函數無需認證
                    def users(request):
                        user_list = ['alex','oldboy']
                        return HttpResponse(json.dumps((user_list)))
                
                狀況二：
                    MIDDLEWARE = [
                        'django.middleware.security.SecurityMiddleware',
                        'django.contrib.sessions.middleware.SessionMiddleware',
                        'django.middleware.common.CommonMiddleware',
                        #'django.middleware.csrf.CsrfViewMiddleware', # 全站不使用csrf認證
                        'django.contrib.auth.middleware.AuthenticationMiddleware',
                        'django.contrib.messages.middleware.MessageMiddleware',
                        'django.middleware.clickjacking.XFrameOptionsMiddleware',
                    ]
                    
                    
                    from django.views.decorators.csrf import csrf_exempt
                    @csrf_protect # 該函數需認證
                    def users(request):
                        user_list = ['alex','oldboy']
                        return HttpResponse(json.dumps((user_list)))
                    
            
        CBV小知識,csrf時須要使用
            - @method_decorator(csrf_exempt)
            - 在dispatch方法中（單獨方法無效）
            
            方式一：
                from django.views.decorators.csrf import csrf_exempt,csrf_protect
                from django.utils.decorators import method_decorator
                class StudentsView(View):
                    
                    @method_decorator(csrf_exempt)
                    def dispatch(self, request, *args, **kwargs):
                        return super(StudentsView,self).dispatch(request, *args, **kwargs)

                    def get(self,request,*args,**kwargs):
                        print('get方法')
                        return HttpResponse('GET')

                    def post(self, request, *args, **kwargs):
                        return HttpResponse('POST')

                    def put(self, request, *args, **kwargs):
                        return HttpResponse('PUT')

                    def delete(self, request, *args, **kwargs):
                        return HttpResponse('DELETE')
            方式二：
                from django.views.decorators.csrf import csrf_exempt,csrf_protect
                from django.utils.decorators import method_decorator

                @method_decorator(csrf_exempt,name='dispatch')
                class StudentsView(View):

                    def get(self,request,*args,**kwargs):
                        print('get方法')
                        return HttpResponse('GET')

                    def post(self, request, *args, **kwargs):
                        return HttpResponse('POST')

                    def put(self, request, *args, **kwargs):
                        return HttpResponse('PUT')

                    def delete(self, request, *args, **kwargs):
                        return HttpResponse('DELETE')

        總結：
            - 本質，基於反射來實現
            - 流程：路由，view，dispatch(反射)
            - 取消csrf認證（裝飾器要加到dispatch方法上且method_decorator裝飾）
                
            擴展：
                - csrf 
                    - 基於中間件的process_view方法
                    - 裝飾器給單獨函數進行設置（認證或無需認證）
                    
                
    1. restful 規範（建議）
        a. 接口開發
            
            urlpatterns = [
                # url(r'^admin/', admin.site.urls),
                url(r'^get_order/', views.get_order),
                url(r'^add_order/', views.add_order),
                url(r'^del_order/', views.del_order),
                url(r'^update_order/', views.update_order),
            ]
            
                
            def get_order(request):
                return HttpResponse('')


            def add_order(request):
                return HttpResponse('')


            def del_order(request):
                return HttpResponse('')


            def update_order(request):
                return HttpResponse('')
                
        b. restful 規範（建議）
            
            1. 根據method不一樣作不一樣的操做，示例：
            
                基於FBV:
                    urlpatterns = [
                        url(r'^order/', views.order),
                    ]

                    def order(request):
                        if request.method == 'GET':
                            return HttpResponse('獲取訂單')
                        elif request.method == 'POST':
                            return HttpResponse('建立訂單')
                        elif request.method == 'PUT':
                            return HttpResponse('更新訂單')
                        elif request.method == 'DELETE':
                            return HttpResponse('刪除訂單')
                基於CBV:
                    urlpatterns = [
                        url(r'^order/', views.OrderView.as_view()),
                    ]
            
                    class OrderView(View):
                        def get(self,request,*args,**kwargs):
                            return HttpResponse('獲取訂單')

                        def post(self,request,*args,**kwargs):
                            return HttpResponse('建立訂單')

                        def put(self,request,*args,**kwargs):
                            return HttpResponse('更新訂單')

                        def delete(self,request,*args,**kwargs):
                            return HttpResponse('刪除訂單')

            
        c. 談談本身對restful api 規範的認識
            
            10個規則
        
            
        注意：推薦使用CBV
            
            
            
    2. django rest framework框架
        pip3 install djangorestframework
    
        a. 認證 
            - 僅使用：
                    from django.views import View
                    from rest_framework.views import APIView
                    from rest_framework.authentication import BasicAuthentication
                    from rest_framework import exceptions
                    from rest_framework.request import Request

                    class MyAuthentication(object):
                        def authenticate(self,request):
                            token = request._request.GET.get('token')
                            # 獲取用戶名和密碼，去數據校驗
                            if not token:
                                raise exceptions.AuthenticationFailed('用戶認證失敗')
                            return ("alex",None)

                        def authenticate_header(self,val):
                            pass

                    class DogView(APIView):
                        authentication_classes = [MyAuthentication,]

                        def get(self,request,*args,**kwargs):
                            print(request)
                            print(request.user)
                            ret  = {
                                'code':1000,
                                'msg':'xxx'
                            }
                            return HttpResponse(json.dumps(ret),status=201)

                        def post(self,request,*args,**kwargs):
                            return HttpResponse('建立Dog')

                        def put(self,request,*args,**kwargs):
                            return HttpResponse('更新Dog')

                        def delete(self,request,*args,**kwargs):
                            return HttpResponse('刪除Dog')

            - 源碼流程：
                dispatch...

整理筆記

 

瀏覽器的同源策略,會阻止跨域的訪問,是在瀏覽器端進行阻止, ------------因此要解決跨域問題,

RESTful API設計規範,

1,使用https,安全,----------API與用戶的通訊協議，老是使用HTTPs協議。
2,域名 
    https://api.example.com                         儘可能將API部署在專用域名（會存在跨域問題）
    https://example.org/api/                        API很簡單,   ---------------建議用這個,
3,版本
    URL，如：https://api.example.com/v1/   -----用這個,
    請求頭   跨域時，引起發送屢次請求