Nodejs加Vue.js的簡單增刪改查
阿新 • • 發佈:2018-11-08
用的node做的後臺,資料庫為mysql,資料互動和頁面渲染用的vue,專案目錄圖:
話不多說,首先來看node專案的配置檔案app.js,註釋我會寫在程式碼裡
//引用模組 var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('morgan'); var cookieParser = require('cookie-parser'); var bodyParser = require('body-parser'); var index = require('./routes/index'); var persons = require('./routes/person'); var app = express(); // view engine setup // app.set('views', path.join(__dirname, 'views')); // app.set('view engine', 'ejs'); //修改後的 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.all('*', function (req, res, next) { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild'); res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS'); if (req.method == 'OPTIONS') { res.send(200); } else { next(); } }); //引入public資料夾,讓頁面能獲取到public資料夾內的檔案 app.use(express.static(path.join(__dirname, 'public'))); app.use('/', index); app.use('/persons', persons); app.use(express.static(__dirname)); // app.use(express.static(__dirname + '../public')); // catch 404 and forward to error handler app.use(function (req, res, next) { next(createError(404)); }); // 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;
然後是連線資料庫的js和路由配置
//db.js // 連線MySQL var mysql = require('mysql'); var pool = mysql.createPool({ host: 'localhost',//本機 user: 'root',//資料庫帳號 password: 'root',//密碼 database: 'test'//資料庫 }); function query(sql, callback) {//執行sql pool.getConnection(function (err, connection) {//err為錯誤資訊 connection為連線資料庫 // Use the connection connection.query(sql, function (err, rows) {//rows為執行完sql的返回的資訊 callback(err, rows);//回撥 connection.release();//釋放連結 }); }); } exports.query = query;
路由,可部分可以理解為頁面訪問的連結配置,全程用的ajax訪問資料
var express = require('express'); var router = express.Router(); //引入資料庫包 var db = require("./db.js"); /* GET listing. */ // router.get('/', function(req, res, next) { // res.send('respond with a resource'); // }); /** * 查詢列表頁,直接訪問 */ router.get('/', function (req, res, next) { res.render('persons', {title: '人員管理', datas: 123}); }); /** * 新增頁面跳轉 */ router.get('/add', function (req, res) { res.render('add'); }); router.post('/add', function (req, res) { var name = req.body.name; var age = req.body.age; var professional = req.body.professional; db.query("insert into person(name,age,professional) values('" + name + "'," + age + ",'" + professional + "')", function (err, rows) { if (err) { res.end('新增失敗:' + err); } else { res.json(rows);//返回資料,為json格式 } }) }); /** * 刪 */ router.post('/del', function (req, res) { var id = req.body.id; db.query("delete from person where id=" + id, function (err, rows) { // console.log(rows); if (err) { res.end('刪除失敗:' + err) } else { 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 professional = req.body.professional; db.query("update person set name='" + name + "',age='" + age + "',professional= '" + professional + "' where id=" + id, function (err, rows) { if (err) { res.end('修改失敗:' + err); } else { res.json(rows); console.log(rows); } }); }); /** * 查詢 */ router.post('/search', function (req, res) { var name = req.body.s_name; var age = req.body.s_age; var professional = req.body.s_professional; // console.log(req.body); var sql = "select * from person where true "; if (name) { sql += " and name like '%" + name + "%' "; } if (age) { sql += " and age=" + age + " "; } if (professional) { sql += " and name like '%" + professional + "%' "; } // sql = sql.replace("and","where"); db.query(sql, function (err, rows) { if (err) { res.end("查詢失敗:", err) } else { res.json(rows); } }); }); module.exports = router;
前臺展示頁面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title><%= title %></title>
<link rel="shortcut icon" href="#"/>
<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>
<!--../public/javascripts-->
<script src="javascripts/jquery-3.3.1.js"></script>
</head>
<body>
<div id="app">
<span id="finds">
<div style="">
<div style="float: left;width:10%;">
<a href="#" @click="edit()">新增</a>
</div>
<div style="float: right;width:90%;">
<form action="/persons/search" method="post" onsubmit="return false" id="forms">
姓名:<input type="text" name="s_name" id="s_name" class="text">
年齡:<input type="number" name="s_age" id="s_age" class="text">
職業:<input type="text" name="s_professional" id="s_professional" class="text">
<input type="submit" value="查詢" @click="find()">
</form>
</div>
</div>
<table style="">
<tr>
<th width="10%">編號</th>
<th width="15%">操作</th>
<th width="15%">姓名</th>
<th width="10%">年齡</th>
<th width="50%">職業</th>
</tr>
<tr v-for="item in list">
<td>{{item.id}}</td>
<td>
<a href="#" @click="remove(item.id)">刪除</a>
<a href="#" @click="edit(item)">修改</a>
</td>
<td>{{item.name}}</td>
<td>{{item.age}}</td>
<td>{{item.professional}}</td>
</tr>
</table>
</span>
<div style="width: 800px;margin: auto; display: none" id="edit">
<form action="/persons/add" method="post" onsubmit="return false">
<input type="hidden" id="id" name="id">
姓名:<input type="text" name="name" id="name">
年齡:<input type="number" name="age" id="age">
職業:<input type="text" name="professional" id="professional">
<input type="button" value="提交" @click="edits()">
<input type="button" value="返回" @click="backtrack()">
</form>
</div>
</div>
<script src="javascripts/vue.js"></script>
<script>
var vue = new Vue({
el: '#app',
data: {
list: find(),
},
methods: {
find: function () {//查詢
this.list = find();
}, edit: function (item) {//點選編輯
$('#finds').hide();
$('#edit').show();
$('#id').val(item.id);
$('#name').val(item.name);
$('#age').val(item.age);
$('#professional').val(item.professional);
}, edits: function () {//修改和新增
if ($('#id').val() == "" || $('#id').val() == null) {
add();
} else {
edit();
}
this.list = find();
}, remove: function (id) {//刪除
if (confirm("確定要刪除這條資料嗎?")) {
$.ajax({
type: "post",
url: "/persons/del",
dataType: "json",
data: {//傳給servlet的資料,
id: id,
},
async: false,//加上這個ajax先執行
success: function (data) {
if (data.affectedRows>0) {
alert('刪除成功');
}else{
alert('刪除失敗');
}
}
});
}
this.list = find();
},backtrack:function () {//返回
$('#finds').show();
$('#edit').hide();
}
}
})
//查詢
function find() {
var data2;
$.ajax({
type: "post",
url: "/persons/search",
dataType: "json",
data: {//傳給servlet的資料,
s_professional: $('#s_professional').val(),
s_name: $('#s_name').val(),
s_age: $('#s_age').val()
},
async: false,//加上這個ajax先執行
success: function (data) {
// console.log(data);
//返回處理的方法
data2 = data;
}
});
return data2;
}
//修改
function edit() {
$.ajax({
type: "post",
url: "/persons/update",
dataType: "json",
data: {//傳給servlet的資料,
professional: $('#professional').val(),
name: $('#name').val(),
age: $('#age').val(),
id: $('#id').val(),
},
async: false,//加上這個ajax先執行
success: function (data) {
//返回處理的方法
console.log(data);
if (data.affectedRows > 0) {
alert('修改成功');
$('#finds').show();
$('#edit').hide();
$('#id').val("");
$('#name').val("");
$('#age').val("");
$('#professional').val("");
} else {
alert('修改失敗');
}
}
});
}
//新增
function add() {
$.ajax({
type: "post",
url: "/persons/add",
dataType: "json",
data: {//傳給servlet的資料,
professional: $('#professional').val(),
name: $('#name').val(),
age: $('#age').val(),
id: $('#id').val(),
},
async: false,//加上這個ajax先執行
success: function (data) {
//返回處理的方法
if (data.affectedRows > 0) {
alert('新增成功');
$('#finds').show();
$('#edit').hide();
$('#id').val("");
$('#name').val("");
$('#age').val("");
$('#professional').val("");
} else {
alert('新增失敗');
}
}
});
}
</script>
</body>
</html>