目錄
前言
Login頁面
Index頁面
個人中心部分
基本資料
?
重置密碼
文章管理
文章類別
文章串列?
發布文章
前言
花了幾天事件依葫蘆畫瓢，寫了一個后臺管理系統，大概長下面這張圖這樣，用到的技術有html5,css3,javascript,jquery,echarts,ajax,template,layui，沒有能力開發一個后端介面，所以直接用了黑馬老師提供的介面以及介面檔案，
Login頁面
右小角的注冊賬號，系結了點擊事件，實作，通過塊的none block完成登錄和注冊的頁面切換，
注冊和登錄通過了ajax向服務器發起請求，完成認證，用戶名和密碼表單通過layui添加了pwd username的驗證機制，完成認證 登錄到index頁面，如果失敗則layer.msg回傳錯誤理由
Index頁面
頭像，id 通過向服務器請求資料，獲得頭像和nickname 和username 如果 nickname 為空 則講username渲染到頁面上，如果用戶未上傳頭像則將頭像部分渲染為一個圓，主頁中的資料可視化 通過iframe 直接復制上去的，echarts部分就不多說了，然后將首頁系結點擊事件 完成跳轉 設定target屬性指向iframe 實作跳轉，
個人中心部分
基本資料
這里就挨個給每個表單添加一個name屬性 通過ajax請求依此渲染就好了，
提交按鈕同理 系結點擊事件，阻止默認行為，向服務器提交資料，然后再呼叫一下 渲染左上角和右上角頭像 name的函式就完事，重置按鈕 reset，
第一個表單是username 不希望被用戶修改，所以添加一個redonly就好了
這里沒話說，直接搬cropper，高端的編碼方式往往只采用最樸素的cv，
上傳這個按鈕 是不能實作檔案上傳行為的，這里的上傳功能是通過，創建了一個屬性為file的表單
通過隱藏的方式 然后 通過系結點擊事件 來實作input的點擊實作檔案上傳，
確定btn不多說了 確定完 獲取base64位的圖片 然后發送資料給服務器，重新渲染index
此處因為是子頁面呼叫父頁面的方法 所以window.parent.初始化方法（）；
重置密碼
這里有啥好說的呢，這里沒啥好說的，懂得都懂了，
文章管理
文章類別
剩下的大部分都沒啥好說的了，基本都是獲取元素系結事件跟服務器互動然后渲染資料
文章串列
發布文章
總結
學習到前后端互動階段，做了一些案例發現大部分ui布局都是直接基于框架快速開發，更多需要實作的用戶互動的體驗，本次案例遇到了跨域問題，困擾我若干天，才疏學淺，只能使用jsonp解決跨域問題，奈何jsonp只能使用get請求，我人麻了，最后將此案例上傳到了github，接下來原始碼奉上，供大佬們參考學習，
GitHub - weiyuyang213/Demo01: 大事件專案
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/341902.html
標籤：其他
上一篇：快速創建@vue/cli腳手架