Short Video Content Distribution System Setup Log: Vue Frontend, Recommendation Algorithm, Multi-language Admin

Disclaimer: This article is for technical education and demonstration only. It is not professional or financial advice. Any real-world deployment must comply with applicable laws and regulations.

Last week I helped a friend who runs local lifestyle content get this short video distribution system up and running. His requirements were straightforward: publish short videos, recommend by interest, edit copy and language from the admin panel, and ideally hook up payments. The source code uses a Vue frontend, and the admin ships with a probability simulation demo module. I spent two and a half days going from environment setup to launch. Not too many traps, but a few things are worth writing down.

1. Hands-on Test: What It Looks Like Once Running

Vue Frontend Page Structure

The frontend is built with Vue 3 plus Vite, routes are lazy-loaded, and the first screen loads in about 1.2 seconds locally. There are four main pages — home feed, detail page, profile center, and task center — and the components are split up reasonably cleanly. The task center handles task distribution logic: users watch videos, check in, and share to earn points, points can be redeemed, and the rules are configured in the admin panel. This part was easier to change than I expected — task types are an enum, so adding a new task just means adding one branch.

Content Feed and Recommendation Slots

The feed API returns paginated data, 10 items per page, with a score field. Default sorting uses weighted scoring: full-watch rate, likes, comments, and publish-time decay — the ratios are adjustable in the admin panel. I set the time decay to 0.3 and new content got noticeably more exposure. The recommendation list is cached in Redis with a 60-second TTL, which is plenty at this scale. No need to rush into a complex setup.

Multi-language and Admin Control

Multi-language uses i18n with JSON language packs. The admin has a language pack management page that supports hot updates, so no rebuild is needed. When the client wanted Traditional Chinese, I just added a zh-TW.json file — ten minutes, done. The admin uses RBAC: super admin, operations, and reviewer. Reviewers can only view the content list and can’t change recommendation weights, which is a fairly disciplined design.

2. Deployment Notes: Environment, Payments, Random Number Demo Module

Environment Dependencies

Node 16+, MySQL 8, Redis 6, and Nginx as a reverse proxy. Drop the frontend build into a static directory and run the backend under PM2. One small trap here: Vite builds with absolute paths by default, so deploying to a subdirectory requires changing base — otherwise you get a blank page. That’s exactly what bit me the first time.

Payment Gateway Integration

Payments go through the WeChat and Alipay sandbox demo modes. The callback URL is configured in the admin panel, and signature parameters are sorted in dictionary order. My callback kept returning a signature error; after a long hunt it turned out Nginx wasn’t passing through Content-Type — adding the proxy_set_header line fixed it. When you go live, remember to swap in the production URLs, and never put keys in the frontend.

Random Number Demo Module

The source ships with a probability simulation demo module — essentially random number generation plus weight configuration. The admin can set weights for different outcomes and generate a result disclosure script, which serves as a technical demo for activity interaction scenarios. I isolated it on its own route and added operation logs, so whoever changed a weight and when is recorded. I’d recommend keeping this for demo use only; for real business, swap in an auditable random source.

Highlight: The best part of this system is that every admin configuration item goes through the same API layer. Changing language, weights, or task rules needs no code changes, so customization mostly means adding things in the service layer.

3. Room for Customization

API Layer

All endpoints return a uniform code/data/msg structure, so new endpoints just follow the pattern. I added a content favorites list endpoint — route to service, forty lines total, and not a single line of frontend changed.

Recommendation Weights

Right now it’s rule-based scoring. Moving to collaborative filtering isn’t hard either: extract the score calculation into a standalone service and the frontend doesn’t need to change at all. With a small content volume, rule-based scoring is actually more stable — don’t pile on models from day one.

Multi-language Expansion

Language packs are split by module. Adding a language just means adding a JSON file and registering the language code in the admin; the frontend switcher list picks it up automatically. This is a comfortable design — operations can maintain it themselves.

4. Who This Fits

It suits local content aggregation, interest-based communities, and content platforms with task incentives. The frontend is Vue-based, so anyone comfortable with Vue 3 can take over and start changing things. The admin permissions and configuration are complete enough that operations can adjust things without paging a developer every day. If you just want a pure showcase site, this is on the heavy side — cut the task center and payment module and it gets much lighter.

FAQ

Q: Can the frontend theme be changed? The client wants their own colors.
A: Yes. The primary color is a CSS variable — change a few values in :root. Border radius and spacing are extracted too, so you don’t have to dig through file after file.

Q: Do recommendations require an algorithm model?
A: No. Under tens of thousands of items, rule-based scoring plus manual weighting is more than enough. Adjusting weights in the admin is far faster than tuning a model — revisit once you have enough data.

Q: How do I troubleshoot a payment callback that keeps failing signature verification?
A: First check whether Nginx is passing through request headers, then check parameter sorting and encoding, and finally confirm the key isn’t a sandbox/production mix-up. Mine was the first one.

Q: Does changing admin config require a service restart?
A: Mostly no. Config is read from Redis, so clearing the cache applies it. Language packs and weights are hot-updated; only permission table structure changes need a restart.

One last note: this system is only meant for ordinary content distribution and social products. Deployment and operation must comply with local laws and regulations, and any unlawful use is prohibited. This article is for technical education only.

Disclaimer: This article is for technical education and demonstration only. It is not professional or financial advice. Any real-world deployment must comply with applicable laws and regulations.

#Short Video System #Vue 3 #Recommendation Algorithm #Multi-language #Deployment Notes