Node.js配置服务端与客户端交互

最新推荐文章于 2022-06-21 19:18:16 发布

青珣墨笠

最新推荐文章于 2022-06-21 19:18:16 发布

阅读量956

点赞数

分类专栏： web前端javascript 文章标签： node.js 框架应用 app javascript

本文链接：https://blog.csdn.net/zhangli2513/article/details/77725701

版权

web前端javascript 专栏收录该内容

22 篇文章 1 订阅

订阅专栏

1、首先用webStorm提供的模板创建服务端框架
这里写图片描述
file -> New -> Project

2.创建Node.js服务端框架
这里写图片描述

这里写图片描述

3、其他的文件都不需要改动，搭建自己的服务端需要创建自己的应用框架如user.js(名称自己随便写)
这里写图片描述

4、创建好自己的js文件后需要在app.js里引入和设置自己的模块
这里写图片描述

这里写图片描述

5、还需要解决跨域访问的问题，同样在app.js里设置

var app = express();
//解决跨域问题
app.all("*",function (req,res,next) {
    res.header("Access-Control-Allow-Origin","*");
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

注意：一定是在express()创建Express对象之后引入
解决跨域问题代码为固定写法，直接引入即可

6、在node_modules文件夹内创建mysql模块
这里写图片描述

这里写图片描述

可以直接打开webStorm的Terminal输入npm i mysql安装
这里写图片描述

7、安装好mysql模块后，ok,可以开始在user.js里书写自己的服务端了

//首先需要导入mysql模块，前两句为固定写法
var mysql=require('mysql');
var router = require('express').Router();
//必须传入一个对象类型
var sqlConfig={
    //数据库的地址
    host:'localhost',
    //数据库的用户名，默认用户名是root
    user:'root',
    //数据库的名字
    database:'sharetime'
    //如果有密码还需要些数据库密码password
};
//用createConnection方法创建连接数据库的对象
var connection = mysql.createConnection(sqlConfig);
//connect方法连接数据库
connection.connect(function (error) {
  if (error){
    //如果连接错误 重新连接数据库
    connection = mysql.createConnection(connection.config);
    connection.connect();
  }
});
//使用post方法传输
router.post('/register',function (req,res) {
    console.log(req.body);
    var info={"message":"asd"};
    res.send(info);
    //接收客户端传过来的参数，所有的增删该查都是调用query方法执行对应的sql语句
    //注意username，password,phone要和客户端传过来的顺序一致
    connection.query("INSERT INTO `time` (`id`, `username`, `password`, `phone`) VALUES (NULL, '"+req.body.username+"', '"+req.body.password+"', '"+req.body.phone+"')",function (err,result,f) {
    //检测是否出错
        console.log(err);
        console.log(result)
    });
})
//导出自己创建好的模块，也是固定写法
module.exports = router;

框架参考mysql文档

8、搭建好服务端现在去写客户端
创建一个工程：
HTML:

<!DOCTYPE html>
<html lang="en" ng-app="app">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--用angular的方式创建客户端，先引用angular文档，也可以用Ajax的方式书写-->
    <script src="angular.min.js"></script>
</head>
<body ng-controller="controller">
  <button ng-click="toRegister()">注册</button>
<script src="app.js"></script>
</body>
</html>

app.js文件：

angular.module("app",[])
    .controller("controller",function ($scope,$http,$httpParamSerializerJQLike) {
        $scope.toRegister = function () {
            $http({
                url:"http://localhost:3000/user/register",
                method:"POST",
                //$httpParamSerializerJQLike：将客户端数据序列化，如果使用Ajax书写序列化方法为serialize()
                //但是用户提交的的内容必须要在form表单中提交
                data:$httpParamSerializerJQLike({
                //写死的数据内容
                    username:"xiaoming",
                    password:'123123',
                    phone:'111'
                }),
                //请求头固定书写格式
                headers:{
                    "content-type":"application/x-www-form-urlencoded"
                }
              //调用then方法检测结果
            }).then(function (result) {
                console.log(result);
              //catch方法检测错误
            }).catch(function (err) {
                console.log(err)
            })
        };
    });

9、创建好客户端之后，运行服务端
这里写图片描述

10、在客户端点击注册打开F12出现注册好的数据类型
这里写图片描述

11、在结合上篇文章数据库相关操作中XAMPP的数据库中可以查看到客户端所提交的数据内容
这里写图片描述

ok了，简单的服务端和客户端的交互就完成了
拜拜！

青珣墨笠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Node.js配置服务端与客户端交互

1、首先用webStorm提供的模板创建服务端框架 file -> New -> Project 2.创建Node.js服务端框架 3、其他的文件都不需要改动，搭建自己的服务端需要创建自己的应用框架如user.js(名称自己随便写) 4、创建好自己的js文件后需要在app.js里引入和设置自己的模块 5、还需要解决跨域访问的问题，同样在app.js里设置var app = expres
复制链接

扫一扫