8年码龄是如何3分钟搭建服务器 , 模拟接口请求

最新推荐文章于 2024-05-26 00:43:01 发布

努力再努力up

最新推荐文章于 2024-05-26 00:43:01 发布

阅读量100

点赞数

文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/qq_29202171/article/details/128400404

版权

引言：
不知道你在项目开发过程中，有没有遇到过有过以下场景：
一般是前端先制作静态页面，同时服务器端创建数据库，搭服务器端架构，写接口；
当接口写完之后，前端或者后端才能嵌套页面。
但是，如果前端页面制作好了，后端接口还没有写好呢？或者如何让前端、后端各自做各自的事情，互相不影响？
能做到下面这样是不是很好呢？
——在进行完需求分析和详细设计后，前端、后端一同商量、制作出一份接口文档
（其中接口名、参数、返回值名称、返回值类型都定义好）
前端页面制作好之后，直接模拟出该接口的json文件，先去请求该文件，把页面绑定、业务逻辑都处理好。
等前端全部绑定好，同时后端接口写好后，我们只需要前端修改接口地址，其他不用做任何修改。
这样，是不是前端不用等后端接口全部写完才能开始剩下的工作。

1.创建一个最简单的项目

安装nodejs
新建一个文件夹，进入目录

mkdir express

接下来安装 Express

npm install -g express-generator@4

创建一个工程

express helloworld
现在在express文件夹下就出现了helloworld项目

安装依赖

cd helloworld
npm install

 备注：执行npm install命令会将package.json文件中 dependencies 依赖列表中,
即可自动安装依赖列表中所列出的所有模块。

开启服务

执行npm start命令

这样就可以在浏览器访问

http://localhost:3000/

下面是浏览器中显示的内容

2.为什么浏览器中出现的内容是这样的呢？

首先我们打开app.js，然后可以找到这句话

app.use('/', routes);

然后我们再看routes是什么，就可以往上找，找到

var routes = require('./routes/index');

顺着这个，我们打开routes文件夹下的index.js文件，看看里面究竟写的是什么

  var express = require('express');
  var router = express.Router();
  /* GET home page. */
  router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
  });
  module.exports = router;

原来框架是找到views文件夹下的index.jade文件渲染到前台页面

  index.jade
  extends layout

  block content
    h1= title
    p Welcome to #{title}

这里我们先不用管 <u><b>模板引擎</b></u> 的语法,试着修改修改index.js文件的内容，将title改为Hello world.

var express = require('express');
    var router = express.Router();
    /* GET home page. */
    router.get('/', function(req, res, next) {
      res.render('index', { title: 'Hello world.' });
    });
    module.exports = router;

在命令行中，按ctrl+c关闭服务，重新执行npm start，看界面中的结果

是不是很简单。

3.看到这里，可能有个疑问，我们怎么访问静态的html呢？
很简单，下面一步步说来：

首先，我们看app.js中有没有这句话

app.use(express.static(path.join(__dirname, 'public')));

有的话，则直接看下一步，没有就在app.js中添加这句话，记得添加后重启服务
接着，我们在项目的public文件夹下，新建一个html文件下（便于后期管理所有的静态页面），然后新建index.html,内容如下：

 <!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>demo</title>
</head>
<body>
   Hello world.
</body>
</html>

这样在浏览器中输入下面的地址，就可以访问了。

http://localhost:3000/html/index.html

4.我们现在做到了能访问一个html文件，那我们如何模拟ajax请求，读取json文件中的内容，提前绑定页面呢？（不依赖后端接口写好）

为了方便项目管理，我们新建几个文件夹和对应的文件

json文件夹及其对应的index.json文件
在javascripts文件夹下新建index.js

index.json
{
    "code":"200",
    "msg":"success"
}

index.js
fetch("../json/index.json").then(function(res) {
  if (res.ok) {
    res.json().then(function(data) {
      console.log(data);
    });
  } else {
    console.log("Looks like the response wasn't perfect, got status", res.status);
  }
}, function(e) {
  console.log("Fetch failed!", e);
});

在index.html中引入对应的文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>demo</title>
</head>
<body>
    Hello world.
    <script src="../javascripts/index.js"></script>
</body>
</html>

最后再打开访问http://localhost:3000/html/index.html
打开控制台，我们可以看到打印出了我们想要的内容

5.最后附上项目结构

有关fetch的用法，可以查看GitHub上的这个项目。

快动手尝试一下吧，以后前端开发再也不用等服务器端框架搭好，接口写好了。

努力再努力up

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
8年码龄是如何3分钟搭建服务器 , 模拟接口请求

4.我们现在做到了能访问一个html文件，那我们如何模拟ajax请求，读取json文件中的内容，提前绑定页面呢？（不依赖后端接口写好）快动手尝试一下吧，以后前端开发再也不用等服务器端框架搭好，接口写好了。3.看到这里，可能有个疑问，我们怎么访问静态的html呢？有关fetch的用法，可以查看GitHub上的。这样在浏览器中输入下面的地址，就可以访问了。2.为什么浏览器中出现的内容是这样的呢？1.创建一个最简单的项目。下面是浏览器中显示的内容。5.最后附上项目结构。
复制链接

扫一扫