利用angular4和nodejs-express构建一个简单的网站（二）——设置跨域访问和安装基本依赖构建数据库

在上面一章中，我建立了前端的angular4框架程序和后端的nodejs-express框架程序，在这一章中，我准备对先后端程序进行一些简单的配置，而后将后台数据库建立起来。
好的！让咱们开始吧。我开发这个网站用的开发工具是visual studio code，这个开发工具是由微软免费提供的，里面的插件很丰富，特别对angular和express开发支持的很好。

后端程序配置

由于是用express-generator自动生成的express应用。基本配置都已经完成了。随着后面开发的进一步深刻，咱们再慢慢添加功能。由于刚开始开发，因此还不涉及服务器转发等内容，咱们先将跨域访问设置好并将其余几个须要用到的插件安装一下：

一、设置express服务能够跨域访问。

个人后端程序目录为server,让咱们用visual studio code打开server目录，找到app.js文件，在全部的路由指令，即（app.use）以前，输入如下内容：

var allowCrossDomain = function (req, res, next) {
  res.header('Access-Control-Allow-Origin', 'http://localhost:4200');
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
  res.header('Access-Control-Allow-Headers', 'Content-Type,Authorization');
  res.header('Access-Control-Allow-Credentials', 'true');
  next();
};
app.use(allowCrossDomain);

'Access-Control-Allow-Origin'：容许进行跨域访问的前端地址，由于利用ng serve启动angular程序，默认的端口是4200，因此，我这里设置容许http://localhost:4200地址能够对服务器内容进行跨域访问。
'Access-Control-Allow-Methods'：容许进行跨域访问的方法，咱们这里主要用到的是GET和POST两种方法。
'Access-Control-Allow-Headers'：容许前端进行跨域访问的头部列表，咱们的程序须要进行用户名认证，因此这里设置为'Content-Type,Authorization'。
'Access-Control-Allow-Credentials'：发送Ajax时，Request header中便会带上 Cookie 信息。
如今为止，先设置这些，后面还有具体路由的配置和jwt认证等内容。等用到时，咱们再一一讲解，如今主要先要保证前端程序可以访问到服务器中的内容。

二、mysql支持插件

个人网站须要数据库存储用户和生日信息，须要访问mysql数据库，因此要在后端服务中加入mysql支持，安装插件很简单，只需在命令行窗口输入：

cnpm install --save mysql

三、文件上传处理插件

个人网站还须要上传朋友的照片图片，因此还须要对上传的文件进行处理。在这里我使用multiparty插件进行处理，该插件在命令行安装时，输入：

cnpm install --save multiparty

前端程序配置

一样，用visual studio code打开前端应用目录，我这里是目录名称直接命名为：front，前端的前期配置主要是对css框架和一些插件的配置。

一、CSS框架bootstrap配置。

BootStrap来自 Twitter，是目前比较热门的前端框架，由于用起来比较方便，并且我也很喜欢它的CSS风格。因此，我一直用这个框架来构建网页样式。
1.一、安装bootstrap。
安装bootstrap很简单，我安装的是bootstrap-V4版本，我的以为这个版本的字体风格比V3版本要好看一些。直接在程序目录下，打开命令行，输入：

cnpm install --save bootstrap

默认安装的应该是V4版本。安装成功后，我从node_modules目录中将整个bootstrap目录拷贝到
"src/app/assets"目录下，其实只拷贝"dist/css/bootstrap.min.css"就应该能够了。在程序目录中找到.angular-cli.json文件，打开后，找到"styles"节点，在"styles.css"的上面输入"assets/bootstrap/dist/css/bootstrap.min.css",。
在网上看到直接在"styles"节点中引用node_modules目录中的bootstrap目录中的css文件也能够，但试了n屡次，总不能成功引用，因而只好放弃了。

二、angular4的bootstrap插件ng-bootstrap的安装和配置

ng-bootstrap是angular4的一个bootstrap插件，由于bootstrap的js功能都是由jquery完成的，须要在angular中对jquery进行引用，这样就破坏了angular的风格，而ng-bootstrap将bootstrap的js操做都用typescript实现了，使用起来很是方便，并且它还加入了时间、日期等插件，使咱们的开发更加方便。
2.一、安装ng-bootstrap。安装这个插件很是简单，只需在命令行输入：

cnpm install --save @ng-bootstrap/ng-bootstrap

2.二、引入ng-bootstrap
要使用ng-bootstrap还须要在angular的主模块中引入这个插件的module：（个人主模块是app.modules.ts）

import { NgbModule } from '@ng-bootstrap/ng-bootstrap';

导入这个模块后，还须要在app.modules的imports中声明这个模块：(记得后面要加上,foorRoot())

imports: [
    BrowserModule,
    UsersModule,
    BirthdaysModule,
    NgbModule.forRoot(),
    ]

在须要用到ng-bootstrap的其余模块中也要引入这个模块，导入方法和主模块相同，只是将
NgbModule.forRoot()改成NgbModule就好了。
基本的前端配置暂时也就这些了。随着后面逐步深刻，还有一些特殊的配置以及ng-bootstrap插件的用法，须要介绍，等用到时再说吧！

建立后端数据库

这个网站的后端数据库我采用的mysql数据库管理系统。mysql应该是你们最熟悉的数据库管理软件了，这里对它的用法也无需过多的介绍，若是各位之前没有接触过，能够参考“菜鸟教程”网站上的介绍。

一、须要用到的数据表。

1.一、建立数据库。
个人数据库名称为：birthday，登陆mysql客户端后，输入：

create database birthday;

建立数据库。

1.二、建立数据表
数据库很是简单，主要用到两个数据表：user表和friend表，user表负责记录登陆用户信息，friend表负责记录朋友们的生日和电话等信息。其中friend表的uid与user表的uid设置为外键约束。
user表建表的sql语句为：

create table user(
uid int(10) not null auto_increment, 
uname varchar(20) not null unique,
upass varchar(20) not null,
uemail varchar(20) null,
primary key (uid)
)engine=InnoDB default charset=utf8;

friend表建表的sql语句为:

create table friend(
fid int(10) not null auto_increment,
fname varchar(20) not null unique,
fbirth date not null,
fpnumber varchar(15) not null,
femail varchar(20) null,
fgroup varchar(10) null,
uid int not null,
state varchar(10) not null,
primary key (fid),
key fk_1 (uid)
)engine=InnoDB default charset=utf8;

注意：为了设置外键约束，这里的数据库引擎应该设置为InnoDB。

设置外键约束的语句为：

alter table friend add constraint fk_1 foreign key (uid) references user (uid) ON UPDATE CASCADE ON DELETE CASCADE;

OK! 数据库和数据表所有建立完毕了！

先后端环境的配置和数据库的建立就先进行到这里了。下一章咱们将开始在express服务器端对mysql访问进行一些配置，针对前端的访问对服务器进行开发。下次见......