有點東西的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"
})
複製代碼