有点东西的React+Node开源博客

前言

这是一个 17 年末, 由于无聊作的一个 本身用的博客, 想经过一条龙的方式,学习前端,后端,和部署

最初部署在 阿里云上的,一年后到期了,由于穷,我就改用 hexo, 想看看个人新博客吗 点这里

在这里分享给你们, 固然,代码写的很糟糕,

若是你想知道他是怎么搭建的 请看 李金珂的小屋诞生记

若是你喜欢的话, 就随意折腾吧. 只需保留下图的 注释便可 : )

GITHUB

预览

炫酷的动画 (当时本身想的创意)

文章页

能够直接上传文章

关于页

性感的播放器

大体的功能

就像上图所示主要就 5 个功能

• 在线聊天 (socket.io)
• 相册,放一些你喜欢的图片
• 文章 (markdown 文章, 和评论)
• 关于,写一些你的介绍
• 音乐播放器

使用技术栈

没错 年代后久远, 技术栈的版本比较旧

• React v16.X
• ES6,ES7
• webpack v3.0.0
• Redux
• React-Redux
• React-Router v3.x
• node.js
• yarn
• mongodb
• mongoose
• mocha
• chai
• less
• socket.io
• pwa
• web push

node环境

• v8.9+

• 安装依赖

yarn
复制代码

• 跑起来

yarn start
复制代码

• 打包

yarn run build
复制代码

• 开发server

yarn run dev-server
复制代码

• 生产server

yarn run prod-server
复制代码

• 链接数据库

yarn run connect-db
复制代码

• 备份数据库

yarn run dump
复制代码

• 写入数据库

yarn run restore
复制代码

本地运行步骤

1. 克隆项目 git clone https://github.com/lijinke666/lijinkeWeb.git
2. 请确保你本地已经安装 mongodb, node.js, nodemon 和 pm2
3. 更改 config/index.js 的 你本身的配置信息
4. 切换到目录 cd lijinkeWeb 链接数据库 yarn run connect-db 而后 拷贝数据库 yarn run restore
5. 运行前端 yarn start 等待打包 自动打开浏览器 localhost:6688
6. 运行后端 yarn run dev-server

数据库

表格当时瞎设计的 就三张表格

const mongoose = require('mongoose')
const debug = require('debug')('music-schema')
const Schema = mongoose.Schema

const musicSchema = new Schema({
    name: String,           //音乐名
    src: String,            //路径
    cover: String,          //图片路径
    desc:String ,            //描述
    isShow: {
      type:Boolean,
      default:true
    }
}, {
        collection: "music"
    })

const articleSchema = new Schema({
    title: String,           //文章标题
    content: String,          //文章内容 markdown 格式
    previewContent:String,     //预览的文章内容
    author: String,           //做者
    publishDate: {            //发表日期
        type:Date,
        default:Date.now
    },
    pageView: Number,         //点击量
    like: Number,             //喜欢数量
    approve:Boolean,           //是否审核经过
    email:String,              //做者邮箱 用来通知做者文章是否经过
    category:Array,
}, {
        collection: "article"
    })

const commentSchema = new Schema({
        articleId:String,           //文章id
        commentName:String,         //姓名
        commentEmail:String,        //邮箱
        commentContent:String,      //内容
        like:String,                //点赞量
        device:String,               //设备
        publishDate:{               //发布日期
            type:Date,
            default:Date.now
        }
},{
    collection:"comment"
})
复制代码