간단한 sns 만들기 - 07/18 틀만 잡음
기본적인 레이아웃
routes
auth.js
const express = require('express');
const router = express.Router();
router.get('/join', (req, res, next)=>{
res.render('join', {title : 'my app - join'});
next();
});
router.get('/join/local', (req, res, next)=>{
res.render('join_local', {title : 'my app - join'});
next();
});
router.post('/join/local', (req, res, next)=>{
});
module.exports = router;
page.js
const express = require('express');
const router = express.Router();
router.get('/', (req, res, next)=>{
res.render('layout', {title : 'development'});
next();
});
module.exports = router;
schemas
index.js
const mongoose = require('mongoose');
// connect functions
const connect = ()=>{
if(process.env.node_ENV !== 'production'){
mongoose.set('debug', true);
}
// show mongoose queries only when not in a production environment
mongoose.connect('mongodb://localhost:27017/sns', {
//connnect to sns database
useNewUrlParser : true,
useCreateIndex : true,
useUnifiedTopology: true,
}, (err)=>{
if(err){
console.log('connection error occured', err);
}
else{
console.log('connection success');
}
});
};
mongoose.connection.on('error', (err)=>{
console.error('connection error occured', err);
});
mongoose.connection.on('disconnected', ()=>{
console.log('the connection has been disrupted. Try connect to it again');
connect();
});
module.exports = connect;
views
join_local.html
{% extends 'layout.html' %}
{% block content %}
<div class='join_local_container'>
<form action="/auth/join/local" method="post">
<div class='join_local_item'>
<input type="text" class="join_local_input" name="username" placeholder = "username">
</div>
<div class='join_local_item'>
<input type="text" class="join_local_input" name="id" placeholder = "id">
</div>
<div class='join_local_item'>
<input type="password" class="join_local_input" name="password" placeholder ="password" onkeyup="confirmPW()">
</div>
<div class='join_local_item'>
<input type="password" class="join_local_input" name="password_check" placeholder = "confirm password" onkeyup="confirmPW()">
</div>
<div class='join_local_item'>
<span id="password_check_icon" style="font-size:12px; text-align:right;"></span>
</div>
<div class='join_button'>
<input type="submit" value='registration'>
</div>
</form>
</div>
{% endblock %}
{% block script %}
<script>
confirmPW = ()=>{
var pw = document.querySelector('input[name=password]');
var pw_check = document.querySelector('input[name=password_check]');
var pw_check_icon = document.querySelector('#password_check_icon');
if(!pw.value && !pw_check.value){
pw_check_icon.innerHTML = '';
}
else if(pw.value === pw_check.value){
pw_check_icon.style.color = '#3c803c'
pw_check_icon.innerText = 'Password Confirmed';
}
else{
pw_check_icon.style.color = '#873636'
pw_check_icon.innerText = 'Password Not Matched';
}
}
</script>
{% endblock %}
join.html
{% extends 'layout.html' %}
{% block content %}
<div class = join_container>
<div class = "join_item" id = "join_local">
<a href="/auth/join/local" style="text-decoration: none; color:black;">Join Us</a>
</div>
<div class="join_item" id="join_kakao">
<a href="/auth/join/kakao" style="text-decoration: none; color:black;">Join with Kakao</a>
</div>
</dxiv>
{% endblock %}
layout.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>{{title}}</title>
<link rel="stylesheet" href="/main.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class = "top_container">
<div class="logo_item" style="float:left; margin-left : 10px; width:10%;"><a href="/" style="text-decoration: none; color: black;">my app</a></div>
<div class="search_item" style="float:left; width:75%; text-align: center;">
<form action="/search">
<input type="text" id="search_content" placeholder="search">
</form>
</div>
<div class=auth_item" style="float:left; margin-right : 5px; width:10%; text-align:right">
<a href="/auth/login" style="text-decoration: none; color: black;">login</a> <a href="/auth/join" style="text-decoration: none; color:black;">register</a>
</div>
</div>
{% block content %}
{% endblock %}
{% block script %}
{% endblock %}
</body>
</html>
index.js
const express = require('express');
const morgan = require('morgan');
const path = require('path');
const nunjucks = require('nunjucks');
const connect = require('./schemas');
const pageRouter = require('./routes/page');
const authRouter = require('./routes/auth');
const app = express();
app.set('port', 3000);
app.set('view engine', 'html');
nunjucks.configure('views', {
autoescape: true,
express: app,
watch : true,
});
connect();
app.use(morgan('dev'));
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', pageRouter);
app.use('/auth', authRouter);
app.listen(app.get('port'), ()=>{
console.log('app is listening to port 3000');
});
Author And Source
이 문제에 관하여(간단한 sns 만들기 - 07/18 틀만 잡음), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kauthenticity/간단한-sns-만들기-0718-틀만-잡음저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)