ElementUI實現CRUD(修改前端頁面),先後臺解決跨域問題

1.前端項目使用一個Vue的流程

         a)定義一個vue文件

    b)在rout.js裏面引入VUE文件,

c)在rout.js裏面配置路由

{

    path: '/',

    component: Home,

    name: '組織機構管理',

    iconCls: 'el-icon-message',//圖標樣式class

    children: [

        { path: '/department', component: Department, name: '部門管理' }

    ]

}

d)實現CRUD

         1.首先在main.js註釋前端人員使用的mock的引入的包,而後在main.js裏面引入axios方式發送請求到後臺的包,而後考模板進行改吧改吧!

e)跨域問題的解決(主要Ajax請求時出現的跨域問題)

         1.跨域的類型

a)同一個域名,不一樣的端口

         2.解決方式:

                  a)JSONP(老方法)

                          搭建一個服務器支持,將它放到服務器裏面,只能發GET請求
                          <script/>

b)- nginx服務,反向代理(部署nginx服務)
前臺發送請求à被nginx請求攔截,nginx將請求路徑轉變成本身的路徑,再轉到後臺服務器去訪問

c)cors方案

         在服務器端作控制是否容許跨域,支持各類請求,可是會額外發送一個請求:Options請求

         前端發送請求,發送option請求,詢問後臺是否容許訪問(預檢),贊成訪問,返回給前臺,再發送一個正確的請求到後臺.

    注意:不是全部的請求都要通過options請求的詢問,特殊請求就必需要通過options請求去訪問

         後臺代碼實現:1.配置corsfilter核心過濾器來放行前端的請求,2.只須要配置一個註解(@CrossOrigin)就能夠解決跨域的問題了(前提Spring版本必須是4.2.5及以上).