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,内容如下：
这样在浏览器中输入下面的地址，就可以访问了。<!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.jsindex.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.最后附上项目结构
快动手尝试一下吧，以后前端开发再也不用等服务器端框架搭好，接口写好了。