营销单页网站,百度h5制作软件下载,福建省建设信息网站,专业网站建设公目录 koa简介前端项目搭建koa环境第一步#xff1a;新建项目第二步#xff1a;环境初始化#xff0c;安装依赖初始化项目#xff0c;生成package.json文件安装koa依赖安装koa-router 路由管理依赖安装dotenv 环境变量依赖安装nodemon 热启动依赖 第三步#xff1a;代码调用… 目录 koa简介前端项目搭建koa环境第一步新建项目第二步环境初始化安装依赖初始化项目生成package.json文件安装koa依赖安装koa-router 路由管理依赖安装dotenv 环境变量依赖安装nodemon 热启动依赖 第三步代码调用启动服务main.js文件中的内容app/index.js中的内容app/config.js中的内容.env中的内容router文件夹中的user.router.js文件controller文件夹中的user.controller.js文件router文件夹中的index.js文件到这里代码就写好了准备开始运行 第四步启动前端koa服务器 最终效果 koa简介
Koa 是一个新的 web 框架由 Express 幕后的原班人马打造 致力于成为 web 应用和 API 开发领域中的一个更小、更富有表现力、更健壮的基石。 通过利用 async 函数Koa 帮你丢弃回调函数并有力地增强错误处理。 Koa 并没有捆绑任何中间件 而是提供了一套优雅的方法帮助您快速而愉快地编写服务端应用程序。 简而言之koa可以让前端自己搭建一个服务器模拟后端接口返回数据进行调试。 KOA官网 前端项目搭建koa环境 使用软件工具vscode 安装依赖koa、dotenv、nodemon、koa-routernpm这些基础的就不说了哈 第一步新建项目
新建个文件夹拖拽到vscode里打开 手动创建好这些文件夹和文件等会要往里面写东西 第二步环境初始化安装依赖
vscode里按下快捷键CTRLj唤出控制台 依次输入
初始化项目生成package.json文件
npm init -y 生成package.json文件
安装koa依赖
npm i koa --save或者npm i koa -S 可将信息加入到package.json文件中的dependencies中—save也就是生产阶段的依赖,也就是项目运行时的依赖就是程序上线后仍然需要依赖
安装koa-router 路由管理依赖
npm install koa-router --save Koa-router 是 koa 的一个路由中间件它可以将请求的URL和方法如GET 、 POST 、 PUT 、 DELETE 等 匹配到对应的响应程序或页面。
安装dotenv 环境变量依赖
npm install dotenv --save Dotenv 是一个零依赖的模块它能将环境变量中的变量从 .env 文件加载到 process.env 中将环境相关的配置独立于代码之外。
安装nodemon 热启动依赖
npm install nodemon --save-dev或者npm i nodemon -D 可将信息加入到package.json文件中的devDependencies中-D也就是开发阶段的依赖就是我们在开发过程中需要的依赖只在开发阶段起作用
第三步代码调用启动服务
main.js文件中的内容
// main.js
const app require(./app/index.js)
const config require(./app/config.js)app.listen(config.APP_PORT, () {console.log(服务器在${config.APP_PORT}端口启动成功了~)
})app/index.js中的内容
// 入口文件
// app/index.js
const Koa require(koa)const app new Koa()const useRoutes require(../router) // 引入router下的index.js文件不写出来其实等价于../router/index.jsuseRoutes(app) // 向这个路由加载文件传入appmodule.exports app //暴露出去app这个变量方便其他文件调用app/config.js中的内容
处理环境变量把变量写入到环境中
// config.js
const dotenv require(dotenv) //环境变量依赖 参考https://juejin.cn/post/6844904198929121288?fromsearch-suggestdotenv.config()module.exports {APP_PORT
} process.env.env中的内容
APP_PORT8000 router文件夹中的user.router.js文件
const Router require(koa-router) // 引入依赖const userRouter new Router({ prefix: /user }) // 设置接口前缀const { create } require(../controller/user.controller) // 引入中间件userRouter.get(/, create) // 设置接口路径以及中间件module.exports userRouter // 导出controller文件夹中的user.controller.js文件
这个中间件是与router文件夹中的user.router.js文件
class UserController { // 创建类async create (ctx, next) { // 中间件console.log(请求成功)ctx.body 请求成功,用户test // 请求响应}
}module.exports new UserController() router文件夹中的index.js文件
这个文件里的代码专门用来加载路由将会用文件遍历的方法来加载每一个路由这样就不用每增加一个接口都要再自己手动去加载路由了。接下来只要在入口文件app/index.js中引入这个文件加载路由即可
const fs require(fs)const useRoutes (app) {fs.readdirSync(__dirname).forEach(file {if (file index.js) return // index.js文件不需要const router require(./${file})app.use(router.routes())app.use(router.allowedMethods())})
}module.exports useRoutes 到这里代码就写好了准备开始运行
开始运行前我们要去package.json中设置一下启动项目的语句毕竟我们用的nodemon热启动 在package.json文件中的scripts对象中插入 start: nodemon ./src/main.js 这句的意思就是我们在控制台使用npm start 等价于npm nodemon ./src/main.js 运行这个入口文件开始项目执行 第四步启动前端koa服务器
我们在控制台输入npm start 这样就能启动项目了
最终效果 或者用postman请求也是得到这个返回这 localhost就是你本机电脑的ipcmd里用ipconfig查看自己ip 如果你的手机跟当前电脑链接的wifi是同一个你直接用手机游览器访问这个接口一样能正常访问到 参考博客https://juejin.cn/post/7091309467869921288
