使用angular4和nodejs-express搭建一个简单的网站（一）——搭建前后端开发环境

学习了一段时间的angular4知识，结合之前自学的nodejs-express背-端框架知识，使用angular4作为前端，node-express作为网站的后端服务器。这个网站的功能很简单，主要是体验angular4的各种功能。现在这个网站快做完了，分享给大家。有不足的地方，希望大家多提意见，希望能为大家的开发提供一些帮助。话不多说，先介绍一下我的网站吧。（在此声明：本人非专业人士，纯属个人爱好，不足之处还请见谅）。本网站是一个类似于通讯录的网站。网站的逻辑比较简单。下面是一个简单的网站运行逻辑图：OK，开始吧！我正在使用Windows操作系统。所以下面的操作都是在windows系统下进行的。让我们从构建应用程序开始。构建前端应用程序。在前端，我使用angular-cli搭建前端开发环境。angular-cli的优点是集成了开发angular前端应用的所有工具和依赖，还集成了webpack打包工具，使用angular-cli构建应用后，对于我们来说，基本上只需要写代码即可。1.安装角度-cli。首先需要在电脑上安装node.js，可以从node.js官网下载（官网下载地址：https://nodejs.org/en/），也可以从node.js中文网（node.js中文网地址：http://nodejs.cn/），我用的是windows系统，下载后双击添加安装即可。安装node.js后，在命令提示符下输入：npminstall-g@angular/cli回车后，会自动安装最新版本的angular-cli。如果你的网络环境和我一样，到处都是受限的话，建议你先安装cnpm，再用cnpm安装angular-cli。安装cnpm，请在命令提示符下输入：npminstall-gcnpm并回车。之后，将installangular-cli语句改为cnpminstall-g@angular/cli2，使用angular-cli构建angular4应用，使用angular-cli构建angular4应用非常简单，只需要按住shift+右键鼠标在要构建应用的目录下，选择“在此处打开命令窗口”，在打开的命令窗口中输入：ngnew我的应用名称设置为front，比较简单。你可以在中填写你自己的应用名称，回车后，会在你选择的目录下新建一个名为“projectname”的应用（应用构建时需要下载安装依赖包，由于网络原因，可能会出现错误，可以在命令行模式下进入应用目录下，运行cnpminstall，应该会安装好所有依赖）。构建后台应用1.安装express应用生成器，通过应用生成器工具express快速创建应用骨架。在命令行输入：npminstallexpress-generator-g2.使用express应用生成器快速生成应用：在构建应用的目录下回车：express（appname是你的express应用的名字，我的是直接使用服务器），命令执行完后，进入你的appname目录，执行npminstall或者cnpminstall，安装完成，依赖后就可以使用了。好了，基本的前后端程序已经搭建完成。接下来，我们需要配置前后端环境。