撸这个博客网站是没有计划的,想到啥就写了点啥。
项目线上地址博客网站
源码地址github
本项目主要技术栈: react + dva + node + koa + mongoose 先说下这个网站实现的主要功能:
1. 登录
2.注册
3. 发表博客
4. 管理自己的博客
5. 草稿箱
6. tags标签
7. 查看博客
本文适合人群:
闲的蛋疼的, 手痒的, 入门react, node, dva的选手。
没有花很多时间打磨,很粗糙,希望见谅。
讲下项目中比较有趣的地方:
路由的管理:
import Header from '@/views/Header'
import Home from '@/views/Home'
import About from '@/views/About'
import Blog from '@/views/Blog'
import Tags from '@/views/Tags'
import Admin from '@/views/Admin'
import Blogmanage from '@/views/Admin/Blogmanage'
import BlogWrite from '@/views/Admin/BlogWrite'
const routes = [
{
path: "/",
component: Header,
routes: [
{
path: "/home",
component: Home,
},
{
path: "/admin",
component: Admin,
redirect: "/admin/blogmanage",
routes: [
{
path: "/admin/blogmanage",
component: Blogmanage
},
{
path: "/admin/blogwrite",
component: BlogWrite
},
{
path: "/admin/blogdraft",
component: Blogmanage
},
]
},
{
path: "/about",
component: About,
},
{
path: "/blog/:id",
component: Blog,
},
{
path: "/tags/:id",
component: Tags
}
]
},
];
export default routes
我将所有的路由用这个文件管理起来,通过一个函数就使它们能够正常的运作起来:
import React from 'react'
import { Route } from 'dva/router'
export default function RouteWithSubRoutes (route) {
return (
<Route
path={route.path}
render={props => (
<route.component {...props} routes={route.routes} />
)}
/>
);
}
然后我们这页面中这样使用就ok了:
import React from 'react';
import { BrowserRouter, Switch, Redirect } from 'dva/router';
import RouteGlobal from '@/route'
import RouteWithSubRoutes from '@/route/RouteWithSubRoutes'
export default function RouteConfigExample () {
return (
<BrowserRouter>
<Switch>
{RouteGlobal.map((route, i) => (
<RouteWithSubRoutes key={i} {...route} />
))}
</Switch>
</BrowserRouter>
);
}
使用起来很方便,而且路由集中存放方便管理。
这是一个小小的转换日期,带英文月份的方法:
export function dateChange (value) {
let monthsInEng = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
let date = new Date(value);
return monthsInEng[date.getMonth()] + ' ' + date.getDate() + ', ' + date.getFullYear()
}
更多的代码就不贴了,讲下项目的架构:
目录结构
.
│
├─config // 构建配置
├─public // html 入口
├─scripts // 项目脚本
└─server // 后端
├─config // 项目配置
├─db // 连接数据库
├─middlewares // 中间件
├─models // 数据库模型
├─route // 路由
├─ app.js // 后端主入口文件
└─...
│
└─src // 前端项目源码
├─assets // 静态文件
├─components // 公用组件
├─config // 公共数据常量
├─models // dva的models, 整合了state, reducer, redux-saga
├─route // 路由
├─utils // 工具包
├─views // 视图层
├─ App.js // 项目入口文件
├─ index.js // 主入口文件,引入dva
└─...
私有的数据一般存放在各自的组件内部的state中,公有的数据我通过dva放在了models里的app.js
中。
请求后台方法都封装到了utils中。
写在最后
因为白天还要工作,所以没有增加更多的功能,只是搭了个架子供大家参考。如果大家有什么好的建议可以提issue,也可以私聊我,参与项目的开发。后续我还会抽时间慢慢的完善项目的功能,希望把这个项目做得更完善些。
最后的最后, 欢迎大家给个star~