nodeJs 从 零 搭建后台服务 nodejs+mysql通过ajax获取数据并写入数据库

香菊网 发表于: 2019-06-13 分类: nodeJs  前端front  服务器  

Express 是一个简洁而灵活的 node.js Web应用框架, 提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。使用 Express 可以快速地搭建一个完整功能的网站

1.安装node.js

Node.js安装包及源码下载地址为:https://nodejs.org/en/download/ (英文官网)

http://nodejs.cn/download/(中文官网),可以下载 LTS(长期支持版本)

2.安装npm

npm可是很重要的,NPM是随同NodeJS一起安装的包管理工具,能解决NodeJS代码部署上的很多问题,而且很多模板都是需要用这个来安装的

$ npm -version
6.1.0

3.Express 搭建简单web

Express 是一个简洁而灵活的 node.js Web应用框架
提供了一系列强大特性帮助你创建各种 Web 应用,和丰富的 HTTP 工具。 使用 Express 可以快速地搭建一个完整功能的网站。 Express 框架核心特性:    1.可以设置中间件来响应 HTTP 请求。    2.定义了路由表用于执行不同的 HTTP 请求动作。    3.可以通过向模板传递参数来动态渲染 HTML 页面。 ----引用互联网

新建一个 nodeDeno 文件夹

nodeDeno 文件夹下 :

$ npm install express --save  //安装express并保存在依赖列表,可以理解为安装在本地,这样方便调用

当然我们还需要其他的框架,当然是否需要根据需求来

$ npm install body-parser --save   //处理 JSON, Raw, Text 和 URL 编码的数据。
$ npm install cookie-parser --save  //解析Cookie工具,通过req.cookies取到cookie并转成对象
$ npm install multer --save   //用于处理 enctype="multipart/form-data"(设置表单的MIME编码)的表单数据
$ cnpm list express  //查询版本号,也是看是否安装成功
-- express@4.17.1

创建一个js文件,我这里是取名 server.js

var express = require('express');  //调用模板
var app = express();  //不污染本来,用变量来表示
var bodyParser = require('body-parser');  //调用模板

app.get('/', function (req, res) {  //get请求
   res.send('Hello World');
})

var server = app.listen(8888, function () {   //监听端口
  var host = server.address().address
  var port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})

 

怎么运行才是一个node.js程序呢,毕竟我们好像什么都没声明
直接用cmd命令行运行这个文件  node server.js

 node服务

这样就运行成功了,下面这句话是我写的,成功打印出来了,然后用浏览器打开页面,页面路径是127.0.0.1:8888

这样一个基础的web就好了

4.什么是Node.js的路由

由于我们之后和ajax数据传递的时候需要用到路由,所以我们还是了解一下, 而且路由的确是很重要的,我这里简单的介绍一下

// api
app.get('/api_router',function(req,res){
     console.log("api_router api请求");
     res.send("api_router api页面数据");
})

// agent
app.get('/agent_router',function(req,res){
     console.log("agent_router 微服务请求");
     res.send("agent_router 微服务页面数据");
})

然后运行js文件,可以用过访问不同的地址得到不同的效果

http://127.0.0.1:8888/api_router

http://127.0.0.1:8888/agent_router

5.Node.js+Express+路由+ajax 数据交互

直接上代码,关于nodejs和ajax前后台数据的交互

目录形式:

node_file

server.js:

var express = require('express');  //调用模板
var app = express();  //不污染本来,用变量来表示
var bodyParser = require('body-parser');  //调用模板
// 创建编码解析
var urlencodedParser = bodyParser.urlencoded({ extended: false })

// 首页
app.get('/', function (req, res) {  //get请求
   res.send('Hello World');
})
// 配置静态文件
app.get('/form_index.html',function(req,res){
  res.sendFile(__dirname+''+'/public/form_index.html'); //提供静态文件
})
// ajax接口
app.post('/process_post', urlencodedParser, function (req, res) {  //post处理方法
    // 输出 JSON 格式
  var response = {
    "names":req.body.names,   //得到页面提交的数据
    "passwords":req.body.passwords
  };
  //加入數據庫
  mysql_connec(req.body.names,req.body.passwords);  //数据库方法,加入了两个参数,是提交的数据
  console.log(response);
  res.send("1"); //返回的数据,这里根据情况写
  res.end();
})

var server = app.listen(8888, function () {   //监听端口
  var host = server.address().address
  var port = server.address().port
  console.log("应用实例,访问地址为 http://%s:%s", host, port)
})

form_index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>
<form>
       name: <input type="text" name="names" />
       password: <input type="password" name="passwords" />
       <input class="myForm" type="button" value="submit" />
</form>

        <script type="text/javascript">
            $(function() {
                $(".myForm").on('click', function() {  //添加点击事件
                    var names = $("input:nth-of-type(1)").val();   //获取两个的参数
                    var passwords = $("input:nth-of-type(2)").val();
                    $.post("http://127.0.0.1:8888/process_post", { //jq的post方法
                        names: names,
                        passwords: passwords
                    }, function(res) {
                        alert("提交成功");
                    })
                })
            })
        </script>
    </body>

</html>

此时运行会报错

node_mysql

6.Node.js+MySql 获得数据写入数据库

后台没有数据库怎么算是后台呢,获取了数据存入数据库才算完整

创建一个 xmibear 库,里面创建 formtable 表,创建 id,name,password 字段 类型 varchar

安装数据库不再獒述

$ npm install mysql

然后将这个函数放入server.js 中

//数据库连接方法
function mysql_connec(name,pas) {
  //链接数据库
  var mysql = require("mysql");
  var connection = mysql.createConnection({  //配置参数,然后添加你的数据库里面的表
      host: 'localhost',
      user: 'root',
      password: '*********',
      database: 'xmibear'
  })
  connection.connect();  //连接

  //插入数据
  var addSql = `insert into formtable(name,password) values(${name},${pas})`; //存放数据库语言的,这里是添加
  var addParmas = [name, pas];
  connection.query(addSql, addParmas, function(err, res) {
      if(err) {
          console.log("[insert error]-", err.message);
          return;
      }
      //cmd打印内容
      console.log("

----------插入数据start-----------------------
");
      console.log(res);
      console.log("
----------插入数据end-----------");

  })
}

node_sql

当然 nodeJs不止于此 这只是一个比较好的开端

标签: nodeJs前端front服务器
Copyright © 2019 幻雨焉缘博客 | 浙ICP备19001843号-1
----------------------------------
种一棵树,最好的培养时间是十年前,其次是现在 加油  (ง •_•)ง。        ──── 前端攻城狮