脚本宝典收集整理的这篇文章主要介绍了

vue+koa2+mongo前后端分离restful,配置和部署到云

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

一。前端项目

1.使用vue-cli(vue2.0)搭建项目,这里就不发了.

  1. axios安装和配置

~ npm install axios

1. main.js或app.js加载axios。
    import axios from 'axios'
    Vue.prototype.$axios = axios
2. config目录下index.js文件修改proxyTable

clipboard.png

3. view来个get请求,查看结果。

clipboard.png

clipboard.png

二。后端项目

1. 使用koa2脚手架
~ npm install -g koa-generator
~ koa2 nosqlDemo
~ npm install

项目搭建后基本目录

clipboard.png

2. app.js配置后端跨域,更改api请求端口为8081
    ctx.set("Access-Control-Allow-Origin", "*");
    ctx.set("Access-Control-Allow-Headers", "X-Requested-With");
    ctx.set("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");

clipboard.png

clipboard.png

3. 使用monk或mongoose,这里使用monk操作mongo
    ~ npm install monk
    
    在user.js里调用
        const Monk = require('monk')
        const db = Monk('mongodb://管理员账号:管理员密码@xxx.xxx.xx.xx:27017/testDb?authSource=admin') // testDb就是要查询的数据库集合

clipboard.png

4. 表(文档)查询
    const user = db.get('userinfo');
    router.get('/dpi/getList', async (ctx) => {
        let st = await user.find();
        ctx.response.type = 'application/json';
        console.log(st)
        ctx.body = st;
    })
先来几条疯狂输出的测试数据(mongo3.65之后查询语句不一样了)

clipboard.png

clipboard.png

5. 需要本地调试配置ide-debug,这里使用vscode
    {
        "version": "0.2.0",
        "configurations": [
            {
                "type": "node",
                "request": "launch",
                "name": "debug-app",
                // "runtimeExecutable": "nodemon",
                "program": "${workspaceRoot}/app.js",
                "restart": true,
                "console": "integratedTerminal",
                "skipFiles": [                  //skipFiles使断点不进入到node_model包
                    "${workspaceRoot}/node_modules/**/*.js",
                    "<node_internals>/**/*.js"
                ]
            }
        ]
    }

点一下有惊喜

clipboard.png

clipboard.png

三. 将后端ftp上传到centos,并切换到目录下启动

centos下web环境配置(这里设置目录/srv/www/server)参考:

https://segmentfault.com/a/1190000015431830

~ npm start

clipboard.png

后端中预留的app目录包含层和m层,以后分离routes里的逻辑需要用到。

总结

以上是脚本宝典为你收集整理的

vue+koa2+mongo前后端分离restful,配置和部署到云

全部内容,希望文章能够帮你解决

vue+koa2+mongo前后端分离restful,配置和部署到云

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过