前言
此 blog-react-admin 項目是基於 螞蟻金服開源的 ant design pro 之上,用 react 全家桶 + Ant Design 的進行再次開發的,項目已經開源,項目地址在 github 上。
效果預覽 https://preview.pro.ant.design/user/login
1. 後臺管理
1.1 已經實現功能
- [x] 登錄
- [x] 文章管理(支持 MarkDown 語法)
- [x] 標籤管理
- [x] 留言管理
- [x] 用戶管理
- [x] 友情鏈接管理
- [x] 時間軸管理
1.2 待實現功能
- [ ] 點贊、留言和評論 的通知管理
- [ ] 評論管理
- [ ] 個人中心(用來設置博主的各種信息)
- [ ] 工作臺( 接入百度統計接口,查看網站瀏覽量和用戶訪問等數據 )
2. 主要項目結構
- pages
- Account 博主個人中心
- article 文章管理
- Category 分類
- Dashboard 工作臺
- Exection 403 404 500 等頁面
- Link 鏈接管理
- Message 留言管理
- OtherUser 用戶管理
- Tag 標籤管理
- TimeAsix 時間軸
- User 登錄註冊管理
文章管理、用戶管理、留言等 具體業務需求,都是些常用的邏輯可以實現的,也很簡單,這裏就不展開講了。
3. 使用
使用詳情請查看 Ant Design Pro ,因爲本項目也是在這個基礎之上,按這個規範來構建的。
4. 缺點
開發時,程序出錯後,修改正確後,webpack 有時不會及時查覺到內容已經更改,從而不能及時編譯,要重新運行命令打包。
5. 項目地址
開源不易,如果覺得該項目不錯或者對你有所幫助,歡迎到 github 上給個 star,謝謝。
項目地址:
前臺展示: https://github.com/biaochenxuying/blog-react
管理後臺:https://github.com/biaochenxuying/blog-react-admin
後端:https://github.com/biaochenxuying/blog-node
blog:https://github.com/biaochenxuying/blog
本博客系統的系列文章:
- [基於 node + express + mongodb 的 blog-node 項目文檔說明] 敬請期待...
6. Build Setup ( 構建安裝 )
# install dependencies
npm install
# serve with hot reload at localhost: 3000
npm start
# build for production with minification
npm run build
如果要看完整的效果,是要和後臺項目 blog-node 一起運行才行的,不然接口請求會失敗。
7. 最後
對 全棧開發 有興趣的朋友可以掃下方二維碼關注我的公衆號,我會不定期更新有價值的內容。
微信公衆號:BiaoChenXuYing
分享 前端、後端開發等相關的技術文章,熱點資源,全棧程序員的成長之路。
關注公衆號並回復 福利 便免費送你視頻資源,絕對乾貨。
福利詳情請點擊: 免費資源分享--Python、Java、Linux、Go、node、vue、react、javaScript