传统jsp与Vue对比，涉及Nuxt，jq与Vue混合使用

概要： 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