Giter Club home page Giter Club logo

vue-express-mongodb's Introduction

前后端分离示例

一个前后端分离的案例,前端 vuejs,后端 express, 数据库 mongodb。 使用 express 的提供api供前端调用,前端ajax请求进行对数据库的CURD操作。

前言

在学习前端开发的过程中了解到前后端分离这个概念 前后分离架构的探索之路 我们为什么要尝试前后端分离 因此决定小试身手,项目中主要使用到的框架和库.

vuejs vue-router muse-ui axios express mongoose mongodb......

效果图

首页 demo 添加电影 addMovie 更新电影信息 editMovie 展示电影详情 showDetail 删除电影 removeMovie

开发环境

需要本地安装node,npmyarn,mongodb

初始化

首先用vue-cli初始化项目目录

vue init webpack my-project

cd my-rpoject && npm install

npm run dev

看到8080端口出现vuejs的欢迎界面表示成功

接着把本地的mongodb服务跑起来,参考这篇教程

后端开发

首先把后端的服务搭好,方便以后前端调用,使用npm安装express,mongoose等必须的依赖即可,暂时不考虑验证等东西.

npm install express body-parser mongoose --save

然后在项目根目录添加一个app.js,编写好启动express服务器的代码

const express = require('express')
const app = express()
app.use('/',(req,res) => {
  res.send('Yo!')
})
app.listen(3000,() => {
    console.log('app listening on port 3000.')
})

使用nodemon或babel-watch,方便开发

npm install nodemon --save-dev

nodemon app.js

浏览器访问localhost:3000,出现res.send()的内容即表示成功.

然后添加需要的数据,新建一个models目录放数据模型,mongoose的每个数据model需要一个schema生成,

新建movie.js文件或者其他的数据模型,用来提供基础数据.

movie.js

定义了title,poster,rating,introduction,created_at,update_at几个基本信息,最后将model导出即可.

接着用mongoose链接mongodb,在app.js里添加

const mongoose = require('mongoose')
mongoose.connect('mongodb://localhost:27017/yourDbName')

链接数据库成功后,可以用Robomongo可视化工具或者在CMD里输入mongo命令查看数据库.

接着将对数据CURD操作的几个路由写出来,新建router文件夹,新建index.js和movie.js分别对应首页路由,和对数据

操作的路由,如下.

最后将路由应用到app.js

......
const index = require('./router/index')
const movie = require('./router/movie')
......
app.use('/',index)
app.use('/api',movie)
......

使用Postman进行测试,测试成功的话,后端服务基本上就完成了. 测试

前端开发

首先安装必要的依赖,看自己喜欢选择. muse-ui axios

npm install muse-ui axios --save

然后把不要的文件删除,在src/components目录新建主要的两个组件List,Detail. List就是首页的列表,Detail是电影的详细数据,然后把前端路由写出来,在src/router建立前端路由文件, 只有两个组件之间切换,然后把放到App.vue里面就可以了.

前端路由

index.js

数据获取,由于我们的express是在3000端口启动的,而前端开发在8080端口,由于跨域所以要配置好vue-cli的proxyTable 选项,位于config/index.js,改写proxyTable.

proxyTable

这样当在前端用axios访问 '/api' 的时候,就会被代理到 'http://localhost:3000/api',从而获得需要的数据.

能够获取到数据之后就是编写界面了,由于用了muse-ui组件库,所以只要按着文档写一般不会错,要是不满意就自己搭界面.

主要就是用ajax访问后端对数据增删改查的路由,将这些操作都写在组件的methods对象里面,写好主要的方法后,将方法

......

listMethods01 listMethods02

......

用vuejs里的写法,绑定到对应的按钮上

  @click="methodName"

methodBtn

这样前端的开发就基本完成了.

结语

前端开发完成后,就可以用webpack打包了,注意将config/index.js文件里面的productionSourceMap设为false, 不然打包出来文件很大,最后用express.static中间件将webpack打包好的项目目录'dist'作为express静态文件服务的目录.

npm run build

build

app.use(express.static('dist'))

最后案例完成后的目录结构就是这样.

project

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# 后端开发 localhost:3000
npm run server

# webpack打包后,后端运行express静态目录'dist'
npm run start

License

MIT

written by xrr2016,欢迎issue,fork,star.

vue-express-mongodb's People

Contributors

gitads avatar isjia avatar xrr2016 avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-express-mongodb's Issues

vue和react的问题

首先赞美博主,看你的例子帮助我解决不少疑惑

其次博主有没有关注过dva和antd,我感觉前后端分离的话,就直接开一个express跑rest server,再另开一个前端项目更好?(其实我主要觉得antd的组件好抄。。。)

关于node服务的根路由问题

app.use(favicon(__dirname + '/src/assets/favicon.ico'))
app.use(express.static('dist'))
app.use('/',index)
app.use('/api',movie)

这段代码:如果npm run build,就会首先执行app.use(express.static('dist')),就会渲染HTML页面;如果没有npm run build,就是走app.use('/',index),走根路由。
可以这样理解嘛。
app.use(express.static('dist')),他是怎么渲染HTML的呢。
还有人在吗,求大佬回应一下

关于index.html

你好:
有个问题想咨询下
前端生成后是一个index.html和一些用到的js、css
然后在服务器端把前端生成的index.html等设置成静态资源给用户访问
那么用户怎么访问?URL应该是直接指向这个index.html的吧?不然也没有资源供用户访问
访问index.html之后才能利用前端路由对URL进行拦截处理
我的理解是对的吗?

请教您build Setup

感谢您的文章,对我初学很有帮助!!!想咨询您下,您给出的Build Setup
1-- install dependencies
npm install
2-- serve with hot reload at localhost:8080
npm run dev
3-- build for production with minification
npm run build
4-- build for production and view the bundle analyzer report
npm run build --report
5-- 后端开发 localhost:3000
npm run server
6-- webpack打包后,后端运行express静态目录'dist'
npm run start

我能理解1,3,6步,请教您下2,4,5步是不是必须的?
第2步是为了使用webpack-dev-server进行hot reload吗?
我进行到第2步,浏览器会自动打开localhost:8080,并报一个错误
proxy request /api/movie from localhost:8080 to http://localhost:3000
第5步是为了检查到代码变化,自动重启node?

template 标签中使用router-view报错

你好,我想向您请教一个问题,就是我在template标签中使用router-view会报错:
Failed to mount component:template or render function not defined .
但是把router-view去掉就又正常了,您知道是为什么吗?

App.vue

<template>
  <div id="app">
    <div class="top">
      <ul>
          <li>用户管理系统</li>
          <li>退出</li>
          <li>{{accountName}}</li>
      </ul>
      <router-view></router-view>
    </div>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        accountName: 'Admin'
      }
    }
  }
</script>

路由

export default new Router({
  routes: [
      {
        path:'/'
      },
      {
        path: '/hello',
        component: Hello
      },
      {
        path: '/list',
        component: UserList
      }
  ]
})

main.js

new Vue({
  el: '#app', 
  router, 
  render:h => h(App)
}).$mount('#app')

mongodb的问题

按照你的项目搭建了环境,postman怎么接口调用返回空?

db.Movie.find()
{
"_id" : ObjectId("58ec4311669dabc9f105d7ea"),
"title" : "黑夜传说",
"poster" : "12",
"rating" : "5.4",
"introduction" : "不错不错",
"created_at" : "201706317",
"update_at" : "2017291"
}

ask

你不是用的axios麽

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.