摘要：后端程序配置因?yàn)槭怯米詣?dòng)生成的應(yīng)用。允許進(jìn)行跨域訪問的方法，我們這里主要用到的是和兩種方法。現(xiàn)在為止，先設(shè)置這些，后面還有具體路由的配置和認(rèn)證等內(nèi)容。所以，我一直用這個(gè)框架來構(gòu)建網(wǎng)頁樣式。其中表的與表的設(shè)置為外鍵約束。

在上面一章中，我創(chuàng)建了前端的angular4框架程序和后端的nodejs-express框架程序，在這一章中，我準(zhǔn)備對(duì)前后端程序進(jìn)行一些簡單的配置，然后將后臺(tái)數(shù)據(jù)庫創(chuàng)建起來。
好的！讓我們開始吧。我開發(fā)這個(gè)網(wǎng)站用的開發(fā)工具是visual studio code，這個(gè)開發(fā)工具是由微軟免費(fèi)提供的，里面的插件很豐富，特別對(duì)angular和express開發(fā)支持的很好。

因?yàn)槭怯胑xpress-generator自動(dòng)生成的express應(yīng)用。基本配置都已經(jīng)完成了。隨著后面開發(fā)的進(jìn)一步深入，我們再慢慢添加功能。因?yàn)閯傞_始開發(fā)，所以還不涉及服務(wù)器轉(zhuǎn)發(fā)等內(nèi)容，我們先將跨域訪問設(shè)置好并將其他幾個(gè)需要用到的插件安裝一下：

1、設(shè)置express服務(wù)可以跨域訪問。

我的后端程序目錄為server,讓我們用visual studio code打開server目錄，找到app.js文件，在所有的路由指令，即（app.use）之前，輸入以下內(nèi)容：

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"：允許進(jìn)行跨域訪問的前端地址，因?yàn)槔胣g serve啟動(dòng)angular程序，默認(rèn)的端口是4200，所以，我這里設(shè)置允許http://localhost:4200地址可以對(duì)服務(wù)器內(nèi)容進(jìn)行跨域訪問。
"Access-Control-Allow-Methods"：允許進(jìn)行跨域訪問的方法，我們這里主要用到的是GET和POST兩種方法。
"Access-Control-Allow-Headers"：允許前端進(jìn)行跨域訪問的頭部列表，我們的程序需要進(jìn)行用戶名認(rèn)證，所以這里設(shè)置為"Content-Type,Authorization"。
"Access-Control-Allow-Credentials"：發(fā)送Ajax時(shí)，Request header中便會(huì)帶上 Cookie 信息。
現(xiàn)在為止，先設(shè)置這些，后面還有具體路由的配置和jwt認(rèn)證等內(nèi)容。等用到時(shí)，我們再一一講解，現(xiàn)在主要先要保證前端程序能夠訪問到服務(wù)器中的內(nèi)容。

2、mysql支持插件

我的網(wǎng)站需要數(shù)據(jù)庫存儲(chǔ)用戶和生日信息，需要訪問mysql數(shù)據(jù)庫，所以要在后端服務(wù)中加入mysql支持，安裝插件很簡單，只需在命令行窗口輸入：

cnpm install --save mysql

3、文件上傳處理插件

我的網(wǎng)站還需要上傳朋友的照片圖片，所以還需要對(duì)上傳的文件進(jìn)行處理。在這里我使用multiparty插件進(jìn)行處理，該插件在命令行安裝時(shí)，輸入：

cnpm install --save multiparty

同樣，用visual studio code打開前端應(yīng)用目錄，我這里是目錄名稱直接命名為：front，前端的前期配置主要是對(duì)css框架和一些插件的配置。

1、CSS框架bootstrap配置。

BootStrap來自 Twitter，是目前比較熱門的前端框架，因?yàn)橛闷饋肀容^方便，而且我也很喜歡它的CSS風(fēng)格。所以，我一直用這個(gè)框架來構(gòu)建網(wǎng)頁樣式。
1.1、安裝bootstrap。
安裝bootstrap很簡單，我安裝的是bootstrap-V4版本，個(gè)人覺得這個(gè)版本的字體風(fēng)格比V3版本要好看一些。直接在程序目錄下，打開命令行，輸入：

cnpm install --save bootstrap

默認(rèn)安裝的應(yīng)該是V4版本。安裝成功后，我從node_modules目錄中將整個(gè)bootstrap目錄拷貝到
"src/app/assets"目錄下，其實(shí)只拷貝"dist/css/bootstrap.min.css"就應(yīng)該可以了。在程序目錄中找到.angular-cli.json文件，打開后，找到"styles"節(jié)點(diǎn)，在"styles.css"的上面輸入"assets/bootstrap/dist/css/bootstrap.min.css",。
在網(wǎng)上看到直接在"styles"節(jié)點(diǎn)中引用node_modules目錄中的bootstrap目錄中的css文件也可以，但試了n多次，總不能成功引用，于是只好放棄了。

2、angular4的bootstrap插件ng-bootstrap的安裝和配置

ng-bootstrap是angular4的一個(gè)bootstrap插件，因?yàn)閎ootstrap的js功能都是由jquery完成的，需要在angular中對(duì)jquery進(jìn)行引用，這樣就破壞了angular的風(fēng)格，而ng-bootstrap將bootstrap的js操作都用typescript實(shí)現(xiàn)了，使用起來非常方便，而且它還加入了時(shí)間、日期等插件，使我們的開發(fā)更加方便。
2.1、安裝ng-bootstrap。安裝這個(gè)插件非常簡單，只需在命令行輸入：

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

2.2、引入ng-bootstrap
要使用ng-bootstrap還需要在angular的主模塊中引入這個(gè)插件的module：（我的主模塊是app.modules.ts）

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

導(dǎo)入這個(gè)模塊后，還需要在app.modules的imports中聲明這個(gè)模塊：(記得后面要加上,foorRoot())

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

在需要用到ng-bootstrap的其他模塊中也要引入這個(gè)模塊，導(dǎo)入方法和主模塊相同，只是將
NgbModule.forRoot()改為NgbModule就行了。
基本的前端配置暫時(shí)也就這些了。隨著后面逐步深入，還有一些特殊的配置以及ng-bootstrap插件的用法，需要介紹，等用到時(shí)再說吧！

這個(gè)網(wǎng)站的后端數(shù)據(jù)庫我采用的mysql數(shù)據(jù)庫管理系統(tǒng)。mysql應(yīng)該是大家最熟悉的數(shù)據(jù)庫管理軟件了，這里對(duì)它的用法也無需過多的介紹，如果各位以前沒有接觸過，可以參考“菜鳥教程”網(wǎng)站上的介紹。

1、需要用到的數(shù)據(jù)表。

1.1、創(chuàng)建數(shù)據(jù)庫。
我的數(shù)據(jù)庫名稱為：birthday，登錄mysql客戶端后，輸入：

create database birthday;

創(chuàng)建數(shù)據(jù)庫。

1.2、創(chuàng)建數(shù)據(jù)表
數(shù)據(jù)庫非常簡單，主要用到兩個(gè)數(shù)據(jù)表：user表和friend表，user表負(fù)責(zé)記錄登錄用戶信息，friend表負(fù)責(zé)記錄朋友們的生日和電話等信息。其中friend表的uid與user表的uid設(shè)置為外鍵約束。
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;

注意：為了設(shè)置外鍵約束，這里的數(shù)據(jù)庫引擎應(yīng)該設(shè)置為InnoDB。

設(shè)置外鍵約束的語句為：

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

OK! 數(shù)據(jù)庫和數(shù)據(jù)表全部創(chuàng)建完畢了！

前后端環(huán)境的配置和數(shù)據(jù)庫的創(chuàng)建就先進(jìn)行到這里了。下一章我們將開始在express服務(wù)器端對(duì)mysql訪問進(jìn)行一些配置，針對(duì)前端的訪問對(duì)服務(wù)器進(jìn)行開發(fā)。下次見......