Tutorial on writing a program to create a log in a Python web framework

In web development, the back-end code is actually quite easy to write.

For example, we write a rest API for creating a blog:

@api @post ('/api/blogs ') def api_create_blog ():  i = ctx.request.input (name= ", summary=", content= ")  name = I.name.strip ()  summary = I.summary.strip ()  content = I.content.strip ()  If not name:    raise Apivalueerror (' name ', ' name cannot be empty. ')  If not summary:    raise Apivalueerror (' summary ', ' summary cannot is empty. ')  If not content:    raise Apivalueerror (' content ', ' content cannot is empty. ')  user = ctx.request.user  blog = blog (user_id=user.id, User_name=user.name, Name=name, Summary=summary, content= Content)  Blog.insert ()  return Blog

Writing back-end python code is not only simple, but also very easy to test, Api:api_create_blog () above itself is just a normal function.

The real difficulty with web development is writing front-end pages. Front-end pages need to mix HTML, CSS, and JavaScript, and if you don't have a deep grasp of the three, the front-end pages you write will soon be difficult to maintain.

The bigger problem is that front-end pages are often dynamic pages, which means that front-end pages are often generated by back-end code.

The first way to generate a front-end page is to stitch the string:

s = '' + title + '' + body + '

It is clear that this approach is completely non-maintainable. So there's a second way of templating:

  {{title}}  {{Body}}

ASP, JSP, PHP, etc. are used in this template to generate the front-end page.

If you use a lot of JavaScript on a page (in fact most pages will), the template will still cause the JavaScript code to be tied to the backend code so tightly that it is difficult to maintain. The root cause is that the HTML DOM model responsible for the display is not separated from the JavaScript code responsible for data and interaction.

Writing maintainable front-end code is no easy feat. The MVC pattern, combined with the backend, has been unable to meet the needs of complex page logic, so the new Mvvm:model View ViewModel model emerges.

MVVM was first proposed by Microsoft, and it drew on the MVC idea of desktop applications, which represented the model with pure JavaScript objects in the front-end pages:

View is pure HTML:

Since model represents data, view is responsible for displaying the two to maximize separation.

The link between model and view is ViewModel. The ViewModel is responsible for synchronizing the model data to the view display, and is responsible for synchronizing the view's changes back to model.

ViewModel How to write? It is necessary to write a generic ViewModel in JavaScript so that the entire MVVM model can be reused.

The good news is that there are already many mature MVVM frameworks, such as Angularjs,knockoutjs. We chose Vue, an easy-to-use MVVM framework, to implement the page templates/manage_blog_edit.html to create a blog:

{% extends ' __base__.html '%} {% block title%} Edit log {% Endblock%}{% block Beforehead%}{% endblock%}{% block content%}  {% endblock%}

When we initialize Vue, we specify 3 parameters:

El: Based on the selector to find the bound view, here is #form-blog, is the ID of Form-blog DOM, corresponding to a

tag;

Data:javascript the model that the object represents, we initialize {name: ', Summary: ', content: '};

Methods:view can trigger J Avascript function, submit is the function that is triggered when the form is submitted.

Next, in the label, with a few simple v-model, you can have Vue associate the model with the view:

Form forms are linked to the Submit method by associating the event that submits the form.

It is important to note that in MVVM, the model and view are bound in two directions. If we modify the value of the text box in the form, we can get the new value in the model immediately. Try entering text into a form, and then opening the JavaScript console in Chrome, you can access a single property via Vm.name, or through a VM. $data access the entire model:

If we modify the model in JavaScript logic, this change is immediately reflected in the view. Try typing vm.name = ' mvvm intro ' in the JavaScript console to see that the contents of the text box are automatically synchronized:

Two-way binding is the most important role of the MVVM framework. With MVVM, we give complex display logic to the framework. Since the backend has written a separate rest API, it is very easy for the front end to submit the form with Ajax, and the back end is completely separated.

