node.js

最新推荐文章于 2024-03-05 15:38:20 发布

邱志刚

最新推荐文章于 2024-03-05 15:38:20 发布

阅读量221

点赞数

分类专栏： node.js 文章标签： node.js编写接口

本文链接：https://blog.csdn.net/qq_42957741/article/details/100055637

版权

node.js 专栏收录该内容

2 篇文章 1 订阅

订阅专栏

node+express+mysql编写后端接口！

1.，给大家分享一下最近学习的node！

第一步，
首先安装node.js就不说了，很简单

第二步，
创建一个文件夹，找到文件夹根路径，cmd ，
输入 npm init, 一直回车然后文件夹就会有一个 package.json 这里面是我们项目配置和信息。

第三步
安装模块

npm install express body-parser mysql cors --save

等待他安装完后，我们就可以在package.json 里面看到我们的一些配置信息。

第四步

在文件夹里面新创建一个文件夹，放app.js，
app.js 如下

// 引入express框架
const express = require('express');
const app = express();

// 引入cors
const cors = require('cors');
app.use(cors()); // 解决跨域

// 映入bodyParser
const bodyParser = require('body-parser');
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({extended:false}));


//引入mysql
const mysql = require('mysql');
const db = mysql.createConnection({
    host:'localhost',
    user:'root',
    password:'root',
    database:'ag_mysql',   // 数据库名
    connectTimeout:5000,    // 连接超时
    multipleStatements:true, // 是否允许一个qurey中包含多条sql语句
})


// 连接
db.connect((err) => {
    if(err) throw err;
    console.log("mysql connct...")
})

// 查询数据库
app.get('/logo',(req,res) => {
    let sql = 'SELECT * FROM ag_name';
    db.query(sql,(err, result) => {
        if(err) throw err;
        // console.log(result);
        res.json({code:200, message:result})
        // res.send('查询成功。。。')
    })
})

app.get('/',(req, res) => {
    res.send('<p style="color:red;">服务启动</p>');
})


// 监听服务启动
app.listen('3000',() => {
    console.log('服务启动 ....')
})

再创建一个index.html
代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
   *{
       margin: 0;
       padding: 0;
       list-style: none;
   }
   .cantain{
       width: 650px;
       min-height: 500px;
       box-sizing: border-box;
       margin: 30px auto;
       box-shadow: 0px 1px 4px red;
       padding: 2px;
   }
   .cantain .header{
       width: 100%;
       text-align: center;
       background: darkorange;
       padding: 6px 0px;
       /* display: flex;
       justify-content: center; */
   }
   .cantain .header h2{
       width: 100%;
       color:#fff;
       font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;     
       
  }
  .cantain ul li{
      border: solid 1px darkcyan;
      display: flex;
      justify-content: space-around;
      align-items: center;
      margin: 15px 10px;
      padding: 6px 0px;

  }
  .cantain ul li span{
      width: 140px;
      text-align: left;
  }
</style>
<body>
    <div class="cantain">
        <div class="header">
            <h2>群伦网络技术部表彰大会</h2>
        </div>
            <ul id="main">
            </ul>
    </div>
    
</body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
  <script>
   $(document).ready(function(){
        $.ajax({
            type:'get',  // 请求类型
            url:'http://localhost:3000/logo', // 请求地址
            data:{},
            dataType:'json',
            success:function(data){  
            var ag_data = data.message;
            console.log(ag_data);
            data.message.map(item => {
                let str ='';
                let mont = ` 
                <li>
                   <span>姓名: <label for="">${item.name}</label></span>
                   <span>年龄: <label for="">${item.age}</label></span>
                   <span>id:   <label for="">${item.id}</label></span>
                   <span>工作: <label for="">${item.work}</label></span>
                </li>`  ;
                $("#main").append(mont)
            })      
            }

        })

    });
  
  </script>
</html>

如果有问题，可以加我微信一起讨论，我们一起进步！
屏幕前的你，加油！
在这里插入图片描述