JSP融合vuejs全面重构升级老旧项目页面维护

章鱼儿2022

已于 2022-06-29 08:29:51 修改

阅读量4.1k

点赞数 3

文章标签： java java-ee vscode

于 2022-03-19 20:48:09 首次发布

本文链接：https://blog.csdn.net/chenyanqin1992/article/details/123602229

版权

如果在老项目jsp页面的话不可能是全部重构的，所有闪亮登场的就是jsp配合vue杀手锏，可以做出复杂的交互和组件；比如三级菜单在融合商品选择等；

第一步引入挂载header.jsp

<script type="text/javascript" src="/bizbox/js/public/vue/vue@2.6.14.min.js"></script>
<script type="text/javascript" src="/bizbox/js/public/vue/element-ui@2.15.7.min.js"></script>
<link rel="stylesheet" type="text/css" href="/bizbox/js/public/vue/element-ui@2.15.7.min.css">

第二步引入vue核心

 // 执行vue函数
    function vueFn() {
      const columns = [
        {
          dataIndex: "name",
          key: "name",
          slots: { title: "customTitle" },
          scopedSlots: { customRender: "name" },
        },
        {
          title: "Age",
          dataIndex: "age",
          key: "age",
        },
        {
          title: "Address",
          dataIndex: "address",
          key: "address",
        },
        {
          title: "Tags",
          key: "tags",
          dataIndex: "tags",
          scopedSlots: { customRender: "tags" },
        },
        {
          title: "Action",
          key: "action",
          scopedSlots: { customRender: "action" },
        },
      ];

      const data = [
        {
          key: "1",
          name: "John Brown",
          age: 32,
          address: "New York No. 1 Lake Park",
          tags: ["nice", "developer"],
        },
        {
          key: "2",
          name: "Jim Green",
          age: 42,
          address: "London No. 1 Lake Park",
          tags: ["loser"],
        },
        {
          key: "3",
          name: "Joe Black",
          age: 32,
          address: "Sidney No. 1 Lake Park",
          tags: ["cool", "teacher"],
        },
      ];

      Vue.component("card", {
        data() {
          return {
            data,
            columns,
            formInline: {
              user: "",
              password: "",
            },
          };
        },
        template: `
                <div style="padding:40px">
                    <a-form-model layout="inline" :model="formInline" @submit="handleSubmit" @submit.native.prevent>
                        <a-form-model-item>
                        <a-input v-model="formInline.user" placeholder="Username">
                            <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                        </a-input>
                        </a-form-model-item>
                        <a-form-model-item>
                        <a-button
                            type="primary"
                            html-type="submit"
                        >
                           搜索
                        </a-button>
                        </a-form-model-item>
                    </a-form-model>
                    <a-table :columns="columns" :data-source="data">
                        <a slot="name" slot-scope="text">{{ text }}</a>
                        <span slot="customTitle"><a-icon type="smile-o" /> Name</span>
                        <span slot="tags" slot-scope="tags">
                        <a-tag
                            v-for="tag in tags"
                            :key="tag"
                            :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
                        >
                            {{ tag.toUpperCase() }}
                        </a-tag>
                        </span>
                        <span slot="action" slot-scope="text, record">
                        <a>Invite 一 {{ record.name }}</a>
                        <a-divider type="vertical" />
                        <a>Delete</a>
                        <a-divider type="vertical" />
                        <a class="ant-dropdown-link"> More actions <a-icon type="down" /> </a>
                        </span>
                    </a-table>
                </div>
            `,
        methods: {
          handleSubmit(e) {
            console.log(this.formInline);
          },
        },
      });

      var vm = new Vue({
        el: "#moudle",
      });
    }
    vueFn();

第三步dom挂载

  <body>
    <div style="text-align: center">其他jsp内容兄弟们</div>
    <div id="moudle">
      <div>
        <card></card>
      </div>
    </div>
  </body>

效果页面如下：

这样就简单引入了，但是后续还有很多系列问题，可以留言协助查看解决问题

温馨提醒：
jsp和vue代码融合主要是走refs dom选择对象方式要有jq的dom操作和vue双向驱动的思维，
单独出来的事件需要暴露出来然后在外部需要挂载调用。未完待续

章鱼儿2022

关注

3
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JSP融合vuejs全面重构升级老旧项目页面维护

如果在老项目jsp页面的话不可能是全部重构的，所有闪亮登场的就是jsp配合vue杀手锏，可以做出复杂的交互和组件；比如三级菜单在融合商品选择等；第一步引入挂载header.jsp<script type="text/javascript" src="/bizbox/js/public/vue/vue@2.6.14.min.js"></script><script type="text/javascript" src="/bizbox/js/public/vue/el
复制链接

扫一扫