基于 Vue2+Node+mongoDB 的前后端分离全栈练手小项目

jay_tian 发布于2019-06-26 17:20 / 2415人阅读

摘要：本文源码简介之前刚入门并做好了一个简而全的纯全家桶的项目，数据都是本地模拟请求的详情请移步这里为了真正做到数据库的真实存取，于是又开始入门了并以此来为之前的页面写后台数据接口。

本文源码：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_serverNodeBegin 和 vue-node-proj/s2_serverExpress；

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

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

学习练习代码：参考本项目中的文件夹 vue-node-proj/s3_Mongodb 和 vue-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 实现简易后台数据接口

效果呈现：

GPU云服务器云服务器前后端分离项目部署云服务器阿里云前后端分离项目怎么部署服务器前后端分离前后端分离开发

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/19069.html

全栈最后一公里 - Node.js 项目的线上服务器部署与发布

摘要：没有耐心阅读的同学，可以直接前往学习全栈最后一公里。我下面会罗列一些，我自己录制过的一些项目，或者其他的我觉得可以按照这个路线继续深入学习的项目资源。 showImg(https://segmentfault.com/img/bVMlke?w=833&h=410); 本文技术软文，阅读需谨慎，长约 7000 字，通读需 5 分钟大家好，我是 Scott，本文通过提供给大家学习的方法，...

Nosee 2019-06-26 17:14 评论0 收藏0
关于Vue2一些值得推荐的文章 -- 五、六月份

摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。五、六月份推荐集合查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。苏...

sutaking 2019-08-02 15:17 评论0 收藏0