nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目

2018-09-2909:23:16WEB前端开发Comments4,132 views字数 5125阅读模式
nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目

相信这对于想要入门写nodejs的朋友来说,一定会有所收获,那么,下面开始我们的正题(这里不使用koa-generator脚手架,我们直接自己搭建项目,适用于前后端分离)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

一:创建项目

可以在全局中安装koa依赖包 (保持项目版本的统一性)
npm install -g koa 
复制代码
或者在我们本地项目中安装
npm install koa --save
复制代码

最基本的开发环境我们已经搭建完了,可以开始koa之旅了:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

二. 添加路由

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, 就可以访问到了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

你也可以为你的路由加个前缀文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

const Router = require('koa-router')

const router = new Router({
	prefix: '/api'
})
复制代码

这样只需要访问 http://localhost:9000/api, 而我们写接口的时候,这个前缀就可以说是少不的了。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

三.热重启的处理

每一次我们修改都要关闭程序,然后再npm start, 这是想起webpack的热更是多么的舒服,想着要用webpack搭建吗,这时候就要用到nodemon(Nodemon是一个实用程序,用于监视源中的任何更改并自动重新启动服务器。完美的发展), 它还支持自定义配置nodemon.json这里不做配置,直接使用文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

npm install nodemon --save
复制代码

修改package.json文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon app.js"
  },
复制代码

运行npm start,这样就达到了热重启的效果了,可以愉快的开发了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目

四.支持import模块的引入

由于目前原生的node是不支持import引入模块的,假如你使用import引入模块的话,会报如下的错:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目

这时候我们安装以下依赖文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

npm install babel-plugin-transform-es2015-modules-commonjs babel-register --save
复制代码

在根目录下创建start.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

require('babel-register')
(
  {
    plugins: ['babel-plugin-transform-es2015-modules-commonjs'],
  }
)

module.exports = require('./app.js')
复制代码

在修改下package.json文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "nodemon star.js"
  },
复制代码

直接运行npm start, 这时候可以看到我们的项目已经支持import语法了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目

五.连接上mongodb和mongoose

这里就不做mongodb的安装教程了,小伙伴们可以自行先去安装好mongodb,安装好之后,看到如下图片说明安装和启动成功了文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目
npm install mongoose --save
复制代码

接下来我用简单暴力的方法来连接我们的数据库mongodb, 这里为了方面让大家明白,就不做层次的处理以及文件的处理(实际项目这样做估计是加不了薪的噢)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

在app.js中添加文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

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这个集合的,当我们运行该程序的时候,我们的数据库就会自动新增该集合了和数据了:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目" data-data-original="https://user-gold-cdn.xitu.io/2018/9/28/1661e2ac275e2dcf?imageView2/0/w/1280/h/960/format/webp/ignore-error/1" src="https://www.cainiaoxueyuan.com/wp-content/themes/begin/img/loading.png"height="20" data-width="1146" data-height="898" />

运行之后:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目

访问我们的localhost:9000文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

nodejs+koa2脚手架+mongodb 从0到1搭建自己的开发项目

前端的小伙伴们,看到这个会不会很鸡冻,打开就是后端每天给我们提供的接口数据了,泪崩ing。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

六.解决跨域

最后当我们写好的接口要提供给别人的时候,跨域的问题是必须解决的,koa这边也很好处理,提供了koa2-cors处理文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

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其他相关配置,大家可以自行网上搜索文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

七.总结

项目目录结构文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

├── node_modules             依赖包
├── routes                   路由
|   ├── index.js             
|   ├── user.js              
├── app.js                   主入口文件
├── start.js                 处理import配置文件
└── package.json
复制代码

app.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

{
  "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文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

require('babel-register')
(
  {
    plugins: ['babel-plugin-transform-es2015-modules-commonjs'],
  }
)

module.exports = require('./app.js')
复制代码

routes/index.js文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

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

复制代码

这时候我们就可以愉快的开始我们的nodejs+koa项目了,再稍微将文件处理下,模块的区分,就可以完成一个基本框架的构建啦。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

作者:YDJFE
来源:掘金文章源自菜鸟学院-https://www.cainiaoxueyuan.com/gcs/5923.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/gcs/5923.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定