vue+websocket+express+mongodb实战项目（实时聊天）_Javascript教程-织梦者
当前位置:&>&&>& > vue+websocket+express+mongodb实战项目（实时聊天）
vue+websocket+express+mongodb实战项目（实时聊天）
本文将为关注织梦者的朋友提供的是的vue+websocket+express+mongodb实战项目（实时聊天）相关教程，具体实例代码请看下文:继上一个项目用vuejs仿网易云音乐（实现听歌以及搜索功能）后，发现上一个项目单纯用vue的model管理十分混乱，然后我去看了看vuex，打算做一个项目练练手，又不想做一个重复的项目，这次我就放弃颜值，打算走心派。结合了后台nodejs，以及数据库MongoDB来开发了一个实时聊天系统。这个系统可以说是一统江山，也算是实现前端程序员的一个梦了，前后通吃。自认为是一个比全的项目。项目地址：/hua1995116/webchat觉得好的请顺手来个star。
vue init webpack my-project-name
结构大致是这样的
首先看src目录下的页面布局。main.js// 主入口
import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
// 使用museui组件
import MuseUI from 'muse-ui'
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)
Vue.config.productionTip = false
/* eslint-disable no-new */
el: '#app',
template: '&App/&',
components: {App}
我们为了让整个项目看起来漂漂亮亮的，所以选择了muse-ui，别说，这个UI框架是真的漂亮。不信大家可以看muse-ui。其余都是脚手架的默认配置。
route/router.js
import Vue from 'vue'
import Router from 'vue-router'
import Index from '@/components/Index'
import Robot from '@/components/Robot'
import Home from '@/components/Home'
Vue.use(Router)
export default new Router({
path: '/',
name: 'Index',
component: Index
path: '/robot',
name: 'Robot',
component: Robot
path: '/home',
name: 'Home',
component: Home
大家可以看到一共有三个路由，没错，我们就是写了三块，第一块是和大家一起的聊天室，第二块是和我们可爱的大白聊天，也就是我们的图灵机器人。有空你也去搞一个耍耍。第三块就是我们的个人中心，虽然这一块没什么东西。但是毕竟好看，哦~忘了，我们是走心的，怎么可以只看脸。
components/Chat.vue
created() {
const that = this
this.socket = io.connect(':8081')
this.socket.on('message', function(obj) {
that.$mit('addroomdetailinfos', obj)
window.scrollTo(0, 900000)
this.socket.on('logout', function (obj) {
that.$mit('setusers', obj)
this.socket = io.connect(':8081')
这一句，主要用于连接你当前的服务，到时候下载后面的项目时，记得改成自己的服务以及端口。因为是在Index和Chat都有设置，所以你需要在Index.vue和Chat里的connect都改成你自己的服务。socket.on()用于接受消息。socket.emit() 用于发送消息。不懂的socket.io的看这里socket.io。有了这个就可以和服务端进行交互。等会讲解服务端。
store/index.js
//存放用户
//存放历史记录
messhistory: {
//存放房间信息，为了方便以后做多房间
roomdetail: {
users: {},
//存放机器人开场白
robotmsg: [{
message: 'Hi~有什么想知道的可以问我',
user: 'robot'
//聊天页面显示控制
chattoggle: false,
//登录页面显示控制
logintoggle: false,
//注册页面显示控制
registertoggle: true,
//提示框显示控制
dialog: false,
//提示框内容
dialoginfo: ''
由于控制代码太多，所以之后的内容请大家移步，我的github地址。/hua1995116/webchat/
由于build下dev-server.js中webpack代码太多，太杂乱，不易于讲解。主要来看看用于打包后的服务器端。两份代码是一样的。prod.server.js（根目录下）
var express = require('express');
var config = require('./config/index');
var port = process.env.PORT || config.dev.
var app = express();
var router = express.Router();
//用于静态展示入口
router.get('/',function(req,res,next){
req.url = './index.html';
app.use(router);
require('./config/routes')(app)
var mongoose = require('mongoose')
//日志文件
var morgan = require('morgan')
//sesstion 存储
var bodyParser = require('body-parser')
var cookieParser = require('cookie-parser')
var session = require('cookie-session')
//用于异步回调
mongoose.Promise = require('bluebird')
global.db = mongoose.connect("mongodb://localhost:27017/vuechat")
//服务器提交的数据json化
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))
//sesstion 存储
app.use(cookieParser())
app.use(session({
secret: 'vuechat',
resave: false,
saveUninitialized: true
var env = process.env.NODE_ENV || 'development'
if ('development' === app.get('env')) {
app.set('showStackError', true)
app.use(morgan(':method :url :status'))
app.locals.pretty = true
mongoose.set('debug', true)
var server = app.listen(port)
//websocket
// var http = require('http').Server(app);
var io = require('socket.io')(server);
var Message = require('./models/message')
var users = {}
io.on('connection', function (socket) {
//监听用户发布聊天内容
socket.on('message', function (obj) {
//向所有客户端广播发布的消息
io.emit('message', obj)
var mess = {
username: obj.username,
src:obj.src,
msg: obj.msg,
roomid:'room1'
var message = new Message(mess)
//将发送过来的消息进行储存
message.save(function (err, mess) {
if (err) {
console.log(err)
console.log(mess)
console.log(obj.username + '说：' + obj.msg)
socket.on('login',function (obj) {
users[obj.name] = obj
//用于监听用户进行聊天室
io.emit('login', users)
socket.on('logout',function (name) {
delete users[name]
//用户监听用退出聊天室
io.emit('logout', users)
//声明静态资源地址
app.use(express.static('./dist'));
schema模型
schema/user.js
var mongoose = require('mongoose')
//用于md5加密
var bcrypt = require('bcryptjs')
var SALT_WORK_FACTOR = 10
var UserSchema = new mongoose.Schema({
unique: true,
type: String
password: String,
src: String,
createAt: {
type: Date,
default: Date.now()
updateAt: {
type: Date,
default: Date.now()
//对密码进行加密
UserSchema.pre('save', function (next) {
var user = this
if (this.isNew) {
this.createAt = this.updateAt = Date.now()
this.updateAt = Date.now()
bcrypt.genSalt(SALT_WORK_FACTOR, function (err, salt) {
if (err) return next(err)
bcrypt.hash(user.password, salt, function (err, hash) {
if (err) return next(err)
user.password = hash
//用于比较密码是否正确
UserSchema.methods = {
comparePassword: function (_password, cb) {
pare(_password, this.password, function (err, isMatch) {
if (err) return cb(err)
cb(null, isMatch)
UserSchema.statics = {
fetch: function (cb) {
return this
.sort('meta.updateAt')
findById: function (id, cb) {
return this
.findOne({_id: id})
module.exports = UserSchema
这里主要用到一个md5的模块，可以查看bcryptjs
schema/message.js
var mongoose = require('mongoose')
//聊天记录模型
var MessageSchema = new mongoose.Schema({
username: String,
src:String,
msg: String,
roomid:String,
type: Date,
default: Date.now()
//静态方法
MessageSchema.statics = {
fetch: function (cb) {
return this
.sort('time')
findById: function (id, cb) {
return this
.findOne({_id: id})
module.exports = MessageSchema
服务器的routesconfig/routes.js 讲一个注册的把，其他请前往项目查看
app.post('/user/signup', function (req, res) {
//获取提交数据
var _user = req.body
console.log(_user)
User.findOne({name: _user.name}, function (err, user) {
if (err) {
console.log(err)
if (user) {
res.json({
data: '用户名已存在'
var user = new User(_user)
user.save(function (err, user) {
if (err) {
console.log(err)
res.json({
data: '注册成功'
主要用于验证用户名是否重复。
核心部分就讲到这里啦，。其他具体的请查看我的github地址（具有详细的注释，不明白的可以提问，需要改进的请各位前辈指出）：地址：/hua1995116/webchat在线观看地址：:8081/#/
npm install -----安装依赖
npm run dev -----运行
npm run build -----打包
node prod.server.js -----打包后运行
//记得替换
Index.vue和Chat.vue下的io.connect(':8081')
:8081改成自己的项目地址。
最后上几张图。
多多关注织梦者，我们将为您收集更多的jQuery相关文章.
这些内容可能对你也有帮助
更多可查看Javascript教程列表页。
猜您也会喜欢这些文章　　年底了，趁着工作清闲的时候开通了博客。
　　一直想用node搞个个人博客系统，整好趁着这次vuejs复习，就决定拿vuejs+nodejs+mongodb搞个博客出来。以前做过类似的个人博客系统，使用php加mysql写的，这次听说mongodb的语法和js很像，决定挑战下。
　　技术选择
　　1）前端： vuejs做数据框架 &静态模板待定
　　2）后端： 业务逻辑用node写
　　3）数据库： mongodb（或 mysql）
　　4）系统环境： windows8.1（有需要可以部署到linux）
　　5）服务器：不需要服务器（如果需要用apache或nginx也行）
　　版本控制工具：作为新时代有思想有节操的新青年当然是要用git
　　github地址
　　1)home:&　　
　　2)admin:&　 &
　　由于一开始的开发是先前端home，再后端admin，所以一开始是分开的。等到最后会合并成一个项目，这样便于管理而且没有跨域。
阅读(...) 评论()标签：至少1个，最多5个
以前曾用过WordPress搭建自己的博客网站，但感觉WordPress很是臃肿。所以一直想自己写一个博客内容管理器。
正好近日看完了Vue各个插件的文档，就用着Vue尝试写了这个简约的博客内容管理器（CMS）。
嗯，我想完成的功能：
一个基本的博客内容管理器功能，如后台登陆，发布并管理文章等
支持markdown语法实时编辑
支持代码高亮
管理博客页面的链接
博客页面对移动端适配优化
账户管理(修改密码)
登陆后台按钮在页面最下方“站长登陆”，可以以游客身份登入后台系统。
用到的技术和实现思路：
前端：Vue全家桶
Vue-Resource
Vue-Router
后端：Node
mongoDB (mongoose)
工具和语言
整体思路：
Node服务端不做路由切换，这部分交给Vue-Router完成
Node服务端只用来接收请求，查询数据库并用来返回值
所以这样做前后端几乎完全解耦，只要约定好restful数据接口，和数据存取格式就OK啦。
后端我用了mongoDB做数据库，并在Express中通过mongoose操作mongoDB，省去了复杂的命令行，通过Javascript操作无疑方便了很多。
Vue的各个插件：
vue-cli:官方的脚手架，用来初始化项目
vue-resource：可以看作一个Ajax库，通过在跟组件引入，可以方便的注入子组件。子组件以this.$http调用
vue-router：官方的路由工具，用来切换子组件，是用来做SPA应用的关键
vuex：规范组件中数据流动，主要用于异步的http请求后数据的刷新。通过官方的vue-devtools可以无缝对接
.editorconfig
.eslintignore
.eslintrc.js
eslintrc配置
.gitignore
index.html
package.json
setup.html
初始化账户页面
webpack.config.js
webpack配置
├─server
Restful接口
初始化账户
├─assets
外部引用文件
├─components
博客控制台组件
博客页面组件
├─router
前端的文件统一放到了src目录下，有两个入口文件，分别是main.js和setup.js，有过WordPress经验应该知道，第一次进入博客是需要设置用户名密码和数据库的，这里的setup.js就是第一次登入时的页面脚本，而main.js则是剩余所有文件的入口
import Vue
from 'vue'
import VueResource
from 'vue-resource'
import {mapState}
from 'vuex'
//三个顶级组件，博客主页和控制台共享
import Spinner
from './components/share/Spinner.vue'
import Toast
from './components/share/Toast.vue'
import MyCanvas
from './components/share/MyCanvas.vue'
import store
from './store'
import router
from './router'
import './style/index.scss'
Vue.use(VueResource)
components: {Spinner, Toast, MyCanvas},
computed: mapState(['isLoading', 'isToasting'])
}).$mount('#CMS2')
而后所有页面分割成一个单一的vue组件，放在components中，通过入口文件main.js，由webpack打包生成，生成的文件放在dist文件夹下。
后端文件放在server文件夹内，这就是基于Express的node服务器，在server文件夹内执行
node index
就可以启动Node服务器，默认侦听3000端口。
关于 Webpack
Webpack的配置文件主体是有vue-cli生成的，但为了配合后端自动刷新、支持Sass和生成独立的css文件，稍微修改了一下：
webpack.config.js
const path = require('path')
const webpack = require('webpack')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')
//萃取css文件，在此命名
const extractCSSFromVue = new ExtractTextPlugin('styles.css')
const extractCSSFromSASS = new ExtractTextPlugin('index.css')
module.exports = {
main: './src/main.js',
setup: './src/setup.js'
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: '[name].js'
resolveLoader: {
moduleExtensions: ['-loader']
test: /\.vue$/,
loader: 'vue',
//使用postcss处理加工后的scss文件
options: {
preserveWhitespace: false,
postcss: [
require('autoprefixer')({
browsers: ['last 3 versions']
loaders: {
sass: extractCSSFromVue.extract({
loader: 'css!sass!',
fallbackLoader: 'vue-style-loader'
test: /\.scss$/,
loader: extractCSSFromSASS.extract(['css', 'sass'])
test: /\.js$/,
loader: 'babel',
exclude: /node_modules/
test: /\.(png|jpg|gif|svg)$/,
loader: 'file',
options: {
name: '[name].[ext]?[hash]'
//字体文件
test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'url-loader?limit=10000&mimetype=application/font-woff'
test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader'
plugins: [
//取出css生成独立文件
extractCSSFromVue,
extractCSSFromSASS,
new CopyWebpackPlugin([
{from: './src/assets/img', to: './'}
resolve: {
'vue$': 'vue/dist/vue'
//服务器代理，便于开发时所有http请求转到node的3000端口，而不是前端的8080端口
devServer: {
historyApiFallback: true,
noInfo: true,
target: 'http://localhost:3000/'
devtool: '#eval-source-map'
if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
new webpack.LoaderOptionsPlugin({
minimize: true
后，node端开启了3000端口，接着运行
npm run dev
打开webpack在8080端口服务器，具有动态加载的功能，并且所有的http请求会代理到3000端口
关于Vue-Router
因为写的是但也应用（SPA），服务器不负责路由，所以路由方面交给Vue-Router来控制。
import Vue
from 'vue'
import Router
from 'vue-router'
//博客页面
import Archive
from '../components/front/Archive.vue'
import Article
from '../components/front/Article.vue'
//控制台页面
import Console
from '../components/back/Console.vue'
import Login
from '../components/back/Login.vue'
import Articles from '../components/back/Articles.vue'
import Editor
from '../components/back/Editor.vue'
import Links
from '../components/back/Links.vue'
import Account
from '../components/back/Account.vue'
Vue.use(Router)
export default new Router({
mode: 'history',
{path: '/archive', name: 'archive', component: Archive},
{path: '/article', name: 'article', component: Article},
{path: '/', component: Login},
path: '/console',
component: Console,
children: [
{path: '', component: Articles},
{path: 'articles', name: 'articles', component: Articles},
{path: 'editor', name: 'editor', component: Editor},
{path: 'links', name: 'links', component: Links},
{path: 'account', name: 'account', component: Account}
index.html
&!DOCTYPE html&
&html lang="en"&
&meta charset="utf-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&cms2simple&/title&
&link rel="stylesheet" href="dist/index.css"&
&link rel="stylesheet" href="dist/styles.css"&
&div id="CMS2" style="height: 100%"&
&my-canvas&&/my-canvas&
&spinner v-show="isLoading"&&/spinner&
&Toast v-show="isToasting"&&/Toast&
&router-view &&/router-view&
&script src="/dist/main.js"&&/script&
可以看到路由控制在body元素下的router-view中。前面的spinner，toast元素分别是等待效果（转圈圈）的弹出层和信息的弹出层，和背景样式的切换。
后端是用node.js作为服务器的，使用了express框架。
其中代码非常简单:
const fs = require('fs')
const path = require('path')
const express = require('express')
const favicon = require('serve-favicon')
const bodyParser = require('body-parser')
const cookieParser = require('cookie-parser')
const db = require('./db')
const resolve = file =& path.resolve(__dirname, file)
const api = require('./api')
const app = express()
// const createBundleRenderer = require('vue-server-renderer').createBundleRenderer
app.set('port', (process.env.port || 3000))
app.use(favicon(resolve('../dist/favicon.ico')))
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: false}))
app.use(cookieParser())
app.use('/dist', express.static(resolve('../dist')))
app.use(api)
app.post('/api/setup', function (req, res) {
new db.User(req.body)
.then(() =& {
res.status(200).end()
db.initialized = true
.catch(() =& res.status(500).end())
app.get('*', function (req, res) {
const fileName = db.initialized ? 'index.html' : 'setup.html'
const html = fs.readFileSync(resolve('../' + fileName), 'utf-8')
res.send(html)
app.listen(app.get('port'), function () {
console.log('Visit http://localhost:' + app.get('port'))
服务器做的事情很简单，毕竟路由在前端。在接受请求的时候判断一下数据库是否初始化，如果初始化就转向主页，否则转向setup.html，之所以没有直接sendfile是因为考虑到之后添加服务端渲染（虽然主页并没有啥值得渲染的，因为很简单）
express框架中使用了mongoose来连接mongoDB数据库，在接收请求时做对应的curd操作，比如这就是在接收保存文章时对应的操作：
router.post('/api/saveArticle', (req, res) =& {
const id = req.body._id
const article = {
title: req.body.title,
date: req.body.date,
content: req.body.content
db.Article.findByIdAndUpdate(id, article, fn)
new db.Article(article).save()
res.status(200).end()
当然还有很多没提及的地方，最早写这个博客管理器的时候用的还是vue 1.x，后来用2.0改写后文档一直没改，所以最近更新了一下，避免误解。
其实整个管理器最复杂的地方时vuex异步数据视图的部分，不过这一部能讲的太多，就不在这里展开了，可以看官方文档后，参考源代码的注释。
13 收藏&&|&&168
你可能感兴趣的文章
14 收藏，1.5k
22 收藏，2.3k
104 收藏，2.3k
本作品采用 署名-非商业性使用-禁止演绎 4.0 国际许可协议 进行许可
demo的链接出问题了+1
很赞，支持开源，写的不错，可以做一个系列的讲解
文中好像有...
我是小白QAQ 有木有源码参考一下 特别感谢
安装依赖好像报错了，不知道什么原因。
两个月前的了。可以看看新的vue2.0的。列出错误吧，估计是sass问题，国内下不了，用cnpm试试
可以的，昨晚试了试。
demo的链接出问题了
demo的链接出问题了+2
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
我要该，理由是：Vuejs+Nodejs+Express+Mongodb开发一个博客系统 - 简书
Vuejs+Nodejs+Express+Mongodb开发一个博客系统
A Blog CMS Powered By Vuejs+Nodejs+Express+Mongodb
全栈开发之博客内容管理系统:一个前端基于Vuejs2.0，后端基于Nodejs，数据库基于Mongod的博客内容管理器
开发环境: MACpro
资源的CURD，筛选，排序
密码使用MD5加密
登录使用passport验证登录
用户会话记录
随机生成测试数据
Vue-Router2.0
Vue-resource
Vue-loader
工具和语言
主要依赖包
vue-html-loader css-loader vue-style-loader
vue-hot-reload-api
babel-loader
babel-core
babel-plugin-transform-runtime
babel-preset-es2015
babel-runtime
copy-webpack-plugin
extract-text-webpack-plugin
FontAwesome
express-session
express-validator
connection-mongo
安装node环境，
安装mongodb数据库并开启服务（mac命令：mongod --dbpath "/usr/local/var/mongodb" （前提是没有修改默认路径））
克隆远程库
git clone /wangzhongjie/BlogCms.git
进入项目目录
cd BlogCms
npm install
进入服务器所在文件夹并运行服务器
node server
打开浏览器输入
最后感谢该感谢的人利用Vue.js+Node.js+MongoDB实现一个博客系统（附源码）
作者：张超航
字体：[ ] 类型：转载 时间：
本文主要介绍了利用Vue.js+Node.js+MongoDB实现一个博客系统，这个博客使用Vue做前端框架，Node+express做后端，数据库使用的是MongoDB。实现了用户注册、用户登录、博客管理、文章编辑、标签分类等功能，需要的朋友可以参考学习。
这篇文章实现的博客系统使用 Vue 做前端框架，Node + express 做后端，数据库使用的是 MongoDB。实现了用户注册、用户登录、博客管理（文章的修改和删除）、文章编辑（Markdown）、标签分类等功能。
前端模仿的是 hexo 的经典主题 ，本来是想把源码直接拿过来用的，后来发现还不如自己写来得快，就全部自己动手实现成 vue components。
实现的功能
&&&&& 1.文章的编辑，修改，删除
&&&&& 2.支持使用 Markdown 编辑与实时预览
&&&&& 3.支持代码高亮
&&&&& 4.给文章添加标签
&&&&& 5.支持用户注册登录
使用到的技术
&&&&& 1.Vue.js
&&&&& 2.vue-cli
&&&&& 3.vue-router
&&&&& 4.vue-resource
&&&&& 5.element-ui
&&&&& 6.marked
&&&&& 7.highlight.js
&&&&& 1.Node.js
&&&&& 2.Express
&&&&& 3.Mongoose
前端使用 vue-router 操作路由，实现单页应用的效果。使用 vue-resource 从后台获取数据，数据的处理全部都在前端，所以后端要做的事情很简单——把前端打包好的数据存进数据库中和从数据库中取出数据。前后端使用统一的路由命名规则。
| index.html
| .babelrc
| .gitignore
| package.json
| webpack.config.js webpack配置
vue打包生成的文件
|-node_modules 模块
| check.js
__| router.js 路由
|-components 组件
webpack 配置
webpack 大部分是 vue-cli 自动生成的，添加了让前后端http请求都转到node的3000端口，而不是前端的8080端口的配置。
devServer: {
historyApiFallback: true,
noInfo: true,
//让前后端http请求都转到node的3000端口，而不是前端的8080端口
target: 'http://localhost:3000/'
这里涉及一个新手可能会不明白的问题（我之前就捣鼓了半天）。
开发的时候要先打开数据库 MongoDB ,使用命令 mongod。
然后打开后端服务器 node app，后端监听 3000 端口。
最后打开前端开发模式 npm run dev，前端启动了一个 webpack 服务器，监听 8080 端口用于热刷新。通过配置把前端的http请求转到 3000 端口。
所有页面都用到的元素可以写在 App.vue 上面，也可以写成公共组件。我在 App.vue 中使用了命名视图，因为 sidebar 这个组件有的页面需要有的不需要，不需要的时候就不用加载。
&!--App.vue--&
&template&
&div id="app"&
&div class="black_line"&&/div&
&div id="main"&
&router-view name="sidebar"&&/router-view&
&router-view&&/router-view&
&/template&
路由的配置写在 main.js 中，分为前台展示和后台管理。后台管理统一以 ‘/admin' 开头。注册页和登录页写在一起了，上面有两个按钮“注册”和“登录”（我好懒-_-）。
// main.js
const router = new VueRouter({
{path: '/', components: {default: article, sidebar: sidebar}},
{path: '/article', components: {default: article, sidebar: sidebar}},
{path: '/about', components: {default: about, sidebar: sidebar}},
{path: '/articleDetail/:id', components: {default: articleDetail, sidebar: sidebar}},
{path: '/admin/articleList', components: {default: articleList, sidebar: sidebar}},
{path: '/admin/articleEdit', component: articleEdit},
{path: '/admin/articleEdit/:id', component: articleEdit},
{path: '/admin/signin', component: signin}
element UI
使用了 element 用于消息提醒和标签分类。并不需要整个引入，而是使用按需引入。
// main.js
// 按需引用element
import { Button, Message, MessageBox, Notification, Popover, Tag, Input } from 'element-ui'
import 'element-ui/lib/theme-default/index.css'
const components = [Button, Message, MessageBox, Notification, Popover, Tag, Input]
components.forEach((item) =& {
ponent(item.name, item)
const MsgBox = MessageBox
Vue.prototype.$msgbox = MsgBox
Vue.prototype.$alert = MsgBox.alert
Vue.prototype.$confirm = MsgBox.confirm
Vue.prototype.$prompt = MsgBox.prompt
Vue.prototype.$message = Message
Vue.prototype.$notify = Notification
vue-resource
用于向后端发起请求。打通前后端的关键。
// GET /someUrl
this.$http.get('/someUrl').then(response =& {
// success callback
}, response =& {
// error callback
前端发起 get 请求，当请求成功被返回执行第一个回调函数，请求没有被成功返回则执行第二个回调函数。
this.$http.get('/api/articleDetail/' + id).then(
response =& this.article = response.body,
response =& console.log(response)
后端响应请求并返回结果
// router.js
router.get('/api/articleDetail/:id', function (req, res) {
db.Article.findOne({ _id: req.params.id }, function (err, docs) {
if (err) {
console.error(err)
res.send(docs)
前端发起 post 请求，当请求成功被返回执行第一个回调函数，请求没有被成功返回则执行第二个回调函数。
// 新建文章
// 即将被储存的数据 obj
let obj = {
title: this.title,
date: this.date,
content: this.content,
gist: this.gist,
labels: this.labels
this.$http.post('/api/admin/saveArticle', {
articleInformation: obj
response =& {
self.$message({
message: '发表文章成功',
type: 'success'
// 保存成功后跳转至文章列表页
self.refreshArticleList()
response =& console.log(response)
后端存储数据并返回结果
// router.js
// 文章保存
router.post('/api/admin/saveArticle', function (req, res) {
new db.Article(req.body.articleInformation).save(function (err) {
if (err) {
res.status(500).send()
res.send()
后端使用 express 构建了一个简单的服务器，几乎只用于操作数据库。
app.js 位于项目根目录，使用 node app 运行服务器。
const express = require('express')
const fs = require('fs')
const path = require('path')
const bodyParse = require('body-parser')
const session = require('express-session')
const MongoStore = require('connect-mongo')(session)
const router = require('./server/router')
const app = express()
const resolve = file =& path.resolve(__dirname, file)
app.use('/dist', express.static(resolve('./dist')))
app.use(bodyParse.json())
app.use(bodyParse.urlencoded({ extended: true }))
app.use(router)
// session
app.set('trust proxy', 1) // trust first proxy
app.use(session({
secret: 'blog',
resave: false,
saveUninitialized: true,
secure: true,
store: new MongoStore({
url: 'mongodb://localhost:27017/blog'
app.get('*', function (req, res) {
let html = fs.readFileSync(resolve('./' + 'index.html'), 'utf-8')
res.send(html)
app.listen(3000, function () {
console.log('访问地址为 localhost:3000')
给自己挖了一个坑。因为登录之后需要保存用户状态，用来判断用户是否登录，如果登录则可以进入后台管理，如果没有登录则不能进入后台管理页面。之前写 node 的时候用的是 session 来保存，不过spa应用不同于前后端不分离的应用，我在前端对用户输入的账号密码进行了判断，如果成功则请求登录在后端保存 session。不过不知道出于什么原因，session 总是没办法赋值。因为我 node 学的也是半吊子，所以暂时放着，等我搞清楚了再来填坑。
&&&&& 1.学一个新模块，新框架第一步就是阅读官方文档。
&&&&& 2.不要觉得读文档费时间，认真的读一遍官方文档比你瞎折腾来得有效率。
&&&&& 3.阅读与你项目相关的优秀项目的源码，学习别人如何组织代码。
&&&&& 4.自己的解决方案不一定是最优解，不过在找到最优解之前不妨自己先试试。
&&&&& 5.框架模块的使用都不难，套API的活每个人都能干，只是快与慢的差别。
&&&&& 6.尝试思考这个API是如何实现的。
&&&&& 7.了解了完整的web应用是如何运作的，包括服务器，数据库，前端是如何联系在一起的。
源码：可以或者
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具