M4x201 - Javascript Technologies
Seminar 11 - Fullstack Application using Node.js/Express/MySQL/Vue3 (2)
Jérôme Landré, Amine Haraoubia, Florent Libbrecht, Fabrice Meuzeret.
URCA - IUT Troyes - MMI - 2021
1. Vue3 to display data
-
Today, we will go on with the "DUTAF" application by adding the list of the comics extracted from the database and the text search for comics.
-
Before we start:
-
We are going to write a Vue3 page to display the comics on the "/comics" route.
-
In your views folder, create a "comics.html" page (copied from the index.php page).
-
The content should be:
<div id="content">
<h1>Our comics are there!</h1>
<table id="myComics">
<thead><th>Title</th><th>Serie</th><th>Price</th><th>Author</th><th>Editor</th></thead>
</table>
</div>- The resulting page should look like this:
- Add the two javascript files to your "comics.html" page (inside the head tag):
<script src="???/jquery-3.6.0.min.js"></script>
<script src="???/vue3.js"></script>- Add the appCode to your "comics.html" file and replace the ??? by the route to your JSON comics:
<script>
var appCode={
data() {
return { // the comics array is empty at the beginning
comics: []
}
},
created() { // when the Vue object is created
var self = this // we save the object "this" in "self"
// now, we can get the JSON data
$.getJSON('???', function (data) {
self.comics = data // we push the data to the comics array
})
}
}
vue1 = Vue.createApp(appCode)
vue1.mount('#content')
</script>- In order to see the changes, add the code to display the comics array (after the closing table tag):
...
</table>
<p>{{ comics }}</p>
</div>
...
- Now that we have the JSON data in our "comics" array, use Vue3 to display the comics on the screen:
2. The search page
2.a. Setting up the "searchcomics" route
- In order to look for comics having (for instance) the text "uder" (for Uderzo, the creator of Astérix) in their title (bd_titre), serie (bd_serie), editor name (editeur_nom) or author name (auteur_nom) fields, we are going to create a special route with a parameter (/searchcomics/:theText) that will return a JSON file corresponding to the MySQL request to look for:
SELECT * FROM bds
INNER JOIN editeurs ON editeurs.editeur_id=bds._editeur_id
INNER JOIN auteurs ON auteurs.auteur_id=bds._auteur_id
WHERE bd_titre LIKE "%uder%"
OR bd_serie LIKE "%uder%"
OR auteur_nom LIKE "%uder%"
OR editeur_nom LIKE "%uder%"- In your server, add the lines and replace the ??? by the correct MySQL request:
...
app.get('/searchcomics/:theText', (req, res) => {
var co=mysql.createConnection({
host: 'localhost',
user: 'root',
password: 'root', // '' (nothing) on Windows
database: 'dutafnode',
port: 8889 // 3306 on Windows
})
co.connect()
var theText=req.params.theText // get the route parameter
co.query('???', function (err, rows, fields) {
if (err) throw err
//res.end(JSON.stringify(rows))
co.end()
res.json(rows)
})
})
...-
The aim of this route is to send a JSON file back to the browser on demand.
-
Test your code with this URL: "http://localhost:2222/searchcomics/uder".
-
The resulting page should contain only "Astérix" comics:
-
In your server, add the route "/search" to link to the "views/search.html" file.
-
The incomplete "views/search.html" file is given:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link href="/assets/styles.css" rel="stylesheet" type="text/css" />
<script src="/assets/jquery-3.6.0.min.js"></script>
<script src="/assets/vue3.js"></script>
</head>
<body>
<header>
<nav>
<a href="/">Home</a> -
<a href="/comics">Comics</a> -
<a href="/search">Search</a> -
<a href="/admin">Admin.</a>
</nav>
</header>
<div id="content">
<h1>Search the comics:</h1>
<p>Search the comics for:
<input type="text" name="searchText" v-model="searchText" />
<button ???>Search!</button></p>
<table id="myComics">
<thead><th>Title</th><th>Serie</th><th>Price</th>
<th>Author</th><th>Editor</th></thead>
???
</table>
<p>{{ comicsWithText }}</p>
</div>
<script>
var appCode={
data() {
return {
searchText: '',
comicsWithText: []
}
},
methods: {
searchComics: function () {
var self = this
$.getJSON('???, function (data) {
self.comicsWithText = data
})
}
}
}
vue1 = Vue.createApp(appCode)
vue1.mount('#content')
</script>
</body>
</html>- Complete the previous file to be able to search for text in the comics.
- To be continued...