zoukankan      html  css  js  c++  java
  • Express服务安装设置

    1安装Express

    (1)安装node

    新建一个文件夹cd进入目录

    (2) 安装espress

    安装Express框架---推荐全局模式:

    本地模式:npm install express 

    执行该命令后会在当前文件夹下生成一个node_modules目录

    全局模式:npm install -g express

     执行该命令后会在nodejs 安装目录下 生成node_modulesexpress

    执行完以上的命令后,通过express --version查看版本号来检查是否安装成功(旧的版本是使用的express -v

    此时窗口打印了:'express' 不是内部或外部命令,也不是可运行的程序或批处理文件。

    express默认安装是最新的版本,已经是4.x.x的版本。

    而最新express4.0+版本中将命令工具分出来了,所以必须要安装express-generator

    执行:npm install -g express-generator 全局模式

    此时再次执行express --version

    成功输出express框架当前安装的版本号,证明已经安装成功。

     新建工程

    express默认使用的是jade模板,对于初学者来说,ejs会更容易点):

    (1)cd 进入你要创建工程项目的目录下,

    (2)执行:express --view=ejs express_project(旧版本为:express -t ejs test_express

     说明: --view=后面填的是当前框架使用的模板,express_project代表当前文件夹的名称

     

    此时你会发现在当前的位置已经创建好express_project目录及相关express文件

    下面我们来启动服务器

    (1)cd express_project目录

    (2)npm install 安装项目依赖,自动安装package.json文件中 dependencies 依赖列表所有模块

    (3)npm start 启动服务

    旧版本的命令为:node app.js(主要是因为版本中的app.js是用来启动服务器的),

    新版本的命令则为:npm start(或者是node binwww)。

    此时访问http://127.0.0.1:3000/,启动服务

     

    服务启动成功后,浏览器显示如下:

     

    分析:浏览器显示的是哪里的message呢?

    首先打开app.js,然后可以找到这句话

      

    然后我们再看indexRouter是什么,就可以往上找,找到

     

    顺着这个,我们打开routes/index文件,看看里面究竟写的什么

     

    原来框架是找到了views文件夹下的index.ejs文件渲染到了前台

     

    试着修改index.js文件的内容,将title改为Hello My Express.

     

    在命令行中,按ctrl+c关闭服务,重新执行npm start ,看界面中的结果

     

    接下来考虑一下,我们怎么访问静态的html呢?

    首先,我们看app.js中有没有这句话

    app.use(express.static(path.join(__dirname, 'public')));

    有的话则直接看下一步,没有的话就在app.js中添加这句话,记得添加后重新启动服务器

    接着,我们在项目的public文件夹下,新建一个html文件(便于后期管理所有的静态页面),然后新建index.html,内容如下:

     

    这样在浏览器中输入下面的地址就可访问了:http://localhost:3000/html/index.html

     

    那我们如何模拟ajax请求,读取json文件中的内容,提前绑定页面呢?(不依赖后端接口写好)

    为了方便项目维护,我们新建json文件夹和js文件夹及其对应的data.json文件和index.js文件

     

     

    index.html中引入对应的文件

     

    最后再打开访问http://localhost:3000/html/index.html

    打开控制台,我们可以看到打印出了我们想要的内容

      

    最后附上项目结构:

     

  • 相关阅读:
    34.页面刷新 Walker
    32.标题栏图标 Walker
    44.相对路径 Walker
    白乔原创:实战软件DIY
    白乔原创:VC之美化界面篇
    白乔原创:在公司里,你会是什么样的程序员?
    白乔原创:程序员的路该怎么走?
    白乔原创:VC之控件篇
    08年5月份培训的照片一张
    关于resin的认证框架
  • 原文地址:https://www.cnblogs.com/sxhlf/p/13941765.html
Copyright © 2011-2022 走看看