Node学习(九)01-管理系统——git查看版本号和注释& 搭建服务器之编写接口-get请求、测试接口 & body-parser之处理urlencoded编码格式的请求体 & ajax请求接口写法
一、使用Git管理项目
使用Git来管理项目,不用发布到GitHub。
具体做法:
- 创建文件夹,名字叫做 项目代码
- 在
项目代码
文件夹中,右键–> git bash here - 执行
git init
- 复制模板
manager
到项目代码
中 - 执行
git add .
- 执行
git commit -m '添加了初始的模板'
- (可选)执行
git log --oneline
查看版本号和注释 - (可选)执行
git checkout 版本号
- (可选)执行
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-查看加载的文件和调用的方法