Node Vue Moba

Overview

This project is a full-stack development of a mobile website and management backend for the game "王者荣耀" (King of Glory). The project is based on the "全栈之巅" video tutorial series on Bilibili, with the related source code available on GitHub. The project covers topics such as setting up the development environment, building the management backend with Element UI, creating CRUD interfaces, managing assets like images and heroes, implementing rich text editing, managing advertisements, and handling user authentication. The project also includes a section on building the mobile website, covering topics such as styling, layout, carousel images, sprite images, font icons, and various components. The final sections focus on deployment, including setting up a production environment, purchasing a domain and server, configuring Nginx, MongoDB, git, Node.js, and SSL certificate, and using Aliyun OSS for file storage.

Features

• Management Backend:

  • Built with Element UI for the admin interface
  • Implements CRUD operations for categories, equipments, heroes, and articles
  • Supports image uploading with Multer middleware
  • Integrates with a rich text editor (Quill) for article editing
  • Manages homepage advertisements and administrator accounts
  • Implements login functionality with JWT authentication
  • Handles client-side route restrictions and file upload login validation

• Mobile Website:

  • Implements a concept of "utility styles" and uses SASS (SCSS)
  • Includes style reset, color and font definitions, flexbox layouts, and common margins/paddings
  • Builds a homepage framework with a top menu
  • Uses Vue Swiper for top carousel images
  • Utilizes sprite images and font icons
  • Implements card and list-card components
  • Implements news information sections and hero lists
  • Configures news and hero details pages

• Deployment:

  • Guides for setting up a production environment
  • Instructions for purchasing a domain, configuring DNS, installing Nginx, MongoDB, git, and Node.js
  • Guides for pulling code, installing PM2, configuring Nginx reverse proxy, and migrating local data to the server
  • Advanced topics on HTTPS security with free SSL certificates and utilizing Aliyun OSS for file storage

Summary

This full-stack development project covers the creation of a mobile website and management backend for the game "王者荣耀" (King of Glory). The project includes extensive features such as CRUD operations, image uploading, rich text editing, user authentication, and more. The mobile website section covers styling concepts, layout design using various components, and integrating plugins like Vue Swiper. The deployment section provides guidance on setting up a production environment and configuring various tools and services. Overall, this project serves as a comprehensive guide to building a full-stack application using Node.js and Vue.js.