学习了一段时间的angular4知识,结合以前自学的nodejs-express后端框架知识,做了一个利用angular4作为前端,node-express作为后端服务器的网站。这个网站的功能很简单,主要是为了体验一下angular4的各项功能。
现在这个网站做的差不多了,拿来和大家分享一下。有不足之处,希望大家多提意见,也希望能给大家的开发提供一些帮助。
话不多说,开始介绍我的网站。(特此声明:本人非专业人士,只是个人爱好,不足之处还请大家多多原谅)。
这个网站是一个类似于通讯录的网站,网站逻辑比较简单,在这里简单画了一张网站运行逻辑图:


好了,开始吧!
我使用的是windows操作系统。所以,以下操作全部是在windows系统下进行的。

先从构建应用程序开始吧

  • 构建前端应用程序

在前端我使用的是angular-cli构建前端开发环境,angular-cli的好处就在于集成了开发angular前端应用的一切工具和依赖,还集成了webpack打包工具,使用angular-cli构建完应用,对于我们来说,基本上就剩下写代码了。

1、安装angular-cli。

你的电脑上首先需要安装node.js,可以从node.js官网下载(官网下载地址:https://nodejs.org/en/),也可以从node.js中文网下载(node.js中文网地址:http://nodejs.cn/),我用的是windows系统,下载后直接双加安装就可以了。安装好node.js后,在命令提示符下输入:

npm install -g @angular/cli

回车后就会自动安装好angular-cli的最新版本,如果你的网络环境和我的一样,处处受限的话,我建议你先安装cnpm后,利用cnpm安装angular-cli。
安装cnpm,请在命令提示符下输入:

npm install -g cnpm

回车就OK了。之后将安装angular-cli语句改为

cnpm install -g @angular/cli

2、用angular-cli构建angular4应用

用angular-cli构建angular4应用非常简单,你只需在要构建应用的目录中按住shift+鼠标右键,选择“在此处打开命令窗口”,在打开的命令窗口输入:

ng new <projectname>

我的应用名称设置为front,比较简单,大家可以在<projectname>处填入自己的应用名称,回车后,会在你选择的目录下新建一个以“projectname”命名的应用(在应用构建进行到下载安装依赖包的时候,由于网络的原因,可能会产生错误。你可以在命令行模式下进到应用目录中,运行cnpm install,应该就能够安装好所有依赖)。

  • 构建后端应用程序

1、安装express应用生成器,通过应用生成器工具 express 可以快速创建一个应用的骨架在命令行输入:

npm install express-generator -g

2、利用express应用生成器快速生成应用:
在要构建应用的目录下输入:

express <appname>

(appname是你的express应用名称,我的直接就用了server),命令执行完毕后,进入你的appname目录,执行一下npm install或cnpm install,安装好依赖后就能使用了。

好了,基本的前端和后端程序已经构建完成了,下面需要对前端和后端环境进行一下配置。

利用angular4和nodejs-express构建一个简单的网站(一)——构建前后端开发环境的更多相关文章

  1. 利用angular4和nodejs-express构建一个简单的网站(五)—用户的注册和登录-HttpClient

    上一节简单介绍了一下利用angular构建的主路由模块,根据上一节的介绍,主页面加载时直接跳转到用户管理界面,下面就来介绍一下用户管理模块.启动应用后,初始界面应该是这样的: 用户管理模块(users ...

  2. 利用angular4和nodejs-express构建一个简单的网站(七)—用户注册之ReactiveForm

    这一节对用户注册组件进行分析.用户注册组件主要涉及angular4表单的操作.Angular提供了两种构建表单的技术:响应式表单和模板驱动表单. 这两项技术都属于@angular/forms库,并且共 ...

  3. 利用angular4和nodejs-express构建一个简单的网站(十)—好友模块

    上一章讲解了用户登录的相关代码.用户登录成功后,就会进入好友模块,在好友模块中会根据不同的用户ID显示相应的好友列表,点击好友列表中的单个好友就会进入编辑单个好友页面,对好友信息进行编辑.点击列表页面 ...

  4. nodejs+express创建一个简单的服务器

    //首先安装express //1.引入express const express = require('express'); //2.创建服务器对象 let server = express(); ...

  5. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  6. 构建一个简单的基于MVC模式的JavaWeb

    零晨三点半了,刚刚几个兄弟一起出去吼歌,才回来,这应该是我大学第二次去K歌,第一次是大一吧,之后每次兄弟喊我,我都不想去,因为我还是很害怕去KTV,或许是因为那里是我伤心的地方,也或许是因为我在那里失 ...

  7. 通过python 构建一个简单的聊天服务器

    构建一个 Python 聊天服务器 一个简单的聊天服务器 现在您已经了解了 Python 中基本的网络 API:接下来可以在一个简单的应用程序中应用这些知识了.在本节中,将构建一个简单的聊天服务器.使 ...

  8. struts1:(Struts重构)构建一个简单的基于MVC模式的JavaWeb

    在构建一个简单的基于MVC模式的JavaWeb 中,我们使用了JSP+Servlet+JavaBean构建了一个基于MVC模式的简单登录系统,但在其小结中已经指出,这种模式下的Controller 和 ...

  9. 【Android Developers Training】 3. 构建一个简单UI

    注:本文翻译自Google官方的Android Developers Training文档,译者技术一般,由于喜爱安卓而产生了翻译的念头,纯属个人兴趣爱好. 原文链接:http://developer ...

随机推荐

  1. ElasticSearch内部基于_version乐观锁控制机制

    1.悲观锁与乐观锁机制 为控制并发问题,我们通常采用锁机制.分为悲观锁和乐观锁两种机制. 悲观锁:很悲观,所有情况都上锁.此时只有一个线程可以操作数据.具体例子为数据库中的行级锁.表级锁.读锁.写锁等 ...

  2. LeetCode-043-字符串相乘

    字符串相乘 题目描述:给定两个以字符串形式表示的非负整数 num1 和 num2,返回 num1 和 num2 的乘积,它们的乘积也表示为字符串形式. 示例说明请见LeetCode官网. 来源:力扣( ...

  3. 操作系统以及python的简介

    今日笔记 操作系统 文件的概念 编程语言的发展史 编程语言的分类 python简介 python解释器的版本说明 内容详细 操作系统 ​ 操作系统(Operating System,简称OS),是管理 ...

  4. MaRVIN

    [ResourceRegistration] 加给Resource类 [ResourceReference(--)] 加给Resource类中引动到的Resource类,引用多个的话用IReferen ...

  5. Java编程学习笔记(基础篇)

    一.Java中的数据类型 1.基本数据类型:四类 八种 byte(1) boolean(1) short(2) char(2) int(4) float(4) long(8) double(8) 2. ...

  6. LGP7884题解

    是的,这是一篇使用 min25 筛的题解... 本题解参考command_block大佬的博客,代码是对其在 LOJ 上的提交卡常后写出来的. ML 板子把数据开到 \(10^{13}\) 速度还和供 ...

  7. C#序列化和反序列化(json)

    一,什么是Json? json是存储和交换文本信息的方法,类似xml.但是json比xml更小,更快,j更易于解析.并且json采用完全独立于语言的文本格式(即不依赖于各种编程语言),这些特性使jso ...

  8. matlab语法基础(处理一点数据)

    1.声明函数,返回参数data,函数名为simutrack function data=simutrack(x0,y0) 2.%用于标注,注释 3.平方 ^2 4.二维零矩阵 [0 0;0 0] 5. ...

  9. [SPDK/NVMe存储技术分析]008 - RDMA概述

    毫无疑问地,用来取代iSCSI/iSER(iSCSI Extensions for RDMA)技术的NVMe over Fabrics着实让RDMA又火了一把.在介绍NVMe over Fabrics ...

  10. Linux下mysql的彻底卸载

    1.查看mysql的安装情况 rpm -qa | grep -i mysql 2.删除上图安装的软件 rpm -ev mysql-community-libs-5.7.27-1.el6.x86_64 ...