Running Football Blog
About the Project
A minimalistic version of PC football blog. The front-end project is mainly built using Vue2 and Element-UI; it is built and packaged using Webpack5. The back-end project is mainly designed using the Node framework Koa2 and the MongoDB database.
The main function
Client
1. Article function: the content of the article supports Markdown syntax and the code is highlighted;
2. Tag function: retrieve article data by tag classification;
3. Sidebar function: click ranking, webmaster recommendation, tag classification, etc.;
4. Search function: search the title and abstract of the article by keywords, and support search highlighting;
5. Message function: you can like, reply to comments, count comments and the total number of replies, support Emoji emoticons;
6. Other functions: image lazy loading, paging, sidebar top and one-click top, etc.
Management
1. Authority management: CRUD administrator, who can assign authority;
2. Article management: CRUD articles, article covers support local upload, article content supports Markdown syntax editing;
3. Label management: CRUD label, label background color supports custom selection with Vue-Color plug-in;
4. Message management: RD comments and replies
Built With
Getting Started
Install and configure the git environment, use the git clone command to download the project
Install and configure node, vue, mongodb environment
View the project structure, import related dependencies, load the project configuration
Configure the database environment and initialize user information
Start the project
Installation
Environmental preparation
node.js Environment configuration installation
vue、vue-cli Environment configuration installation
mongodb、mongodb Compass Environment configuration installation
Operating instructions
Vue project configuration start
-- yarn Instruction to install
npm install -g yarn
npm install yarn --save
-- Vue project dependency introduction
npm install
cnpm install
-- Extension component dependency introduction
vue-lazyload Plugin：yarn add vue-lazyload -S
vue-color plugin：yarn add vue-color -S
style-resources-loader plugin：yarn add style-resources-loader -D
mdrkdown syntax support related plugins：marked、highlightJs yarn add marked highlightJs -S
mongodb configuration：
Mongodb configuration information correspondence：code/server/config.jsFile configuration database information
// Enter the ‘mongodb’ installation directory and execute the command to start the ‘mongo’ service
> mongo
// Display database list
> show dbs
// Create a new ‘rfBlog’ database
> use rfBlog
// Create an rf user in the ‘rfBlog’ database with a password of 123456
> db.createUser({user:"rf",pwd:"123456",roles:[{role:"readWrite",db:'rfBlog'}]})
// Show who the library has users
> show users
// The database authenticates the user and password, and the result returns 1 to indicate successful authentication
> db.auth("rf", "123456");
Initialize system user information
// Start ‘mongo’ service
> mongo
// Display database list
> show dbs
// Access to the ‘wallBlog’ database
> use rfBlog
// Insert a piece of data into the ‘users’ collection of the library, account number: admin password: 123456
> db.users.insert({
"pwd" : "e10adc3949ba59abbe56e057f20f883e",
"username" : "admin",
"roles" : [
"admin"
]
})
// Query the collection under the library (similar to a relational data table)
> show collections
// Query all data in the ‘users’ collection
> db.users.find()
Project start (the concept of front-end and back-end separation, the front-end interface and back-end interface services need to be started respectively)
// Local development management page
yarn dev:admin
// Local development of the client page
yarn dev:client
// Start the background interface service
yarn server
Project packaging
// Project packaging-management side
yarn build:admin
// Project packaging-client
yarn build:client
// View packaging information
yarn analyz