I am asking this because I don't know if it's possible and don't know the terms to label this.
I have a VueJS crud app that grabs data from an API backend, and then renders it in great HTML. Thanks JavaScript, and V8 since I use Chrome.
Now, I'd like to send someone an HTML email with a snippet of the table embedded. That is a backend process. But I obviously don't want to rewrite the VueJS HTML on the backend or in another place.
Is there any way, from the backend only, to call the VueJS coding and grab the HTML, or an innerHTML section, as if I'd called it on the front end?
The answer to this is to use NodeJS and perform Server Side Rendering
This will require using the render method in VueJS which is different than what my CRUD application is written in.
Also as discussed in the link above, reactivity doesn't exist on the server side.
And in addition, the actual data that would be listed in a table needs to be pre-fetched.
Related
I work as an intern in a manufacturing company that designed a HTML web page run by JavaScript that is supposed to show real time statistics of the machine lines.
To do this it must connect to a SQL server in real time to obtain the data that it needs to display charts and reports.
I have good knowledge of other programming languages but I'm a rookie at JavaScript and I would like to know the safest way to do this, since the database contains sensitive data.
Can this be done?
You need some sort of middleman to connect to the database. Since you want to do this with JavaScript, I suggest you checkout NodeJS . You can then build a simple API that when consumed it will return the data required. One benefit of building an API is you will be able to consume it from the website that is already built without having to make any changes in the back end. You can simply use fetch the data from the front end using JavaScript.
Don't do this directly with Javascript in your HTML file in client-side(It is not secure).
Do this with any language that you know on the server side and read those data using ajax and display them in your HTML file.
Here's the view that updates the timestamp of a model in database whenever it's called,
def data(request):
new = Data.objects.filter(user=request.user)
new.update(timestamp=timezone.now())
return HttpResponse('')
This view is related to this URL,
url(r'^go/$', views.data, name='data')
Everything is fine, but how can I call this view & update the database without refreshing the page?
This is a great question as its something that may not seem as logical in django as say node or js based server and client interactions. Let me give a generic response then go more detailed.
Django is a web server. It has some newer functionality that allows it to more easily interact with javascript than it could in the past, but it is normally used in conjunction with a javascript framework. I'll normally build a django app w/ django-rest-framework and reactjs. So my workflow is normally to build the datamodel, serve up the page with compiled js as a static asset, and have those two communicate via a rest-api stood up with DRF.
Specifically to your question, you can simply have your django model communicate with the server via ajax posting to endpoint in your app. An example of a jquery/ajax post is available at this link. The only other thing you will want to look into is supporting csrf which Django discusses in the docs.
Let me know if this helps. If it does but requires specific snippets, let me know.
When NOT using AngularJS, I create a web site that responds to /mysite/users . It returns an HTML page with user records filled within a table-like display.
I wish to try an AngularJS approach. I somehow load the web page, and that page's onload() calls /mysite/users, which returns merely a JSON list of users.
The "somehow" part is what bothers me. So far I'm reduced to first calling /mysite/showUsers. This downloads the HTML page which then itself calls /mysite/users.
Likewise, when editing with AngularJS I think I'll have to call /mysite/userEdit/1 which on load calls /mysite/user/1.
I think I'm missing something. Can I get a clue?
Thanks,
Jerome.
As you've noted, the AngularJS approach is not to load pre-rendered HTML from the server, but instead load a list of JSON data and rely on AngularJS directives to populate the DOM client-side.
A concrete example in your case would be a page which loads an Angular module that fetches a JSON list of users from /api/users, and leverages the ng-repeat directive to populate the data into the page right in the visitor's browser. Here's a JSFiddle I found that illustrates how you'd accomplish this.
It's all a matter of where the data gets inserted into the HTML; It can happen on the server-side or the client-side, and Angular favors the latter. (This is not to say you can't load pre-rendered HTML from the server, but you would be working against the way AngularJS is designed to be used.)
I've had trouble describing what I want to have happen. Perhaps it is because it goes against the grain of Angular.
My server responds to /user/1 with the JSON for user #1. For the browser to deal with it, I must have a web page already there that can display this JSON. Chicken and egg style, how do I get this edit web page into the browser? My classic example is using /user to list the users and having a link on each user to edit it, such as "/SOMETHING/1".
In the meantime, I've decided to go with /user/edit/1. That will cause the server to render an HTML file, using server-side scripting to insert a phrase that on window.onload() fills the skeleton HTML with the result of /user/1.
Thanks, Collin, for replying.
Ok, so basically what is happening is I have a search input on my index page. The user types something in the search input, and that is sent to the Django REST api which returns the data in JSON format. I can loop through that results array using Angular ng-repeat. But my question is: is there a way to send that request to another django view and have django return the values using a for loop and a template that I already created?
( I am trying to avoid recreating the template specifically for Angular because that would be repetitive)
Any suggestions, or help on this comes much appreciated. Thank you in advance for taking the time to help me.
All the best.
It depends on the architecture of your application.
If you are building your client as a single page web application using Angular & your business logic is served using the Django REST API in JSON/XML format. Then rendering of the view should be the responsibility of the client side code.
As per me whatever you are doing looks perfectly okay. I don't see any redundancy of the templates in this architecture.
I have a php program/app which asks for input, generate an image and post th image link to user's timeline (processor.php). I used PHP SDK in posting to timeline since I am more familiar with PHP. Now, in my gallery.php, i want to show like buttons for each generated image. I am aware that i have no option but use JS SDK in making button. but is it fine if i use two different SDK's in a single app?
processor.php - PHP SDK
gallerry.php - JS SDK
thanks for your answer! I would love to try your suggetions too
There shouldn't be any problem using PHP and JS in the same application, quite a common use case. You would normally use PHP to create the Web Application structure, handle backend logic, and then use JS to handle UI events.
There's nothing special about combining the two, just create the Web page with JS as normal for the view, and use PHP to build it.
Hope this helps.
Yes, there is no problem, the two APIs are designed to work together. The PHP API is usually used to created the backend logic (for example OAuth implementation, posting and getting data, etc) and the JS API to handle user iniated events.
Also see this: https://stackoverflow.com/a/6728092/1107118 on how to handle login state. Normally the JS API is used for logging in too, and then with the PHP API you take the access token and do the backend actions.