ejs结合vue实现SSR，express+ejs+vue=服务器端渲染？Vue-SSR的奇思妙想通常如果我们使⽤了express+ejs去开发，⼤多数代码可能是这样的：
index.js：
var express =require('express');
var router = express.Router();
var items=[{title:'⽂章1'},{title:'⽂章2'}];
/* GET home page. */
<('/',function(req, res, next){
搭建ssr服务器教程
});
<('/form',function(req, res, next){
});
router.post('/form',function(req, res, next){
});
在views⽬录下新建form.ejs添加如下代码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>⽂章列表页</title>
<link rel='stylesheet'href='/stylesheets/style.css'/>
</head>
<body>
<h1><%= title %></h1>
<p><a href="/form"rel="external nofollow">发表新⽂章</a></p>
<ul>
<%items.forEach(function(item){%>
<li><%=item.title%></li>
<%})%>
</ul>
</body>
</html>
展⽰：
我们能否通过vue结合ejs使⽤vue的语法，实现同样的效果呢？index.js修改成如下：
<('/',function(req, res, next){
//这段数据可以从数据库中search出来的
var items=[{title:'⽂章1'},{title:'⽂章2'}];
});
form.ejs修改成如下:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title>⽂章列表页</title>
<link rel='stylesheet'href='/stylesheets/style.css'/>
<script src="/javascripts/vue.min.js"></script>
</head>
<body>
<div id="app">
<!-- 使⽤vue的语法 -->
<h1>{{msg}}</h1>
<p><a href="/form"rel="external nofollow">发表新⽂章</a></p>
<ul v-for="item in items">
<li>{{item.title}}</li>
</ul>
</div>
</body>
<script>
var vm =new Vue({
// 配置
el:"#app",//配置模板
data:{
//通过ejs的语法转成变量，赋值给vue，让vue去管理
items:<%-JSON.stringify(items)%>,
msg:<%-JSON.stringify(title)%>,
}
});
</script>
</html>
效果：
这样看起来，感觉简洁了很多，结构也清晰明了，更容易管理了，好像没⼈ejs结合vue这样玩过，接下来看看别的操作吧
给ui绑定click事件，通过事件委托，拿到target元素，进⾏修改，并且修改data中管理的数据
index.js不变，form.ejs修改成如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/> <title>⽂章列表页</title>
<link rel='stylesheet'href='/stylesheets/style.css'/>
<script src="/javascripts/vue.min.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg}}</h1>
<p><a href="/form"rel="external nofollow">发表新⽂章</a></p>
<ul v-for="item in items"@click="handClick">
<li>{{item.title}}</li>
</ul>
{{testMsg}}
</div>
</body>
<script>
var vm =new Vue({
// 配置
el:"#app",//配置模板
data:{
items:<%-JSON.stringify(items)%>,
msg:<%-JSON.stringify(title)%>,
testMsg:"testMsg"
},
methods:{
handClick(e){
e.target.innerHTML ="这是测试信息"
this.items =[{title:'⽂章1'},{title:'⽂章2'},{title:'⽂章3'},{title:'⽂章4'}] stMsg =<%-JSON.stringify(title)%>
}
},
});
</script>
</html>
⼀开始的效果如下：
当我点击⽂章⼀时，效果如图：对应的数据均发⽣正确的改变
总结：
感觉可以通过这种模式，把ejs的语法巧妙的转换成vue的语法去开发会很好玩，
在⽹上也不到ejs结合vue的相关⽂章，我也是⽆意中想到这点的，试着看看，没想到可以实现想要的效果

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。