超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口

用两种常用的方式,我们两种方法都来写一下

第一种方案

在项目内部用使用expess建立连接

第一步 安装node.js

npm i node 
或
yarn add node

可以通过cmd命令行  node-v 来查看版本号

我这里是14版本

第二步在项目中安装以下插件

npm i mysql nodemon Express bady-parser --save

 mysql  //数据库
 nodemon //热更新
 Express  // express框架
 bady-parser  //用来获取post请求的参数

 第三步创建 server.js 文件

在根目录下创建server.js 文件,进行配置

import express from 'express'   //引入express
import { createConnection } from 'mysql' //createConnection 建立连接&关闭连接
const app = express()
import bodyparser from 'body-parser';
app.use(bodyparser())  // 获取 post请求传递来的参数
const port = 8000  //(监听的端口号)
const connection = createConnection({
    host: 'localhost',
    user: 'root',  // 用户名
    password: '*****',  //密码
    database: 'mynode',  // 数据库名
    post: 3306     //默认端口
})
connection.connect()  // 建立数据库链接

// 解决跨域
app.all("*", function (req, res, next) {
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    next();
});

// 测试是否连接成功
app.post('/', (req, res) => {
    console.log(req.body.data);
    res.send({
        data: '连接成功',
        status: 200
    })
})

// 编写接口格式
app.get('/user', (req, res) => {
    connection.query('SELECT * FROM user', (err, rows, fields) => {
        res.send({
            data: rows,
            status: 200
        })
    })
})

app.listen(port, () => {
    console.log(`连接成功`)
})

这里有一些容易踩坑的地方

数据库配置这一块比较容易出错

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第1张图片

database就是需要建立连接的数据库名称

数据库账号 密码  一般默认都是 root   默认端口号 写  3306即可。

数据库这块有问题的可以评论区留言!!!

然后就是 兼用性的问题 express 不能识别es6中import语法,默认是的是connment.js语法(也就是require),若果使用import语法就会出现如下错误

两种解决方案

 第一种解决方法:将es6语法转换正 可以识别的语法

安装babel插件 (将es6语法转换成可以识别的语法)

第一步安装babel
npm i babel-cli babel-preset-env  --save
 第二步创建 .babelrc 文件

在根目录下创建  .babelrc

{
    "presets": [
        "env"
    ]
}
第三步修改page.json文件

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第2张图片

 添加上这一行即可

第四步执行 命令 npm run start  

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第3张图片

 已经连接成功!!!!

第二种解决方案:使用comment.js 语法

前两步是相同的只需要修改server.js种的配置即可

const express = require('express')
const mysql = require('mysql')
const bodyParser = require('body-parser')   // 解析参数
const app = express()

//启动项目,端口号为8000
app.listen('8000', () => console.log('连接成功'))

//数据库信息,密码一般,默认root
const option = {
    host: 'localhost',
    user: 'root',
    password: 'root',
    port: '3306',
    database: 'mynode',
}

// 解决跨域
app.all("*", function (req, res, next) {
    //设置允许跨域的域名,*代表允许任意域名跨域
    res.header("Access-Control-Allow-Origin", "*");
    //允许的header类型
    res.header("Access-Control-Allow-Headers", "content-type");
    //跨域允许的请求方式
    res.header("Access-Control-Allow-Methods", "DELETE,PUT,POST,GET,OPTIONS");
    next();
});


//连接数据库
const conn = mysql.createConnection(option)

//all代表所有的请求方式(包括get/post)  '/user' 给一个路径(自己定义)  req代表发起请求(request)   res代表接收请求(response) 
app.all('/user', (req, res) => {
    // 选择user表 根据你自己的表名  用json的格式输出
    conn.query('SELECT * From user', (e, r) => res.json(new Result({ data: r })))
})

// 输出的内容
function Result({ code = 1, msg = '', data = {} }) {
    this.code = code;
    this.msg = msg;
    this.data = data
}

只需要将import 换成 require引用即可

启动服务  node  server.js

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第4张图片

这里推荐大家使用 es6 语法 ,comment.js 现在基本已经很少使用了,新的东西既然出现了,大家还是多去尝试比较好。 

第二种方案

使用express单独创建一个项目

第一步全局安装 Express  express-generator 

express-generator是一个node的自动化创建项目工具,类似于vue-cli

express是一个库,是node.js语法的一个类库,而express-generator是项目生成器

 npm install -g express-generator (expressApi已更新)
 可以通过express --version查看版本号来确认是否安装成功

第二步   创建express项目

在命令行中 通过 express + 项目名来创建项目 比如 express mynode

第三步打开新创建的项目进行配置

npm i mysql nodemon bady-parser --save

 mysql  //数据库
 nodemon //热更新
 body-parser  //用来获取post请求的参数

第四步 创建 server / index.js 文件 建立数据库连接

进行如下配置

//引入mysql
const mysql = require("mysql");
// 引入 express 框架
const express = require('express')
// 创建实例

var connection = mysql.createConnection({
    host: 'localhost', //数据库地址
    port: '3306',//端口号
    user: 'root',//用户名
    password: '****',//密码
    database: 'mynode'//数据库名称
});
connection.connect();//用参数与数据库进行连接


module.exports = connection

第五步在routes / index.js种进行引入

var express = require('express')
var router = express.Router()
var connection = require('../server')   //创建的 server文件
router.get('/', function (req, res) {
  res.send({   //请求数据库
    code: 0,  //判断是否请求成功
    msg: '请求成功',
    data: '内容'
  })
})

//查询接口
router.get('/user', function (req, res, next) {
  connection.query('select * from user', function (error, results) {
    res.send({
      code: 0,
      data: results
    })
  })
});

module.exports = router  //抛出方法

第五步修改page.json文件

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第5张图片

是为了使用 nodemon 热更新 插件

第六步 启动项目

npm run start

 超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第6张图片

这里可以看到已经连接成功,3000 是默认端口号, 可以在bin/www文件中修改 启动端口号

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第7张图片

这里还有一个踩坑的地方,前端调用接口,发送的参数如果是中文会乱码,在 app.js

中添加一行代码 即可

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第8张图片

第二种方案在项目中使用接口卡时会产生跨域报错,需要 vue.config.json文件中进行代理配置

module.exports = {
    devServer: {
        port: 8080,//它是用来修改你打开后的端口号的
        proxy: {
            '/api': {
                target: 'http://localhost:3000',//跨域请求的公共地址
                changeOrigin: true, //是否开启跨域,值为 true 就是开启, false 不开启
                pathRewrite: {
                    '^/api': ''//注册全局路径, 但是在你请求的时候前面需要加上 /api  
                }
            }
        }
    },
}

在需要使用接口的地方,直接使用即可

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第9张图片

 打印的数据

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第10张图片

 附上数据库截图

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第11张图片

如何获取到前端发送来的数据

获取get请求携带的参数

注意get请求携带参数 需要通过params实现

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第12张图片

在express中通过 req来获取 

 超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第13张图片

 超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第14张图片

 获取post请求的参数

安装 body-parser 插件

在app.js中引入

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第15张图片

 然后通过 req.body.test 就可以获取到

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第16张图片

超详细的node.js(Express框架)与本地数据建立连接,编写简单的接口_第17张图片

以上就是node与本地数据库建立连接的两种常用方式,有问题请在评论区留言!!!

你可能感兴趣的:(node.js,express)