资讯专栏INFORMATION COLUMN

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

tinysun1234 / 1667人阅读

摘要:前言这是一个年底因为无聊做的一个自己用的博客想通过一条龙的方式学习前端后端和部署最初部署在阿里云上的一年后到期了因为穷我就改用想看看我的新博客吗点这里在这里分享给大家当然代码写的很糟糕如果你想知道他是怎么搭建的请看李金珂的小屋诞生记如果你喜

前言

这是一个 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
本地运行步骤

    克隆项目 git clone https://github.com/lijinke666/lijinkeWeb.git

    请确保你本地已经安装 mongodb, node.js, nodemonpm2

    更改 config/index.js你自己的配置信息

    切换到目录 cd lijinkeWeb 连接数据库 yarn run connect-db 然后 拷贝数据库 yarn run restore

    运行前端 yarn start 等待打包 自动打开浏览器 localhost:6688

    运行后端 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"
})

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/6979.html

相关文章

  • 记一次“失利后”经过半年准备通过阿里社招经历与感悟

    摘要:写在最前本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后,通过分析自己的定位与实际情况,做出的未来一到两年的规划。在博客有一定曝光度的积累中,陆续收到了一些面试邀请,基本上是阿里的但是我知道我菜。。 写在最前 本次分享一下在作者上一次失利即拿到毕业证第二天突然收到阿里社招面试通知失败之后,通过分析自己的定位与实际情况,做出的未来一到两年的规划。以及本次社招...

    malakashi 评论0 收藏0
  • 第三方库

    摘要:微信支付,支付宝支付,银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库,使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程 强大轻量的动画库 anime.js 入门教程 来自B站的开源的MagicaSakura源...

    seanHai 评论0 收藏0
  • 第三方库

    摘要:微信支付,支付宝支付,银联支付三大支付总结支付宝植入总结支付宝的植基于和百度地图的组件库基于百度地图封装的组件库,使用这个库最好需要先了解和百度地图。 Commento - 多说 & Disqus 开源替代品 Commento - 多说 & Disqus 开源替代品 anime.js 简单入门教程 强大轻量的动画库 anime.js 入门教程 来自B站的开源的MagicaSakura源...

    gityuan 评论0 收藏0
  • 关于个人第一天前端面试面试问答QA,希望能对其他找前端工作朋友有所帮助。

    摘要:两日前,发了一篇吐槽,莫名的火了一把。关于的第一个,其实就是声明一个常量,不允许变更。另外对象迭代这里出自,阮一峰大神写的入门指南,对象篇。 两日前,发了一篇吐槽,莫名的火了一把。经过大家的建议与鼓励,于是修改了简历,开始了重新投递,2天后接到第一份面试邀请。 此文为个人面试经历,QA问答过程与总结,不透露面试公司及面试人员,内容真实,如果有面试过我的大佬看到博客,欢迎指出问题。 循序...

    Youngdze 评论0 收藏0

发表评论

0条评论

tinysun1234

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<