node-vue-moba

node-vue-moba is a full-stack boilerplate from the Bilibili 全栈之巅 tutorial series that builds a Honor of Kings mobile portal and an Element UI admin dashboard on Node.js (Express) and Vue.js.

What is node-vue-moba?

node-vue-moba is the complete source code of a tutorial project that develops a mobile-facing Honor of Kings official-style website plus a separate content-management dashboard. It takes MongoDB data models for categories, equipment, heroes, articles, ad slots, and admin accounts, exposes them through an Express REST API, and consumes that API from both a Vue.js + Element UI backend and a mobile front-end. The repository is maintained by wxs77577, has 981 stars, and is updated continuously alongside the associated Bilibili video lessons.

Key Features

• Generic CRUD admin — Element UI-based backend pages let you create, edit, delete, and list categories, sub-categories, equipment, heroes, articles, ad slots, and admins through common interfaces.
• REST search API — Logged-in admins can query at /admin/api/rest/heroes?q=亚瑟; search is plain text, not regex, capped at 100 characters, and matches name, title, or username depending on the resource.
• Image upload with multer — Uploads are handled by multer and protected by login checks on the upload route, with client-side headers configured through el-upload.
• JWT authentication — Passwords are hashed with bcrypt and tokens are issued via jsonwebtoken; Vue Router beforeEach guards plus server-side checks restrict access.
• Rich text editing — Article management integrates the Quill rich text editor for content input.
• Mobile front-end foundation — The mobile site uses SCSS "tool-style" utility classes, resets, color/flex margin definitions, Swiper carousels, sprite images, iconfont icons, and reusable card/list-card components.
• Hero and news detail pages — Both mobile detail pages are built out with front-end templates, admin editing support, API endpoints, and UI polish.
• Deployment and scaling — The tutorial covers production builds, Aliyun ECS setup, Nginx reverse proxy, MongoDB installation, PM2 process management, data migration with mongodump, free SSL via HTTPS, and Aliyun OSS for uploaded files.

Who should use node-vue-moba?

People following the 全栈之巅 Bilibili course use this repository as the reference implementation for each video chapter, covering everything from environment setup to server deployment. Full-stack developers can reuse it as a starting point for a content-driven web app that pairs a Vue.js Element UI dashboard with a separate mobile front-end. Students of game-site architecture can study how hero data, news articles, and advertisement slots are modeled and rendered in a typical MOBA game portal.

Use cases

• Bilibili tutorial learners: watch each episode and inspect the matching commit or file for the exact admin CRUD, login flow, or mobile component being taught.
• Developers building content websites: adapt the generic /admin/api/rest/ resource pattern and the Element UI tables to manage any collection in MongoDB.
• Mobile UI starters: reuse the SCSS utility classes, Swiper carousel, sprite handling, and list-card components to prototype a game-oriented mobile site quickly.
• DevOps practice: follow the deployment chapters to take a Node.js + MongoDB app to an Aliyun server with Nginx, PM2, and HTTPS.

How does node-vue-moba work?

The backend defines shared CRUD controllers under /admin/api/rest/, with the optional q query parameter for keyword search on specific fields. Requests are authenticated with a bearer JWT, and upload routes additionally accept the token through header configuration. On the client side, the admin SPA uses Vue Router meta fields and beforeEach navigation guards to bounce unauthenticated users. The mobile site renders lists and details from the same REST APIs and stores static assets via sprite sheets, iconfont, and (optionally) Aliyun OSS.

FAQ

What tech stack does node-vue-moba use?

The project uses Node.js with the Express framework for the API, Vue.js with Element UI for the admin dashboard, and MongoDB for persistence. The mobile front-end is also Vue.js with SCSS styling. Additional libraries include multer for uploads, quill for rich text, bcrypt for password hashing, and jsonwebtoken for JWT auth.

Does node-vue-moba include a mobile website?

Yes. The mobile site section of the repository includes the homepage with top Swiper carousel, sprite images, iconfont, card and list-card components, news listing and detail pages, hero listing and detail pages, and shared SCSS tool-style definitions for colors, spacing, and flex layout.

Is node-vue-moba free?

The repository is hosted publicly on GitHub with no license restrictions mentioned in the README, and it is intended as free tutorial source code. Users are advised to check the repository directly for any licensing or usage terms before reusing it in production.

Is this project affiliated with Honor of Kings?

No, node-vue-moba is a fan-made learning project created by the Bilibili channel 全栈之巅. It extracts hero data from the official Honor of Kings website for educational demonstrations, but it is not an official Tencent product.

What is the admin search API limit?

The search endpoint at /admin/api/rest/ treats q as plain text, not a regular expression, and accepts a maximum of 100 characters. It searches name for categories, items, and ad slots; name and title for heroes; title for articles; and username for admins. Omitting q changes nothing in the response.