应用angular4和nodejs-express构建一个简朴的网站（二）——设置跨域接见和装置基础依靠构建数据库

2024年1月21日 64次阅读 来源: 黄先生

在上面一章中，我建立了前端的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
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞