web全栈-第四讲：后端框架express.js初步体验。

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还没做。