コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > Node+vue.jsを使用してSPAアプリケーションを実装する

Node+vue.jsを使用してSPAアプリケーションを実装する

高洛峰
リリース： 2017-01-03 17:16:00
オリジナル
1280 人が閲覧しました

ビジネスニーズ

最近、会社はアプリのWebバージョンの開発を必要としています。アプリはコンテンツ指向であり、チャットモジュールが付属しているため、一般的なマルチページ開発はあまり適しておらず、主にモバイル向けです。ブラウジングは読み込み速度やユーザーエクスペリエンスに悪影響を及ぼします。多くのフレームワークやモデルを研究した結果、最終的にこのようなものをまとめました。

サーバーサイド

ノードを使用し、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(&#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;})
  });
 
};
ログイン後にコピー
#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>
ログイン後にコピー

クライアントサイド

#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;)
ログイン後にコピー

フロントエンドとバックエンドのテンプレートを統合する ノード側で使用する方法を見つけました。 fs.readFileSync メソッドを使用してそれを取得し、クライアント側は webpack の raw -loader を使用して HTML コンテンツを取得します

node+vue.js を使用した SPA アプリケーションの実装に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

関連ラベル：
node SPA应用
ソース：php.cn
前の記事：jQuery 3.0のsetterモードとgetterモードの詳細な説明 次の記事：Vue.js に基づくテーブル ページング コンポーネント
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
Javafx でインライン CSS スタイルを動的に変更する アプリケーションが最大化されているときにペインの背景画像を変更しようとしています。私の背景はインライン CSS を使用して設定されています。スタイル用に 2 つの異なる変数と if...
から 2024-04-06 20:57:16
0
1
487
Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか? Webアプリケーションを開発しています。 Web アプリケーションでバージョン情報を表示するためのベスト プラクティスは何ですか?私はセマンティック バージョニングを使用しており、...
から 2024-04-06 19:13:16
0
2
476
Laravel 8 - /{editable_text} ルートを /{user} ルートにリダイレクトする方法 ユーザープロファイルに誘導するリダイレクトルートを作成しようとしています。リダイレクト ルートはユーザー データベースからの文字列/テキストである必要があり、同じユーザー プロファ...
から 2024-04-06 17:26:11
0
1
410
CSS スタイルがサイトに適用されない Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
から 2024-04-06 17:12:23
0
1
336
Android 上の React-Native でステータス更新が機能しない スワイプ可能な水平ギャラリーに画像のペアを含むコードがいくつかあります。両方の画像の上部をクリックすると、画像がオフに切り替わるはずです。そのため、私が行ったのは、isImage2...
から 2024-04-06 16:54:10
0
1
410
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート