利用angular4和nodejs-express构建一个简单的网站（二）——设置跨域访问和安装基本依赖构建数据库

2024年5月26日 161次阅读 来源: 黄先生

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

    原文作者：黄先生
    原文地址: https://segmentfault.com/a/1190000013167210
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞