传统jsp与Vue对比，涉及Nuxt，jq与Vue混合使用
概要： jsp代表了传统的开发服务模式，让数据在服务端渲染完毕发送给浏览器。Vue代表着现代化的前端开发模式。对比两者的不同可以更好的理解web前端开发。本文开始将从目录结构，代码复用，路由，增删改查等方面进行对比。然后简单的了解下Nuxt(服务端渲染)。最后写当项目中遇到jq和vue 共同使用时候的解决方法。一.对比目录结构1.jspjsp传统页面目录结构2.vue 目录结构2.复用代码的对比2
概要： jsp代表了传统的开发服务模式，让数据在服务端渲染完毕发送给浏览器。Vue代表着现代化的前端开发模式。对比两者的不同可以更好的理解web前端开发。本文开始将从目录结构，代码复用，路由，增删改查等方面进行对比。然后简单的了解下Nuxt(服务端渲染)。最后写当项目中遇到jq和vue 共同使用时候的解决方法。
一.对比目录结构
1.jsp
jsp传统页面目录结构
2.vue 目录结构
2.复用代码的对比
2.1 jsp复用
<%@include file="/WEB-INF/include-head.jsp" %>
<%@include file="/WEB-INF/modal-menu-add.jsp"%>
<%@include file="/WEB-INF/modal-menu-edit.jsp"%>
<%@include file="/WEB-INF/modal-menu-confirm.jsp"%>
将公共的头尾抽取出来公共的部分，然后使用include标签嵌入
2.2 vue组件复用
vue通过封装components嵌入页面直接使用
比如下方分页组件的应用
<template>
<a-pagination v-model="current" :total="50" show-less-items />
</template>
<script>
export default {
data() {
return {
current: 2,
};
},
};
</script>
3.路由的对比
3.1 jsp
1.js实现
<script type="text/javascript">
function next(){
window.location = "page2.jsp";
}
</script>
2.jsp自带的forword标签来实现跳转
<jsp:forward page="page2.jsp" />
3.重定向
response.sendRedirect("page2.jsp");
3.2vue路由
const mainRoutes = {
path: '/',
component: _import('main'),
name: 'main',
redirect: { name: 'home' },
meta: { title: '主入口整体布局' },
children: [
{ path: '/home', component: _import('common/home'), name: 'home', meta: { title: '首页' } },
{ path: '/theme', component: _import('common/theme'), name: 'theme', meta: { title: '主题' } },
{ path: '/demo-echarts', component: _import('demo/echarts'), name: 'demo-echarts', meta: { title: 'demo-echarts', isTab: true } },
{ path: '/demo-ueditor', component: _import('demo/ueditor'), name: 'demo-ueditor', meta: { title: 'demo-ueditor', isTab: true } },
{ path: '/product-attrupdate', component: _import('modules/product/attrupdate'), name: 'attr-update', meta: { title: '规格维护', isTab: true } }
],
}
通过路由的方式来实现页面的跳转。
4.编辑页面 回显出现的差异
4.1 vue解决回显问题
通常的解决方案是在管理界面写上调出所有数据的data，进入增删改查子组件后，在需要回显的地方emit调用父组件的方法取值；
// 父组件的处理回显的函数
async getSelectTeam() {
//父组件获取数据，写入方法，供子组件调用
await this.getData();
},
<!-- 编辑 进入时候将值放入editItem 然后可以获得初始值，在提交的时候防止后续的bug
使用父子组件传值的方式 -->
<activity-edit
:editItem="editItem"
:editVisible="editVisible"
@closeModal="closeModal"
@getDetail="getDetail"
@getSelectTeam="getSelectTeam"
/>
// 再提交的时候调用父组件方法解决回显问题
handleSubmit(e) {
e.preventDefault();
this.form.validateFieldsAndScroll(async (err, values) => {
if (!err) {
try {
if (!this.verificationTime()) return;
const params = { param: values };
const res = await update(params);
const { data, msg, code } = res.data;
if (code === 200) {
this.$message.success('修改成功');
this.$emit('getSelectTeam');
} else {
throw msg;
}
this.$emit('closeModal');
} catch (error) {
this.$emit('closeModal');
this.$message.error(error || '修改失败');
}
}
});
4.2 jsp编辑页面的回显
点击修改按钮后提交获取到的数据然后重新生成树状结构；
// 修改的模态框”修改按钮“的单击事件
$("#menuEditBtn").click(function () {
var name = $.trim($("#menuEditModal [name=name]").val());
var url = $.trim($("#menuEditModal [name=url]").val());
var icon = $("#menuEditModal [name=icon]:checked").val();
$.ajax({
url:"menu/edit.json",
type:"post",
"data":{
"id":window.id,
"name":name,
"url":url,
"icon":icon
},
dataType:"json",
success:function (response) {
if(response.result == "SUCCESS"){
layer.msg("操作成功！");
// 重新生成树形结构
generateTree();
}
if (response.result == "FAILED"){
layer.msg("操作失败！");
}
},
error:function (response) {
layer.msg(response.status + " " + response.statusText);
}
});
向后台重新生成数据后返回；
// 封装生成树形结构的代码
function generateTree(){
$.ajax({
url:"menu/do/get.json",
type:"post",
dataType:"json",
success:function (response) {
if (response.result == "SUCCESS"){
var setting = {
view:{
"addDiyDom":myAddDiyDom,
"addHoverDom":myAddHoverDom,
"removeHoverDom":myRemoveHoverDom
},
data:{
key:{
url: "NotExist"
}
}
};
var zNodes = response.data;
$.fn.zTree.init($("#treeDemo"), setting, zNodes);
}
if (response.result == "FAILED")
layer.msg("操作失败"+response.message)
},
error:function (response) {
layer.msg("statusCode="+response.status + " message="+response.statusText);
}
});
其他小方面的对比: jq的数据获取方面使用dom的方式来获取数据，而vue使用虚拟dom 来绑定数据，jq面对动态生成的时候使用拼接html字符串的形式改变页面，vue 虚拟dom完成拼接入新的代码片段。
5.Nuxt 页面的处理方案
nuxt是nodejs的一个框架。在服务端做技术的渲染，将数据一次性返回给浏览器。
使用服务端渲染还需要对node有一定的了解，通常情况下使用用Express执行Nuxt，使用服务端渲染主要使用Vue 后的两大问题：
1、seo问题，有利于搜索引擎蜘蛛抓取网站内容。
2、首屏加载过慢问题，打开首页需要加载很多资源，通过服务端渲染可以加速首屏渲染。
同样服务端渲染也会有弊端，主要是根据自己的业务场景来选择适合方式，由于服务端渲染前端页面，必将会给服务器增加压力。
vue后端渲染主要插件：vue-server-renderer
// nuxt
const {
Nuxt,
Builder
} = require('nuxt') // 引入核心构建属性
// 判断开发环境
const isProd = (process.env.NODE_ENV === 'production')
const port = process.env.PORT || 80
// 引入nuxt配置
const config = require('./nuxt.config.js')
config.dev = !isProd;
const nuxt = new Nuxt(config);
// 判断生产模式 dev(开发者模式)表示重新构建 ；pro(生产模式)表示直接从yanr build的文件直接执行
if (config.dev) {
new Builder(nuxt).build()
.then(listen)
.catch((error) => {
console.error(error)
process.exit(1)
})
} else {
listen()
}复制代码
参考博文：https://blog.csdn.net/weixin_33720956/article/details/87959135
6.jq 与vue共同使用
项目有有可能会出现jq 和vue都需要使用的情况。具体的结合思路是 Vue 渲染完所有的 HTML组件之后再通过 JQuery 处理，而使用 JQuery 时应避免直接操作 DOM ，但是应用动画是允许的。
6.1 mounted 情况
//**注意** mounted 不会保证所有的子组件也都一起被挂载。
//如果你希望等到整个视图都渲染完毕，可以在 mounted 内部使用 vm.$nextTick：
mounted: function () {
this.$nextTick(function () {
//JQ
})
}
6.2 载入页面的情况下：
$(document).ready(function () {
//先执行vue
var app = new Vue({
el: '#app',
data: {
hello: 'Hello Vue',
}
$(function () {})
//再jQ
})
第六部分参考博文：https://www.jianshu.com/p/ddab3ac9ab25
前往低代码交流专区
更多推荐
7
0- 0
已为社区贡献2条内容
所有评论(0)