Vue + element + Tencent cloud to develop and build a member management system

Time:2021-4-27

summary

This is my second tutorial after the small program cloud development practice. The small program is to study how to realize the mobile terminal. Generally, it is oriented to customers. Customers can well understand what kind of services the business provides and what the price is like through the small program, and they can place an order online if they want to. But the disadvantage is that the business function is very weak, a lot of management work can not be completed on the mobile phone, so we want to have a set of background system to meet the daily management needs of the business.
This tutorial describes the functions of the background system, technology selection, the specific building process, hoping to provide a different perspective for developers who have the needs of this technology.

requirement analysis

Based on the analysis of the demand of a seafood store, there are a lot of commodities that need to be sold by businesses. In order to improve the sales, the store has launched a promotion activity to recharge a certain amount of money and give a certain amount of money to improve the customer’s repurchase rate, so as to help the store improve the turnover. Therefore, a set of back-end system is needed to support the daily commodity management, order management, order management and sales management Member management function, of course, the system also with a simple statistical analysis function, can be in the form of chart analysis show business data.

System login

Vue + element + Tencent cloud to develop and build a member management system
Enter the user name and password to log in to the system

Registered users

Vue + element + Tencent cloud to develop and build a member management system
Enter email and password to register. After successful registration, email will be sent. You need to activate the registered email and log in to the system after activation

Dashboard

Vue + element + Tencent cloud to develop and build a member management system
Show the business situation of the store in the form of chart, including the number of customers, the number of goods, the amount of orders, the number of orders, and the turnover in the 12 months of this year in the form of line chart.

user management

Vue + element + Tencent cloud to develop and build a member management system
For customers who buy goods daily, you can enter the basic information of customers. For customers who need to recharge to become members, you can open the card

Vue + element + Tencent cloud to develop and build a member management system

Member management

Vue + element + Tencent cloud to develop and build a member management system
For customers who are already members, you can recharge them, and you can query their previous consumption records and recharge records

Vue + element + Tencent cloud to develop and build a member management system

Vue + element + Tencent cloud to develop and build a member management system

Category management

Vue + element + Tencent cloud to develop and build a member management system
Commodity categories can be maintained

Commodity management

Vue + element + Tencent cloud to develop and build a member management system
Can create goods, and manage the specifications of goods, can be on the shelf goods can also be off the shelf

Vue + element + Tencent cloud to develop and build a member management system

Order management

Vue + element + Tencent cloud to develop and build a member management system
You can create an order, and the system will automatically calculate the amount of the order after selecting the goods. For those who have become members, you can choose a membership card to pay, and automatically deduct fees

Vue + element + Tencent cloud to develop and build a member management system

Vue + element + Tencent cloud to develop and build a member management system

Technology selection

Because it is a management background built for the store based on the wechat applet technology route, the technology route is still based on Tencent’s cloud development. Fortunately, Tencent cloud has the function of website static template hosting, and the back-end function is basically provided by Tencent. The bad thing is the front-end page style. Combined with the current mainstream technology, it chooses the front-end framework Vue element admin, The advantage is that scaffolding provides all the functions, and the documents are rich, so it’s easy to learn
Vue official website
Vue rookie tutorial
Elementui official website
Official website of Vue element admin
ES6 rookie tutorial
The above is the development of the technology involved in the official website address, such as my technology is still very backward students or a little bit of a solid foundation to make their own satisfactory application
Of course, it is necessary to learn back-end knowledge of basic technology. Tencent cloud’s back-end technology is based on nodejs and mongedb, which are also necessary. You can go to rookie tutorial to learn both
Wechat public platform
Tencent cloud
Basic knowledge of the back-end, Tencent documents written very clearly, what problems encountered in the development process can be directly checked Tencent documents

Construction steps

In order to open the corresponding resources, first you need to register an account on the wechat public platform to open a small program, and then you need to open a pay as you go environment in the wechat developer tool
Step 1: open wechat developer tool and click the icon of cloud development

Vue + element + Tencent cloud to develop and build a member management system
Click settings to create a new environment and select pay as you go

Vue + element + Tencent cloud to develop and build a member management system
Step 2: open Tencent cloud development official website, log in and find the created environment

Vue + element + Tencent cloud to develop and build a member management system

Vue + element + Tencent cloud to develop and build a member management system
Set the login mode as mailbox login

Vue + element + Tencent cloud to develop and build a member management system
You can upload your own website code in static website hosting

Vue + element + Tencent cloud to develop and build a member management system
After the successful upload, businesses have their own website background

summary

Relying on the technology of Tencent cloud development in general, businesses have both PC management background and wechat small program, which truly realizes the concept of cloud integration. Taking advantage of Tencent’s east wind, they can expand their business well, hoping that in the future, stores will achieve higher performance, technology will serve the business, and business will support their dreams.

Source code

Source code, please visit
gitee.com/tuodagitee/membercms.git

This work adoptsCC agreementReprint must indicate the author and the link of this article

Recommended Today

The use of springboot Ajax

Ajax overview What is Ajax? data Ajax application scenarios? project Commodity system. Evaluation system. Map system. ….. Ajax can only send and retrieve the necessary data to the server, and use JavaScript to process the response from the server on the client side. data But Ajax technology also has disadvantages, the biggest disadvantage is that […]