迈出全栈第一步，独立完成前端提交ajax到后端读写数据库完整流程(2)_H5之家

来到后端第一步就是创建一个数据库，这里我用的是phpstudy附带的，当然你也可以自己装，毕竟这个附带的还是老旧的5.5版本。sql语句我玩不来啊就用phpstudy附带的mysqlfront这个gui工具来撸了。建一个叫vue-admin的库，然后一张goods的表，只有id,name,price,create_time这四个字段，简单明了。

迈出全栈第一步，独立完成前端提交ajax到后端读写数据库完整流程

编写后端接口

终于玩到node了，首先全局安装nodemon帮我们自动重启，然后装好express等包，新手不推荐使用express-generator创建项目。看到这里请大家先去预习一下mysqljs这个模块。

我们把数据库的配置写在单独的文件中，抽离配置文件是一个好习惯。然后在控制器中使用mysql.createPool(db)创建连接池。

// db.js module.exports = { host: 'localhost', port: 3306, user: 'root', password: 'root', database: 'vue-admin' }; // controls/goods.js let pool = mysql.createPool(db);

下面编写增删改查等路由接口，与前端的api.js中的路径保持一致，get还是post根据情况而定，回调函数不写在这里写进控制器goods.js中。在入口文件中use router，这时候我们的接口路径就是/api/goods-list

// router.js router.get('/goods-list', goods.getGoodsList); router.post('/goods-detail', goods.getOneGoods); router.post('/goods-add', goods.addGoods); router.post('/goods-delete', goods.deleteGoods); module.exports = router; // app.js let router = require('./routes/router'); app.use('/api', router);

控制器中同样是增删改查四个方法，首先我们把一些可复用的sql语句封装起来。这是mysqljs中的语法，？就是变量，双??是表名或字段名，单?则为value。insert和update就不封装了，涉及到具体字段，直接写好了。

// sql.js module.exports = { queryAll: 'SELECT * FROM ??', queryById: 'SELECT * FROM ?? WHERE id=?', del: 'DELETE FROM ?? WHERE id=?', };

控制器里拿一个方法出来说一下吧，完整的代码都在github。使用pool.getConnection方法从连接池建立连接，SELECT * FROM goods获取goods表中所有数据，res.json将数据以json格式传给前端。读取操作完成后调用release()释放连接。rows及前端拿到的res的数据格式大家可以console看一下，都是数组类型。从前端调用接口，到后端从数据库中读取数据，最后返回给前端，整个流程至此就跑通了。

// 获取商品列表 getGoodsList (req, res) { pool.getConnection((err, conn) => { conn.query(sql.queryAll, 'goods', (err, rows) => { if (err) throw err; rows = formatDate(rows); res.json(rows); conn.release(); }); }); }, // formatDate函数利用moment.js将数据库中的时间戳格式转化为年月日的格式 function formatDate(rows) { return rows.map(row => { let date = moment(row.create_time).format('YYYY-MM-DD'); return Object.assign({}, row, {create_time: date}); }); } 全栈之路修远兮

我们只是完成了一个web应用最最基本的功能，新手可能一脸懵逼，大牛可能一脸蔑视，全栈之路还远着呢。接下来需要去增加登录等模块，更复杂的业务逻辑，还有安全方面的考虑，让程序健壮起来，大家一起加油吧。

以上就是对迈出全栈第一步，独立完成前端提交ajax到后端读写数据库完整流程的相关介绍，希望对您学习javascript有所帮助，感谢您关注织梦者!

这些内容可能对你也有帮助

更多可查看Javascript教程列表页。