手把手带你koa2搭建项目
2019-12-05 11:37:58

此次教程所采用的是koa2应用生成器,为什么使用生成器,因为生成器帮我们解决了很多事情,比如项目结构等,所以我们可以不用关系这些东西,直接就可以写代码啦,省了很多事情。

我表达的不知道各位能不能理解,大家稍微带点耐心看看,只要你按这个教程一步一步来,项目肯定能跑起来!

首先我们开始安装生成器

npm install koa-generator -g

安装好了只会查看一下帮助

koa -h

创建koa项目

koa name

如果成功显示

create : name
create : name/package.json
create : name/app.js
create : name/public
create : name/routes
create : name/routes/index.js
create : name/routes/users.js
create : name/views
create : name/views/index.jade
create : name/views/layout.jade
create : name/views/error.jade
create : name/bin
create : name/bin/www
create : name/public/images
create : name/public/javascripts
create : name/public/stylesheets
create : name/public/stylesheets/style.css

install dependencies:
> cd name && npm install

run the app:
> SET DEBUG=name:* & npm start

进入项目目录

cd name

下载依赖

npm install

启动项目

npm start

到了这一步,我们就成功搭建的koa项目了!

现在搭建了,那么我们就要开始配置路由了,

我们先打开 routes 看一下 之后再去 app.js 看一下,你就大概知道路由配置是怎么一回事了。
就是在routes创建文件,然后再app.js里面配置
假如我们在routers文件夹下创建了index.js,那么我们在app.js就是这么弄

const index = require('./routes/index');
app.use(index.routes(), index.allowedMethods());

index.js内容为:

const router = require('koa-router')()

router.get('/', async (ctx, next) => {
    await ctx.render('index', {
        title: 'Hello Koa 2!'
    })
})

router.get('/string', async (ctx, next) => {
    ctx.body = 'koa2 string'
})

router.get('/json', async (ctx, next) => {
    ctx.body = {
        title: 'koa2 json'
    }
})

module.exports = router

那么我们访问http://localhost:3000/就是显示 Hello Koa 2!
访问http://localhost:3000/string 页面显示就是 koa2 string

到了这一步,我们差不多都会了一些基础。但是,先别急着高兴,还有问多事情呢!

我们怎么才能获取到koa2的参数呢?参数我们分为两种,第一种是GET参数,第二种是POST参数

到了获取参数我们就必须要知道跨域问题,跨域是什么我就不做详细的解释了,就是不同域名和端口不一样就会报错跨域问题。
如果出现这个问题我们怎么解决呢?

下载koa2-cors

npm install --save koa2-cors

下载成功在app.js中引入

const cors = require('koa2-cors');
app.use(cors());

这样跨域问题就解决了

我们再次回到参数这个问题,
koa2 GET获取参数

router.get('/', async (ctx, next) => {
    ctx.body = ctx;
})
//这时候你就会发现页面上打印了ctx
//这时候我们也可以看到一个【query】的东西,里面就是我们的参数
//使用的时候就是 ctx.query.xxx id就是ctx.qurty.id

koa2 POST获取参数

router.post('/', async (ctx, next) => {
    ctx.body = ctx;
})
//使用的时候就是 ctx.requert.body.xxx id就是ctx.requert.body.id

现在我们知道怎么获取参数了,但是这个还是远远不够的,我还需要通过参数去获取数据库数据或者说操作数据库。

首先,我们安装mysql模块,我使用的是phpstudy集成的,你们也可以用其他的。
安装:

npm install --save mysql

在需要用到的地方引入

const mysql = require('mysql')

创建数据库会话

const pool = mysql.createPool({
    host: '127.0.0.1',   // 数据库地址
    user: 'root',    // 数据库用户
    password: 'root',   // 数据库密码
    database: 'root'  // 选中数据库
});
// 执行sql脚本对数据库进行读写 
connection.query('SELECT * FROM my_table',  (error, results, fields) => {
  if (error) throw error
  // connected! 

  // 结束会话,这个一定不要忘记了,如果忘记带上去,这个时候第二次请求接口的时候就会不通,很慢。
  connection.release() 
});

如果每个路由都这样写,是不是觉得很麻烦啊,这时候我们可以简单的封装一下,我在public/javascript 文件夹下面创建一个js文件:

const mysql = require('mysql')
const pool = mysql.createPool({
    host: '127.0.0.1',   // 数据库地址
    user: 'root',    // 数据库用户
    password: 'root',   // 数据库密码
    database: 'root'  // 选中数据库
});

exports.query = function (arr = null) {
    if (!arr.sql) {
        return Promise.reject("sql语句为空")
    };
    return new Promise((resolve, reject) => {
        pool.getConnection(function (err, connection) {
            connection.query(arr.sql, (error, results, fields) => {
                if (error) reject(error)
                resolve(results)            
            })
            connection.release();
        });
    })                          
};

在其他文件中使用:

const db = require("../public/javascripts/config");
//操作单个数据库语句
router.get("/", async (ctx, next) => {
    await new Promise((resolve,reject)=>{
        resolve(db.query({
            sql:"SELECT * user FROM WHEWE id=1"
        }))
    }).then(res=>{
        ctx.body = res;
    })
})
//多个数据库语句(注意对比一下单个的方法)
//使用情况,比如登录后更新登录状态
//这个时候就要先查询,看看有没有用户存在,存在再去修改状态并返回相关信息给前端
router.get("/", async (ctx, next) => {
    await new Promise((resolve,reject)=>{
        resolve(db.query({
            sql:"SELECT * user FROM WHEWE id=1"
        }))
    }).then(async (res)=>{
        await new Promise((resolve,reject)=>{
            resolve(db.query({
                sql:"SELECT * user FROM WHEWE id=1"
            }))
        }).then(res1=>{
            res1[0].name = res[0].name;
            ctx.body = res1;
        })
    })
})
//其实多个的就是多套了Promis,如果是刚刚接触的就会不知道怎么使用了

好了,到了这里我们就差不多完成了,koa的基本操作就完成了。
最后,提醒一下大家,如果接口提示404问题,请检查地址对了没有,还有就是代码有没有问题,有时候ctx我经常写成cxt,这个时候就会报接口404,地址是对的,但是就是提示404,那么就是你的代码中出问题了,可以看看黑窗口。

{{item.name}}