The first web project-WeChat applet back-end development

The first web project-WeChat applet back-end development

Preface

Last summer, by chance, several classmates and I joined a teaching reform project hosted by a teacher of the college. The demand was to develop a learning app based on SPOC and flipped classroom computer composition principles (similar to MOOC and Zhidao). After discussing and deciding to reduce the difficulty, I first made a WeChat applet with a background management system, so my first web project started~

demand analysis

Here is a brief introduction to the meaning of SPOC and flipped classroom

• Flipped classroom

"Flipping Classroom" is a new teaching model that subverts traditional teaching from "classroom lectures + homework exercises" to "self-learning before class + collaborative exploration in the classroom".

• SPOC

SPOC (Small Private Online Course) is generally translated as a small-scale restricted online course or a small-scale private online course, and is transliterated as a "private broadcast course."
The requirement of this project is to develop a small learning program. Users are divided into students and teachers. Students can watch videos, courseware, animations, complete homework, exams, and post comments, likes, and replies. Teachers can upload teaching videos. , Courseware, animations and release of homework, exams, notifications, as well as view students’ learning conditions, as well as review responses to comments to answer students’ doubts in a timely manner.

Team division

There are four people in the team. The overall work is divided into three parts: product design, front-end development, and back-end development, and two people are responsible for each part. Among them, I am responsible for back-end development and concurrently as the project leader (in fact, I am not as tall as it sounds, but I need to take on more roles in decision-making, coordination, and communication).

Overall design

This is divided into small programs and management systems.
First, there are small programs. Put a few prototype pictures made with ink knives. Let me say a few more words. Basically, the small programs on the market are authorized by WeChat to log in directly, and at most bind mobile phone numbers. This is because the registration and login functions are set up because of the statistics of the students’ learning.



As for the management system, it was only started in October, and I and another back-end classmate were responsible. The time is tight. We are the front-end small Bai does not have a very systematic way to do development, but roughly determines which modules need to be made, and which tables are added, deleted, and modified for each module. The prototype diagram is not included here (more simple)

Development tools and coding implementation

Mini Program Front End

As far as I know, the front-end students first go to the WeChat public platform to register an account, and then do some development settings. The specific steps are Baidu. The front end uses WeChat developer tools. Anything that is not can be found in the WeChat open documentation , including many useful APIs.

rear end

This is divided into two parts: database and interface code

database

The mysql database is used. I followed a small program introductory tutorial online by the school. The recommended local development environment is phpstudy , which integrates php, mysql, apache, FTP, Nginx and the database management tool phpMyAdmin. About the use of phpMyAdmin Please see https://blog.csdn.net/u012767761/article/details/78238487 The
original database was not well designed and there are many redundant data. Later, after learning the course of database system, I made major changes. Determine which entities are there and the connections between entities, then draw the er diagram, and finally model. The external code constraint greatly reduces the redundancy and reduces the number of tables.

Interface code

The tutorial uses the php language, the framework is thinkphp5, and the development manual is https://www.kancloud.cn/manual/thinkphp5/118003. I went to the b site to find a video to learn the basic grammar of PHP, and then I went to learn native How does php and the framework operate the database. Then start coding according to the business logic. In fact, the structure of each interface (or a function in the class) is similar, and it is mainly composed of three parts: receiving data from the front end, adding/deleting/modifying/checking, and returning the result to the front end.
By the way, the code editing uses sublime text3, see the tutorial https://blog.csdn.net/sam976/article/details/75333079/, this is not an ide, there are not so many functions such as debugging and running, just editing , Adding comments, formatting, etc., here comes the formatting code function (select the code first, then Edit -> Line -> Reindent), which is a bit spicy. And if there is a grammatical error, it will not be automatically detected like eclipse. It has been pitted several times before. If it can't be found by the naked eye, it can only be tested with postman.

Management system front end 1.0

At the beginning, we didn’t know that we needed to make a management system. We thought that all the functions were put in a small program. Later, the teacher discussed this issue with us, and we knew that there was such a thing. In fact, the management system should have everything. Function, that is, add, delete, modify and check all tables in the database, and the small program only needs some lightweight functions. As for uploading large-capacity files, viewing learning conditions, these functions that are not lightweight enough are all placed in the management system. Well, there is always the first time in everything, we started to learn the basic front-end three-piece html, css, javascript.
When we started, we wanted to implement the function first. The ugly interface didn’t matter much. So after learning the basics of part of the three-piece set, we learned the ajax technology (because it needs to communicate with the backend). The first thing we used here is to create XMLHttpRequest. For the object, use the open() method to set the request type and url, and use the send() method to send data to the backend until it encounters jquery, and all subsequent requests use $.ajax().
Then I encountered another difficulty. Basically, tables are used to display data. How to dynamically add tables after obtaining data? After looking up the data, each piece of data is spliced ​​into a string contained by the tr tag, and then the append() method is called to add to the table after obtaining the form label with jquery.
In addition, we want to set the button at the end of each row for event processing, so we append the data and put the button tag into the string just now, and then set the id attribute for each button, such as the one used to modify the data It's called fixi, and the last i represents the row of the table, then add event listener, get the id when you click the button, and then check the last bit to determine the row.
These methods are quite cumbersome to implement, and it feels like we are reinventing the wheel. We are also a little depressed, because every page basically has to do this, but at that time there is not so much time and energy to learn the framework, just want to implement the function first (U1s1, there were so many classes last semester that I almost vomited).
Put two interface pictures

Management system front end 2.0

Before the holiday, we finally had more free time. We decided to change the interface, but after all, our own level is not high, so we need to use some third-party things.
After testing some functions with the front-end of the applet, one day the back-end classmates found an open source framework and we looked at the documentation together, and finally decided: we will use it.
Please layui on the stage, the classic modular front-end frame, low threshold and ready to use out of the box.
You can read the document https://www.layui.com/doc/ before you actually use it. I personally feel that it is quite quick to get started. Layui provides many useful components including pop-up layers, forms, forms, file uploads, stream loading and so on.
Take the table as an example. Before we used append to dynamically add data, now we can directly table.render() and set the parameters; before we set the id for the button for event processing, now we bind the toolbar and directly table.on() That's it; and the paging that we didn't implement before, now it's enough to set the paging parameters, and then paging to read when querying the database.
In addition, layui provides a page layout template, including logo, user name, exit button, navigation bar, and some css animations. What we have to do is to follow its template, and the styles of page elements also refer to what it provides.
With the assistance of layui, we can focus more on business logic and user experience.

test

Back-end local test

Tool: postman
use: open a new window, select the request type, enter the url, set the parameters, click send.
I think this test is to simulate the front-end to send data and then run the back-end code to see if the result is correct. It is a white box test, but we I am not a professional tester. At present, the test is not very standardized. I can only think of different test cases as much as possible.

Front-end and back-end joint testing

Since there is no way to face-to-face when I go home during the holiday, I can only use the online test of Tencent meeting.
After the deployment work is completed, we usually write the interface code, and then tell the front-end students the URL and required parameters (note here, the request api of the WeChat applet only allows URLs starting with https, and the front-end must be configured on the WeChat public platform Good legal domain name, otherwise it will report an error), the front end fills these things into the wx.request api and then runs, they will check whether the returned data is correct, we will check the database situation, if there is no problem, we will test a few more data, If you can, go to the next function. This method should belong to the unit test of the V model mentioned by the soft engineering.

deploy

I use Sina Cloud. After real-name authentication and student authentication, some Yundou (Sina Cloud’s billing unit, 1RMB=100 Yundou) will be sent to Sina Cloud.
Follow the tutorial mentioned before to deploy the entire thinkphp project to Sina Cloud. See https: //www.kancloud.cn/cnzxo/sae_thinkphp/1423806

• Code

You can upload the compressed package in the code management, or edit it online (similar to a notepad), and it is best to write it locally and then paste it.

• database

Open the shared mysql service, currently using phpmyadmin4.9 version, and then create a table or import sql files

• Cache

Open the memcached service and set the capacity to 16MB (save a little money). Actually, I don’t know what this service does, but if I don’t open the access interface, a fatal error will be reported?

• File storage

We need to save many types of files including videos, courseware, animations, homework, exams, and avatars, so they need to be stored on the server. Open the storage service here, see https://www.sinacloud.com/doc/sae/php/storage.html#cyberduck for how to use it, ordinary users have a quota of 5 buckets, each with a capacity of 10G, and then use it directly as a local disk. You can upload files in the console or write code. After uploading, you can get the url, and then you can access it through the network. For details on how to operate php in the Sina cloud environment, see the official document http://apidoc.sinaapp.com/source-class- sinacloud.sae.Storage.html#.

• domain name

Application information can view second-level domain names, independent domain names need to be purchased and filed

• Log

The log center can view the interface, time, requester device and other information of each request

• other

The console can also view traffic statistics, resource usage, and consumption in real time

to sum up

I have done both the front and back ends of this project, and I feel that the front end is not suitable for me. It may be that the page element style and user experience are not sensitive enough, but I must admit that the front end is quite interesting. As for the back-end, I pay more attention to logic. At present, my understanding of the back-end is only at the database, network, and deployment levels. In fact, if the number of users is very large, high concurrency must be considered, and multithreading, load balancing, and message queues must be used Waiting for the technology, so there is still a lot of technology to learn.
Finally, I would like to thank the teacher for his support and several teammates for their help. It's the first time to write a blog. If there is any inappropriate description, please point it out.