Implémenter l'application SPA à l'aide du nœud vue.js-js tutoriel-php.cn

Implémenter l'application SPA à l'aide du nœud vue.js

高洛峰

Libérer： 2017-01-03 17:16:00

original

1268 Les gens l'ont consulté

Exigences commerciales

Récemment, l'entreprise a exigé le développement d'une version Web de l'application. Étant donné que l'application est orientée contenu et dispose d'un module de discussion, le développement général sur plusieurs pages n'est pas très approprié et. il est principalement destiné à la navigation mobile. Il est plus exigeant en termes de vitesse de chargement ou d'expérience utilisateur. Après avoir recherché de nombreux frameworks et modèles, j'ai finalement reconstitué quelque chose comme ça.

Côté serveur

Il ne fait aucun doute que l'utilisation de node, l'utilisation de TypeScript peuvent vérifier efficacement les erreurs lors du codage, et il n'y a aucune pression pour écrire côté serveur dans un langage fortement typé.

#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;

Copier après la connexion

Page de rendu côté serveur

#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;})
  });
 
};

Copier après la connexion

#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>

Copier après la connexion

Côté client

#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;)

Copier après la connexion

Zone à améliorer

Front unifié -end et back-end, j'ai trouvé un moyen de séparer le html. Le côté nœud utilise la méthode fs.readFileSync pour l'obtenir, et le côté client utilise le chargeur brut de webpack pour obtenir le contenu html

Veuillez prêter attention aux articles plus connexes utilisant node vue.js pour implémenter des applications SPA PHP sur le site Web chinois !