preface

This is a 17 end, because of boredom to do a own use of the blog, want to through a dragon way, learn front end, back end, and deployment

My initial deployment on Aliyun expired after a year, so I switched to Hexo because I was poor. Check out my new blog here

I’m going to share it with you here. Of course, the code is terrible,

If you want to know how he built it look at the birth of Li Jinke’s hut

Feel free to toss around if you like. Just keep the comment below:)

GITHUB

preview

Cool animation (my own idea at the time)

The article page

You can upload articles directly

On the page

Sexy Player

General function

As shown above, there are five main functions

  • Live chat (socket.io)
  • Photo album, put some pictures you like
  • Articles (Markdown articles, and comments)
  • About, write something about your introduction
  • Music player

Using the technology stack

Yeah, it’s older. The tech stack is older

  • 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

The node environment

  • V8.9 +

  • Install dependencies

yarn
Copy the code
  • run
yarn start
Copy the code
  • packaging
yarn run build
Copy the code
  • The development of server
yarn run dev-server
Copy the code
  • The production server
yarn run prod-server
Copy the code
  • Connecting to the database
yarn run connect-db
Copy the code
  • Backing up a Database
yarn run dump
Copy the code
  • Writing to the database
yarn run restore
Copy the code

Local operation Procedure

  1. Cloning projectgit clone https://github.com/lijinke666/lijinkeWeb.git
  2. Make sure you have it installed locallymongodb.node.js.nodemon 和 pm2
  3. To change theconfig/index.js 的 Your own configuration information
  4. Go to the directorycd lijinkeWebConnecting to the databaseyarn run connect-dbAnd then copy the databaseyarn run restore
  5. Run the front-endyarn startWait for the package to automatically open the browserlocalhost:6688
  6. Run the back-endyarn run dev-server

The database

There were only three forms

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

const musicSchema = new Schema({
    name: String./ / music
    src: String./ / path
    cover: String.// Image path
    desc:String ,            / / description
    isShow: {
      type:Boolean.default:true}}, {collection: "music"
    })

const articleSchema = new Schema({
    title: String.// The title of the article
    content: String.// The article content is in markdown format
    previewContent:String.// Preview the content of the article
    author: String./ / the author
    publishDate: {            // Date of publication
        type:Date.default:Date.now
    },
    pageView: Number./ /
    like: Number.// Like quantity
    approve:Boolean.// Whether the audit is approved
    email:String.// The author email is used to notify the author whether the article is approved
    category:Array}, {collection: "article"
    })

const commentSchema = new Schema({
        articleId:String./ / article id
        commentName:String./ / name
        commentEmail:String./ / email
        commentContent:String./ / content
        like:String./ / thumb up
        device:String./ / device
        publishDate:{               // Release date
            type:Date.default:Date.now
        }
},{
    collection:"comment"
})
Copy the code