express基本概念
后端框架 —— express.js,基于Node.js平台,快速、开放、极简的web开发框架。
后台服务,和mongodb关联,提供数据。
后端路由。
express安装方法
安装Express应用生成器,如果遇到安装失败的情况,请用cnpm(淘宝的软件仓库)安装,命令相同。
npm install exress-generator -g
创建express服务器应用
-
创建express工程,首先进入合适的路径,在管理员方式运行的powershell运行下面的命令。
express my-express --ejs
再进入该路径,之后安装。
cd .\my-express\ cnpm install
出现下面内容说明安装完成:
PS D:\npm-library\my-express> npm install √ Installed 6 packages √ Linked 47 latest versions √ Run 0 scripts √ All packages installed (55 packages installed from npm registry, used 2s(network 2s), speed 347.04kB/s, json 53(131.27kB), tarball 591.97kB)
我这边安装老师视频里面在install完成后输入npm start一堆报错。后来查了原因是因为express框架依赖变更了一些软件包。自己查资料按下面的流程搞定了创建express工程:
首先删除刚刚创建失败的项目文件夹,然后按顺序输入下列命令:
express express-app cd express-app cnpm install cnpm i pug cnpm i jstransformer cnpm i constantinople
再运行
npm start
报错了:Port 3000 requires elevated privileges,意思是3000端口需要提升权限才能使用。修改bin\www文件,找到下面这行内容:
var port = normalizePort(process.env.PORT || '3000');
将其中的3000改成8000,再运行npm start此时正常不报错,再到浏览器打开网址:http://localhost:8000/,如果看到下面的内容即表示express服务器应用创建成功。
补充一下:
跟着视频学习的时候一定要动手操作,遇到和老师同样操作结果不一样的情况不要慌,认真看提示信息,按照提示信息去搜索解决方案。计算机软件更新换代非常快,以上遇到的坑就是因为软件版本升级、软件包依赖变更造成的。
-
后端路由
打开app.js,找到“var usersRouter = require('./routes/users');”后,在它下面复制一行,内容改为:
var shopRouter = require('./routes/shop');
这里就是定义了后端路由。现在再去routes目录下创建shop.js文件,编辑其内容:
var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function (req, res, next) { var productlist = [ { title: "投影仪", detail: "坚果 (JmGo) J7", image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg", price: 2999 }, { title: "投影仪", detail: "坚果 (JmGo) J7", image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg", price: 2999 }, { title: "投影仪", detail: "坚果 (JmGo) J7", image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg", price: 2999 }, { title: "投影仪", detail: "坚果 (JmGo) J7", image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg", price: 2999 }, { title: "投影仪", detail: "坚果 (JmGo) J7", image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg", price: 2999 }, { title: "投影仪", detail: "坚果 (JmGo) J7", image_url: "https://img11.360buyimg.com/n7/jfs/t1/125904/1/19039/83867/5fb4e6eaE23e725b2/59aaf9823d75043e.jpg", price: 2999 }, ]; res.json(productlist); }); module.exports = router;
-
服务器返回JSON数据
回到powershell,ctrl+c中断之前的服务,重启服务
node bin/www
再次打开网址:http://localhost:8000/shop
现在可以看到json数据已经出现:
简单回顾:
CSS样式布局
flexbox
bootstrap
angular,单向数据绑定,模拟数据。网络请求还没做,登录、路由守护、密码加密没做。
express,后台服务,mongodb还没做。