Integración de interacciones front-end y back-end [MUI+Flask+MongoDB+HBuilderX]

¡Acostúmbrate a escribir juntos! Este es el octavo día de mi participación en el "Nuggets Daily New Plan · April Update Challenge", haz clic para ver los detalles del evento .

I. Introducción

Ha pasado un tiempo desde que desarrollé una aplicación, y realmente comenzó desde 0. El marco es ahora casi perfecto. El desarrollo del sistema de inicio de sesión, el sistema interactivo y el sistema de puntos actual está llegando a su fin. Debido a que los últimos días han estado ocupados, y en otra semana, se espera que la aplicación esté completamente desarrollada.

En segundo lugar, el sistema de puntos.

2.1, Introducción

El sistema de puntos utiliza la plantilla jqurey, la plantilla de respuesta más común. Su plantilla no tiene una función de registro de clics, necesitamos usarla para modificarla nosotros mismos.

2.2, valor de paso ajax

inserte la descripción de la imagen aquíUtilice el método ajax encapsulado por mui - "mui.post" para solicitar la interfaz de back-end.

2.4, procesamiento de back-end

Obtener el número total de preguntas en la base de datos

count = collection.estimated_document_count()
复制代码

inserte la descripción de la imagen aquí Idea: el método de extracción aleatoria está escrito por compañeros de equipo, así que haga un registro general, básicamente comprenda, use aleatorio, registre la identificación como la clave principal única y extraiga 5 entradas únicas de información de la base de datos. Regrese al py principal, py devuelve datos json al front-end. El front-end llama a la función data1(data1) para ejecutar la plantilla jqurey.

2.5, procesamiento frontal

El front-end primero crea una lista de respuestas de back-end en el archivo js, ​​de la siguiente manera:

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

Obtenga todas las respuestas para las cinco opciones, que se pasan desde el 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;
复制代码

Debido a que la respuesta seleccionada por el front-end se ha almacenado en la lista questionChoice, escribimos un bucle, repite cinco veces y juzgamos si es correcta o incorrecta. Si una es correcta, agregamos un punto a la suma (puntuación total) , de lo contrario permanecerá sin cambios.

var sum = 0;
复制代码

inserte la descripción de la imagen aquíComo se muestra en la fig.

2.6, pase el valor de la suma juzgada al backend para crear una nueva ruta

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

Es muy simple, solo use el método encapsulado por mui.post. inserte la descripción de la imagen aquíComo se muestra en la figura anterior: la parte trasera acepta el valor jifeng de la parte delantera.

tres, prueba

El valor de retorno de front-end es el siguiente:

inserte la descripción de la imagen aquíEl backend devuelve los siguientes valores:

inserte la descripción de la imagen aquíLa página es la siguiente: inserte la descripción de la imagen aquíDespués de la prueba, no hay problema.

Supongo que te gusta

Origin juejin.im/post/7084101076034535461
Recomendado
Clasificación