??這是一個用于學生簽到的小例子。主要用到的技術有node和Vue：用node搭建小型服務器，配置好路由，前端用vue寫好組件，數據庫采用的是mysql。 文件結構如下：

??主要是功能是對數據的增刪改查。由于本人當時對es6語法還不太會，所以剛開始時在從數據庫里查數據那一塊出了點問題，因為從數據查詢數據是異步操作，后來通過從網上找了很多資料，發現用promise可以很好的解決異步問題。

??下面是router.js文件里的內容，這是后臺配置路由的代碼，主要是將對數據的增刪改查

const express = require("express"); //定義路由級中間件 const router = express.Router(); //引入數據庫連接池，防止數據庫超過最大連接數 const query = require("./db"); /* * 增刪改查服務路由 * */ /*新增*/ router.use('/add', function(req, res) { let userInfo = JSON.parse(req.body.data); let querysql = "SELECT * FROM userinfo where userName='" + userInfo.userName + "'"; new Promise(function(resolve, reject) {query(querysql, null, function(err, rows, fields) {if(err) {res.json({ok: false,message: '添加失敗！查詢',error: err})} else {if(rows.length > 0) {res.json({ok: false,message: '添加失敗,該用戶已經注冊了',error: err})} else {let addSql = 'INSERT INTO userinfo(userName,major,school,telephone,onlineApply,time,address) VALUES(?,?,?,?,?,?,?)';let sqlParams = [userInfo.userName, userInfo.major, userInfo.school, userInfo.telephone, userInfo.onlineApply, userInfo.time, userInfo.address];console.log(userInfo);query(addSql, sqlParams, function(err, result) {console.log(result);console.log(err);if(err) {res.json({ok: false,message: '添加失敗！'})} else {res.json({ok: true,id: result.insertId,message: '添加成功！'})}res.end();})}}}) }) }); /*刪除*/ router.use('/delete', function(req, res) {let userInfo = JSON.parse(req.body.data);let delSql = 'DELETE FROM userinfo where id=' + userInfo.id;query(delSql, null, function(err, rows, fields) {if(err) {res.json({ok: false,message: '刪除失敗！',error: err})} else {res.json({ok: true,message: '刪除成功！'})}res.end();}) }); /*編輯*/ router.use('/edit', function(req, res) {let userInfo = JSON.parse(req.body.data);console.log(userInfo);let editSql = 'UPDATE userinfo SET userName=?,major=?,school=?,telephone=?,onlineApply=?,time=?WHERE id =' + userInfo.id;let editSqlParams = [userInfo.userName,userInfo.major,userInfo.school,userInfo.telephone,userInfo.onlineApply,userInfo.time];query(editSql, editSqlParams, function(err, result) {if(err) {res.json({ok: false,message: '修改失敗！'})} else {res.json({ok: true,message: '修改成功！'})}res.end();}) }); /*查詢*/ router.use('/query', function(req, res) {let start = 0;let end = 100;let address =req.body.data;let sql = "SELECT * FROM userinfo where address='"+address+"' ORDER BY Id DESC LIMIT " + start + "," + end;let countSql = "SELECT COUNT(id) FROM userinfo";const promise = new Promise(function(resolve, reject) {query(countSql, null, function(err, rows, fields) {resolve(rows);})}).then((count) => {query(sql, null, function(err, rows, fields) {if(err) {res.json({ok: false,message: '查詢失敗！',info: null})} else {res.json({ok: true,message: '查詢成功！',info: rows,total: count[0]["COUNT(id)"]})}res.end();});}) }); /*將路由模塊輸出*/ module.exports = router; 復制代碼

??下面是連接數據庫的文件(db.js)中的代碼

const mysql = require("mysql"); //連接上數據庫(連接池) const pool = mysql.createPool({host : 'localhost',user : 'root',password : '123456',database:'attendance' }); /*封裝數據庫操作方法query--用于增刪改查*/ const query=function(sql,sqlParams,callback){pool.getConnection(function(err,conn){if(err){callback(err,null,null);}else{conn.query(sql,sqlParams,function(qerr,vals,fields){//釋放連接conn.release();//事件驅動回調callback(qerr,vals,fields);});}}); }; /*模塊輸出*/ module.exports=query; 復制代碼

??還有一點需要注意的是因為前后端運行起來時端口不一致，所以存在跨域的問題。因為我們自己在做一些小項目時，處于開發環境，所以直接在前端配置文件中配置代理就可以解決跨域問題，如果是生產環境就需要使用nginx代理跨域了。配置如下所示，3000是node服務器啟動后的端口號。

原碼地址： github.com/tangjie-93/…

總結

以上是生活随笔為你收集整理的Node+Vue实现对数据的增删改查的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。