Git Product home page Git Product logo

vue-node-proj's Introduction

vue-node-proj

my first project of learning vue-node

简介:

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

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

代码目录说明:

|--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

项目说明:

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

后台:server 目录;主要技术:express+mongoose

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

项目运行:

环境配置:

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 实现简易后台数据接口

效果呈现:

vue-node-proj's People

Contributors

gjincai avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.