阅读 155

七天从零撸一个多人共享博客网站

撸这个博客网站是没有计划的,想到啥就写了点啥。

项目线上地址博客网站

源码地址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~

关注下面的标签,发现更多相似文章
评论