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 id="Hello-App">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
node、nvm与npm有什么区别Jul 04, 2022 pm 04:24 PMnode、nvm与npm的区别：1、nodejs是项目开发时所需要的代码库，nvm是nodejs版本管理工具，npm是nodejs包管理工具；2、nodejs能够使得javascript能够脱离浏览器运行，nvm能够管理nodejs和npm的版本，npm能够管理nodejs的第三方插件。
Vercel是什么？怎么部署Node服务？May 07, 2022 pm 09:34 PMVercel是什么？本篇文章带大家了解一下Vercel，并介绍一下在Vercel中部署 Node 服务的方法，希望对大家有所帮助！
node爬取数据实例：聊聊怎么抓取小说章节May 02, 2022 am 10:00 AMnode怎么爬取数据？下面本篇文章给大家分享一个node爬虫实例，聊聊利用node抓取小说章节的方法，希望对大家有所帮助！
node导出模块有哪两种方式Apr 22, 2022 pm 02:57 PMnode导出模块的两种方式：1、利用exports，该方法可以通过添加属性的方式导出，并且可以导出多个成员；2、利用“module.exports”，该方法可以直接通过为“module.exports”赋值的方式导出模块，只能导出单个成员。
安装node时会自动安装npm吗Apr 27, 2022 pm 03:51 PM安装node时会自动安装npm；npm是nodejs平台默认的包管理工具，新版本的nodejs已经集成了npm，所以npm会随同nodejs一起安装，安装完成后可以利用“npm -v”命令查看是否安装成功。
node中是否包含dom和bomJul 06, 2022 am 10:19 AMnode中没有包含dom和bom；bom是指浏览器对象模型，bom是指文档对象模型，而node中采用ecmascript进行编码，并且没有浏览器也没有文档，是JavaScript运行在后端的环境平台，因此node中没有包含dom和bom。
聊聊Node.js path模块中的常用工具函数Jun 08, 2022 pm 05:37 PM本篇文章带大家聊聊Node.js中的path模块，介绍一下path的常见使用场景、执行机制，以及常用工具函数，希望对大家有所帮助！
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
Dreamweaver CS6
Alat pembangunan web visual
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Penyesuai Pelayan SAP NetWeaver untuk Eclipse
Integrasikan Eclipse dengan pelayan aplikasi SAP NetWeaver.
mPDF
mPDF ialah perpustakaan PHP yang boleh menjana fail PDF daripada HTML yang dikodkan UTF-8. Pengarang asal, Ian Back, menulis mPDF untuk mengeluarkan fail PDF "dengan cepat" dari tapak webnya dan mengendalikan bahasa yang berbeza. Ia lebih perlahan dan menghasilkan fail yang lebih besar apabila menggunakan fon Unicode daripada skrip asal seperti HTML2FPDF, tetapi menyokong gaya CSS dsb. dan mempunyai banyak peningkatan. Menyokong hampir semua bahasa, termasuk RTL (Arab dan Ibrani) dan CJK (Cina, Jepun dan Korea). Menyokong elemen peringkat blok bersarang (seperti P, DIV),
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
