A Fullstack application write with Django and VueJs, that allow to add reviews on movies.
The application is divided into 3 containers :
- API (a Django server)
- Database (postgres)
- Website Production (Vuejs)
docker-compose up -d --build
The website by default will be available at localhost:8080/
The API is consume by the website, you can access it by default at localhost:8005
Django
, Django Rest Framework
, Vue
, Vue router
, Vuex
, Vuetify
A makefile is available to help you building your vuejs server development.
make vuejs-dev
When the postgresql container start, a migration will be done automatically to apply the dump located in db/dump_db.sql
When the website received data's from the DRF API, a cast is being effectued to custom model class in javascript.
const res = await axios.get(/api/movie/ + id);
let movie_model = new MovieModel(res.data)
class MovieModel{
constructor(movie_struct){
this.id = movie_struct.api;
this.title = movie_struct.title;
[...]
}
}
This object is then use in all vuejs page, so be sure to update these model and use them, to keep a link between the api and your front code.
An alternative would be to use interface
by using typescript, but this is not the case in this project.
An advantage by using theses custom model, is the possibility to create getter and setter to reduce the code duplication and help maintening good code :
let movie_model = new MovieModel(res.data)
let names_of_actors = movie_model.getAllFullNameActors()
console.log(names_of_actors)
// Charlie Chaplin, Tom Hanks
I created also a service architecture, that will help you maintain and adding new api easily.
let movie_service = new MovieService();
movie_service.getMovie(id).then(movie_model => {
// the movie_model is a MovieModel object
});
class MoviesService {
constructor(limit) {
self.url = HOST + 'api/movies';
self.limit = limit;
}
getMovie(id){
[...]
}
}