本文源码:Github

简介:

之前刚入门vue并做好了一个简而全的纯vue2全家桶的项目,数据都是本地 json 模拟请求的;详情请移步这里:vue-proj-demo

为了真正做到数据库的真实存取,于是又开始入门了 node+express+mongoose 、并以此来为之前的vue页面写后台数据接口。

项目说明:

前端:client 目录;主要技术:vue-cli + vue2 + vue-router2 + vuex2 + axios + es6 + sass + eslint

后台:server 目录;主要技术:node(express)+mongodb(mongoose)

(前后端分离,路由跳转在前端通过 vue-router 控制,后台只负责数据接口)

代码目录说明:

|--vue-node-proj
    |--client                   //前端vue页面:http://gjincai.github.io/tags/vue/
    |--s1_serverNodeBegin       //《Node入门》学习练习代码,地址:https://www.nodebeginner.org/index-zh-cn.html
    |--s2_serverExpress         //express入门学习练习
    |--s3_Mongodb               //mongodb入门学习练习:http://gjincai.github.io/tags/mongodb/
    |--s4_mongoose              //mongoose入门学习练习:http://gjincai.github.io/tags/mongodb/
    |--s5_server                //express与mongoose整合,实现注册登录的数据在mongodb的存取
    |--server               //前端client页面的正式后台:
        |--api.js               //所有接口
        |--db.js                //数据库初始化、Schema数据模型
        |--index.js             //后台服务启动入口
        |--initCarts.json       //首次连接数据库,购物车数据的初始化
        |--initGoods.json       //首次连接数据库,所有商品数据的初始化
        |--package.json         //安装依赖:express,mongoose

项目运行:

环境配置:

node.js 与 express 入门:

学习练习代码:参考本项目中的文件夹 vue-node-proj/s1_serverNodeBeginvue-node-proj/s2_serverExpress

mongodb的安装与配置、mongoose的基本使用:

blog学习笔记:http://gjincai.github.io/categories/mongodb/

学习练习代码:参考本项目中的文件夹 vue-node-proj/s3_Mongodbvue-node-proj/s3_Mongodb

运行顺序:

新建命令行窗口1,开启本地mongodb服务:

mongod

新建命令行窗口2,开启本地后台node服务器:

cd vue-node-proj/server
cnpm install --save
node index.js

新建命令行窗口3,开启本地前端vue的dev模式:

cd vue-node-proj/client
cnpm install --save
npm run dev --color

然后在浏览器打开:

localhost:8080

相关学习笔记

express+mongoose 实现简易后台数据接口

效果呈现:






你可能感兴趣的文章

10 条评论
风范 · 2017年10月30日

proxy怎么写的

+1 回复

东莞渣渣辉 · 2017年08月02日

mongodb中的数据,如何保存到api中

回复

gjincai 作者 · 2017年08月03日

没太明白你的意思咯...api.js是基于mongoose去连接数据库、查询数据库,把查询返回的结果通过express以json格式发送给前端。

回复

0

是我太水了吗,就是前端vue+axios,后台express+mongoose,mongodb中的数据,如何保存为一个api网址,然后前端通过axios请求得到数据,我不明白的是mongodb中的数据,如何保存为一个api网址,

东莞渣渣辉 · 2017年08月03日
gjincai 作者 · 2017年08月04日

详情可以看这里运行顺序;
主要有三步:1.开启本地mongodb数据库服务;2.开启本地后端node服务器(localhost:8889),3.开启本地前端dev(localhost:8080)。
在浏览器打开localhost:8080地址访问前端页面,前端页面向node服务器(localhost:8889)发送请求地址,node根据请求地址执行mongodb查询。
如前端页面中向后端发送请求:localhost:8889/api/goods/cate
后端接收到该请求地址后,会执行以下代码:

app.get('/api/goods/cate', function (req, res) {
    db.goodsModel.find({}, function(err, doc){
      if (err) {
        res.json({code: 700, msg:'查询出错:' + err})
        return
      } else {
        if (!doc) {
          res.json({code: 600, msg:'没有商品', data: doc})
          return
        } else {
          res.json({code: 200, msg:'', data: doc})
          return
        }
      }
    })
  })

我也是初学,一起学习交流呗

回复

0

部署的生产环境时候,如果同域名部署,要求vuejs使用history模式,你怎么解决问题?

明道_Jerry · 2017年11月02日
gjincai 作者 · 2017年11月05日

vue-cli中的 client/config/index.js 下配置 dev选项的 {proxyTable...},详情参考该项目的github源码;
这是官方关于proxy的说明:https://vuejs-templates.github.io/webpack/proxy.html

回复

于梦中2010 · 2017年11月28日

楼主的项目涉及 sass,在启动项目时可能会抱 无法渲染的错 具体报错信息我没有保留,就是node-sass安装的问题,现将解决方法留在这,以便有遇到的同学尝试

在项目目录 执行

macOS 系统直接运行下面的命令即可:

SASS_BINARY_SITE=https://npm.taobao.org/mirrors/node-sass/ npm install node-sass

windows下的同学可以拆分成两个命令

set SASS_BINARY_SITE=https://npm.taobao.org/mirror...
npm install node-sass

详细

回复

webxing · 4月8日

楼主, 我连接数据库的时候提示 database 找不到 on 回调
找了相关问题, 说是 mongodb 的版本问题, 但是我在你server/package.json 中没有看到安装 mongodb 依赖
请问您有遇到这个问题吗?

clipboard.png

回复

gjincai 作者 · 4月9日

你好,package.json里面只是安装了mongoose;而mongodb数据库环境需要在电脑单独配置的;这是我当时第一次配置mongodb的过程、比较详细,看看对你有没有帮助:https://segmentfault.com/a/11...

回复

载入中...
Planets
gjincai gjincai

133 声望