进来是为了想要加薪的小伙伴我可不敢打包票哈, 但我相信这对于想要入门写 Node.JS 的朋友来说, 一定会有所收获, 那么, 下面开始我们的正题 (这里不使用 koa-generator 脚手架, 我们直接自己搭建项目, 适用于前后端分离)
一: 创建项目
1. 首先全局安装我们的 koa 依赖包 (已经有 node 环境)
NPM install -g koa
2. 接着在我们本地项目中安装
NPM install koa --save
最基本的开发环境我们已经搭建完了, 可以开始 koa 之旅了:
- const Koa = require('koa');
- const App = new Koa();
- // 对于任何请求, App 将调用该异步函数处理请求:
- App.use(async (ctx, next) => {
- await next();
- // todo
- });
- App.use(async (ctx, next) => {
- await next();
- // todo
- });
- // 在端口 8081 监听:
- App.listen(8081);
最原始的写法就是使用 App.use(async (ctx, next) => {}), 只有当 next() 之后才能执行下一个 App.use(), 所以这里引入了 koa-router
二. 添加路由
NPM install koa-router koa-bodyparser --save
- const Koa = require('koa');
- const bodyParser = require('koa-bodyparser');
- const App = new Koa();
- App.use(bodyParser()); // 解析 request 的 body
- const router = require('koa-router')()
- router.get('/', async (ctx, next) => {
- // todo
- })
- App.use(router.routes());
- App.listen(9000);
- console.log('App started at port 9000...')
这样直接访问 http://localhost:9000 , 就可以访问到了
你也可以为你的路由加个前缀
- const Router = require('koa-router')
- const router = new Router({
- prefix: '/API'
- })
这样只需要访问 http://localhost:9000/API , 而我们写接口的时候, 这个前缀就可以说是少不的了.
三. 热重启的处理
每一次我们修改都要关闭程序, 然后再 NPM start, 这是想起 webpack 的热更是多么的舒服, 想着要用 webpack 搭建吗, 这时候就要用到 nodemon(Nodemon 是一个实用程序, 用于监视源中的任何更改并自动重新启动服务器. 完美的发展), 它还支持自定义配置 nodemon.JSON 这里不做配置, 直接使用
NPM install nodemon --save
修改 package.JSON
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "start": "nodemon App.JS"
- },
运行 NPM start, 这样就达到了热重启的效果了, 可以愉快的开发了
四. 支持 import 模块的引入
犹豫原生的 koa 是不支持 import 引入模块的, 假如你使用 import 引入模块的话, 会报如下的错:
这时候我们安装以下依赖
NPM install babel-plugin-transform-es2015-modules-commonjs babel-register --save
在根目录下创建 start.JS
- require('babel-register')
- (
- {
- plugins: ['babel-plugin-transform-es2015-modules-commonjs'],
- }
- )
- module.exports = require('./App.JS')
在修改下 package.JSON
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "start": "nodemon star.JS"
- },
直接运行 NPM start, 这时候可以看到我们的项目已经支持 import 语法了
五. 连接上 MongoDB 和 mongoose
这里就不做 MongoDB 的安装教程了, 小伙伴们可以自行先去安装好 MongoDB, 安装好之后, 看到如下图片说明安装和启动成功了
NPM install mongoose --save
接下来我用简单暴力的方法来连接我们的数据库 MongoDB, 这里为了方面让大家明白, 就不做层次的处理以及文件的处理 (实际项目这样做估计是加不了薪的噢)
在 App.JS 中添加
- const db = mongoose.connect("MongoDB://localhost/testDB")
- // 账户的数据库模型
- var UserSchema = new mongoose.Schema({
- username:String,
- password:String,
- email:String
- });
- var User = mongoose.model('User',UserSchema);
- // 新增数据
- var user = {
- username: 'ydj',
- password: '123123',
- email: ''
- }
- var newUser = new User(user);
- newUser.save();
- router.get('/', async (ctx, next) => {
- let val = null
- const data = await User.findOne({username: 'ydj'})
- console.log('data', data)
- const result = {
- code:200,
- response: data,
- ts: 12345
- }
- ctx.response.body = result
- return result
- })
这里的操作是: 新建一个用户的数据模型, 接着讲 user 的数据加入到我们的 testDB 数据库中, 接着当我们访问 localhost:9000 的时候, 就会请求我们的数据库, 查询到数据之后返回. 可以从上面图上看到, 我们刚开始是没有 users 这个集合的, 当我们运行该程序的时候, 我们的数据库就会自动新增该集合了和数据了:
运行之后:
访问我们的 localhost:9000
前端的小伙伴们, 看到这个会不会很鸡冻, 打开就是后端每天给我们提供的接口数据了, 泪崩 ing.
六. 解决跨域
最后当我们写好的接口要提供给别人的时候, 跨域的问题是必须解决的, koa 这边也很好处理, 提供了 koa2-cors 处理
NPM install koa2-cors --save
- const cors = require('koa2-cors')
- App.use(cors({
- exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'Date'],
- maxAge: 100,
- credentials: true,
- allowMethods: ['GET', 'POST', 'OPTIONS'],
- allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'X-Custom-Header', 'anonymous'],
- }));
关于 koa2-cors 其他相关配置, 大家可以自行网上搜索
七. 总结
项目目录结构
├── node_modules 依赖包
├── routes 路由
| ├── index.JS
| ├── user.JS
├── App.JS 主入口文件
├── start.JS 处理 import 配置文件
└── package.JSON
App.JS
- const Koa = require('koa')
- const mongoose = require('mongoose')
- const cors = require('koa2-cors')
- const router = require('koa-router')()
- // import router from './routes'
- const App = new Koa()
- // 处理跨域的配置
- App.use(cors({
- exposeHeaders: ['WWW-Authenticate', 'Server-Authorization', 'Date'],
- maxAge: 100,
- credentials: true,
- allowMethods: ['GET', 'POST', 'OPTIONS'],
- allowHeaders: ['Content-Type', 'Authorization', 'Accept', 'X-Custom-Header', 'anonymous'],
- }));
- const db = mongoose.connect("MongoDB://localhost/testDB")
- var UserSchema = new mongoose.Schema({
- username:String,
- password:String,
- email:String
- });
- var User = mongoose.model('User',UserSchema);
- router.get('/', async (ctx, next) => {
- let val = null
- const data = await User.findOne({username: 'yidong'})
- console.log('data', data)
- const result = {
- code:200,
- response: data,
- ts: 12345
- }
- ctx.response.body = result
- return result
- })
- App.use(router.routes());
- App.listen(9000);
- console.log('App started at port 9000...')
- package.JSON
- {
- "name": "yid",
- "version": "1.0.0",
- "description": "",
- "main": "App.JS",
- "dependencies": {
- "babel-plugin-transform-es2015-modules-commonjs": "^6.26.2",
- "babel-register": "^6.26.0",
- "koa": "^2.5.3",
- "koa-bodyparser": "^4.2.1",
- "koa-router": "^7.4.0",
- "koa2-cors": "^2.0.6",
- "mongoose": "^5.2.17",
- "nodemon": "^1.18.4"
- },
- "devDependencies": {},
- "scripts": {
- "test": "echo \"Error: no test specified\"&& exit 1",
- "start": "nodemon App.JS"
- },
- "author": "",
- "license": "ISC"
- }
start.JS
- require('babel-register')
- (
- {
- plugins: ['babel-plugin-transform-es2015-modules-commonjs'],
- }
- )
- module.exports = require('./App.JS')
- routes/index.JS
- const router = require('koa-router')()
- router.get('/', async (ctx, next) => {
- ctx.body = "<div>Hello</div>"
- })
- router.get('/string', async (ctx, next) => {
- ctx.body = 'koa2 string'
- })
- router.get('/JSON', async (ctx, next) => {
- ctx.body = {
- title: 'koa2 JSON'
- }
- })
- // module.exports = router
- export default router
这时候我们就可以愉快的开始我们的 Node.JS+koa 项目了, 再稍微将文件处理下, 模块的区分, 就可以完成一个基本框架的构建啦.
来源: https://juejin.im/post/5bad9b1af265da0ae80120fe