前端angular与服务器端nodejs实现从mysql数据库读取数据实现前后端交互实例

一、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来控制用户登陆。

上面代码第四行是引入自己封装的连接数据库的模板(require(’./connectSQL’))，有了这模板就直接在想访问数据库时使用即可。看看这个模板：

下面看看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");
                 }
               }
        })
  }

使用post请求应该知道，我们想前后端数据交互的内容都放在一个body对象里。就像上面使用了body传送用户名、密码、手机号码一样。然后我们根据服务器端返回的结果进行处理，前后端交互的规则是自己定义的，比如上面的（-1，0，1）三种情况。

服务端：

app.post("/register",insertInfo);//收到前端的post请求则触发回调函数insertInfo()

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();
                })
            }
        })
        
    }

这里的逻辑就是获取前端发过来的内容，然后先进行查询数据库的用户，查看是否同名，同名就不可再使用这个用户名了，不同名就将用户数据插入数据库。