Get into the habit of writing together! This is the 8th day of my participation in the "Nuggets Daily New Plan · April Update Challenge", click to view the details of the event .

I. Introduction

It's been a while since I've developed an app, and it really started from 0. The framework is now almost perfect. The development of the login system, the interactive system, and the current point system is coming to an end. Because the last few days have been busy, and in another week, the app is expected to be fully developed.

Second, the point system

2.1, Introduction

The point system uses the jqurey template, the most common answer template. Its template does not have a click record function, we need to use it to modify it by ourselves.

2.2, ajax pass value

insert image description here Use the ajax method encapsulated by mui - "mui.post" to request the back-end interface.

2.4, back-end processing

Get the total number of questions in the database

count = collection.estimated_document_count()
复制代码

insert image description here Idea: The random extraction method is written by teammates, so make a general record, basically understand, use random, record id as the unique primary key, and extract 5 unique database entry information. Return to the main py, py returns json data to the front end. The front end calls function data1(data1) to execute the jqurey template.

2.5, front-end processing

The front-end first creates a back-end answer list in the js file, as follows:

var afterChoice = new Array();
复制代码

Get all the answers for the five options, which are passed from the backend.

afterChoice[0] = data1[0].choice;
afterChoice[1] = data1[1].choice;
afterChoice[2] = data1[2].choice;
afterChoice[3] = data1[3].choice;
afterChoice[4] = data1[4].choice;
复制代码

Because, the answer selected by the front end has been stored in the questionChoice list, so we write a loop, loop five times, and judge whether it is correct or incorrect. If one is correct, add one point to the sum (total score), otherwise it will remain unchanged.

var sum = 0;
复制代码

insert image description here As shown in FIG.

2.6, pass the judged sum value to the backend to create a new route

mui.post('http://xxxx:xxxxxx/xxxx',{
			"jifeng": sum,
		},function da1(da1){
			console.log(JSON.stringify(da1));	
		},'json');
复制代码

It's very simple, just use the method encapsulated by mui.post. insert image description here As shown in the figure above: the back end accepts the jifeng value from the front end.

Three, test

The front-end return value is as follows:

insert image description here The backend returns the following values:

insert image description here The page is as follows: After testing, there is no problem.

Integration of front-end and back-end interactions [MUI+Flask+MongoDB+HBuilderX]