前后端分离示例
一个前后端分离的案例,前端 vuejs,后端 express, 数据库 mongodb。使用 express 的提供api供前端调用,前端ajax请求进行对数据库的CURD操作。
前言
在学习前端开发的过程中了解到前后端分离这个概念前后分离架构的探索之路我们为什么要尝试前后端分离因此决定小试身手,项目中主要使用到的框架和库.
vuejs vue-router muse-ui axios express mongoose 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文件或者其他的数据模型,用来提供基础数据.
定义了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里面就可以了.
前端路由
数据获取,由于我们的express是在3000端口启动的,而前端开发在8080端口,由于跨域所以要配置好vue-cli的proxyTable选项,位于config/index.js,改写proxyTable.
这样当在前端用axios访问 '/api' 的时候,就会被代理到 'http://localhost:3000/api',从而获得需要的数据.
能够获取到数据之后就是编写界面了,由于用了muse-ui组件库,所以只要按着文档写一般不会错,要是不满意就自己搭界面.
主要就是用ajax访问后端对数据增删改查的路由,将这些操作都写在组件的methods对象里面，写好主要的方法后，将方法
......
......
用vuejs里的写法,绑定到对应的按钮上
@click="methodName"
这样前端的开发就基本完成了.
结语
前端开发完成后,就可以用webpack打包了,注意将config/index.js文件里面的productionSourceMap设为false,不然打包出来文件很大,最后用express.static中间件将webpack打包好的项目目录'dist'作为express静态文件服务的目录.
npm run build
app.use(express.static('dist'))
最后案例完成后的目录结构就是这样.
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
written by xrr2016,欢迎issue,fork,star.
-
1、npm init，生成package.json文件 2、npm install webpack@3.6.0 --save-dev 3、新建webpack.base.config.js文件、src文件夹在src内新建index.js，配置：output、entry、module、plugins 这里的plugins里配置了html-webpack-plugin插件，用于打包html文件
-
$ npm run serve > vue-cource@0.1.0 serve D:\code\vue\vue-cource > vue-cli-service serve D:\code\vue\vue-cource\node_modules\_read-pkg@5.1.1@read-pkg\index.js:13 ...options
-
本文向大家介绍VUE+node（express）实现前后端分离，包括了VUE+node（express）实现前后端分离的使用技巧和注意事项，需要的朋友参考一下 vue作为前端的框架，node(express)作为后端的框架。无数据库，使用端口保存数据。 VUE: 使用vue-cli构建vue项目（vueapp）。 axios：（与ajax相似） axios没安装的记得装一下。（安装不细说） nod
-
前后端分离 在B／S架构的环境中，前后端分离一直都众说纷纭，没有一个标准。我觉得打开可以分为三个阶段： 传统的分离方法 传统意义上的前后端分离，前端指的是美工、切图、设计，后端是实现代码、数据库相关的实现。美工设计和生成的前端页面，给到程序员来做集成。那么这里其实就不分什么前后端了，程序员从数据库一直搞到前端页面的样式，就是“全能型运动员“。当然，一般传统上的开发协作模式有两种： 一种是前端先写一
-
场景：有一个关于分类记录collection,分类name（string，中文，英文，数字等组成）字段上有索引方便快速筛选某个分类记录,现在查询出来需要排序，查询条件{name:"F1"}，排序条件{_id:-1} mongodb查询explain分析,这是winningPlan SORT + FETCH + IXSCAN 这算不算bad查询，通常是FETCH + IXSCAN。
-
所以我的问题就在这里：顺便说一句，我在通过谷歌找到如何做到这一点时遇到了一些困难，我尝试使用StackOverflow，但找不到确切的答案 纱线启动 要在localhost:3000上运行并启动，我希望它在localhost:3000上启动，同时在该服务器上启动express服务器，也就是在express.js中启动react服务器。 似乎我找到的每一个教程，大多数都过时了，剩下的是将反应变成静态
-
前言 上一篇我们遇到'少年，是不是忘了npm run mock?'的警告，这一篇我们就来解决这个问题。 开发 一、安装包 安装koa和一系列的包（我们用的是koa v2）： koa koa-bodyparser koa-router boom nodemon mockjs 解释说明一下（知道的同学可以忽略）: 名称 作用 koa 我们都知道Node.js有HTTP模块，来处理HTTP请求
-
express-vue A Simple way of using Server Side rendered Vue.js 2.0+ natively in Express using streams If you want to use vue.js and setup a large scale web application that is server side rendered, usi