node-vue-moba: a teaching codebase for an Express, Vue and Element UI full stack

A course repository with three applications in one tree

node-vue-moba is a full stack project built with Node.js and Express.js on the server and Vue.js with Element UI on the client. The README states that it is the source code for a Chinese video course published on Bilibili, and the description names the goal as building a mobile facing official site and an admin dashboard for a MOBA game, that is the hero shooter genre and specifically a well known mobile title of that kind.

That framing matters for anyone assessing it as a dependency. This is teaching material that happens to be a working application, not a framework or a starter template maintained for reuse. There is no package published for general consumption, and the README lists no compatibility matrix.

The repository layout reflects the three-part structure of the course. There is an admin directory for the dashboard application, a server directory for the Express API, a web directory for the mobile site front end, and a docs directory. The topic tags line up with that structure: admin-dashboard, element-ui, express, moba, nodejs and vuejs.

The course is organised into five arcs. The first is the entry material covering the project introduction, tool installation and environment setup for nodejs, npm and mongodb, and initialising the project. The second builds the Element UI admin interface with full CRUD for categories, subcategories, equipment, heroes, skills, articles and homepage advertising slots. The third builds the mobile site. The fourth covers release and deployment on Alibaba Cloud, and the fifth covers HTTPS with a free SSL certificate and Alibaba Cloud OSS for uploaded files.

The tool names are worth listing because they define the dependency surface: multer for image upload, quill for the rich text editor, bcrypt for administrator accounts, and jsonwebtoken for login.

Admin REST search that filters on plain text, not regular expressions

The most concrete piece of documentation in the README describes searching across the admin resources, either through the dashboard interface or by calling the REST API as the logged-in administrator.

The documented example is a single GET request:

GET /admin/api/rest/heroes?q=亚瑟

The behaviour rules are stated precisely, which makes this endpoint easy to reason about. The search is performed as plain text and does not execute the input as a regular expression. The keyword is limited to 100 characters. Each resource searches specific fields: categories, items and advertising slots search the name field, heroes search name and title, articles search title, and administrators search username. When the q parameter is not supplied, the endpoint behaviour stays the same as before.

The plain-text decision is the one to notice. A search box wired to a regular expression is a straightforward way to turn an ordinary input into a denial-of-service vector, and this implementation avoids it by construction. The 100 character limit bounds the work further.

The field mapping also differs per entity, which means a shared front-end search component cannot treat all resources identically. A hero search matches two fields while an article search matches one, and the administrator search looks at a completely different attribute. Anyone generalising the search UI has to keep that mapping in mind.

Admin features: JWT login, route guards and upload authentication

The admin half of the course covers the parts of a dashboard that are easy to leave half finished.

Authentication runs through jsonwebtoken, with a login interface and server side login validation. The client side protection is a route guard using beforeEach together with meta, which is the standard way to stop an unauthorised user reaching an admin route. Uploaded files are also protected: the file upload path checks login, and the client passes the token through headers when using el-upload.

Content handling covers images with multer and long form articles with a rich text editor built on quill. Passwords for administrator accounts are hashed with bcrypt. The admin accounts themselves are managed inside the dashboard, alongside the categories, subcategories, equipment, heroes with their skill editing and multi-select associations through el-select, articles, and homepage advertising slots.

The recurring pattern across the admin section is a generic CRUD interface layer that the course applies repeatedly, which is the practical takeaway for a reader. Each resource gets list, create, edit and delete views built on the same base, and the hero editor adds relation handling on top of that base.

Two details in the course outline are worth flagging as the kind of thing that only shows up in production: a bug fix to the homepage news entry, and the news and hero data interfaces that back the mobile site. The mobile front end is not fed with static mock data, it reads from the same Express API the admin writes to.

Mobile site structure built from SCSS tool-style variables

The mobile site section of the course is organised around a design system idea rather than around pages.

The concept is a tool-style approach with SASS and SCSS, which in the course means the layout tokens live in variables rather than in each component. The first steps build a style reset, then define the site colour and typography values, then a set of common flex layout styles, then common margin and padding definitions. Once those exist, the home page frame and top menu can be built without hard-coded values.

On top of that base come the reusable pieces: a carousel for the homepage top images using vue swiper, sprite images, icon fonts through iconfont, a card component, and list card components that combine nav, swiper and card. The list card in particular is the piece the news and hero sections on the homepage reuse.

The page-level work that follows covers the homepage news and hero sections in three steps each, which is a useful pattern to notice: data entry in the admin, a data interface, and then the display. The detail pages for news and heroes are built separately, and the hero detail page is split across four stages covering front end preparation, admin editing, the hero detail header and finishing touches.

For a learner, the value here is seeing the token layer built before the pages. For a team considering reuse, the honest reading is that this is a themed site for one game, and the tokens are the only part with obvious transfer.

Deployment on Alibaba Cloud with Nginx, MongoDB and pm2

The fourth arc of the course is the release and deployment section, and it is the part most likely to age fastest.

The sequence given is: compile for the production environment, buy a domain and a server, set up DNS resolution, install and configure Nginx, install and configure the MongoDB database, install git and configure an SSH key, install Node.js and configure the Taobao mirror, pull the code and install pm2 to run the project, configure Nginx as a reverse proxy, and migrate local data to the server with mongodump.

The steps describe a conventional single server deployment. The application is served by pm2 as a Node process, Nginx sits in front as a reverse proxy, MongoDB holds the data, and the initial content comes from a local dump.

Two of those instructions are dated in a way worth naming. Configuring a Taobao npm mirror assumes you are installing packages from a China region registry, which is a regional choice rather than a general one. And the plan to enable HTTPS with a free SSL certificate depends on a certificate renewal process that the outline does not describe, so a deployment following it verbatim will need a renewal answer before it goes live.

The advanced section adds Alibaba Cloud OSS as the store for uploaded files, which is a sensible way to move image storage out of the application server once uploads become real traffic.

What you are actually getting: course code without releases

The practical limits of this repository are worth stating plainly.

There are no GitHub releases for the project, so there is no versioned artefact to depend on. The last push was on 2026-08-11, and the README says the project is being updated continuously, but nothing pins that into a release cadence. Adopting it means tracking the master branch, which for a code base meant to be read is reasonable and for a code base meant to be run is a different proposition.

The scope is also narrow by design. The admin handles a fixed set of resources for a game-themed site, and the mobile front end is built for a hero shooter roster with categories, equipment, heroes, skills and news articles. There is no multi-tenant support, no localisation layer, no authentication beyond the admin JWT flow, and no rate limiting described anywhere in the README.

The environment assumptions are modest: Node.js, npm and MongoDB, with no message queue, cache or search service in the outline. That is a point in the project's favour for a small deployment, and a limit for anything larger.

The licence is MIT, with a LICENSE file at the root of the repository, which is permissive and suitable for using this code as a base for commercial work, provided the notice is preserved.

Editorial conclusion

Adopt node-vue-moba as a reference when you are learning or teaching an Express plus Vue plus Element UI stack, or when you want a concrete example of JWT route guards, multer uploads and a mobile site layout built with SCSS variables. Skip it as a foundation for a new product, because it is course code without releases, versioning discipline or a stated compatibility matrix, and it targets a game-themed site rather than a reusable domain. Before copying from it, check the admin REST search endpoint for the field mapping you need, confirm the Node.js, npm and MongoDB prerequisites it assumes, and read the MIT licence file at the repository root.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. README
4. topfullstack/node-vue-moba on GitHub