从0开始使用express框架开发

使用express框架开发

安装:(5个步骤)

1、webstrom安装:

     ‘文件’—new project—nodejs express app创建。会直接创建项目文件夹。

           (设置项目路径,不要使用最新版本,设置为Jade,plain.css).

    非webstrom手动安装:

            1.输入 npm install express-generator -d

            2.输入 express mydemo (mydemo项目文件名)

   启动express框架:npm start (通过node启动 .bin/www文件)

       (浏览器测试:localhost:3000 成功:Welcome to Express )

  项目文件夹说明:( 框架的约定存放文件夹

            .bin/www文件: 创建一个静态服务器来启动express项目,默认端口3000。

             public文件夹:用来存放项目中所有用到的静态文件(css,img,js...)。

              routes文件夹:路由层。用来定义不同的页面的route,以及页面的逻辑处理。与views文件夹内文件对应。

              app.js文件:express的核心文件。

2.添加新页面:

    1.在views文件夹里创建新ejs文件(等同html文件),如page.ejs。

    2.同时,在routes文件夹下创建对应名的控制器: page.js,

    3.配置js文件:复制index.js内的所有内容 粘贴到page.js中,

                          并修改第6行render的第一个参数为文件名(不带后缀)。

                           res.render('page', { title: 'Express' });

3.配置app.js文件:

    1.在app.js第10行左右添加 var users = require('./routes/page');

    2.在第27行左右添加 app.use('/page', page); 前后文件名一致

4.修改编辑page.ejs页面

5.点击bin/www文件,点击run。

            或者使用 node ./bin/www 重启

网址登录localhost:3000/page


引申用法:

1.在页面返回json,jsonp格式的对象

修改routes文件中的js文件render参数,可以在页面返回json,jsonp格式的对象.把服务器数据返回到客户端。

删除,写入 res.json({"title":"angular"})

如图:

返回结果:

         在地址栏后加 ?callback返回jsonp格式数据

localhost:3000/page?callback=xxx

2.设置api操作:

localhost:3000/page/api/users

猜你喜欢

转载自blog.csdn.net/Crazy_Oranges/article/details/81146728