Implementieren Sie die SPA-Anwendung mit node+vue.js-js-Tutorial-php.cn

Implementieren Sie die SPA-Anwendung mit node+vue.js

高洛峰

Freigeben： 2017-01-03 17:16:00

Original

1251 Leute haben es durchsucht

Geschäftsanforderungen

Vor kurzem verlangt das Unternehmen die Entwicklung einer Webversion der App. Da die App inhaltsorientiert ist und über ein Chat-Modul verfügt, ist die allgemeine mehrseitige Entwicklung nicht sehr geeignet Es ist hauptsächlich für das mobile Surfen gedacht und stellt höhere Anforderungen an die Ladegeschwindigkeit oder das Benutzererlebnis. Nachdem ich viele Frameworks und Modelle recherchiert hatte, habe ich schließlich so etwas zusammengestellt.

Serverseite

Es besteht kein Zweifel daran, dass die Verwendung von Node und Typoskript Fehler beim Codieren effektiv überprüfen kann, und es besteht kein Druck, die Serverseite in einer stark typisierten Sprache zu schreiben.

#app.ts 只贴重要代码
 
var webpack = require(&#39;webpack&#39;)
var webpackDevMiddleware = require(&#39;webpack-dev-middleware&#39;)
var WebpackConfig = require(&#39;./webpack.config&#39;)
 
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: &#39;/__build__/&#39;,
  stats: {
    colors: true
  }
}));
 
//一般的配置项
app.set(&#39;views&#39;, __dirname + &#39;/views&#39;);
app.set(&#39;view engine&#39;, &#39;ejs&#39;);
app.set(&#39;view options&#39;, { layout: false });
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use(methodOverride());
app.use(express.static(__dirname + &#39;/public&#39;));
 
var env = process.env.NODE_ENV || &#39;development&#39;;
if (env === &#39;development&#39;) {
  app.use(errorHandler());
}
 
//路由配置
app.get(&#39;/&#39;, index.index);
app.get(&#39;/foo&#39;, foo.index);
app.get(&#39;/bar&#39;, 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;

Nach dem Login kopieren

Serverseitige Rendering-Seite

#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(&#39;vueServer.htmlReady&#39;, function(html:string) {
    //这里用的是ejs模板 可以把需要用到的数据设置成window下的全局变量，方便客户端的js访问。
    res.render(&#39;layout&#39;,{server_html:html,server_data:&#39;window.cm_data = {name:"张三"}&#39;})
  });
 
};

Nach dem Login kopieren

#layout.ejs 访问这个SPA的所有url返回的都是这个页面 <meta>标签都可以动态设置，只要传参数进来就可以
<!DOCTYPE html>
<html>
<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: &#39;/foo&#39; }">Go to Foo</a>
    <a v-link="{ path: &#39;/bar&#39; }">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>

Nach dem Login kopieren

Client-seitig

#app.js 这个是/__build__/app.js,可以用es6编写，webpack会转换的
 
import Vue from &#39;./vue.min&#39; //客户端的vue.js
import VueRouter from &#39;./vue-router.min&#39; //vue的路由插件,配合webpack可以很简单实现懒加载
 
//懒加载路由 只有访问这个路由才会加载js
import Foo from &#39;bundle?lazy!../../components/foo&#39; //配合webpack的bundle-loader，轻松实现懒加载
import Bar from &#39;bundle?lazy!../../components/bar&#39;
import Index from &#39;bundle?lazy!../../components/index&#39;
 
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({
  &#39;/&#39;  : {
    component: Index //前端路由定义,
  },
  &#39;/foo&#39;: {
    component: Foo
  },
  &#39;/bar&#39;: {
    component: Bar
  }
})
 
//启动APP
router.start(App, &#39;#app&#39;)

Nach dem Login kopieren

Bereich, der verbessert werden muss

Einheitliche Front -End- und Back-End-Vorlagen habe ich eine Möglichkeit gefunden, den HTML-Inhalt zu trennen. Die Knotenseite verwendet die fs.readFileSync-Methode, um ihn abzurufen, und die Clientseite verwendet den Raw-Loader des Webpacks, um den HTML-Inhalt abzurufen

Weitere verwandte Artikel über die Verwendung von node+vue.js zur Implementierung von SPA-Anwendungen finden Sie auf der chinesischen PHP-Website!