一、angular前端交互
使用angular框架的人都知道angular提供了内置的HttpClientModule模块来实现前后端交互请求。
实际操作如下：
1.在app.module.ts文件中引入该模块：
import { HttpClientModule } from'@angular/common/http';
2.同时在该文件的imports:[]中写入：
imports: [
BrowserModule,
HttpClientModule
],
3. 在需要前后端交互的组件引入：
import { HttpClient,HttpHeaders } from '@angular/common/http';
//构造函数声明
constructor(private http:HttpClient）{}
4.下面我将要在一个登陆界面发送请求
界面如下：
假设验证了输入数据的合理性，开始发起请求：
loginRequest(username,password){
//通过get请求将用户名和密码提交给后端进行验证
var url=`http://127.0.0.1:8080/login?name=${username}&password=${password}`;//发起请求的url
this.http.get(url).subscribe((data:any)=>{//内置模块的get()方法,当得到数据时返回一个可观察对象触发异步回调函数
if(data.result){
this.checkCookieService.setCookie("username",username,7);//这是我为了设置cookie写的一个服务，可忽略
this.checkCookieService.setCookie("password",password,7);//这是我为了设置cookie写的一个服务，可忽略
window.open("main-interface","_self");//跳转到另一个页面，即登陆成功的页面
}else{
alert("账户不存在或用户名有误");
}
})
};
注意： 返回的data是一个对象，result是自己在服务端写在对象的一个属性，你可以定义其它属性名。我的前后端定义的规则是result属性是boolean类型的值，如果是true则说明登陆成功，是false说明用户不存在或密码错误，提醒用户。
二、node.js搭建服务器
1.首先你得在服务端的终端引入node.js的一个框架express:
cnpm install express
或
npm install express
建议： express是node.js最好的框架，可以学习官方文档。
2.接着写服务端代码即可：
var express=require('express');//引用框架
var bodyParser=require('body-parser');
var app=express();//操作框架的实例对象
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));
app.all('*',function(req,res,next){//允许跨域
res.header("Access-Control-Allow-Origin","*");
res.header("Access-Control-Allow-Headers","Content-Type,Content-Length,Authorization,Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",'3.2.1');
if(req.method=="OPTIONS") res.send(200);
else next();
});
app.listen(8080,'127.0.0.1');//监听端口
app.get("/login",queryInfo);//这个对应了前端的get请求
分析：
//前端请求的url
var url=`http://127.0.0.1:8080/login?name=${username}&password=${password}`;
//后端监听的方法
app.listen(8080,'127.0.0.1');//监听端口
app.get("/login",queryInfo);
前端发起的请求url是对应8080端口，路由是/login，而后端则是监听8080端口，且也配置了/login的响应，因此前后端能实现交互。当后端收到get请求时，调用回调函数queryInfo（自己定义的回调函数），由该回调函数进行响应。看看这个回调函数吧
var queryInfo=function(request,response){
var username=request.query.name;
var password=request.query.password;
var connectSQL=require('./connectSQL');
connectSQL.connectSQL();//配置数据库
var connection=connectSQL.connection;//操作数据库实例
connection.connect();//连接数据库
var sql='SELECT * FROM userinfo';
connection.query(sql,function(err,result){
if(err){
console.log("查询错误:",err);
return;
}
console.log("查询用户资料成功");
Promise.resolve(result).then((result)=>{
for(var key in result){
if(result[key].username===username&&result[key].password===password){
response.send({result:true});
break;
}
}
response.send({result:false});
},
(err)=>{
console.error("查询错误：",err);
})
connection.end();//关闭数据库连接
})
}
分析：其实只有response.send({result:true})是响应前端发起的请求，而其它的都是一些逻辑：连接mysql数据库，取出所有用户信息，用一个循环检查是否有该用户名且密码正确。正确响应true，错误响应false来控制用户登陆。
下面看看post请求（注册界面）：
前端：
registerRequest(username,password,phone){
var url="http://127.0.0.1:8080/register";
var body={
username:username,
password:password,
phone:phone
}
var options={
headers:new HttpHeaders({'Content-Type':'application/json'})
}
this.http.post(url,body,options).subscribe((data:any)=>{
switch(data.result){
case -1:{
alert("服务器出错，请稍后再试");
break;
}
case 0:{//用户名已被使用
alert("用户名已被使用，请更换！")
break;
}
case 1:{//注册成功
this.checkCookieService.setCookie("username",username,7);//有效期为一个星期
this.checkCookieService.setCookie("password",password,7);//存储密码
window.open("main-interface","_self");
}
}
})
}
body对象存放的是要传给后端的内容，options是配置请求头的对象，当然这个对象有很多可配置的属性，不配置就使用默认的。
服务端：
var insertInfo=function(request,response){
var connectSQL=require('./connectSQL');
connectSQL.connectSQL();
connectSQL.connection.connect();
var getData=request.body;//获得提交数据
//应该先查询数据库中是否因存在该账户，若已存在则返回0，提示用户名已被使用，请用户名。否则插入数据库，进入聊天界面
var checkSql="SELECT USERNAME FROM USERINFO";
connectSQL.connection.query(checkSql,function(err,data){
if(err){
console.log("查询用户名出错：",err);
response.send({result:-1});
}else{
for(var key in data){
if(data[key].USERNAME===getData.username){
//用户已存在
response.send({result:0});
return;
}
}
//用户不存在，插入数据
var addSql="INSERT INTO USERINFO(username,password,phone) VALUES(?,?,?)";
var addSqlParams=[getData.username,getData.password,getData.phone];
connectSQL.connection.query(addSql,addSqlParams,function(err,result){
if(err){
console.error("插入数据出错：",err);
response.send({result:-1});
}else{
response.send({result:1});
}
connectSQL.connection.end();
})
}
})
}
这里的逻辑就是获取前端发过来的内容，然后先进行查询数据库的用户，查看是否同名，同名就不可再使用这个用户名了，不同名就将用户数据插入数据库。