theme: channing-cyan
前言
最近接手了一个前后端没分离的项目，java作为后端，使用jsp当做模板来书写前端代码，并且用jq做各种操作，各种离奇写法和jq的辣眼睛操作以及臃肿的写法，这波给我看的属实头疼，但作为一个合格的前端开发者遇到困难就去克服他吧。
这个项目可以说是十几年前的古董项目了，页面跳转都是通过请求后台获取渲染好的dom结构直接展示在页面上。除了首页和登录，没有其他的地址。也就是说无论在哪个页面点击浏览器的返回都是返回到登录页，这点体验实际是非常糟糕的。然后由于页面填充数据都是依靠jq去操作DOM，所以导致表格从渲染出来到填充数据至少会有一秒的延迟。但是由于项目实在过于庞大，只依靠我一个人重构简直天方夜谭，并且还要在此基础上做新需求，于是我决定若是新增页面就使用Vue来书写，若是老页面则继续迭代。（其实我只是不想写jq而已）
在jsp中引入Vue
前面也说了，由于实际地址只有首页和登录页，首页作为主入口的jsp，我们可以在这里通过cdn引入vue相关的资源，由于老项目又要兼顾IE，只好引进Vue2.x来兼顾IE。
<!--这是element相关的资源（做demo用的） -->
<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.2/lib/theme-chalk/index.css">
<script src="https://unpkg.com/element-ui@2.13.2/lib/index.js"></script>
<!--引进Vue -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>引进后就可以在其他页面快乐的使用Vue的写法咯,由于引进了element，你也可以直接使用他的组件：
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="app">
<div>{{ msg }}</div>
<div v-for="item in list">{{ item }}</div>
<el-table :data="tableData" style="width: 100%">
<el-table-column prop="date" label="日期" width="180"/>
<el-table-column prop="name" label="姓名" width="180"/>
<el-table-column prop="address" label="地址"/>
</el-table>
<el-button type="primary" @click="confirm">确定</el-button>
</div>
<script>
new Vue({
el: '#app',
data(){
tableData: [
{
date: "2016-05-02",
name: "王小虎",
address: "上海市普陀区金沙江路 1518 弄",
},
{
date: "2016-05-04",
name: "王小虎",
address: "上海市普陀区金沙江路 1517 弄",
},
{
date: "2016-05-01",
name: "王小虎",
address: "上海市普陀区金沙江路 1519 弄",
},
{
date: "2016-05-03",
name: "王小虎",
address: "上海市普陀区金沙江路 1516 弄",
},
],
msg: 'hello Vue',
list: ["早上", "中午", "下午"],
},
methods:{
confirm() {
console.log(this.msg, '-welcome-')
}
}
})
</script>
</body>
</html>看看效果：
怎么样？是不是看上去还不错？接下来你可能想问那我要复用一些自己封装的组件怎么搞呢？由于我们在页面中都是通过 new Vue 的方式将其挂载在指定DOM上面，我们封装公共组件时可以通过指定el来挂载到对于DOM上，所以在使用组件时我们只需要这样：
<!-- 引入组件 -->
<script src = "./1.js"></script>
<!-- 使用组件 -->
<div id='compontents'></div>这就相当于一个占位符，我们封装组件时使用js来封装即可：
代码语言：javascript复制// 1.js
new Vue({
el: 'compontents',
template: `
<div>
<div>{{ this.msg }}</div>
</div>
`,
data() {
return {
msg: '1122332121'
}
}
})有人可能要问，为什么不直接写.vue文件？我也想写，我们在页面中引入时需要通过vue-loader编译成相应的js文件，但是vue-loader通过cdn方式引入并使用时会报错（这个我没有深入去看）。总之一言难尽，又迫于项目排期压力，只能想出临时方案去解决这个问题。我也想过使用jsx来书写相应的模板部分，但是也没有那么顺利，没法一下成型去使用他，只能用这种写法了。
组件通讯
现在有个新问题，我组件之间该怎么去通讯？
由于我是通过div标签来充当占位符，导致props并不知道从哪里传入进去（如果有大佬知道请赐教），我也是想了挺多办法，但都不太如意，最后只有一种简单粗暴的方法来解决：我直接在主入口定义了一个全局对象，并且通过不同模块功能划分开来，这样就大幅降低重名的概率：
// 在主入口（html）中：
var vue_data = {
// 商品分类
shop: {
a: 111
},
// 商品详情
detail: {
a: 111
}
}使用时：
代码语言：javascript复制// 1.html
console.log(vue_data.shop.a) // 111
vue_data.shop.a = 222
// 2.html
console.log(vue_data.shop.a) // 222
vue_data.shop.a = 333
//再回到1.html
console.log(vue_data.shop.a) // 333使用这种方式缺点也很明显：因为你无法确定哪里更改了数据源，所以出问题时，你得挨个查找。
结尾
由于技术的老旧，网上的解决方案也是少之又少或者不靠谱的，就总结一篇文章输出给大家看看，帮助那些在苦于在老项目挣扎的人。
暂时就这些了，后续再补充吧。
我的博客即将同步至腾讯云开发者社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=3a0413kj31mo0
