使用angular+express构建聊天系统(一)

整体思路

• 前端架构使用angular8+primeNG实现，界面主要分为首页、登录、注册、聊天界面，聊天界面下通过子路由展示好友、消息及新闻界面。
• 后端使用express+mongodb实现对数据的存储验证
• 通讯使用node的ws模块

注意：在开始上手之前，需要你有基础的node及angular知识储备

第一篇：实现整体架构

一、angular-cli实现快速搭建项目

• 第一步安装angular-cli，

npm install -g @angular/cli			// 慢的话使用cnpm淘宝镜像

• 创建项目并安装依赖

ng new 项目名称			// 假设我的项目名称是  communicationProject

二、express实现后端项目架构

• 全局安装express

npm i express -g

• 创建项目并安装依赖

注意！请为后端代码单独建立一个文件夹，就是在项目名称下新建一个server文件夹，express代码将放在此处

cd communicationProject
express -e server

以下是项目构成

三、构建后端基本项目组成

• 在bin/www 入口文件中可以看到后端端口配置，默认监听了3000端口
• 进入app.js，添加以下代码，用来设置允许跨域

app.use(function (req, res, next) {

  // angular项目启动端口是4200，设置该网址可以对服务器进行访问
  res.setHeader('Access-Control-Allow-Origin', '*');

  // 设置允许进行的跨域方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

  // Request headers you wish to allow
  res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type,Authorization');

  // 设置未true时，在发送请求时，带上cookie信息
  res.setHeader('Access-Control-Allow-Credentials', true);

  // Pass to next layer of middleware
  next();
});

• 在server文件夹中新建一个api文件夹，用来放置路由、控制器、模型等
  
• 在config文件夹下建db.js，用于配置mongoDB的连接

const mongoose = require('mongoose');		// 引入mongoose模块
const DB_URL = '...';		// 引号中放置mongoDB的连接地址
mongoose.connect(DB_URL, {useNewUrlParser: true, useUnifiedTopology: true});
mongoose.connection.on('connected', () => {
  console.log('MongoDB connected to ' + DB_URL);
});
mongoose.connection.on('error', (err) => {
  console.log('MongoDb connection error:' + err);
});
mongoose.connection.on('disconnected', () =>  {
  console.log('MOngoDb disconnected.');
});

注意：每次建立模型后都要在此文件引入，否则会报错

项目启动命令

打开package.json文件，配置启动命令（只要添加start这一行就可以了）

"scripts": {
    "ng": "ng",
    "start": "concurrently \"ng serve --open\"  \"nodemon ./server/bin/www\"",
    "build": "ng build --prod --aot",
    "test": "ng test",
    "lint": "ng lint",
    "e2e": "ng e2e"
  },

由于本文需要你具有基础的angular和node知识，所以接口部分不多赘述，可以自己写一个，看看能不能跑起来项目。

附源码地址:communication