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-查看加载的文件和调用的方法

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/te-gl/10838.html