在jsp页面使用vue+elementui
通常的VUE项目，是前后端分离的项目。那么如何在现有的JSP项目中集成VUE呢？
1.在JSP中引入vue和elementUI
在<script></script>中引入js,在<link/>中引入css
示例：
<%-- theme-chalk.css是elementui的css，需要第一个引用 --%>
<link rel="stylesheet" href="static/css/theme-chalk.css">
<script type="text/javascript" src="static/js/vue.min.js"></script>
<script type="text/javascript" src="static/js/vue-resource.min.js"></script>
<script type="text/javascript" src="static/js/vue-router.js"></script>
<script type="text/javascript" src="static/js/element-ui.js"></script>
<script type="text/javascript" src="static/js/moment.js"></script>
<script type="text/javascript" src="static/js/axios.js"></script>
对应版本在https://www.bootcdn.cn/中下载（js在bootcdn中下载，类似的jar在maven仓库下载）。
下载好之后导入项目中
以vue为例：先在https://www.bootcdn.cn/中搜vue，随便选择一个版本，复制链接然后在新窗口打开链接，就可以得到js代码，然后在项目中新建一个js文件，把代码粘贴进去即可。
css同理！
git仓库地址，里面有下载好的vue.js和elementui.js、elementui的css等文件
https://gitee.com/huoyongzhuang/jsp_yin-ru_vue-and_element-ui.git
代码片段：JSP文件代码
<%-- Created by IntelliJ IDEA. User: pp Date: 2019/3/13 Time: 20:47 To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %> <html> <head> <title>员工列表</title> <%-- theme-chalk.css是elementui的css，需要第一个引用 --%> <link rel="stylesheet" href="static/css/theme-chalk.css"> <script type="text/javascript" src="static/js/vue.min.js"></script> <%-- Vue 要实现异步加载需要使用到 vue-resource 库。--%> <script type="text/javascript" src="static/js/vue-resource.min.js"></script> <script type="text/javascript" src="static/js/vue-router.js"></script> <script type="text/javascript" src="static/js/element-ui.js"></script> <script type="text/javascript" src="static/js/moment.js"></script> <%-- axios.js这是引入的axios基于promise 的 HTTP 库，可以用axios请求 其实不引入也行 上面的vue-resource.min.js也已经可以用 this.$http.post()｜｜this.$http.get()请求 " --%> <script type="text/javascript" src="static/js/axios.js"></script> </head> <body> <div id="pageInfo"> <div style="display: flex; flex-direction: column"> <div style="height: 80px;margin: 30px 40px 0px 40px; display: flex"> <div style="flex: 1;display: flex"> <span style="flex: 2; padding: 0px 30px 0px 20px"> <el-input v-model="input" placeholder="请输入姓名"></el-input> </span> <span style="flex: 1"> <el-button type="success">搜索</el-button> </span> </div> <div style="flex: 1; padding-left: 30px"> <el-button @click="add()" type="primary">新增</el-button> <el-button @click="batchDelete()" type="danger">批量删除</el-button> </div> </div> <div style="flex: 1;margin: 10px 40px 40px 40px; "> <template> <el-table :data="pageInfo" style="width: 100%" @selection-change="selectionChangeHandle" > <el-table-column type="selection" width="55"> </el-table-column> <el-table-column prop="empName" label="姓名" width="180"> </el-table-column> <el-table-column prop="email" label="email" width="180"> </el-table-column> <el-table-column prop="gender" label="性别" width="180"> </el-table-column> <el-table-column prop="department.deptName" label="部门" width="180"> </el-table-column> </el-table> </template> <el-pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" :current-page="pageIndex" :page-sizes="[5, 10, 15, 20]" :page-size="pageSize" :total="totalPage" layout="total, sizes, prev, pager, next, jumper"> </el-pagination> </div> </div> <%-- 新增弹框--%> <el-dialog title="提示" :visible.sync="dialogVisible" width="30%" > <el-form ref="form" :model="form" label-width="80px"> <el-form-item label="姓名"> <el-input v-model="form.empName"></el-input> </el-form-item> <el-form-item label="email"> <el-input v-model="form.email"></el-input> </el-form-item> <el-form-item label="性别"> <el-input v-model="form.gender"></el-input> </el-form-item> <el-form-item label="部门"> <el-select v-model="form.dId" placeholder="请选择部门"> <el-option label="测试部" value=1></el-option> <el-option label="开发部" value=2></el-option> </el-select> </el-form-item> </el-form> <span slot="footer" class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="subFrom">确 定</el-button> </span> </el-dialog> </div> <script> var vue = new Vue({ el: '#pageInfo', data: { pageInfo: [], selectionChangeHandles:[], pageIndex: 1, pageSize: 10, totalPage: 0, currentPage1:1, dialogVisible: false, depts: {}, form: { empId: '', empName: '', email: '', gender: '', dId: '', }, input:'' }, created: function () { this.getPageInfo() }, methods: { getPageInfo(){ //vue的请求 this.$http.get(`employee/emps`,{ params: { 'pn':this.pageIndex, 'limit': this.pageSize, } }).then(function (result) { this.pageInfo = result.body.pageInfo.list; this.totalPage = result.body.pageInfo.total this.pageInfo.forEach(data =>{ if (data.gender == 'M') { data.gender = '男'; } else if (data.gender == 'F') { data.gender = '女'; } }) }); }, // 当前页 currentChangeHandle (val) { this.pageIndex = val this.getPageInfo() }, // 每页数 sizeChangeHandle (val) { this.pageSize = val this.pageIndex = 1 this.getPageInfo() }, // 多选 selectionChangeHandle (val) { this.selectionChangeHandles = val }, batchDelete(){ let arr =[] this.selectionChangeHandles.forEach(data=>{ console.log("this",data.empId) arr.push(data.empId) }) let data = {"ids": arr} //这是用的axios请求 axios.post(`employee/batchDelete`, data).then(function (response) { if(response.code ==200){ this.$message({ message: '操作成功', type: 'success', }) } }) .catch(function (error) { console.log(error); }); this.getPageInfo() }, add(){ this.dialogVisible = true }, subFrom(){ this.dialogVisible = false this.$http.post(`employee/emp`,this.form).then(function (result) { if(result.code ==200){ this.$message({ message: '操作成功', type: 'success', }) } this.getPageInfo() }); }, empUpdate: function (id) { $(function () { $('#empAdd').modal({ backdrop: false }) }); $.ajax({ type: "put", url: "employee/emp/" + id, success: function (result) { //alert(result) vue.inputForm = result } }) } } }) </script> </body> </html>
