美文网首页
nodejs学习笔记2(koa框架的使用)

nodejs学习笔记2(koa框架的使用)

作者: miao8862 | 来源:发表于2021-05-12 23:15 被阅读0次

这是我以前学习的笔记,现在回顾mark一下

官网: https://koa.bootcss.com/
安装:npm i koa

简单的用法

const Koa = require("koa")
const app = new Koa()
// ctx是context的缩写,上下文,用来封装包含req和res属性的(ctx.request和ctx.response)
app.use(async ctx => {
  ctx.body = "hello world" // ctx.body是ctx.response.body的别名,可参考官网查看
})

app.listen(8887)

加入路由

const Koa = require("koa")
const Router = require("koa-router")
const app = new Koa()
const router = new Router()

router.get('/', async ctx => {
  ctx.redirect('/index')
})

router.get('/index', async ctx => {
  ctx.body = '我是主页'
})

router.get('/detail', async ctx => {
  ctx.body = '我是详情页'
})

app.use(router.routes())
app.listen(8887)

静态资源配置

将html转为pug模板:http://www.html2jade.org/

  1. 安装并引用koa-static库,配置static路径
  2. 安装并引用koa-view库,配置views路径
  3. 使用ctx.render()渲染页面,注意这里,必须使用async和await
// index.js
const Koa = require("koa")
const Router = require("koa-router")
const app = new Koa()
const router = new Router()
const views = require("koa-views") // 用于使用模板引擎
const static = require("koa-static") // 用于设置静态资源地址

console.log(111111, __dirname)
app.use(static(__dirname + '/static')) // 配置static路径
app.use(views(__dirname + '/views'), { // 配置模板路径
  extension: "pug"
})
router.get('/', async ctx => {
  ctx.redirect('/index')
})

router.get('/index', async ctx => {
  // ctx.body = '我是主页'
  await ctx.render('index.pug')  // render这个方法是koa-views上的方法,会默认使用配置views配置的路径,pug,注意,路径不要加/,否则会找不到路径
})

router.get('/detail', async ctx => {
  ctx.body = '我是详情页'
})

app.use(router.routes())
app.listen(8887)

// static/test.js
console.log("测试静态资源导入")
<!-- views/index.html -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 这里会默认查找static配置的目录 -->
  <script src="test.js"></script> 
</head>
<body>
  <h1>我是主页111</h1>
</body>

nodejs操作数据库

mysql不支持promise,而mysql2是对mysql的封装,它添加了对promise的支持;
安装:npm install mysql2

// 通过mysql获取数据
const mysql2 = require("mysql2")
const data = require("./static/data.json")
const connection = mysql2.createConnection({
  host: "localhost",
  user: "root",
  password: "123456",
  database: "jstest"
})
connection.query("select * from user", (err, res) => {
  if(err) {
    console.log(err);
  }
  console.log(res);
})

// // 可以使用?做为占位符,然后使用数组方式添加数据
// connection.query("insert into user(username,password,age,sex) values(?,?,?,?)", ['小花', '123', 5, 2])

// 将json文件数据批量导入到数据库中
data.forEach(item => {
  connection.query("insert into news(id,title,imgUrl,source,newTime) values (?,?,?,?,?)", [item.id, item.title, item.imgUrl, item.from, item.newTime])
})

例子,nodejs结合mysql、模板引擎渲染数据

// index.js
const Koa = require("koa")
const Router = require("koa-router")
const app = new Koa()
const router = new Router()
const views = require("koa-views") // 用于使用模板引擎
const static = require("koa-static") // 用于设置静态资源地址

app.use(static(__dirname + '/static'))
app.use(views(__dirname + '/views'), {
  extension: "pug"
})

// 通过mysql获取数据
const mysql2 = require("mysql2")
const connection = mysql2.createConnection({
  host: "localhost",
  user: "root",
  password: "123456",
  database: "jstest"
})
let newsList = []
// 可以使用promise
connection.promise().query("select * from news").then(([rows, fields]) => {
  console.log(rows) // 即对象数组
  newsList = rows
})
router.get('/', async ctx => {
  ctx.redirect('/index')
})

router.get('/index', async ctx => {
  // render这个方法是koa-views上的方法,会默认使用配置views配置的路径,pug,注意,路径不要加/,否则会找不到路径
  await ctx.render('index.pug',{
    newsList: newsList,
    total: 10
  })  
})

app.use(router.routes())
app.listen(8887)
//- views/index.pug
doctype html
html(lang='en')
  head
    meta(charset='UTF-8')
    meta(name='viewport' content='width=device-width, initial-scale=1.0')
    title Document
    style.
      .news-container {
        margin-bottom: 20px;
        border-bottom: 1px solid #000;
      }
      .news-img {
        width: 100px;
        height: 100px;
      }
  body
    h1 新闻
    each item in newsList
      div(class="news-container")
        h3 #{item.title}
        //- 如果属性值是变量,不需要加""
        img(src=item.imgUrl class="news-img")
        p 来自:#{item.source}
        p 日期:#{item.newTime} 
    button 上一页
    - for(let i = 1; i <= total; i++)
      button((click)='changePage()') #{i}
    button 下一页
    //- script(type="text/javascript").
    //-   changePage()

参考:
https://www.npmjs.com/package/mysql2

相关文章

网友评论

      本文标题:nodejs学习笔记2(koa框架的使用)

      本文链接:https://www.haomeiwen.com/subject/pjhrdltx.html