使用node+vue.js实现SPA应用


Posted in Javascript onJanuary 28, 2016

业务需求

最近公司要求开发web版的app,由于app是偏向内容方面,而且带了一个聊天模块,所以一般的多页开发不是很适合,而且主要是手机浏览,对加载速度或者用户体验来说都比较苛刻。调研了很多框架和模式,最后自己东拼西凑搞出来了这么一个玩意。

服务端

毫无疑问使用node,使用typescript可以有效的在编码同时查错,强类型语言写服务端毫无压力。

#app.ts 只贴重要代码

var webpack = require('webpack')
var webpackDevMiddleware = require('webpack-dev-middleware')
var WebpackConfig = require('./webpack.config')

import * as index from "./routes/index";
import * as foo from "./routes/foo";
import * as bar from "./routes/bar";

var app = express();

//启动服务的时候 打包并监听客户端用到的文件,webpackDevMiddleware是开发模式,他会打包js在内存里面,你改了文件,它也会重新打包
app.use(webpackDevMiddleware(webpack(WebpackConfig), {
  publicPath: '/__build__/',
  stats: {
    colors: true
  }
}));

//一般的配置项
app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');
app.set('view options', { layout: false });
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(methodOverride());
app.use(express.static(__dirname + '/public'));

var env = process.env.NODE_ENV || 'development';
if (env === 'development') {
  app.use(errorHandler());
}

//路由配置
app.get('/', index.index);
app.get('/foo', foo.index);
app.get('/bar', bar.index);


app.listen(3000, function(){
  console.log("Demo Express server listening on port %d in %s mode", 3000, app.settings.env);
});

export var App = app;

服务端渲染页面

#index.ts
import express = require("express")
import vueServer = require("vue-server") //服务端渲染vue的插件

var Vue = new vueServer.renderer(); //创建一个服务端的vue

export function index(req: express.Request, res: express.Response) {

  //创建一个组件
  var vm = new Vue({
    template: `
    <p>This is index!</p>
    `
  });

  //等待html渲染完成,再返回给浏览器 vueServer.htmlReady是vue-server的自带事件
  vm.$on('vueServer.htmlReady', function(html:string) {
    //这里用的是ejs模板 可以把需要用到的数据设置成window下的全局变量,方便客户端的js访问。
    res.render('layout',{server_html:html,server_data:'window.cm_data = {name:"张三"}'})
  });

};
#layout.ejs 访问这个SPA的所有url返回的都是这个页面 <meta>标签都可以动态设置,只要传参数进来就可以
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Vue Router Example</title>
  <style>
    .v-link-active {
      color: red;
    }
  </style>
  <script>
    //定义一些前端需要用到的全局属性,文章ID或用户信息什么的
    //index.ts中传过来的是 window.cm_data = {name:"张三"}
    //前端就能访问到了
    <%-server_data%>
  </script>
</head>
<body>

//这里的id是前端需要用到的一个标识
<div id="app">
  <h1>Hello App!</h1>
  <p>
    <a v-link="{ path: '/foo' }">Go to Foo</a>
    <a v-link="{ path: '/bar' }">Go to Bar</a>
  </p>
  //router-view是客户端vue-router需要解析的dom
  //server_html是根据访问url地址生成的html,是做SEO的重点,不加载下面的app.js也可以看到内容
  <router-view> <%-server_html%> </router-view>
</div>
//webpack打包好的js,主要是路由配置
<script src="/__build__/app.js"></script>
</body>
</html>

客户端

#app.js 这个是/__build__/app.js,可以用es6编写,webpack会转换的

import Vue from './vue.min' //客户端的vue.js
import VueRouter from './vue-router.min' //vue的路由插件,配合webpack可以很简单实现懒加载

//懒加载路由 只有访问这个路由才会加载js
import Foo from 'bundle?lazy!../../components/foo' //配合webpack的bundle-loader,轻松实现懒加载
import Bar from 'bundle?lazy!../../components/bar'
import Index from 'bundle?lazy!../../components/index'

var App = Vue.extend({})

Vue.use(VueRouter)

var router = new VueRouter({
  //这里要好好说一下,一定要设置html5模式,不然前后端URL不统一会发生问题
  //比如访问 http://localhost:3000/ 服务端定义是访问index.ts这个路由文件
  //如果不是html5模式的话,经过客户端js运行之后会变成http://localhost:3000/#!/
  
  //在比如直接浏览器输入 http://localhost:3000/foo 服务端定义是访问.ts这个路由文件
  //如果不是html5模式的话,经过客户端js运行之后会变成 http://localhost:3000/foo/#!/
  
  //设置了html5模式后,加载完js后不会加上#!这2个类似锚点的字符,实现前后端路由统一如果用户刷新浏览器的话,服务端也能渲染出相应的页面。
  history: true, //html5模式 去掉锚点 
  saveScrollPosition: true //记住页面的滚动位置 html5模式适用
})

//定义路由,要和服务端路由路径定义的一样
router.map({
  '/'  : {
    component: Index //前端路由定义,
  },
  '/foo': {
    component: Foo
  },
  '/bar': {
    component: Bar
  }
})

//启动APP
router.start(App, '#app')

需要完善的地方

前后端统一模板,已经找到方法了把html分离出来,node端用fs.readFileSync方法获取,客户端用webpack的raw-loader获取html内容

不放源码都是瞎扯。

源码地址

https://github.com/yjj5855/node-vue-server-webpack

Javascript 相关文章推荐
JavaScript中的null和undefined解析
Apr 14 Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 Javascript
深入理解JavaScript系列(50):Function模式(下篇)
Mar 04 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
Nov 15 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
jQuery插件zTree实现单独选中根节点中第一个节点示例
Mar 08 Javascript
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
Mar 21 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
Oct 16 Javascript
浅谈Angular 观察者模式理解
Nov 01 Javascript
vue组件间的参数传递实例详解
Apr 26 Javascript
vue项目中引入Sass实例方法
Aug 27 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 #Javascript
javascript实现随机显示星星特效
Jan 28 #Javascript
基于javascript实现全国省市二级联动下拉选择菜单
Jan 28 #Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 #Javascript
jQuery+css实现的时钟效果(兼容各浏览器)
Jan 27 #Javascript
jQuery实现的分子运动小球碰撞效果
Jan 27 #Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
Jan 27 #Javascript
You might like
其他功能
2006/10/09 PHP
19个Android常用工具类汇总
2014/12/30 PHP
php版银联支付接口开发简明教程
2016/10/14 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
实现复选框全选/全不选切换
2006/12/23 Javascript
JS中引用百度地图并将百度地图的logo和信息去掉
2013/09/29 Javascript
jQuery CSS()方法改变现有的CSS样式
2014/08/20 Javascript
AspNet中使用JQuery上传插件Uploadify详解
2015/05/20 Javascript
用javascript实现自动输出网页文本
2015/07/30 Javascript
分享有关jQuery中animate、slide、fade等动画的连续触发、滞后反复执行的bug
2016/01/10 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
AngularJS基于factory创建自定义服务的方法详解
2017/05/25 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
详解ng-alain动态表单SF表单项设置必填和正则校验
2019/06/11 Javascript
解决antd 表单设置默认值initialValue后验证失效的问题
2020/11/02 Javascript
[07:12]2014DOTA2西雅图国际邀请赛 黑马Liquid专题采访
2014/07/12 DOTA
为python设置socket代理的方法
2015/01/14 Python
Python tkinter模块中类继承的三种方式分析
2017/08/08 Python
Python3.6安装及引入Requests库的实现方法
2018/01/24 Python
对Python中for复合语句的使用示例讲解
2018/11/01 Python
Python 最大概率法进行汉语切分的方法
2018/12/14 Python
python中实现控制小数点位数的方法
2019/01/24 Python
python实现银联支付和支付宝支付接入
2019/05/07 Python
Python3 中作为一等对象的函数解析
2019/12/11 Python
python文件编写好后如何实践
2020/07/07 Python
英国高档百货连锁店:John Lewis
2017/11/20 全球购物
日语专业毕业生自荐书
2014/06/18 职场文书
庆元旦活动总结
2014/07/09 职场文书
环境科学专业教师求职信
2014/07/12 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
大学生个人学习总结
2015/02/15 职场文书
酒店财务部岗位职责
2015/04/14 职场文书
蜗居观后感
2015/06/11 职场文书
祝寿主持词
2015/07/02 职场文书
详解Java ES多节点任务的高效分发与收集实现
2021/06/30 Java/Android
Python面向对象编程之类的概念
2021/11/01 Python