wallBlog

A simple personal blog system

  1. WallBlog is at www.rasblog.com
  2. Gitub address: github.com/Sujb-sus/wa…
  3. Code cloud address: gitee.com/Sujb/wall-b…

The main function

The client

  • Article features: article content supportMarkdownSyntax and code highlighted;
  • Tag function: retrieve article data by tag classification;
  • Sidebar functions: click ranking, webmaster recommendation and label classification, etc.
  • Search function: Retrieve article titles and abstracts by keyword, and support search highlighting;
  • Message function: can like, reply comment, statistics comment and reply total number, supportEmojiFacial expression;
  • Other functions: lazy loading of pictures, pagination, top loading of sidebar and top setting with one button, etc.

The management end

  • Rights management: CRUD administrator, can assign rights;
  • Article management: CRUD articles, article cover support local upload, article content supportMarkdownSyntax editing;
  • Tag management: CRUD tag, tag background color supportVue-ColorPlug-in custom selection;
  • Message management: RD comment and reply;

The project structure

Technology application

  • Front end:Vue,Element-UI,ES6,Webpack,Less,Axios,Markdown-Editor,Highlight,Vue-Color,Vue-LazyloadAnd so on;
  • The backend:Node,Koa2,Jwt,MongoDB,Busboy,Log4,Node-Notifier,Ora,Chalk,RimrafAnd so on;
  • Operations:Pagoda Linux panel,Nginx,PM2 management toolAnd so on;

Matters needing attention:

  1. It needs to be installed locally before starting the projectMongoDBService, please install by yourself;
  2. Start localmongoService to start initializing some necessary data to the database;
  • The database name can be changed, but it needs to be followedcode/server/config.jsFile synchronization;
  • You need to create a database when logging in to the management backgroundusersAnd register an account for login;
> mongo // start mongo service > show DBS // display database list > use wallBlog // create a new wallBlog database > Db.createuser ({user:"wall", PWD :"123456",roles:[{role:"readWrite",db:'wallBlog'}]}) Auth ("wall", "123456"); db.auth("wall", "123456"); Db.users. insert({// insert a new user into the users set of the database, account: admin password: 123456 "PWD" : "e10adc3949ba59abbe56e057f20f883e", "username" : "admin", "roles" : ["admin"]}) > show collections > db.users.find(Copy the code
  1. Initialize localMongoDBDatabase can be incode/server/config.jsConfigure the account, password, and database name in the file.
  2. npm run dev:serverEnable the background interface service.
  3. npm run dev:adminStart the management background interface, log in with the account password registered above, and input the article data;
  4. npm run dev:clientStart the client page;

The script command

This project is based on Webpack5.5 to build and package.

  • NPM run dev:admin // Local development management page
  • NPM run dev:client // Local development client page
  • NPM run build:admin // Project package – management side
  • NPM run build: Client // Project package – client
  • NPM run analyz // Check the package information
  • NPM run server // Start the background interface service