hujung hadapan web
tutorial js
Menggunakan nod vue.js untuk melaksanakan SPA application_node.js
Menggunakan nod vue.js untuk melaksanakan SPA application_node.js
Keperluan perniagaan
Baru-baru ini, syarikat memerlukan pembangunan versi web apl Memandangkan apl itu berorientasikan kandungan dan mempunyai modul sembang, ia tidak begitu sesuai untuk pembangunan berbilang halaman umum, dan ia adalah terutamanya untuk penyemakan imbas mudah alih. . Dari segi kelajuan memuatkan atau pengalaman pengguna Semuanya agak keras. Selepas meneliti banyak rangka kerja dan model, akhirnya saya menyusun sesuatu seperti ini.
Pelayan
Tidak syak lagi bahawa menggunakan nod, menggunakan skrip taip secara berkesan boleh menyemak ralat semasa pengekodan, dan tiada tekanan untuk menulis pelayan dalam bahasa yang ditaip dengan kuat.
#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;
Halaman pemaparan sebelah pelayan
#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>
Pelanggan
#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')
Kawasan yang memerlukan penambahbaikan
Templat bersatu bahagian hadapan dan bahagian belakang telah menemui cara untuk memisahkan html Bahagian nod menggunakan kaedah fs.readFileSync untuk mendapatkannya dan pelanggan menggunakan pemuat mentah pek web untuk mendapatkan kandungan html
Alamat kod sumber
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Bagaimana untuk memadam nod dalam nvm
Dec 29, 2022 am 10:07 AM
Cara memadam nod dengan nvm: 1. Muat turun "nvm-setup.zip" dan pasangkannya pada pemacu C 2. Konfigurasikan pembolehubah persekitaran dan semak nombor versi melalui arahan "nvm -v" 3. Gunakan "nvm arahan install" Pasang nod; 4. Padamkan nod yang dipasang melalui arahan "nvm uninstall".
Cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod
Mar 28, 2023 pm 07:28 PM
Bagaimana untuk mengendalikan muat naik fail? Artikel berikut akan memperkenalkan kepada anda cara menggunakan ekspres untuk mengendalikan muat naik fail dalam projek nod saya harap ia akan membantu anda!
Analisis mendalam tentang alat pengurusan proses Node 'pm2'
Apr 03, 2023 pm 06:02 PM
Artikel ini akan berkongsi dengan anda alat pengurusan proses Node "pm2", dan bercakap tentang mengapa pm2 diperlukan, cara memasang dan menggunakan pm2, saya harap ia akan membantu semua orang!
PI Node Teaching: Apakah nod pi? Bagaimana cara memasang dan menyediakan nod pi?
Mar 05, 2025 pm 05:57 PM
Penjelasan dan Panduan Pemasangan Terperinci untuk Pinetwork Nodes Artikel ini akan memperkenalkan ekosistem pinetwork secara terperinci - nod pi, peranan utama dalam ekosistem pinetwork, dan menyediakan langkah -langkah lengkap untuk pemasangan dan konfigurasi. Selepas pelancaran Rangkaian Ujian Blockchain Pinetwork, nod PI telah menjadi bahagian penting dari banyak perintis yang aktif mengambil bahagian dalam ujian, bersiap sedia untuk pelepasan rangkaian utama yang akan datang. Jika anda tidak tahu kerja pinet, sila rujuk apa itu picoin? Berapakah harga untuk penyenaraian? Penggunaan PI, perlombongan dan analisis keselamatan. Apa itu Pinetwork? Projek Pinetwork bermula pada tahun 2019 dan memiliki syiling pi cryptocurrency eksklusifnya. Projek ini bertujuan untuk mewujudkan satu yang semua orang boleh mengambil bahagian
Mari kita bincangkan tentang cara menggunakan pkg untuk membungkus projek Node.js ke dalam fail boleh laku.
Dec 02, 2022 pm 09:06 PM
Bagaimana untuk membungkus fail boleh laku nodejs dengan pkg? Artikel berikut akan memperkenalkan kepada anda cara menggunakan pkg untuk membungkus projek Node ke dalam fail boleh laku. Saya harap ia akan membantu anda!
Pengesahan berasaskan token dengan Angular dan Node
Sep 01, 2023 pm 02:01 PM
Pengesahan adalah salah satu bahagian terpenting dalam mana-mana aplikasi web. Tutorial ini membincangkan sistem pengesahan berasaskan token dan cara ia berbeza daripada sistem log masuk tradisional. Pada penghujung tutorial ini, anda akan melihat demo berfungsi sepenuhnya yang ditulis dalam Angular dan Node.js. Sistem Pengesahan Tradisional Sebelum beralih kepada sistem pengesahan berasaskan token, mari kita lihat sistem pengesahan tradisional. Pengguna memberikan nama pengguna dan kata laluan mereka dalam borang log masuk dan klik Log Masuk. Selepas membuat permintaan, sahkan pengguna di bahagian belakang dengan menanyakan pangkalan data. Jika permintaan itu sah, sesi dibuat menggunakan maklumat pengguna yang diperoleh daripada pangkalan data dan maklumat sesi dikembalikan dalam pengepala respons supaya ID sesi disimpan dalam penyemak imbas. Menyediakan akses kepada aplikasi tertakluk kepada
Bagaimana untuk mengkonfigurasi dan memasang node.js dalam IDEA? Analisis ringkas kaedah
Dec 21, 2022 pm 08:28 PM
Bagaimana untuk menjalankan nod dalam IDEA? Artikel berikut akan memperkenalkan kepada anda cara mengkonfigurasi, memasang dan menjalankan node.js dalam IDEA Saya harap ia akan membantu anda!
Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs?
Feb 24, 2023 pm 07:33 PM
Apakah sistem log masuk tunggal? Bagaimana untuk melaksanakannya menggunakan nodejs? Artikel berikut akan memperkenalkan kepada anda cara menggunakan nod untuk melaksanakan sistem log masuk tunggal. Saya harap ia akan membantu anda!
