LI WENHAO / Running-Football

Go to a project
Toggle navigation Toggle navigation pinning
Switch branch/tag
README.md 7.02 KB

Running Football Blog

Table of Contents

  • About the Project
  • Getting Started
  • Usage
  • Roadmap
  • Contribution
  • License
  • Contact

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.

Home Page

image

Article categorization

image

message board

image

the content of an article

image

Article management

image

Message management

image

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

Node.js

Element-UI

Webpack5

MongoDB

Koa2

Vue2

Getting Started

  1. Install and configure the git environment, use the git clone command to download the project

  2. Install and configure node, vue, mongodb environment

  3. View the project structure, import related dependencies, load the project configuration

  4. Configure the database environment and initialize user information

  5. Start the project

Installation

Environmental preparation

​ node.js Environment configuration installation

​ vue、vue-cli Environment configuration installation

​ mongodb、mongodb Compass Environment configuration installation

Usage

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

Roadmap

  1. Realize the blog homepage function
  2. Add blog background management function module
  3. Introduce image lazy loading, paging optimization
  4. Extend article editing functions, introduce vue-color and markdown syntax plugins

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated. If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again! 1.Fork the Project 2.Create your Feature Branch 3.Commit your Changes 4.Push to the Branch 5.Open a Pull Request

License

Distributed under the MIT License.

Contact

LI WENHAO-277438587@qq.com HU XUYANG-hu869815189@gmail.com

Project Link: http://khuhub.khu.ac.kr/2018102153/Running-Football.git