2018-06-22 （前后台连接方法）

node

前后台 连接 过程。

注意： 
    html    localhost:你自己写的端口/你的html
    js  localhost:你自己写的端口/你自己写的'/名字'  比如  '/json'

    写完 js  要 监听 在 cmd 里。        node  js软件名字 

1. 在指定的文件夹下载 下面需要的数据。 需要 mySQL 数据库。

npm install express (表达)

npm install mysql

2. 在文件夹内 创建 js 文件

1.  自己写数据。

写好数据，设置 一个静止 的文件夹。

然后，用 cmd  监听 js文件 （自己写的数据库）。

在静止的文件夹内 创建 html 文件  用 Jquery  写出 ajax  。

// js 写法

let express = require('express');


let server = express();

server.listen(5000); // 监听端口

server.get('/zj',function (request,response){
// 请求数据

    response.send({
        // 发送数据
        data:[

        {name:'MC丶小洲',age:18},
        {name:'李四',age:19}


        ]




    });

    response.end();




})


// 设置 静态 文件夹 

server.use(express.static('file'))

// jquery
<script>
$.ajax({

    url:'/zj',
    dataType:'json',
    cache:true,
    success:function(res){
        console.log(res)
        $.each(res.data,function(i,v){


            $(`
                <div>${i}</div>
                <div>${v.name}</div>
                <div>${v.age}</div>


                `).appendTo('body')




        })




    }




})

</script>

    2. 用 Navicat Premium    （外号 小金币）



    
        js 写法 先 引包   创建 一个 mysql。在连接 数据库， 写上 你自己用 （小金币） 写 的 数据库。
        
        然后 调用。 比 第一种 方法， 多了一次方法。




        （小金币）方法。

        1.使用先创建 数据库。

        2.在 数据库 下，创建 表格

        3.在 查询 表格，  查询代码是    SELECT  *  FROM  表格名称 （select * form 表格名称）要大写 优化服务器。










        代码如下：

        ```
// 引包 

let express = require('express');
let mysql = require('mysql');
let server = express();



server.listen(4000);  // 监听端口


// 连接数据库

let db = mysql.createConnection({

    host:'localhost',
    user:'root',        // 用户名
    password:'root',    // 你的密码
    database:'ind'  // 数据库名称

})




server.get('/sele',function (request,response){

    db.query(`select * from json`,function (err,data){

        response.send({data});
        response.end();



    })


})

//  express     表达

//  require     要求

//  mysql       数据库

//  query       查询 

//  listen      听

//  createConnection    创建连接

//  host        主办  

//  localhost   本地服务器

//  root        根

//  database    数据库

//  server      服务器

//  reqeuest    请求
    
//  response    响应

//  send        发送

//  end         结束

//  data        数据

//  static      静止的


//  设置 静态文件夹

server.use(express.static('mmm'));






        ```

jqury   的 ajax


    ```

    $.ajax({

        url:'/zj',
        dataType:'json',
        cache:true,
        success:function(res){
            // console.log(res)
            $.each(res.data,function(i,v){


                $(`
                    <div>${i}
                        <span>${v.name}</span>
                        <span>${v.age}</span>
                        <span>${v.user}</span>
                    </div>

                    `).appendTo('body')





            })
        }



    })


    ```


    


        















    

    









 mySQL  简书

localhost:4000/add

localhost（本地主机）