В предыдущем посте я рассмотрел как собрать бэкенд, отвечающий за передачу данных по сотрудникам.
В этом закончу сбор frontend части, основанной на vue и bootstrap
Почему взяты эти 2 фреймворка?
- Bootstrap позволяет собирать адаптивную красоту без особых усилий и прописываний css
- Vue в свою очередь на простом и понятном (и вовсе не сложном) уровне позволяет манипулировать данными и DOM моделью, беря отрисовку и реактивность на себя.
Оговорюсь сразу: я не претендую на качество и красоту кода, опытному разработчику будет сразу видны и понятны все косяки — буду рад узнать о них в комментариях к посту. К самому коду я подходил с позиции: «Работает? Работает! Иду дальше…».
Фронтенд часть
Вероятно, ее проще и удобнее смотреть на codepen.io — https://codepen.io/DmitriiBeattle/full/oNaaypR
Index.html — как есть, без комментариев…..
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ООО "Рога и копыта" Внутренний справочник</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
</head>
</head>
<body>
<nav class="navbar navbar-expand-sm bg-success navbar-dark">
<div class="container-fluid">
<ul class="navbar-nav">
<li class="nav-item">
<h3 class="text-white">Справочник сотрудников</h3>
</li>
</ul>
</div>
</nav>
<div class="container mt-3" id="app">
<nav class="navbar bg-body-tertiary">
<div class="container">
<div class="container">
<div class="row justify-content-start">
<div class="col-2">
<a class="navbar-brand">Поиск по фамилии:</a>
</div>
<div class="col-6">
<input class="form-control me-2" placeholder="Фамилия" v-model="searchReq">
</div>
<div class="col-2">
<button class="btn btn-outline-success" @click="startSearch()">Поиск</button>
</div>
<div class="col-2">
<button class="btn btn-outline-success text-start" @click="clearSearch()">Очистить</button>
</div>
</div>
</div>
</div>
</nav>
<div class="container mt-5" v-show="showed">
<div class="row align-items-start">
<div class="col-6">
<p><strong>Фамилия:</strong> {{filteredEmployees[0][2]}}</p>
<p><strong>Имя:</strong> {{filteredEmployees[0][3]}}</p>
<p><strong>Отчество:</strong> {{filteredEmployees[0][4]}}</p>
<p><strong>Дата рождения:</strong> {{new Date(filteredEmployees[0][5]).toLocaleDateString()}}</p>
<p><strong>Должность:</strong> {{filteredEmployees[0][6]}}</p>
<p><strong>Департамент:</strong> {{filteredEmployees[0][7]}}</p>
<p><strong>Внутренний телефон:</strong> {{filteredEmployees[0][8]}}</p>
<p><strong>Мобильный:</strong> {{filteredEmployees[0][9]}}</p>
<p><strong>Эл почта:</strong> {{filteredEmployees[0][10]}}</p>
</div>
<div class="col-6">
<img :src="filteredEmployees[0][11]" class="rounded">
</div>
</div>
</div>
<div class="mt-3">
<p class="lead">
Список всех сотрудников:
</p>
</div>
<div>
<table class="table table-hover table-sm">
<thead>
<tr class="text-start">
<th scope="col">#</th>
<th scope="col">Фамилия</th>
<th scope="col">Имя</th>
<th scope="col">Отчество</th>
<th scope="col">Должность</th>
<th scope="col">Телефон</th>
</tr>
</thead>
<tbody>
<tr v-for="(employee, index) in employees" :key="index">
<td @click="clickSearch(employee[2])">{{ employee[0] }}</td>
<td @click="clickSearch(employee[2])">{{ employee[2] }}</td>
<td @click="clickSearch(employee[2])">{{ employee[3] }}</td>
<td @click="clickSearch(employee[2])">{{ employee[4] }}</td>
<td @click="clickSearch(employee[2])">{{ employee[6] }}</td>
<td @click="clickSearch(employee[2])">{{ employee[8] }}</td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
<script src="https://unpkg.com/vue@next"></script>
<script src="app.js"></script>
</body>
</html>app.js
const vueApp = {
data() {
return {
employees: [],
filteredEmployees: [["", "", "", "", "", "", "", "", "", "", "", "", ""]],
searchReq: '',
showed: false
}
},
methods: {
async getData() {
const link = "https://script.google.com/macros/s/AKfycbx1fxTl0p9nDrcdZ43dh6nHSl-xQDPnCin1fmouAgS9e5rLfA2qJISVW0mHGXuh7TsyGw/exec"
const res = await fetch(link)
this.employees = await res.json()
},
startSearch() {
const initialArr = this.employees.filter(row => row[2].toLowerCase() == this.searchReq.toLowerCase())
if (initialArr.length != 0) {
this.filteredEmployees = initialArr
this.showed = true
}
},
clearSearch() {
this.showed = false
this.searchReq = ""
},
clickSearch(surname) {
this.searchReq = surname
this.startSearch()
}
},
mounted() {
this.getData()
}
}
const app = Vue.createApp(vueApp)
app.mount('#app')async getData() — фетчит данные из гугл скрипта.
startSearch() — поиск по введённому слову в строку поиска. Сам поиск происходит по фамилии, указанной полностью. Можно было заморочиться поиском через регулярные выражения, но это отдельная тема, отношения к блогу и его содержанию не имеющая никакого.
clearSearch() — очитка поля поиска и сворчавания блока c v-show="showed" — условная отрисовка во вью
mounted() — пожалуй самое интересное во всем коде. Так как получение внешних данных — метод асинхронный, через mounted он как раз и добавляется на страницу по факту получения всех данных со стороны сервера.
В результате имею следующее:
Добрый день! Можете подсказать как сделать переход «роутинг» на другую html страницу при нажатии кнопки на текущей странице?
Добрый день.
Чтобы попробовать ответить на ваш вопрос, необходимо несколько уточнений.
1. Используется ли вью в вашем проекте
2. Как именно используется — как простой способ, описанный выше через cdn и index.html или же через vue-cli и компоненты (там же и вебпак и vue-router и вообще по уму если, то туда же для хранения полученных данных и их обработки нужен еще и vuex)
3. Нужен переход именно на другую html страницу или же все-таки там у вас SPA и используется vue-router с routes на компоненты
4. Переходы — можно же и просто через a href или мы про роуты, посмотрите ссылку — https://router.vuejs.org/guide/essentials/history-mode.html
Просто если мы про роуты, то там всего один index.html на входе-выходе и вся магия вьюхой творится внутри него, других html там нет.
В общем пока вопросов, чтобы правильно ответить пока больше 🙂
Спасибо за развернутый ответ. Буду изучать. Может подскажите как проще понять (изучить) Vue и vuex?
Если дружите с английским то, помимо официальной доки (а она довольно подробная — https://vuejs.org/guide/introduction.html ), наверное проще всего по ютубу:
net ninja — https://www.youtube.com/playlist?list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1
traversy media — https://www.youtube.com/watch?v=YrxBCBibVo0&list=PL4cUxeGkcC9hYYGbV60Vq3IXYNfDk8At1
и из официальных источников вот это https://www.vuemastery.com/courses/intro-to-vue-3/intro-to-vue3
Из русскоязычных смотрел многих, но понравились записи Дмитрия Лаврика — https://www.youtube.com/watch?v=Tg5DIdx1JE0&list=PLyeqauxei6jc1kJom6Nq4ZonjghIgGjhN
Плюс его можно поискать в сети и на торрентах с продвинутым курсом по вью, но там порог вхождения и нужна некая база по js
Огромное спасибо!!!