node+express+mysql基本的项目实现

小灰灰学编程

已于 2022-09-30 17:09:37 修改

阅读量485

点赞数

分类专栏： express Node.js 文章标签： express node.js javascript

于 2022-09-26 17:43:05 首次发布

本文链接：https://blog.csdn.net/Chen_AC/article/details/127057173

版权

Node.js 同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

express

2 篇文章 0 订阅

订阅专栏

下面几个文件都是在同一个文件夹中，实现的过程中需要引入一下模块，通过npm install 即可下载

server.js

1、cors：用于解决跨域问题，因为我们本地的测试都是通过打开html去点击操作的

2、bodyParser：用于解决fetch发送POST网络请求时，获取前端传的参数进行解析

3、运行html操作前，需要先在终端通过 node server.js 启动服务器，也可以下载nodemon，通过 nodemon server.js 来启动服务器，每次修改server.js文件保存后服务器会进行热更新，不需要每次都执行一次node命令

const express = require('express')
const app = express()

// cors 用于解决跨域请求
const cors = require('cors')
app.use(cors())
// bodyParser 用于解决post请求时body参数解析
const bodyParser = require('body-parser')
app.use(bodyParser.json())


const port = 8080
const apiRouter = require('./router')
app.use('/api',apiRouter)

app.listen(port,function(){
  console.log('服务器已启动，端口号是：'+ port)
})

router.js

const express = require('express')
const router = express.Router()

const { query } = require('./db');

// GET 请求
router.get('/get',(req,res)=>{
  const data = req.query
  res.setHeader('Content-type','text/json;charset=UTF-8')
  let sql = 'select * from user'
  let result = query(sql)
  let resData = []
  result.then(res=>{
    resData = res
  }).then(()=>{
    if(result){
      res.send(JSON.stringify({
        success: true,
        message: '连接成功！',
        data: resData
      }))
    }else{
      res.send(JSON.stringify({
        success: false,
        message: '连接失败！'
      }))
    }
  })
})


// POST 请求
router.post('/post',(req,res)=>{
  const data = req.body
  res.send({
    msg: 'post 请求成功',
    data: data
  })
})

module.exports = router

db.js

const mysql = require('mysql')

const db = mysql.createPool({
  host: '127.0.0.1',
  port: '3306',
  user: 'root',
  password: 'xxxx', // 数据库连接的密码
  database: 'test' // 数据库名称
})

// 查询
let query = function(sql){
  return new Promise((resolve, reject)=>{
    db.query(sql, function(error, result, fields){
      if(error) throw error
      resolve(result)
    })
  })
}

module.exports = {query}

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <button id="getData" onclick="getData()">点击获取接口数据</button>
</body>
</html>

<script>
  function getData(){

    // GET 请求
    // fetch('http://127.0.0.1:8080/api/get?username=1',{method: 'GET'}).then(res=>{
    //   res.json().then(res=>{
    //     console.log(res)
    //   })
    //   }).catch(err=>{
    //     console.log(err)
    //   })

    // POST请求
      fetch('http://127.0.0.1:8080/api/post',{
        method:'post',
        body:JSON.stringify({
          uname:'张三',
          age:12
        }),
        headers: {'Content-Type': 'application/json'},
      }).then(data => {
        return data.text();
      }).then(ret => {
        //这里才是得到的最终数据
        console.log(ret);
      })
  }
</script>

效果：

总结：

1、使用form表单的action，method方式进行接口数据获取时，统一也会出现跨域问题，这个时候你也会想到需要用CORS去解决跨域，但是发现还不行的话，可能是因为你使用的form表单里面，用到的type="submit"的方式进行了提交，这样的话CORS是无效的，需要先把type="submit"删掉，并且使用fetch方式或者ajax的方式获取接口数据。

2、使用form表单的action还会出现一个问题，你点击提交按钮的时候页面会进行了跳转，处理这个问题的方法如下：

给form 表单添加属性 target="nm_iframe"，

添加ifream标签

<iframe id="id_iframe" name="nm_iframe" style="display:none;"></iframe>