nodejs+mysql+Express+vue+layui+html實現的增刪改查
阿新 • • 發佈:2018-12-01
學習nodejs已經有一段時間了由於一些事情一直沒有寫
1.首先使用idea新建一個專案
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',//使用者名稱 password: 'root',//密碼 database: '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 Date: 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/getStudentById.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.adress;
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)
} else {
//我這裡都是用的post提交且ajax返回
res.json(rows);
}
});
});
/**
* 修改
*/
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.adress;
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);
}
});
});
/**
* 查詢
*/
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%=title%></title>
<style>
div {
width: 800px;
margin: 0 auto;
}
table {
border-collapse: collapse;
border-spacing: 0;
width: 800px;
}
table tr td, table tr th {
border-top: solid 1px #ccc;
border-left: solid 1px #ccc;
line-height: 40px;
text-align: center;
}
table tr td:last-child, table tr th:last-child {
border-right: solid 1px #ccc;
}
table tr:last-child td {
border-bottom: solid 1px #ccc;
}
a {
text-decoration: none;
font-size: 14px;
}
.text {
width: 150px;
}
</style>
<link rel="stylesheet" href="javascripts/layui/css/layui.css">
<script type="text/javascript" src="javascripts/layui/layui.js"></script>
</head>
<body>
<div id="app">
<span id="finds">
<div style="">
<div style="float: left;width:10%;">
<a class="layui-btn" data-type="add">新增</a>
</div>
<div style="float: right;width:90%;">
<form action="/student/search" method="post" onsubmit="return false" id="forms">
姓名:<input type="text" name="s_name" id="s_name" class="text">
<input type="submit" class="layui-btn" value="查詢" @click="find()">
</form>
</div>
</div>
<table style="">
<tr>
<th width="10%">編號</th>
<th width="15%">姓名</th>
<th width="10%">年齡</th>
<th width="50%">地址</th>
<th width="15%">操作</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.adress}}</td>
<td>
<a href="#" class="layui-btn-danger" @click="remove(item.id)">刪除</a>
<a href="#" class="layui-btn-primary" @click="edit(item)">修改</a>
</td>
</tr>
</table>
</span>
<div>
<!--隱藏域-->
<div style="margin:3px; display: none" id="box1" target="chance">
<form class="layui-form" onsubmit="return false" id="chancefrom">
<div class="layui-form-item">
<label class="layui-form-label">名字</label>
<input type="text" placeholder="必填項" lay-verify="required" style="width: 570px"
class="layui-input" id="name" name=name>
</div>
<div class="layui-form-item">
<label class="layui-form-label">年齡</label>
<input type="text" placeholder="必填項" lay-verify="required" style="width: 570px"
class="layui-input" id="age" name=age>
</div>
<div class="layui-form-item">
<label class="layui-form-label">地址</label>
<input type="text" placeholder="必填項" lay-verify="required" style="width: 570px"
class="layui-input" id="adress" name=adress>
</div>
</form>
</div>
</div>
</div>
<!--public資料夾-->
<script src="javascripts/jquery-3.3.1.js"></script>
<script src="javascripts/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
list: find(),
}, methods: {
find() {
vue.list = find();
},edit(item){
$("#name").val(item.name)
$("#age").val(item.age)
$("#adress").val(item.adress)
layer.open({
type: 1,
area: ['80%', '80%'],
fixed: false, // 不固定
maxmin: true,
shadeClose: true,
content: $('#box1'),
btn: ['確認', '取消'],
yes: function (index, layero) {
$.post("/student/update", {
name: $("#name").val(),
age: $("#age").val(), adress: $("#adress").val(),
id:item.id
}, function (msg) {
if (msg.affectedRows>0) {
layer.msg("修改成功")
vue.list=find();
layer.closeAll();
} else {
layer.msg("修改失敗")
alert("增加失敗")
}
})
}
})
}
,
remove(id){
if (confirm("確定要刪除這條資料嗎?")) {
$.post("/student/del",{id:id},function(msg){
if (msg.affectedRows>0) {
alert("刪除成功")
vue.list = find();
}else{
alert("刪除失敗")
}
})
}
}
}
});
//使用layui 渲染頁面
layui.use(['table', 'form', 'layer'], function () {
var form = layui.form;
var table = layui.table;
var layer = layui.layer;
//建立事件
var $ = layui.$, active = {//datatype
//新增事件
add: function () {
$("#name").val("")
$("#age").val("")
$("#adress").val("")
layer.open({
type: 1,
area: ['80%', '80%'],
fixed: false, // 不固定
maxmin: true,
shadeClose: true,
content: $('#box1'),
btn: ['確認', '取消'],
yes: function (index, layero) {
$.post("/student/add", {
name: $("#name").val(),
age: $("#age").val(), adress: $("#adress").val()
}, function (msg) {
if (msg.affectedRows>0) {
layer.msg("增加成功")
vue.list=find();
layer.closeAll();
} else {
layer.msg("增加失敗")
alert("增加失敗")
}
})
}
})
}
}
//繫結事件
$('.layui-btn').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
})
//查詢
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;
}
</script>
</body>
</html>
僅有上述檔案,專案還是不能執行起來的,最重要的一個檔案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').__express);
app.set('view engine', 'html');
app.use(logger('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 : {};
// render the error page
res.status(err.status || 500);
res.render('error');
});
module.exports = app;
然後啟動專案訪問http://localhost:3000/student就可以看到了,如果這時候有報錯可能是某些模組沒有 下載就好了
這裡沒有做太多的樣式