과제 관리표를 Node.js와 SQLite로 만드는 ①
EXCEL에서 과제 관리를 하고 있지만 프로젝트 멤버 공유에서 사용하고 있습니다.
누군가가 열리거나 하면 편집할 수 없어 조금 귀찮습니다.
이번에는 Node.js와 SQLite를 사용하여 누구나 언제든지 과제 관리에 등록할 수 있는 것을 목표로 만들어 보았습니다.
환경은 Windows10에서 실시하고 있습니다.
사용하는 것
내가 동작을 확인한 구성은 다음과 같습니다.
SQLite 설치
공식 사이트에 가서 다운로드 및 설치를 수행하십시오.
DB와 테이블 만들기
이번에는 ToBe 방식에서의 과제 관리를 실시하는 것을 상정해, 이하의 컬럼을 준비합니다.
설치 폴더를 현재 디렉토리로 만듭니다.
먼저 DB를 만들고 싶으므로 다음 명령을 실행합니다.
sqlite3 kadai.db
다음으로 과제 기록을 위해 테이블을 만듭니다.
create table kadaitable(id integer PRIMARY KEY AUTOINCREMENT,kadai text,risou text,gyappu text,kaiketsu text)
열은 다음과 같이 정의했습니다.
실제로는 멋진 컬럼명이라든지 받을 수 있으면 좋겠습니다.
작업이 끝나면 Ctrl+c를 사용하여 SQLite를 종료하고 명령 프롬프트를 닫습니다.
Node.js에서 과제 관리 테이블의 병아리 만들기 (Express)
이번에는 「kadai」라고 하는 폴더를 작성해, 거기에 만들어 가는 상정으로 설명합니다.
kadai 폴더를 현재로 설정하고 Node 명령 프롬프트에 필요한 다음 패키지를 설치합니다.
# Express-Generator
npm i express-generator
# SQLiteのモジュール
npm i sqlite3
톱 페이지 만들기
톱 페이지에는 다음을 만듭니다.
레이아웃 등은 스스로 그다지 생각하고 싶지 않기 때문에, CDN의 Bootstrap를 이용했습니다.
views 폴더의 index.ejs를 다음과 같이 편집합니다.
<!DOCTYPE html>
<html>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<head>
<title>課題管理表</title>
<link rel='stylesheet' href='/stylesheets/style.css' />
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h1>課題管理票</h1>
</div></br>
<div class="col-md-12">
<a href="/write">新規追加</a>
<br>
</div>
<br>
<table class="table table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">No</th>
<th scope="col">課題</th>
<th scope="col">理想の姿</th>
<th scope="col">理想の姿とのギャップ</th>
<th scope="col">解決策</th>
</tr>
</thead>
<tbody>
<% for(var i=0; i<posts.length; i++) {%>
<tr>
<td><%= posts[i].id%></td>
<td><%= posts[i].kadai%></td>
<td><%= posts[i].risou%></td>
<td><%= posts[i].gyappu%></td>
<td><%= posts[i].kaiketsu%></td>
</tr>
<% } %>
</tbody>
</table>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.bundle.min.js" integrity="sha384-zDnhMsjVZfS3hiP7oCBRmfjkQC4fzxVxFhBx8Hkz2aZX8gEvA/jsP3eXRCvzTofP" crossorigin="anonymous"></script>
</body>
</html>
그런 다음 index.ejs에서 사용하기위한 routes에서 index.js를 수정합니다.
var express = require('express');
var sqlite3 = require('sqlite3');
var router = express.Router();
var db = new sqlite3.Database('./kadai.db');
/* GET home page. */
router.get('/', (req, res, next) => {
db.serialize(() => {
db.all('select * from kadaitable', (err, rows) => {
if (!err && rows) {
const newRows = rows.map(row => {
if (row.content) {
row.content = row.content.replace(/\r?\n/g, '<br>');
}
return row;
});
console.log(newRows);
res.render('index', { posts: newRows });
}
});
});
});
module.exports = router;
우선 톱 화면은 이것으로 완성되었습니다.
Node 명령 프롬프트에서 다음을 실행합니다.
npm start
이런 느낌의 메뉴가 표시되면 OK입니다.
그 2에서는 등록 화면을 만들어, 실제로 SQLite의 테이블에 기입해, 톱 화면에 반영될 때까지를 해설합니다.
그 ②로 링크
Reference
이 문제에 관하여(과제 관리표를 Node.js와 SQLite로 만드는 ①), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/S_Yuuki/items/c9b49b893b5030be8915텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
