利用angular4和nodejs-express构建一个简单的网站（二）——设置

在上面一章中，我创建了前端的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访问进行一些配置，针对前端的访问对服务器进行开发。下次见......

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!