利用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訪問進行一些配置，針對前端的訪問對服務器進行開發。下次見......