安装 node 和 Express 4

node官网:http://nodejs.org/

Express Github:https://github.com/expressjs/express

 

到 node官网 下载并安装 node 之后,打开命令行工具,执行下面命令安装 Express:

npm install -g express-generator@

安装完成之后,我们进入到我们想要创建项目的目录,执行下面命令创建一个 Express 项目:

express Express-Base

PS:上面命令中的 Express-Base 是项目名,根据你的需求随意即可

项目结构调整

这样就创建好了一个 Express 项目了,接下来,我们进入刚刚创建好的项目根目录,打开 project.json 文件,可以看到是这样子的:

project.json 文件的各个节点代表什么意思我这里就不解释了,想了解的自己去查就是。

这里我们要改两个地方:

scripts.start 的值改成 "node start"

把 dependencies jade 节点去掉

接下来,我们把 bin 目录下的 www 文件移到根目录,重命名为 start.js,然后把已经放空的 bin 文件夹删除掉。

再打开 start.js 文件,把里面第7行的

var app = require('../app');

改成

var app = require('./app');

jade 是一个模版引擎,个人觉得 ejs 已经很好用了,也非常习惯,而且由于这次我搭建的项目是一个前后端分离的项目,用不着服务端的模版引擎,所以直接去掉不用安装

既然我们不用服务端渲染页面,那么根目录下的 views 目录也成多余的了,删掉删掉~

然后打开项目根目录下的 app.js 文件,找到下面关于模版引擎配置的代码将其去掉

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

再来打开命令行工具,在项目的根目录下运行下面的指令,安装项目依赖的基础模块:

npm install

我们都知道,一个项目如果由多个开发者合作,编码风格很容易会乱七八糟

这里我们引入一个名为 editorconfig 工具,来规范一些基本的配置,如缩进格式,文件编码格式等

非常简单,在项目根目录加入一个 .editorconfig 文件,其内容如下:

# EditorConfig is awesome: http://EditorConfig.org

# top-most EditorConfig file
root = true
# 匹配所有文件
[*] # 使用 个空格缩进
indent_style = space
indent_size = # Unix 风格换行模式
end_of_line = lf # 文件为 utf- 格式
charset = utf- # 移除多余空行的空格
trim_trailing_whitespace = true # 行末保留一空行
insert_final_newline = true

目前很多主流的 IDE 都支持 editorconfig,像 webstorm 就默认支持,sublime text 通过安装插件也能支持

这样就能在一定程度上规范团队的代码产出风格了

再看一眼现在的项目目录结构,里面有个 public ,是用来存放 js,css,图片等静态资源的,但我觉得 public 这个名字好像不怎么搭配,里面的子目录名称也过长过繁琐。

于是将 public 目录改成 static,里面的子目录先删除掉。后面再完善里面的内容,因为涉及到客户端的开发工作流,比较复杂,这里先不弄它。

目录改完名后,打开项目根目录下的 app.js 文件,找到下面一行代码:

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

将他修改成

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

这样一来,以后静态资源的存放目录就是 static 了

最后,让我们看一眼目前的项目目录结构:

由于我的项目是在 github 上面的,所以会有一些上面没提到的文件

.gitignore 是 git 的文件忽略配置

README.md 是项目的说明 markdown 文件

【Express系列】第1篇——项目创建的更多相关文章

  1. Vue.js系列(一):Vue项目创建详解

    引言 Vue.js作为目前最热门最具前景的前端框架之一,其提供了一种帮助我们快速构建并开发前端项目的新的思维模式.本文旨在帮助大家认识Vue.js,并详细介绍使用vue-cli脚手架工具快速的构建Vu ...

  2. 【Windows编程】系列第六篇:创建Toolbar与Statusbar

    上一篇我们学习了解了如何使用Windows GDI画图,该应用程序都是光光的静态窗口,我们使用Windows应用程序,但凡稍微复杂一点的程序都会有工具栏和状态栏,工具栏主要用于一些快捷功能按钮.比如典 ...

  3. Storm系列(三):创建Maven项目打包提交wordcount到Storm集群

    在上一篇博客中,我们通过Storm.Net.Adapter创建了一个使用Csharp编写的Storm Topology - wordcount.本文将介绍如何编写Java端的程序以及如何发布到测试的S ...

  4. Maven系列第8篇:你的maven项目构建太慢了,我实在看不下去,带你一起磨刀!!多数使用maven的人都经常想要的一种功能,但是大多数人都不知道如何使用!!!

    maven系列目标:从入门开始开始掌握一个高级开发所需要的maven技能. 这是maven系列第8篇. 整个maven系列的内容前后是有依赖的,如果之前没有接触过maven,建议从第一篇看起,本文尾部 ...

  5. 【HANA系列】SAP ECLIPSE中创建ABAP项目的步骤

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[HANA系列]SAP ECLIPSE中创建AB ...

  6. Spring cloud系列教程第二篇:支付项目父工程图文搭建

    Spring cloud系列教程第二篇:支付项目父工程图文搭建 在讲解spring cloud相关的技术的时候,咱们就模拟订单支付这个流程来讲讲 在这个支付模块微服务搭建过程中,上面的这些技术,都会融 ...

  7. maven系列之二maven项目的创建和maven项目的结构

    maven系列之一简单介绍了maven的基本信息,安装和配置,大家对maven有一个大概的了解,但是在maven项目开发中远远不够,为了进一步了解maven,现在我们介绍maven项目的创建和mave ...

  8. 【SSRS】入门篇(一) -- 创建SSRS项目

    原文:[SSRS]入门篇(一) -- 创建SSRS项目 在本篇中,您将学习如何在 SQL Server Data Tools (SSDT) 中创建报表服务器项目. 报表服务器项目用于创建在报表服务器中 ...

  9. 【Python3.6+Django2.0+Xadmin2.0系列教程一】环境搭建及项目创建

    由于工作需要,接触了大半年时间的Django+xadmin框架,一直没空对这块对进行相关的梳理.最近在同事的怂恿下,就在这分享下笔者的学习及工作经验吧. 好了,话不多说,下面开始进入正题: 环境需求: ...

随机推荐

  1. 图片适应bitmap的大小 http上传文件

    image.setAdjustViewBounds(true); http上传文件 http://www.eoeandroid.com/thread-90209-1-1.html http://www ...

  2. 网络中路由器相关的名词理解LAN,WAN,WLAN

    1. LAN,全称Local Area Network,中文名叫做局域网. LAN是指在某一区域内由多台计算机互联成的计算机组.一般是方圆几千米以内. 局域网可以实现文件管理.应用软件共享.打印机共享 ...

  3. [翻译] FastReport 格式化和突出显示

    一:格式化一个值 聚合函数的一个特征是,返回的数值没有格式化,如如下例子所示,它使用"SUM": 数据字段通常返回一个格式化的值,这是一个没有任何变化的"文本" ...

  4. 微软在线实验室启用谷歌的reCAPTCHA,我们又丢失了一个好东东

    在没有启用reCAPTCHA的日子,我们可以在微软的在线实验室www.microsoft.com/handsonlabs 中找到许许多多的文档.视频.动手实验环境. 不需要任何硬件.技术,就可以快速的 ...

  5. MYSQL的数据连接超时时间设置

    大规模多线程操作事务的时候,有时候打开一个链接,会进行等待,这时候如果数据库的超时时间设置的过短,就可能会出现,数据链接自动被释放,当然设置过大也不好,慢SQL或其他因素引起的链接过长,导致整个系统被 ...

  6. django分页及搜索后如何翻页

    django自带了Pagnator 导入 from django.core.paginator import Paginator, PageNotAnInteger, EmptyPage 分页 def ...

  7. EGOCache缓存框架详细讲解

    EGOCache是一个轻量级的缓存框架.用法简单方便,在现在的项目中,我就用到EGOCache来缓存下载过的照片和字符串. 有人可能会问到,缓存照片还需要用EGOCache吗?AFNetworking ...

  8. 反射获取属性DisplayName特性名字以及属性值

    /// <summary> /// 反射获取所有DisplayName标记值 /// </summary> /// <typeparam name="T&quo ...

  9. dotNet core 应用部署centos

    ---恢复内容开始--- 阅读目录 需要安装的插件以及支撑架构 安装dotnetSDK 安装jexus 安装supervisord 遇到问题汇总 注意事项.扩展延伸 需要安装的插件以及支撑架构 1.d ...

  10. 微信小程序支付前端源码

    //index.js Page({ data: { }, //点击支付按钮进行支付 payclick: function () { var t = this; wx.login({ //获取code换 ...