先後端分離crud（跨域問題）講解

1 先後端分離

1.1 後端

　　ssm+maven 多模塊

　　swagger 文檔描述（代碼拷貝過來，就能夠生成了，http://www.javashuo.com/article/p-vslqnhfv-dw.html  裏面的swagger）

　　postman 測試 

　　請求 put / get / post / patch / delete

1.2 前端

Nodejs：前端服務

npm：管理js庫 依賴關係

webpack：對靜態資源打包

vuejs:MVVM(model view view Model 雙向綁定)模式的開發js庫

ElementUI：前端ui框架

　　vuecli:vue開發腳手架，可以快速搭建vue項目，裏面包含了webpack的打包配置，服務器熱啓動

2 後端的crud

(1) mapper.xml中寫select、insert、update、delete

<mapper namespace="cn.itsource.crm.mapper.DepartmentMapper">
    <select id="findAll" resultType="Department">
        select * from t_department
    </select>
    <select id="findOne" parameterType="long" resultType="Department">
        select * from t_department where id=#{id}
    </select>
    <insert id="save" parameterType="Department">
        insert into t_department(name) values(#{name})
    </insert>
    <update id="update" parameterType="Department">
        update t_department set name=#{name} where id=#{id}
    </update>
    <delete id="delete" parameterType="long">
        delete from t_department where id=#{id}
    </delete>
</mapper>

(2) 在對應的controller寫上crud方法

3 前端界面處理

(1) 配置一個xxx.vue頁面

(2) 配置路由

(3) main.js引入axios

(4) 註釋掉模擬數據

(5) 修改xxx.vue這裏面的內容

4 前端訪問後端

4.1 哪些狀況下會存在跨域

(1) 同一個域名，不一樣的端口 =》 屬於跨域  localhost:8080 --> localhost:80

(2) 不一樣域名 =》 屬於跨域  192.168.0.1 --> 192.168.0.2

(3) 二級域名不一樣 =》 屬於跨域  miaosha.jd.com --> qianggou.jd.com

4.2 跨域問題

瀏覽器（同源策略）針對ajax請求，若是訪問的是不一樣的域名，或者不一樣的端口，就會存在跨域問題。

同源策略：只容許相同協議，相同域名，相同的端口

4.3 跨域問題怎麼解決

(1) jsonp -- 很早的

動態構造的標籤，標籤<script> 去訪問資源

 缺陷：get請求/須要服務支持

(2) 經過nginx（部署）--> 解決跨域問題 --> 反向代理機制

相似中間商，把訪問後臺的請求轉換爲訪問本身，讓nginx去訪問後臺，把結果拿回再轉給前臺。

缺點：部署服務，作配置

 

(3) CORS機制：跨域資源共享"(Cross-origin resource sharing)"

解決跨域問題：瀏覽器有同源策略（相同協議，相同域名，相同端口），若是不是同源，存在跨域問題，

瀏覽器會將ajax請求分爲兩類，其處理方案略有差別：簡單請求、特殊請求

　　簡單請求，發送一次，後臺服務須要運行訪問，

　　特殊請求，發送兩次，第一次是碰見請求，服務器也要運行預檢，前臺發現預檢經過，再發送真實請求，真實請求有須要服務器容許

可使用註解一鍵配置：@CrossOrigin

注意：spring版本須要是4.2.5之後才支持註解

5 完成前端的crud

(1) 列表展現（必定要掛載）

/獲取部門列表
getDepartments() {
    this.listLoading = true;
    //NProgress.start();
    this.$http.patch("/department/list").then((res) => {
        // this.total = res.data.total;
        this.departments = res.data;
        this.listLoading = false;
    });
}

掛載代碼：

mounted() {
    this.getDepartments();
}

(2) 新增

//顯示新增界面
handleAdd() {
    this.addFormVisible = true;
    this.addForm = {
        name: ''
    };
},
//新增
addSubmit() {
    this.$refs.addForm.validate((valid) => {
        if (valid) {
            this.$confirm('確認提交嗎？', '提示', {}).then(() => {
                //加載
                this.addLoading = true;
                //拷貝 this.addForm這個對象 para = {name:'xxx'}
                let para = Object.assign({}, this.addForm);
                this.$http.put("/department",para).then((res) => {
                    this.addLoading = false;
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    //驗證的重置
                    this.$refs['addForm'].resetFields();
                    //關閉新增對話框
                    this.addFormVisible = false;
                    this.getDepartments();
                });
            });
        }
    });
}

(3) 編輯修改

//顯示編輯界面
handleEdit(index, row) {
    this.editFormVisible = true;
    this.editForm = Object.assign({}, row);
},
//編輯
editSubmit() {
    this.$refs.editForm.validate((valid) => {
        if (valid) {
            this.$confirm('確認提交嗎？', '提示', {}).then(() => {
                this.editLoading = true;
                //NProgress.start();
                let para = Object.assign({}, this.editForm);
                this.$http.post("/department",para).then((res) => {
                    this.editLoading = false;
                    //NProgress.done();
                    this.$message({
                        message: '提交成功',
                        type: 'success'
                    });
                    this.$refs['editForm'].resetFields();
                    this.editFormVisible = false;
                    this.getDepartments();
                });
            });
        }
    });
}

(4) 刪除

//刪除
handleDel(index, row) {
    this.$confirm('確認刪除該記錄嗎?', '提示', {
        type: 'warning'
    }).then(() => {
        this.listLoading = true;
        this.$http.delete("/department/" + row.id).then((res) => {
            this.listLoading = false;
            this.$message({
                message: '刪除成功',
                type: 'success'
            });
            this.getDepartments();
        });
    }).catch(() => {

    });
}