这是我以前学习的笔记，现在回顾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/
- 安装并引用koa-static库，配置static路径
- 安装并引用koa-view库，配置views路径
- 使用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()
网友评论