利用angular4和nodejs-express構建一個簡單的網站（二）——設定跨域訪問和安裝基本依賴構建資料庫

黃先生發表於2019-02-16
AngularNodeJSExpress網站跨域資料庫

在上面一章中，我建立了前端的angular4框架程式和後端的nodejs-express框架程式，在這一章中，我準備對前後端程式進行一些簡單的配置，然後將後臺資料庫建立起來。
好的！讓我們開始吧。我開發這個網站用的開發工具是visual studio code，這個開發工具是由微軟免費提供的，裡面的外掛很豐富，特別對angular和express開發支援的很好。

後端程式配置

因為是用express-generator自動生成的express應用。基本配置都已經完成了。隨著後面開發的進一步深入，我們再慢慢新增功能。因為剛開始開發，所以還不涉及伺服器轉發等內容，我們先將跨域訪問設定好並將其他幾個需要用到的外掛安裝一下：

1、設定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認證等內容。等用到時，我們再一一講解，現在主要先要保證前端程式能夠訪問到伺服器中的內容。

2、mysql支援外掛

我的網站需要資料庫儲存使用者和生日資訊，需要訪問mysql資料庫，所以要在後端服務中加入mysql支援，安裝外掛很簡單，只需在命令列視窗輸入：

cnpm install --save mysql

3、檔案上傳處理外掛

我的網站還需要上傳朋友的照片圖片，所以還需要對上傳的檔案進行處理。在這裡我使用multiparty外掛進行處理，該外掛在命令列安裝時，輸入：

cnpm install --save multiparty

前端程式配置

同樣，用visual studio code開啟前端應用目錄，我這裡是目錄名稱直接命名為：front，前端的前期配置主要是對css框架和一些外掛的配置。

1、CSS框架bootstrap配置。

BootStrap來自 Twitter，是目前比較熱門的前端框架，因為用起來比較方便，而且我也很喜歡它的CSS風格。所以，我一直用這個框架來構建網頁樣式。
1.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多次，總不能成功引用，於是只好放棄了。

2、angular4的bootstrap外掛ng-bootstrap的安裝和配置

ng-bootstrap是angular4的一個bootstrap外掛，因為bootstrap的js功能都是由jquery完成的，需要在angular中對jquery進行引用，這樣就破壞了angular的風格，而ng-bootstrap將bootstrap的js操作都用typescript實現了，使用起來非常方便，而且它還加入了時間、日期等外掛，使我們的開發更加方便。
2.1、安裝ng-bootstrap。安裝這個外掛非常簡單，只需在命令列輸入：

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

2.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、需要用到的資料表。

1.1、建立資料庫。
我的資料庫名稱為：birthday，登入mysql客戶端後，輸入：

create database birthday;

建立資料庫。

1.2、建立資料表
資料庫非常簡單，主要用到兩個資料表：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訪問進行一些配置，針對前端的訪問對伺服器進行開發。下次見……

相關文章