暂无图片
暂无图片
暂无图片
暂无图片
暂无图片

koa链接MySQL数据库

前端一起学 2021-02-07
1351

前言

今儿明显公司人变少了,我仍然坚挺在工作岗位上,

无所事事~

正好把koa中关于数据库的连接操作和post请求学习总结一下。

但在此之前先把上篇文章中koa的get请求内容完善。

koa中get请求query传参

get请求的内容都是放在ctx这个参数中,例如这个样子:

home.get("/test"async (ctx) => {
    let url = ctx.url;
    let request = ctx.request;
    let req_query = request.query;
    let req_querystring = request.querystring;
    let ctx_query = ctx.query;
    let ctx_querystring = ctx.querystring;
    ctx.body = {
        url,
        req_query,
        req_querystring,
        ctx_query,
        ctx_querystring
    }
})

那页面中输入的地址只需要在 http://localhost:5000/home/test 后面接参数就好了。例如这个样子:

http://localhost:5000/home/test?aaa=111&bbb=222

打开控制台查看一下network:

MySQL数据库

网上很多教程都是koa和mongodb共用的实践,mongodb我没用过,准备假期了解一下,这里还是用了常用的MySQL。

使用mysql当然得先有mysql,关于mysql的安装推荐一篇不错的文章,我也是按照教程实现了一遍,亲测可用。

https://www.php.cn/mysql-tutorials-454993.html

基础sql语句

安装好数据库之后,最基础的就是要会对mysql的增删改查,可以使用 Navicat 图形化操作数据库,但我还是建议学会写sql,比较后面需要在koa中操作数据库是需要用sql语句的,详细的可以自行搜索,我这里提供一下最简单的sql示例。

cmd管理权限打开之后,在确保本机安装mysql成功之后,输入相应指令实现不同的操作。

1、登录mysql

mysql -uroot -p

输入密码成功之后,命令行以MySQL开头。

2、查看本地所有数据库

show databases;

进入mysql之后所有的指令都需要在结尾加分号,因为mysql是根据分号来判别一条语句的结束进行执行。

3、使用数据库,例如使用test这个数据库,

create database test;
use test;

出现Database changed字样就说明已经进入这个数据库了。

4、在test数据库中新建一个数据表

create table students (
    id INT(11) NOT NULL PRIMARY KEY,
    name VARCHAR(32) NOT NULL
);

查看结果的话,建议都在 Navicat 中查看,很直观

其实以上数据库或者表的新建都可以直接在Navicat手动实现,而对数据的增删改查则一定要sql书写。

5、增

insert into students values (0, 'tom');

6、删

delete from students where id=0;

7、改

update students set id='1', name='jack';

8、查

select * from students;

链接数据库

koa中需要先安装mysql插件

npm install mysql

根目录下新建个utils文件夹,这里可以用来存放关于sql操作的文件。

首先是新建个 db.js 数据库链接的配置文件。

let mysql = require("mysql");

const pool = mysql.createPool({
    host"localhost",
    port"3306",
    database"test",
    user"root",
    password"132465"
})

function query(sql, callback{
    pool.getConnection(function(err, connection{
        connection.query(sql, function(err, rows{
            callback(err, rows)
            connection.release()
        })
    })
}

exports.query = query;

再新建个文件 sqldata.js 操作数据库文件,但这里只是demo,真实项目还需要按照业务分类来存在不同sql操作文件。

const db = require("./db");

const arr = [{
        id0,
        name"tony"
    },
    {
        id2,
        name"lucy"
    },
    {
        id3,
        name"bert"
    },
];

arr.map(val => {
    let sql = `insert into students values(${val.id}, '${val.name}')`;
    db.query(sql, (err, data) => {
        if (err) throw err;
        console.log(data);
    })
})

在终端执行

node .\utils\sqldata.js

成功之后就能在表中看到批量塞入的数据了,能拿到数据之后就可以实现相关的业务代码了。

读取静态文件

假设数据库中存入一个图片的相对地址,想在页面中访问这个图片,直接输入是不行的,因为那会被误认为是路由。

在根目录下新建一个assets文件,专门用来存放静态文件。例如在assets中新建images,存放个1.png。

此时想在页面中访问这张图片,输入 http://localhost:5000/assets/images/1.png 只能在页面中看到Not Found。

安装依赖:

npm install koa-static

在app.js中引入koa-static,并在router使用之前使用它。

const static = require("koa-static");
const path = require("path");
app.use(static(path.join(__dirname, "/assets")));

页面访问 http://localhost:5000/images/1.png 就能查看图片了。

不需要再写 assets,app.use(static(path.join(__dirname, "/assets"))) 这条语句的作用,就相当于访问 http://localhost:5000/ 就是在访问 http://localhost:5000/assets/

这就很重要,很多页面都需要显示图片的资源,以实现个banner接口为例。

示例banner接口实现

从头完整的来一遍。

test数据库中新建个banner表。首先登录mysql,然后进入test这个数据库,新建一个banner表,这个表暂需要个id和imgUrl两个字段。

建表的sql:

create table banner (
    id INT NOT NULL PRIMARY KEY,
    imgUrl VARCHAR(100) NOT NULL
);

建好表之后,先在本地静态文件中存点图片,然后给表中加点数据用来测试,可以直接在Navicat中手动添加,也可以在sqldata.js中写代码执行一下,批量塞入。

const db = require("./db");

const arr = [{
        id0,
        imgUrl"/images/1.png"
    },
    {
        id1,
        imgUrl"/images/2.png"
    },
    {
        id2,
        imgUrl"/images/3.png"
    },
];

arr.map(val => {
    let sql = `insert into banner values(${val.id}, '${val.imgUrl}')`;
    db.query(sql, (err, data) => {
        if (err) throw err;
        console.log(data);
    })
})

搞完数据之后,就可以来写banner接口了,在list路由文件中新增个banner接口。

const Router = require("koa-router");
const list = new Router();
const db = require("../utils/db");

list.get("/"async (ctx) => {
    ctx.body = "Hello list"
})

list.get("/banner"async (ctx) => {
    const myData = await new Promise((resolve, reject) => {
        const sql = `select * from banner`;
        return db.query(sql, (err, data) => {
            if (err) throw err;
            resolve(data);
        })
    })
    ctx.body = myData;
})

module.exports = list;




嘻,明儿再划水一天,争取把post请求搞出来~
文章转载自前端一起学,如果涉嫌侵权,请发送邮件至:contact@modb.pro进行举报,并提供相关证据,一经查实,墨天轮将立刻删除相关内容。

评论