前言

这是一个 17 年底, 因为无聊做的一个 自己用的博客, 想通过一条龙的方式,学习前端,后端,和部署

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

在这里分享给大家, 当然,代码写的很糟糕,

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

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

https://cdn.lijinke.cn/WX20190522-150913@2x.png

GITHUB

预览

炫酷的动画 (当时自己想的创意)

https://cdn.lijinke.cn/ezgif.com-resize.gif

文章页

https://cdn.lijinke.cn/20180518151903.png

可以直接上传文章

https://cdn.lijinke.cn/20180518151903.png

关于页

https://cdn.lijinke.cn/WX20190522-150749@2x.png

性感的播放器

https://cdn.lijinke.cn/WX20190522-153828@2x.png

https://cdn.lijinke.cn/WX20190522-153844@2x.png

大致的功能

就像上图所示主要就 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+

  • 安装依赖

1
yarn
  • 跑起来

    1
    yarn start
  • 打包

    1
    yarn run build
  • 开发server

    1
    yarn run dev-server
  • 生产server

    1
    yarn run prod-server
  • 连接数据库

    1
    yarn run connect-db
  • 备份数据库

    1
    yarn run dump
  • 写入数据库

    1
    yarn run restore

本地运行步骤

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

数据库

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
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"
})