How can I connect a Vue.js frontend with java backend? - javascript

I'm developing a project with a team in which we need to create a simple CRM. Some people recommended us Vue.js to create a great looking UI, but the problem is that with the team we mainly use java. So, we wanted to know if it's there a way in which we can connect a UI made with Vue.js with backend made in java. Any recommendations on how to do it? I've searched a bit and some articles say we can use java+tomcat to connect the Vue.js UI. We need to know if these kind of integration is possible before starting to spend time into making the UI in Vue.js if we can't connect it with our java backend.
Thanks.

I did an example of a project that integrates a java api (built with spring boot) and a vue.js frontend. It uses frontend-maven-plugin to build the frontend and copy it into the resources.
The source is in my github repo

Yes is possible, see this question
you will use your java application which is your "backend" as web service.

Related

How can I Integrate Docusign's E-Signature API with a .NET Backend and Angular + Devextreme front end?

Absolutely lost on this one. Our Backend uses c# with .NET, our Front end uses Angular with DevExtreme. Node.JS is not being used for the Angular side as far as I'm aware, our project lead wants me to figure out how to integrate Docusign onto our Web app.
Do you use Visual Studio? already have a project for your back-end?
If you do, just go to add a new nuget package and search "DocuSign"
I assume you wanted the eSignature functionality, that would DocuSign.eSign.dll
Once you add it though, you'll get access to the functionality, but you still need a few things.
To set up your OAuth quickly/easily, highly recommend you use the Quickstart, it will generate a separate C# project for you, but then you can just copy/paste the relevant code+configuration to your existing project.

Should we integrate SpringMVC(Thymeleaf, Jsp) with Js frameworks (Reactjs, AngularJs,..)

I'm new to Js frameworks like Reactjs, AngularJs.
And I'm tasked by my customers with the responsibility of researching to integrate Thymeleaf with one of javascript framework to handle common components (commonality and componentization task) in my project.
But i'm wondering whether it's necessary to use a js framework along with SpringMVC and should we combine these technologies in java web application?
Thanks alot. I have searched for result for hours but no appropriate one found!
please refer blow 2 link,
https://github.com/noveogroup-amorgunov/spring-mvc-react
https://medium.com/#pietroghezzi/spring-and-react-js-the-easy-way-5abe8a529058
I develop differently these examples, first I develop frontend project and build. after creating an MVC project and moved my static build into the static folder. then build java project got a working project.

How to use react with material ui along with python-django

I need help to use react with material ui components in web application.
The following key technologies i worked on for several projects:
Materialize CSS, Javascript, Jquery.
The following key technologies that i want to work with for new projects:
Material UI, React
Is it good idea to work with react or to have Angular ?
How to start making a project having both django and react with material UI components?
References :
https://medium.com/codingthesmartway-com-blog/getting-started-with-material-ui-for-react-material-design-for-react-364b2688b555
https://medium.com/#TechMagic/reactjs-vs-angular5-vs-vue-js-what-to-choose-in-2018-b91e028fa91d
Front-end and backend are two separated things.
You can use whatever database, because your backend will work with that.
You can use whatever as backend.
React/vue/angular don't care how you will be communicating with server or what backend you use.
You can start with set up frontend development for react using for instance facebook-create-react-app which would set up basic development boilerplate. You will also need to take care of client-side routing (you can use react-router and you will need some way to comunicate with your backend for example with ajax calls to get your data using ES6 fetch() or some js library like axios.
It is up to you how you will handle backend but i would recommend you to use RESTfull API with django which would be communicating with your front-end
I'm doing this on a project right now. The project was set up for me with Docker however, which I'd recommend, it's very well contained. But if you don't want to use Docker you could use create-react-app. I'd make sure this is in a separate directory from your Django project, but in the same git repo.
create-react-app will create a development server for you to develop the front end with.
You'll need a few other libraries in your React code besides Material UI to fill a couple other needs:
client-side routing, I recommend react-router (for use with MUI see this docs page)
communication with the backend Django server, I recommend GraphQL.
Traditionally you'd use a RESTful API but these are very difficult to design well and have limitations in traversability and ability to change over time. I think that GraphQL is the future of web APIs and everyone should check it out.
To implement a GraphQL API in Django you can use graphene-django which integrates well with Django's ORM (models). It's documentation is thin, but I've found it works very well.
On the client side there's a few React libraries for connecting to servers with a GraphQL API. I'm using Relay which is from the same developers as React and GraphQL, but Apollo could also be a good option depending on the state of its development.
Eventually, when you deploy the project you'll need to compile production static files out of create-react-app or Webpack or whatever you're using to compile your React code. Then put the static files in a place that can serve them on your site. If you're using a production web sever like nginx the static files can be served directly without reaching Django.
The following key technologies i worked on for several projects:
Backend : Python-Django (MySQL)
Frontend : Materialize CSS, Javascript, Jquery.
The following key technologies that i want to work with for new projects:
What does work mean? If you can write api's in the backend.Go ahead and write some api's using django framework.
Backend : Python-Django (MySQL)
Frontend : Material UI, React
So can you guys help me out to implement this.
What do u mean by implement? Go ahead and find a nice react + material ui + webpack boilerplate and start the application. Try to Consume
your backend api's through it.
Is it good idea to work with react or to have Angular ?
Long discussion,You would have got this answer if you read the article that you posted
Do i need to switch to other database ?
It depends on your project
Take a look at this https://github.com/owais/django-webpack-loader which is a good strategy for launch react build with django (i use django rest) and you can use an html in jinja template where you inject the react JS code
You can eject or use config override top override the default native webpack configuration present in react JS https://www.npmjs.com/package/config-override
I think you should see Preact, which is react integrated in any MVC templating, with that you can override some places of templates by their ids.
By this solution you can inject material ui code inside your templates form or others has you need.
For the injection you need to use custom element,
https://preactjs.com/guide/v10/web-components/#creating-a-web-component

How to connect my Ionic app with my java server(Spring MVC)?

first of all: i am completey new to ionic!
I have experience in Java programing. And i have to program a application for my studies.
How do i connect ionic with java ?
I found many examples using java programming like Restful web services and other example used javascript.
Thanks
Your best bet for integrating an Ionic app/client with a java server is going to be loading JSON data over HTTP.
See the documentation on the Angular HTTP module here. https://docs.angularjs.org/api/ng/service/$http
Another option would be to return HTML, but you'll lose a lot of benefits of Angular presenting it this way.
Thanks, Dan

Creating a dynamic web page using AngularJS, WCF Service and SQL Server

I want to create a web application and I am exploring how I could do this. So I came across AngularJS. I want to use WCF Service and SQL Server in my application also. I am trying to find what AngularJS, WCF Service, SQL Server can do for me because I do not want change technologies in the middle of my project after discovering that AngularJS cannot do things which I want my application to do.
So, my question is can AngularJS help me create Static web pages and Dynamic web pages?
I can start my project in ASP.NET MVC but I want to explore AngularJS and want to find out what it is.
My project is about
Sending E-mails
Displaying content from database (in any manner using Ajax)
Voice chat, Video chat, Text chat
Can contain Javascript, jQuery, CSS, HTML5
Tell me something about it. Any suggestions?
Thanks
Your question is vague, but I'd suggest using Microsoft WebAPI instead of WCF or even ASP MVC, due to the from the ground up RESTful design of WebAPI and much easier configuration.
Using this approach, you'll still be able to query SQL Server in C# using WebAPI, so you won't need to switch your database.
There's very little documentation by comparison for querying non-RESTful web services, so you'll gain a huge advantage in terms of tutorials, blogs, etc. by going this route.
Please see below for your questions:
Can AngularJS help me create Static web pages and Dynamic web pages?
Yes certainly it can. Check it out at the official website
2.Sending E-mails
This should be the server side responsibility using an e-mail client, for instance SMTP client
3.Displaying content from database (in any manner using Ajax)
Yes, it certainly can.
4.Voice chat, Video chat, Text chat
Try WebRTC first to see if it's sufficient for your tasks
5.Can contain Javascript, jQuery, CSS, HTML5
Yes, you can use whatever you want as long as you are sure about what you are doing.
I hope following guidelines will help you.
When you create the project select WebApi template.
Then include angularjs files in the scripts folder.
Use cshtml files,but do as you in html file.
Use angular client side mvc features to build your app fast and performance.
Use the angular http service to call webapi methods.
All the c# specfic features build in the webapi.

Categories