前端模拟后端接口进行调试之node+mysql篇
如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!
前端模拟后端接口进行调试之node+mysql篇
npm install express body-parser --save npm install mysql --save-d用node实现接口 api.js
var path = require('path');
var express = require('express');
var bodyParser = require('body-parser');
var mysql = require("mysql");
var app = express();
//mysql的连接池
var pool = mysql.createPool({
host: 'localhost',
port: 3306,
database: 'test',
user: 'root',
password: ''
})
app.use(bodyParser.urlencoded({
extended: true
}));
app.use(bodyParser.json());
var perPage = 10; //默认每页条数
app.get('/api/page/:index', function(req, res) {
res.header("Access-Control-Allow-Origin", "*"); //避免跨域
res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
res.header("Access-Control-Allow-Headers", "X-Requested-With");
res.header('Access-Control-Allow-Headers', 'Content-Type');
var index = req.params.index;
console.log('当前请求第' + index + '页数据');
pool.getConnection(function(err, connection) {
if (err) {
console.log('连接mysql数据库失败');
} else {
var dataBack = {
responseCode: '001',
responseMsg: '',
res: {
count: 0,
data: []
}
}
//查询总数
connection.query('SELECT COUNT(*) FROM posts', null, function(err, result) {
dataBack.res.count = result[0]['COUNT(*)'];
});
//查询分页数据
connection.query('SELECT * FROM posts limit ' + perPage * (index - 1) + ' ,' + perPage, null, function(err, result) {
if (err) {
console.log('查询数据失败');
} else {
dataBack.res.data = result;
res.send(dataBack);
connection.release();
}
})
}
})
});
app.get('*', function(req, res) {
res.send({
responseCode: '002',
responseMsg: '请访问/api/page/:id获取数据'
});
});
app.listen(8911, 'localhost', function(err) {
if (err) {
console.log(err);
return;
}
console.log('Listening at http://localhost:8911');
});
简单说明一下:
1、这里是用来自己调试用的,所以对请求头和请求源的设置都比较宽松
2、这里是在mysql里面新建了一个test数据库里面的posts表
表内数据如下

-- phpMyAdmin SQL Dump
-- version 4.6.4
-- https://www.phpmyadmin.net/
--
-- Host: 127.0.0.1
-- Generation Time: 2017-12-02 01:55:09
-- 服务器版本: 5.7.14
-- PHP Version: 5.6.25
SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";
/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;
--
-- Database: `test`
--
-- --------------------------------------------------------
--
-- 表的结构 `posts`
--
CREATE TABLE `posts` (
`title` char(20) CHARACTER SET utf8 NOT NULL,
`id` int(20) NOT NULL
) ENGINE=MyISAM DEFAULT CHARSET=latin1;
--
-- 转存表中的数据 `posts`
--
INSERT INTO `posts` (`title`, `id`) VALUES
('first title', 1),
('这是标题', 2),
('一篇文章', 3),
('又一篇文章', 4),
('第五篇文章', 5),
('第六篇文章', 6),
('第七篇文章', 7),
('第八篇文章', 8),
('第九篇文章', 9),
('第十篇文章', 10),
('dafd文章', 11),
('dafd文章', 12),
('dafd文章', 13),
('dafd文章', 14),
('dafd文章', 15);
--
-- Indexes for dumped tables
--
--
-- Indexes for table `posts`
--
ALTER TABLE `posts`
ADD PRIMARY KEY (`id`);
--
-- 在导出的表使用AUTO_INCREMENT
--
--
-- 使用表AUTO_INCREMENT `posts`
--
ALTER TABLE `posts`
MODIFY `id` int(20) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=16;
/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
3、这里的接口除了返回请求页面的条数还额外返回了数据库总数,如果需要前端去重的时候需要用到总数。
4、接口采用的是restful api
5、每页返回条数也可一次通过前端传值来控制
前端请求结果


- 分类:
- Web前端
更新时间:
上一篇:下一篇: