引言:
不知道你在项目开发过程中,有没有遇到过有过以下场景:
一般是前端先制作静态页面,同时服务器端创建数据库,搭服务器端架构,写接口;
当接口写完之后,前端或者后端才能嵌套页面。
但是,如果前端页面制作好了,后端接口还没有写好呢?或者如何让前端、后端各自做各自的事情,互相不影响?
能做到下面这样是不是很好呢?
——在进行完需求分析和详细设计后,前端、后端一同商量、制作出一份接口文档
(其中接口名、参数、返回值名称、返回值类型都定义好)
前端页面制作好之后,直接模拟出该接口的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/
下面是浏览器中显示的内容
pic1.png
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}
这里我们先不用管 模板引擎 的语法,试着修改修改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,看界面中的结果
pic2.png
是不是很简单。
3.看到这里,可能有个疑问,我们怎么访问静态的html呢?
很简单,下面一步步说来:
首先,我们看app.js中有没有这句话
app.use(express.static(path.join(__dirname, 'public')));
有的话,则直接看下一步,没有就在app.js中添加这句话,记得添加后重启服务
接着,我们在项目的public文件夹下,新建一个html文件下(便于后期管理所有的静态页面),然后新建index.html,内容如下:
demoHello world.
这样在浏览器中输入下面的地址,就可以访问了。
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中引入对应的文件
demoHello world.
pic3.png
5.最后附上项目结构
pic4.png
有关fetch的用法,可以查看GitHub上的 这个项目。
快动手尝试一下吧,以后前端开发再也不用等服务器端框架搭好,接口写好了。