javascript nodejs-crud实践

Posted 2021-05-03

const express = require('express')
const app = express()
const http = require('http').Server(app)
const mysql = require('mysql')
const bodyParser = require('body-parser');
const topicRouter= require('./routes/topic');

// global constant
const port = 3003

// server init
http.listen(port, "0.0.0.0", function(){
  console.log('listening on :', port);
});

// config
app.use(express.static('public'))
app.set('view engine', 'pug');
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({ extended: true }))
app.use('/topic',topicRouter);


// routes
app.get('/', (req, res) => {
  connection.query('SELECT * FROM topic',(err,rows)=>{
    if(err) console.log(err);
    
    res.render('index', {topics:rows})
  })
})

// database
const connection = mysql.createConnection({
  host     : 'localhost',
  user : 'root',
  password: '111111',
  database : 'dohyunwoo'
});

connection.connect()

const express = require('express')
const app = express()
const http = require('http').Server(app)
const mysql = require('mysql')
const bodyParser = require('body-parser');
var router = express.Router();

// create
router.get('/create',(req,res)=>{
  res.render('create');
})

router.post('/create',(req,res)=>{
  connection.query(`INSERT INTO topic (title, description, created, author_id) VALUES (?,?,NOW(),?)`,
    [req.body.title,req.body.description,1],(err,rows)=>{
      if (err) throw err
      res.redirect('/');
    })
})

router.put('/update/:topicId',(req,res)=>{
  connection.query(`UPDATE topic SET title=?,description=? WHERE id=?`,
    [req.body.title,req.body.description,req.params.topicId],(err,rows)=>{
      if (err) throw err
      res.send(req.body.title);
    })
})

// delete
router.delete('/delete/:topicId',(req,res)=>{
  connection.query(`DELETE FROM topic WHERE id=?`,
    [req.params.topicId],(err,rows)=>{
      if (err) throw err
      res.send('success');
    })
})

// read
router.get('/:title',(req,res)=>{
    let topics, topic;

    connection.query('SELECT * FROM topic',(err,rows)=>{
      if(err) console.log(err);
      topics = rows;
      connection.query(`SELECT * FROM topic WHERE title=?`, [req.params.title], (err,rows)=>{
        if(err) console.log(err);
        topic = rows[0];
        res.render('index', {topics: topics, topic: topic})
      })
    })   
})

// database
const connection = mysql.createConnection({
  host     : 'localhost',
  user : 'root',
  password: '111111',
  database : 'dohyunwoo'
});

connection.connect()

module.exports=router;

extends layout

block content
  img(src='/pictures/DigitalHippy.png ', style='width:300px; display:block; margin-top:10px')
  h1 
    a(href='/') WELCOME!!
  p
  div
    each topic in topics
      a(class='menu-link' href='/topic/'+topic.title data-id=topic.id)= topic.title
  p
  div
    input(type="button" id="create" value="CREATE")
    if(topic)
      input(type="hidden" id="topicId" value=topic.id)
      input(type="button" id="update" value="UPDATE")
      input(type="button" id="delete" value="DELETE")   
  p.update-topic-form
    if(topic)
      input(type="text" id="title" class="editable input-type01" value=topic.title disabled)
      textarea(id="description" class="editable textarea-type01" disabled)= topic.description      
    else
      h2 Welcome
      p Welcome, My Website
    

extends layout

block content
  h2 Welcome To Create Page!
  br
  form(action='/topic/create', method='post')
    p
      input(type='text', name='title', placeholder='title')
    p
      textarea(name='description', placeholder='description')
    p
      input(type='submit')


 
    

$(function () {
  // click
  $('#create').on('click',(event)=>{GoCreatePage()})

  $('.update-topic-form').click(function(){
    $('.editable').removeAttr('disabled');
  })

  $('#update').on('click',()=>{
    let id = $('#topicId').val();
    let title = $('#title').val();
    let description = $('#description').val();

    $.ajax({
      type: "PUT",
      url: '/topic/update/'+id,
      data: {
        title: title,
        description: description
      },
      success: function(res){
        $('.editable').attr('disabled', 'disabled');
        $('.menu-link[data-id='+id+']').html(res);
      },
    });
  })

  $('#delete').on('click',()=>{
    console.log('delete!');
    
    let id = $('#topicId').val();

    $.ajax({
      type: "DELETE",
      url: '/topic/delete/'+id,
      data: {},
      success: function(res){
        if(res == 'success'){   
          location.href = '/';
        }
      },
    });
  })
})

function GoCreatePage()
{ window.location.href='/topic/create';}