nodejs + my sql + Express + vue + layui + html 구현 추가 삭제 검사

nodejs 공 부 를 한 지 꽤 됐어 요. 일이 좀 있어 서 안 썼어 요.
1. 먼저 아이디어 로 새 항목 만 들 기
2. 만 든 항목 디 렉 터 리 는 다음 그림 과 같 습 니 다.
3. app. js 를 열 고 모델 엔진 설정 을 찾 아 수정 합 니 다.
다음 코드 로 변경
/ / 자신 이 수정 한 기본 엔진 / / html 페이지 app. set ('views', path. join ( dirname,' / views') 을 전단 에서 식별 할 수 있 도록 수정 합 니 다.app.engine(’.html’, require(‘ejs’).__express); app.set(‘view engine’, ‘html’); 4.1 데이터베이스 js 는 routes 디 렉 터 리 에서 db. js 를 만 들 고 이 모듈 은 데이터 뱅 크 의 연결 을 책임 집 니 다.
/ / db. js / / MySQL 에 연결 하려 면 드라이버 를 설치 해 야 합 니 다 $cnpm install mysql var mysql = require ('mysql');var pool = mysql. createPool ({host: 'localhost', user: 'root', / 사용자 이름 암호: 'root', / / 비밀번호 데이터베이스: 'school' / / 데이터베이스 이름}); / /일반적인 처리 방법 function query (sql, callback) {pool. getConnection (function (err, connection) {/ Use the connection connection. query (sql, function (err, rows) {callback (err, rows); / / connection. release (); / / 링크 방출});} exports. query = query;데이터베이스 테이블 생 성 / * Navicat Premium Data Transfer Source Server: mysql Source Server Type: MySQL Source Server Version: 50560 Source Host: localhost: 3306 Source Schema: school Target Server Type: MySQL Target Server Version: 50560 File Encoding: 65001 날짜: 23 / 11 / 2018 03: 38: 15 * /
SET NAMES utf8mb4; SET FOREIGN_KEY_CHECKS = 0;
– Table structure for students
DROP TABLE IF EXISTS students ; CREATE TABLE students ( id int(11) NOT NULL AUTO_INCREMENT, name varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, age int(11) NULL DEFAULT NULL, adress varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT NULL, PRIMARY KEY ( id ) USING BTREE ) ENGINE = InnoDB AUTO_INCREMENT = 14 CHARACTER SET = utf8 COLLATE = utf8_general_ci ROW_FORMAT = Compact;
– Records of students
INSERT INTO students VALUES (1, '꽃', 18, '매 계 호 구기 문');INSERT INTO students VALUES (2, '꽃', 12, '상하 이');INSERT INTO students VALUES (3, '장삼', 12, '북경');INSERT INTO students VALUES (4, '2qa2qa', 13, '북경');INSERT INTO students VALUES (5, '꽃 2', 12, '111');INSERT INTO students VALUES (6, '꽃', 12, '북경 132213');INSERT INTO students VALUES (8, '2qa2qa', 12, '북경');INSERT INTO students VALUES (9, '22q', 13, '북경 132213');
SET FOREIGN_KEY_CHECKS = 1;
경로 (매 핑 주소, 프로 그래 밍 개발 을 한 사람 은 모두 알 고 있 습 니 다. 간단 한 예 를 들 어 "/ student / getStudent ById. action")
routes 디 렉 터 리 에 student. js 를 만 듭 니 다. 이 모듈 은 맵 주소 의 등록 을 담당 합 니 다. 쉽게 말 하면 MVC 의 Controller 층 에 해당 합 니 다. 여 기 는 전통 적 인 MVC 모드 가 아니 라 기능 만 실 현 했 습 니 다.
var express = require(‘express’);//프레임 모듈 var router = express. Router (); /데이터베이스 패키지 var db = require (". / db. js") 를 도입 합 니 다.
/**

조회 목록 페이지 는 페이지 페이지 페이지 에 직접 올 라 와 a * / router. get ('/', function (req, res, next) {res. render ('students', {title:' 학생 관리 ', datas: []}) 를 조회 합 니 다.

/**

페이지 전환 추가 * /

router. post ('/ add', function (req, res) {var name = req. body. name; var age = req. body. age; var adress = req. body. address; db. query ("INSERT INTO school. students (name, age, adress) values (" + name + "," + age + "," + adress + ")", function (err, rows) {if (err) {res. end ('추가 실패:' + err);} else {res. json(rows); } }) });
/**

삭제 * / router. post ('/ del', function (req, res) {var id = req. body. id; db. query ("delete from students where id =" + id, function (err, rows) {if (err) {res. end ('삭제 실패:' + err)});

/**

수정 * / router. post ('/ update', function (req, res) {var id = req. body. id; var name = req. body. name; var age = req. body. age; var adress = req. body. address; db. query ("update students set name =" "+ name +", age = "+ age +", adress = '+ adress +' where id = "+ id, function (err, rows) {if (err) {res. end('수정 실패:' + err);} else {/ / 나 는 모두 post 로 제출 하고 ajax 로 되 돌아 갑 니 다 / res. redirect ('/ students'); 그렇지 않 으 면 구문 으로 res. json (rows);

 } else {
     //       post   ajax  

     res.json(rows);

 }

});

/**

조회 * / router. post ('/ search', function (req, res) {var name = req. body. s name; var sql = "select * from students"; if (name) {sql + = "where name like '%" + name + "%";} console. log (sql) db. query (sql, function (err, rows) {if (err) {res. end ("조회 실패:", err)} else {res. json (rows);});

module. exports = router; 보 기 는 views 의. ejs 파일 을 삭제 하고 프로젝트 캡 처 에 대응 하 는 html 파일 을 만 듭 니 다. html 페이지 를 여러 개 쓰 고 싶 지 않 기 때문에 여기 서 layui 와 vue 를 사 용 했 습 니 다.
새로 증가 하 다
이름:  
/ / 귀속 이벤트 $('. layui - btn'). on ('click', function () {var type = $(this). data ('type'); active [type]? active [type]. call (this): ';});

 }

상기 파일 만 있 고 프로젝트 는 실행 할 수 없습니다. 가장 중요 한 파일 app. js 입 니 다. 이 파일 은 node. js 서비스의 총 프로필 입 니 다. 프레임 워 크 파일 모듈 의 로드 순 서 를 알려 줍 니 다.
var createError = require(‘http-errors’); var express = require(‘express’); var path = require(‘path’); var cookieParser = require(‘cookie-parser’); var logger = require(‘morgan’); var index = require(’./routes/index’); var student= require(’./routes/student’);
var app = express();
/ / 원래 템 플 릿 엔진 설정 / / app. set ('views', path. join ( dirname,' views'); / app. set ('view engine', 'ejs');
/ / 자신 이 수정 한 기본 엔진 / / 여기 서 수정 한 것 은 전단 에서 html 페이지 app. set ('views', path. join ( dirname,' / views'), app. engine ('html', require ('ejs'), app. set (' view engine ',' html ') 을 식별 할 수 있 도록 하기 위해 서 입 니 다.
app. use ('dev'); app. use (express. json ()); app. use (express. urlencoded ({extended: false})); app. use (cookieParser ()); app. use (express. static (path. join ( dirname, 'public'))); / / js 파일 app. use ('/', index); app. use ('/ student', student);
// catch 404 and forward to error handler app.use(function(req, res, next) { var err = new Error(‘Not Found’); err.status = 404; next(err); });
// error handler app.use(function(err, req, res, next) { // set locals, only providing error in development res.locals.message = err.message; res.locals.error = req.app.get(‘env’) === ‘development’ ? err : {};

})


//  
function find() {
    var data2;
    $.ajax({
        type: "post",
        url: "/student/search",
        dataType: "json",
        data: {//  servlet   ,
            s_name: $('#s_name').val(),
        },
        async: false,//    ajax   
        success: function (data) {
            console.log(data);
            //       
            data2 = data;
        }
    });
    return data2;
}

});
module.exports = app;
프로젝트 접근 시작http://localhost:3000/student이 럴 때 오류 가 발생 하면 일부 모듈 이 다운로드 되 지 않 았 을 수도 있 습 니 다.