道招

前端模拟后端接口进行调试之node+mysql篇

如果您发现本文排版有问题,可以先点击下面的链接切换至老版进行查看!!!

前端模拟后端接口进行调试之node+mysql篇

有时前端在开发过程中肯定是会跟后端联调的,但是如果此时后端可能没有开发好,或者因为其它优先级高的事情无法联调,又或者是前端需要确保当前项目无明显bug后着手开发其他项目。这个时候如果能模拟后端接口数据,就能做到自己调试,等到真正和后端联调时就很轻松了。 既然这篇是node+mysql篇当然本机上要按照好node和mysql(本例中是用的pc上安装wampserver的方案)。 第一步,用node安装express、body-parser和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表 表内数据如下 mysql数据
-- 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、每页返回条数也可一次通过前端传值来控制 前端请求结果 接口返回结果 我用的chrome插件JSON Viewer来查看json,是不是很爽,传送门=》 商店地址 接口返回结果
更新时间:
上一篇:VSC:Cannot connect to the target: connect ECONNREFUSED 127.0.0.1:9222下一篇:前端框架vue+wordpress做后端

相关文章

php连接access数据库的两种方法

第一种方法 <?php //读取mdb数据库的值,创建ADO连接 $username =1; $conn = new com("ADODB.Connection"); 阅读更多…

加个分享印象笔记收藏内容的功能?

自己长期是印象笔记的会员,在最终决定使用印象笔记的前使用过一段时间的evernote,最终还是因为印象笔记的本地化做的好,会员价格没那么贵而选择使用印象笔记了,数据放在国内就国内吧,国外也不一定没人 阅读更多…

eclipse报错"main" java.lang.NoClassDefFoundError: javax/servlet/http/HttpServletRequest

今天学习了下谷歌的People API中的java版,具体步骤可以见 ,在这里第一次用了下gradle工具,用着还行。 用eclipse运行Quickstart.java 源码如下: impo 阅读更多…

将excel里面的数据导入mysql

1.将excel里面选中的数据快儿拷贝到一个TXT文本文件中(记得把后面的空格消掉。。否则导入数据库后会有对应的空行),假如存到“D:da ta.txt”这个位置里。 2.根据要导入的数据快儿 阅读更多…

mysql 关闭3306端口对外开放服务

我们都知道mysql的默认端口就是3306,一般默认是对外开放的,也就是可以通过ip + 端口的访问直接远程访问,这样是有安全隐患,类似百度云观察这样的服务扫描到的话就会把这当成安全隐患提示站长。 阅读更多…

道招网升级故障记录

于2019年02月20日21点左右,想在vps上面安装phpMyAdmin方便自己管理数据库,但是发现phpMyAdmin提示 PHP 5.5+ is required. Currently 阅读更多…

关注道招网公众帐号