在上面一章中,我创建了前端的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支持,安装插件很简单,只需在命令行窗口输入:
cnpminstall--save mysql
3、文件上传处理插件
我的网站还需要上传朋友的照片图片,所以还需要对上传的文件进行处理。在这里我使用multiparty插件进行处理,该插件在命令行安装时,输入:
cnpminstall--save multiparty
前端程序配置
同样,用visual studio code打开前端应用目录,我这里是目录名称直接命名为:front,前端的前期配置主要是对css框架和一些插件的配置。
1、CSS框架bootstrap配置。
BootStrap来自 Twitter,是目前比较热门的前端框架,因为用起来比较方便,而且我也很喜欢它的CSS风格。所以,我一直用这个框架来构建网页样式。
1.1、安装bootstrap。
安装bootstrap很简单,我安装的是bootstrap-V4版本,个人觉得这个版本的字体风格比V3版本要好看一些。直接在程序目录下,打开命令行,输入:
cnpminstall--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。安装这个插件非常简单,只需在命令行输入:
cnpminstall--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客户端后,输入:
createdatabasebirthday;
创建数据库。
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。
设置外键约束的语句为:
altertablefriendaddconstraintfk_1 foreignkey(uid)referencesuser(uid)ONUPDATECASCADEONDELETECASCADE;
OK! 数据库和数据表全部创建完毕了!
前后端环境的配置和数据库的创建就先进行到这里了。下一章我们将开始在express服务器端对mysql访问进行一些配置,针对前端的访问对服务器进行开发。下次见......