宁愿做一朵篱下的野花,不愿做一朵受恩惠的蔷薇。与其逢迎献媚,偷取别人的欢心,毋宁被众人所鄙弃 ---《无事烦恼》
前言:js全栈目录
基于node.js平台的下一代web框架 koa官网
在之前,我们了解了安装,路由,今天讲静态资源管理,下午讲连接数据库,然后koa2的入门就学习完成了。后面的知识带入到实际的开发中学习。
再复述一遍后端的的工作。提供json给前端(网页和app),来渲染出页面供用户浏览。接收前端发来的操作行为,再返回相对的json。
后端工作的时候,我们考虑更多的就是数据,存储,读取,加工(查询,修改,合并)。当明白整个后端的体系时候,不管是java,还是python我们都能很好的掌握,这里从js开始,因为足够的简单容易上手。这便是我的学习之路。
场景,在后端的项目中,我们吧koa2部署在服务器上,用户访问,请求数据,还有网页。网页存储在服务器,就是静态资源的形式存在的。熟悉vue,react的同学,知道在webpack打包后的项目是什么样的,单页面应用。这些的好处就是请求次数会小很多。
koa2提供了静态资源插件:koa-static
这篇文章超级简单
- 安装koa-static
编辑器命令行里键入
npm install koa-static -s
- 新建静态资源文件夹,static。
-app.js中启动插件
记得添加路径管理 path,第五行
const Koa = require('koa') //koa2中间件依赖
const app = new Koa() //js的继承
const Router = require('koa-router') //路由依赖的中间间
const static = require('koa-static') //静态资源服务插件
const path = require('path') //路径管理
const bodyParser = require('koa-bodyparser') //请求体,返回体解析类似json,text,图片等
// app.use( async ( ctx ) => {
// ctx.body = 'hello world'
// }) //koa2中间件,使用路由的(使用路由后,这里就不会在编辑代码了)
app.use(bodyParser()) //使用解析上下文插件
// 配置静态资源
const staticPath = './static'
app.use(static(
path.join( __dirname, staticPath)
))
app.use(require('./router/index').routes())
app.listen(3000) //服务启动端口
console.log('启动成功') //日志打印
- 测试服务
在文件中,添加一张图片看看,图片名img1,png格式
浏览器打开图片
当然static可以给你存放很多的内容, 例如html,css,js,文件,app。
总结: 静态资源管理,是很重要的一环。前端项目代码都存放在这里。
关注我,下一章 koa2连接数据库,彻彻底底的前后端分离开发。
我爱你,就像星星爱着月亮。感谢你们的点赞与关注