VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 2

0

VDOM Stack (Vue Deno Oak MongoDB) CRUD example

In the VDOM Stack series, we already create basic Vue application in last article. Now in this article, we’ll use Deno and Oak framework for create API with database MongoDB.

VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 2
VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 2

Now create backend directory after frontend and make file like below image:

Backend directory
Backend directory

Well, I already told you that I’ll share GitHub repo with you. So, don’t worry about the structure.

Install Deno in Window 10

If you’re new to Deno.js then you have to install Deno firstly using PowerShell:


Install Deno using iwr https://deno.land/x/install/install.ps1 -useb | iex
Install Deno using iwr https://deno.land/x/install/install.ps1 -useb | iex

Notable error comes

May be, you can get these types of error:

Could not find module “https://deno.land/x/cors/mod.ts” locally

Solution: Run below code.


Re-open your Vscode. If error not resolved. Now your app.ts code will be


contact.ts in model of backend


Here we call mongodb function to insert for create contact. Now write code for controller.

Hey, what is the mean of application/ld+json at line 12?

The snippet you got is a script containing JSON-LD data format, a method of encoding Linked Data using JSON. Schema.org vocabulary is used to markup web contents so that they can be understood by major’s search engines (Google, Microsoft, Yandex and Yahoo!). Search engines use this information to display to display relevant contents to users. So, nothing much to worry about it.

Now create a routes for the Deno API with Mongodb.


Now configure the database inside db.ts inside models’ folder.


Before moving next, download denon and give access the read and write access to Deno by running below code:


Then run the code:


Output should be like:

VDOM Stack, VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 2

Deno server is now running. Let add our created API in our components.


Update ContactComponent.vue to fetch all contacts in table


VDOM fetch all contacts
VDOM fetch all contacts

For now, we are able to insert and fetch the contact details from MongoDb using Deno with Vue. In the next article we’ll implement the edit and delete functionality.

0
Summary
VDOM Stack (Vue Deno Oak MongoDB) CRUD example – Part 2
Article Name
VDOM Stack (Vue Deno Oak MongoDB) CRUD example
Description
In the VDOM Stack series, we already create basic Vue application in last article. Now in this article, we'll use Deno and Oak framework for create API. 
Author
Publisher Name
Das JS
Publisher Logo