Vue + PHP Digital Asset Demo System Setup Guide: U-Margined Contract Simulation Platform Deployment Notes

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 month I took on a project where the client wanted to build a digital asset demonstration platform for internal training and product showcases. Previously I’d used several solutions that required Elasticsearch, and just configuring the environment took forever. This time I found a newer version that eliminates that step entirely. The Vue frontend has a pretty modern interface, and the PHP backend is fully open-source which makes customization easy.

The complete system includes paper trading simulation, U-margined contract demo, options trading simulation, mining demo, exchange functions, and other modules. The key feature is that candlestick data can be generated and controlled internally without connecting to external market data APIs. While the PC version is compiled, the mobile H5 version is all source code with no modification restrictions.

Feature Module Testing Records

Core Trading Demo Functions

The paper trading section is quite well-built with all the essentials: depth charts, real-time candlesticks, and limit order placement. During testing I found you can directly configure trading pairs for each currency in the backend, and fee rates can be set individually. The U-margined contract demo section supports leverage settings from 1x to 100x, with position modes and stop-loss/take-profit parameters all adjustable on the user side.

The options trading simulation is relatively straightforward, mainly directional prediction with different cycles like 5 minutes, 15 minutes, and 1 hour. The backend allows you to control the return rate for each cycle, which is quite practical for demo and training scenarios.

Market Data Generation Mechanism

This system’s biggest highlight is the customizable candlestick generation. The backend has a “Market Data Simulation” module where you can set the base price, fluctuation range, and percentage changes for each currency. When I was testing, I set BTC to a range of 45,000-48,000, and the system automatically generates realistic candlestick data based on your configured parameters.

Full currency control means that no matter how many trading pairs you add, you can individually manage their market trends. This feature is especially suitable for product demonstrations since you don’t have to worry about external market volatility affecting your presentation. Data is stored in MySQL without the complex Elasticsearch dependencies, and query performance is sufficient.

Deployment Environment and Key Issues

Server Configuration Recommendations

I used a 4-core 8GB cloud server, and when the system runs, CPU usage stays under 30%. PHP version requirement is 7.2 or above, with 7.4 recommended, and MySQL 5.7 works fine. Nginx configuration is fairly standard – just note that the compiled Vue project goes in the web root directory, and API endpoints need proper reverse proxy setup.

Redis is a must for handling WebSocket persistent connections and caching user sessions. Initially I didn’t configure Redis persistence properly, and during testing all online users got disconnected after a service restart. Adding AOF persistence solved that issue.

Database Import Considerations

The source package includes SQL files, but direct import will throw several field type errors. Mainly timestamp field default value issues – MySQL 5.7 and later strict mode requires manual adjustments. My approach was to disable strict mode before import, then re-enable it afterward.

Currency base data needs to be added manually. The backend has a batch import feature – prepare an Excel template with currency names, codes, icon URLs and other info, then import dozens of currencies at once. Historical candlestick data can be batch-created using the backend’s data generation tool by selecting a time range and quantity.

Secondary Development and Customization Experience

The client requested adding a referral commission feature. Fortunately the PHP backend is completely open-source. The user table already had parent-child relationship fields, so I just needed to add commission calculation logic to the order table. I added hook functions at the user deposit and trading fee stages to automatically settle into parent accounts based on three-level distribution ratios.

Highlight: The Vue frontend is nicely componentized – all trading interfaces, candlestick charts, and depth charts are independent components. Changing UI styles or adjusting layouts doesn’t require touching many files. While the API documentation is simple, the naming is standardized and you can understand the business logic just by reading the code.

Multi-language switching uses the i18n approach, with language packs in the frontend lang directory. I helped the client add Japanese and Korean – after translating the JSON files, just enable them in the backend. The mobile H5 uses responsive layout and tested fine on both iPads and phones.

Security Hardening Measures

After deploying the basic features, I implemented several security measures. API endpoints got signature verification to prevent parameter tampering. Deposit and withdrawal functions were disabled since this system is positioned for demo and training purposes with no real funds involved. Backend login got IP whitelisting and two-factor authentication to prevent scanning and brute force attempts.

WebSocket connections have token validation with automatic reconnection on expiration. User passwords are stored with bcrypt encryption, far more secure than MD5. SQL injection issues are basically covered by the framework’s prepared statements, but I added type and size restrictions to file upload areas.

Suitable Use Cases

This system is well-suited for the following needs: fintech companies doing product prototype demos, training institutions conducting simulated trading education, and technical teams doing feature validation before developing digital asset business systems. Because candlestick data is controllable, it’s especially suitable for scenarios requiring demonstration of specific market trends.

I wouldn’t recommend using it directly for real business since many parts of the code are optimized for demonstration. Real environments require consideration of high concurrency, data security, risk control systems and more. But for learning, research, or early-stage validation, this codebase has quite high reference value.

Common Questions

Q: Can the frontend be packaged as an app?
A: Yes, the Vue project can be packaged into Android and iOS apps using HBuilderX without issues. I tested packaging into APK and you need to adjust the API request address from localhost to the server IP. For Apple side, if you want to publish you’ll need to handle certificates and app review.

Q: Can it connect to real market data?
A: Technically feasible – the backend has reserved interfaces for a market data collection module. I tried connecting to Binance API to pull candlestick data, mainly adjusting the database storage format. But generally people use this system precisely because it can generate its own data – connecting externally actually loses flexibility.

Q: What’s the concurrent capacity like?
A: In the test environment, 500 online users presented no pressure with stable WebSocket connections. If you need thousands of simultaneous users, I’d recommend load balancing with WebSocket services deployed separately. Database master-slave separation and Redis cluster mode are standard optimization approaches.

Q: Is ongoing maintenance troublesome?
A: The code structure is fairly clear – backend follows MVC layering and frontend uses component-based development. After I delivered to the client, their own developers could understand it. Main maintenance work is regular database backups, monitoring server resources, and occasionally adjusting some business rules based on requirements.

Disclaimer: This article is for technical education only. System usage must comply with applicable laws and regulations. The demonstration platform must not involve real monetary transactions, and users are responsible for their own actions.

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.

#Digital Asset Demo #Vue Frontend Development #PHP Open Source Setup #Contract Simulation System #Fintech