Node学习（九）01-管理系统——git查看版本号和注释& 搭建服务器之编写接口-get请求、测试接口 & body-parser之处理urlencoded编码格式的请求体 & ajax请求接口写法

Node学习（九）01-管理系统——git查看版本号和注释& 搭建服务器之编写接口-get请求、测试接口 & body-parser之处理urlencoded编码格式的请求体 & ajax请求接口写法

一、使用Git管理项目

使用Git来管理项目，不用发布到GitHub。

具体做法：

1. 创建文件夹，名字叫做 项目代码
2. 在 项目代码 文件夹中，右键–> git bash here
3. 执行 git init
4. 复制模板manager到 项目代码 中
5. 执行 git add .
6. 执行 git commit -m '添加了初始的模板'
7. （可选）执行 git log --oneline 查看版本号和注释
8. （可选）执行 git checkout 版本号
9. （可选）执行 git checkout master，回到主分支，进行后续开发

二、搭建项目

完成项目必须的一些内容，比如下载必须的模块、比如创建服务器、比如导出db模块。

2.1 下载必须的模块

在 项目代码 文件夹中，执行：

# 一次安装多个模块，多个模块之间使用空格隔开即可
npm i express body-parser mysql

安装完毕，执行 git add . 和 git commit -m '下载了express和body-parser和mysql'

2.1 搭建服务器

创建app.js。里面完成创建服务器的代码即可。

// 加载express
const express = require('express');
// 创建app对象
const app = express();
// 监听端口，开启服务
app.listen(3000, () => console.log('服务启动了'))
// 处理静态资源
app.use(express.static('manager'));
// 处理 urlencoded 编码格式的请求体
const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({extended: false}));

创建完毕，执行 git add . 和 git commit -m '首次编写app'

此时，打开终端

nodemon .\app.js

效果-开启服务成功

2.2 导出db模块

创建db.js。将查询的代码封装成函数，并导出：

module.exports = (sql, values, cb) => {
    const mysql = require('mysql');
    const conn = mysql.createConnection({
        host: 'localhost',
        port: 3306,
        user: 'root',
        password: '',
        database: 'yingxiong',
        multipleStatements: true
    });
    conn.connect();
    conn.query(sql, values, cb);
    conn.end();
}

创建完毕，执行 git add . 和 git commit -m '首次编写db.js'

三、开发index.html页面

3.1 完成getHeroes接口

在app.js中，编写接口，接口要完成的工作就是把所有的英雄获取到，并响应。

// 导入db模块
const db = require('./db.js');
///  后面完成各种接口  

// 1. 取出所有的英雄
app.get('/getHeroes', (req, res) => {
    db('select * from heroes', null, (err, result) => {
        if (err) throw err;
        // 接口响应，响应查询到的结果
        res.send(result);
    });
});

执行 git add . 和 git commit -m '第一次编写getHeroes接口'

此时，打开Postman，测试地址

get请求-没有参数

页面和服务器交互过程

3.2 前端写ajax代码，请求接口获取数据

在index.html中。写ajax代码，向接口发请求，请求数据，并通过模板引擎将数据显示到页面中。

发送ajax请求的代码：

// 页面刷新，马上发送ajax请求，请求所有的英雄
$.get('/getHeroes', function (res) {
    // console.log(res);
    // 调用template
    var str = template('moban', {
        arr: res
    });
    // 把str放到tbody中
    $('tbody').html(str);
}, 'json');

ajax请求响应流程

模板代码（加了一个昵称、表头也要加一个昵称）：

在index.html中

<script id="moban" type="text/html">
    {{each arr}}
    <tr>
      <td><img src="{{$value.file}}" /></td>
      <td>{{$value.name}}</td>
      <td>{{$value.nickname}}</td>
      <td>{{$value.skill}}</td>
      <td>
        <button onclick="location.href='./edit.html'" class="btn btn-primary">编辑</button>
        <button onclick="alert('你真狠')" class="btn btn-danger">删除</button>
      </td>
    </tr>
    {{/each}}
  </script>

执行 git add . 和 git commit -m 'index.html页面获取英雄显示到页面中'

1-刷新页面，加载数据

2-查看加载的文件和调用的方法