上一章我创建了前端angular4框架程序和后台-结束nodejs-express框架程序，在本章中，我将对前后端程序进行一些简单的配置，然后创建后端数据库。好的！开始吧。我开发这个网站使用的开发工具是visualstudiocode。本开发工具由微软免费提供。里面有很多插件，特别适合angular和express的开发。后台程序配置是express-generator自动生成的express应用。基本配置已经完成。随着后期开发的进一步完善，我们会慢慢增加功能。由于刚开始开发，服务器转发等内容暂未涉及。下面我们来设置跨域访问，安装另外几个需要用到的插件：1.设置express服务开启跨域访问。我的后端程序目录是server，我们用visualstudiocode打开server目录，找到app.js文件，在所有路由指令（app.use）前输入如下内容：varallowCrossDomain=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'：允许跨域访问的前端地址，因为angular程序是使用ngserve启动的，默认端口是4200，所以我这里设置为允许http://localhost:4200地址允许跨域访问服务器内容。'Access-Control-Allow-Methods'：允许跨域访问的方法，我们这里主要使用GET和POST方法。‘Access-Control-Allow-Headers’：允许前端跨域访问的header列表。我们的程序需要用户名认证，所以这里设置为'Content-Type,Authorization'。'Access-Control-Allow-Credentials'：发送Ajax时，会在Request头中包含Cookie信息。至此，先设置这些，接下来就是具体的路由配置和jwt认证。使用的时候，我们会一一说明。现在主要是保证前端程序可以访问服务器中的内容。2.mysql支持插件我的网站需要一个数据库来存储用户和生日信息，需要访问mysql数据库，所以需要在后台服务中加入mysql支持。安装插件很简单，在命令行窗口输入：cnpminstall--savemysql3，文件上传处理插件处理。这里我使用多方插件进行处理。安装插件时在命令行输入：cnpminstall--savemultipartyfront-endprogramconfiguration。同样，使用visualstudiocode打开前端应用目录。这里直接把目录名命名为：front，前端的前置配置主要是css框架和一些插件的配置。1.CSS框架引导配置。BootStrap来自Twitter，是目前比较流行的前端框架，因为使用起来比较方便，我也很喜欢它的CSS风格。所以，我一直在使用这个框架来设计网页样式。1.1.安装引导程序。安装引导程序非常简单。我安装了bootstrap-V4版本。我个人认为这个版本的字体样式比V3版本的要好。直接在程序目录下，打开命令行输入：cnpminstall--savebootstrap默认安装应该是V4版本。安装成功后，我将整个bootstrap目录从node_modules目录复制到“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用typescript实现了bootstrap的js操作，使用起来非常方便，而且还加入了时间日期等插件，让我们的开发更加方便。2.1.安装ng-bootstrap。安装这个插件很简单，在命令行输入：cnpminstall--save@ng-bootstrap/ng-bootstrap2.2，引入ng-bootstrap要使用ng-bootstrap，需要在主模块中引入这个插件角度模块：（我的主要模块是app.modules.ts）从'@ng-bootstrap/ng-bootstrap'导入{NgbModule}；导入这个模块后，还需要在app.modules的imports中声明这个模块：（记得后面添加，foorRoot())imports:[BrowserModule,UsersModule,BirthdaysModule,NgbModule.forRoot(),]这个模块也应该是在其他需要使用ng-bootstrap的模块中导入。导入方法与主模块相同，只是将NgbModule.forRoot()更改为NgbModule。这就是现在基本的前端配置。随着后面的逐步深入，还有一些特殊的配置和ng-bootstrap插件的使用，需要介绍一下。用到时候再说吧！创建后台数据库本网站的后台数据库我使用的是mysql数据库管理系统。mysql应该是大家最熟悉的数据库管理软件了，这里就不用过多介绍它的用法了。如果没有接触过，可以参考“菜鸟教程”网站上的介绍。1、需要用到的数据表。1.1.创建数据库。我的数据库名称是：birthday，登录mysql客户端后输入：createdatabasebirthday；创建数据库。1.2.创建数据表数据库非常简单。主要用到两个数据表：用户表和好友表。user表负责记录登录用户信息，friend表负责记录朋友的生日、电话号码等信息。其中friend表的uid和user表的uid设置为外键约束。创建用户表的sql语句为：createtableuser(uidint(10)notnullauto_increment,unamevarchar(20)notnullunique,upassvarchar(20)notnull,uemailvarchar(20)null,primarykey(uid))engine=InnoDB默认字符集=utf8;创建友元表的sql语句为：createtablefriend(fidint(10)notnullauto_increment,fnamevarchar(20)notnullunique,fbirthdatenotnull,fpnumbervarchar(15)notnull,femailvarchar(20)null,fgroupvarchar(10)null,uidintnotnull,statevarchar(10)notnull,primarykey(fid),keyfk_1(uid))engine=InnoDBdefaultcharset=utf8;注意：为了设置外键约束，这里的数据库引擎要设置为InnoDB。设置外键约束的语句为：altertablefriendaddconstraintfk_1foreignkey(uid)referencesuser(uid)ONUPDATECASCADEONDELETECASCADE；好的！数据库和数据表都创建好了！这里先进行前后端环境的配置和数据库的创建。下一章开始在express服务器端配置mysql访问，开发前端访问的服务器。下次见...
