Mui login database improvement and Ajax asynchronous processing [mui+flask+mongodb+hbuilderx]

️ If there is something wrong with the knowledge of the article , Please correct me. ! 

One , Preface

Today is still a day of new needs . Requirements are as follows ：1, Two passwords appear when registering , Whether the second one is changed to password confirmation .2, User experience must be both teachers and students , Whether the teacher side and the student side can be divided , Teacher side entrance , Teachers need to upload the question bank when using , View class ranking , Students should answer and check the ranking , At present, the ranking seems to be set, but I can't see .

Two , Thought design

Demand thinking design , Improve the original form , Increase type ： I am a student 、 I'm a teacher . Database design increases lixing,0 For teachers ,1 For students , Add logo . Problem solving ： Solve asynchronous operation and background permission entry function .

3、 ... and , Improve the registration form

3.1, Problems encountered 1

mui.radio defective , The radio form set by this framework is the proportion of one line , and input and label The proportion of is fixed , So if we adjust .

Let them account for 25 and 75 Another error will be thrown , Namely label The content in the is normal , If it is Chinese characters, it will be arranged vertically by default , Can't adjust , I checked all the parameter adjustments and found no reason . So I came up with another way ：

3.2, problem 1 solve

This is a mui Official documents , Obviously, it can't meet our needs ：

<div class=&quot;mui-input-row mui-radio&quot;>
 <label>radio</label>
 <input name=&quot;radio1&quot; type=&quot;radio&quot;>
</div>


If , If two radio boxes cannot be on one line , We don't have to mui frame , Use native html that will do , But another problem follows , How to fit other option styles . Problem solving ：

<div class=&quot;mui-input-row&quot;>
<label> I'm a teacher <input type=&quot;radio&quot; name=&quot;lixi&quot; value=&quot;0&quot;/></label>
<label> I am a student <input type=&quot;radio&quot; name=&quot;lixi&quot; value=&quot;1&quot; /></label>
</div>


Above code block , Let's still use its style ,mui-input-row, And because there are specified sub elements in the framework lable The style of , So we nested the native radio box elements into our lable In code block .

3.3, Solution effect display

3.4, problem 1 Supporting background debugging

informal ： Get one lixing object , Execute and return to the front desk .

lixing=request.form.get('lixing')


3.5, Problems encountered 2

I design an option button , Background button .

We need to use JavaScript To determine the access permission of the logo . however , We use external mui.post()  Cannot get back-end return value externally .

3.6, problem 2 solve

After asking Yugong to move the code , Found the problem .mui.post The method is to execute , It's about asynchronous operations . It must be executed in sequence and can be transferred to synchronization . You can synchronize . So I used ：

setTimeout(function() {}, 500);


Let the external acquisition sleep first 0.5 second , This number has no impact on the user experience .

As shown in the figure above . and , I also added judgment , If the type ID is 0 If so, you can jump to the background page , If it is 1 If students return, only teachers can enter the backstage ！. Very human ！

Last

Use the closest to the original APP Experience a high-performance front-end framework ——MUI Zhenwen ！