整理自:慕课网
1. 伪造模板数据跑通前后端交互流程
本篇博客用到的代码,小伙伴们直接复制粘贴就可以了,你们可知道郝同学一行行敲得多么辛苦T_T,复制粘贴前给个赞啊!
1.1. 工程结构
1 | helloworld/ |
1.2. 操作步骤
我们在上次helloworld工程的基础上接着做!
1、在views文件夹下新建文件夹includes和pages
2、在views文件夹下,删除index.jade,新建layout.jade,输入内容:
1 | doctype |
3、在includes文件夹下,新建文件head.jade和header.jade,分别输入内容:
1 | link(href="/bootstrap/dist/css/bootstrap.min.css",rel="stylesheet") |
1 | .container |
4、在pages文件夹下,新建文件index.jade、detail.jade、admin.jade和list.jade,分别输入内容:
1 | extends ../layout |
1 | extends ../layout |
1 | extends ../layout |
1 | extends ../layout |
5、修改helloworld文件夹下app.js,主要是加入模拟数据,内容如下:
1 | var express = require('express'); |
1.3. 报错处理
至此,已经敲完了Scott大神给的代码,马上就能看到效果了,好激动!
哎呦我靠!报错,我改!又报错,我再改!还报错……诶?坏了,改不出来了!记录错误如下:
百度“nodejs使用app.use(express.bodyParser());出错”,得到如下结论:
1、node.js和windows的兼容性不如POSIX操作系统,因此npm提供给windows的第三方模块较少。
2、bodyParser以前是集成在express中的,现在需要单独安装。
无论哪个结论,解决办法都是安装body-parser:
1 | npm install body-parser |
然后在代码中如下使用:
var bodyParser = require(‘body-parser’);
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json());
即把app.js的内容修改为如下内容:
1 | var express = require('express'); |
1.4. 效果图
吼吼,终于搞定了!有图有真相!
1.5. 结束
操作过程中的其他小错误,在此不作记录,有任何问题欢迎留言!