一、插件介绍
1.dataTable插件
简述
DataTables 是一款 jQuery 表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。带有分页功能搜索功能 可提高做题速度也是比赛提供的一个插件，其他页面就行复制在做修改。
引入
<!-- DataTables -->
<link rel="stylesheet" href="/static/css/dataTables.bootstrap.min.css">
<!-- DataTables -->
<script src="/static/js/jquery.dataTables.min.js"></script>
<script src="/static/js/dataTables.bootstrap.min.js"></script>
DataTables的一些基础属性配置
$(document).ready(function() {
$('#example').dataTable( {
"oLanguage": {
"sLengthMenu": "每页显示 _MENU_ 条记录",
"sZeroRecords": "抱歉， 没有找到",
"sInfo": "从 _START_ 到 _END_ /共 _TOTAL_ 条数据",
"sInfoEmpty": "没有数据",
"sInfoFiltered": "(从 _MAX_ 条数据中检索)",
"oPaginate": {
"sFirst": "首页",
"sPrevious": "前一页",
"sNext": "后一页",
"sLast": "尾页"
},
"sZeroRecords": "没有检索到数据",
"sProcessing": "<img src='./loading.gif' />"
}
} );
} );
var oTable;
var header = $("meta[name='_csrf_header']").attr("content");
var token = $("meta[name='_csrf']").attr("content");
var contextPath = '${pageContext.request.contextPath}';
//显示所有表格
$(function() {
$('.date').datepicker();
$(document).ajaxSend(function(e, xhr, options) {
xhr.setRequestHeader(header, token);
});
productCategoryListData();
});
function productCategoryListData() {
if (typeof oTable == 'undefined') {
// dataTable load
oTable = $('#productCategoryList')
.dataTable(
{
'bPaginate' : true, // 翻页功能
'sServerMethod' : 'POST', // 提交方式
'bServerSide' : true,
'bProcessing' : true,
'bFilter' : false,
"bSort" : false,
'sAjaxSource' : contextPath + '/admin/product' +
'CategorynfoDataTable',//后端请求接口，返回数据是对象不是数组
"fnServerParams" : function(aoData) {
// 查询条件
aoData.push({
"name" : "name",
"value" : $('[name=name]').val().trim()
},{
"name" : "description",
"value" : $('[name=description]').val().trim()
});
//列的定义
},aoColumns : [{
'mData' : 'id',
'sTitle' : '<input type="checkbox" id="checkedAll" name="checkedAll" οnclick="checkedAll()">',
'sWidth' : '2%',
'mRender' : function(data){
var sRendor = '<input type="checkbox" name="ids" value="'+ data +'">';
return sRendor;
}
},{
'sTitle' : '幻灯片',
'sWidth' : '30%',
'mData' : 'name'
},{
'sTitle' : '描述',
'sWidth' : '35%',
'mData' : 'description'
},{
'sTitle' : '缩略图',
'sWidth' : '10%',
'mData' : function(data,
type, full) {
var returnValue = '<img src="${pageContext.request.contextPath}'+data+'" style="width:300px;height:150px">';
return returnValue;
}
},{
'sTitle' : '更新者',
'sWidth' : '10%',
'mData' : 'updateUserName'
},{
'sTitle' : '操作',
'mData' : 'id',
'sWidth' : '9%',
'mRender' : function(data) {
var returnValue = '<button id="update" class="btn btn-default btn-sm" οnclick="editProductCategory('+data+')"><i class="fa fa-pencil"></i>编辑</button>  '
+ '<button id="update" class="btn btn-default btn-sm" οnclick="delProductCategory('+data+')"><i class="fa fa-pencil"></i>删除</button>';
return returnValue;
}
}]
});
} else {
var oSettings = oTable.fnSettings();
oSettings._iDisplayLength = parseInt($(
'[name=productCategoryList_length] option:selected').val());
$('.dataTables_length select').val(
$('[name=productCategoryList_length] option:selected').val());
oSettings._iDisplayStart = 0;
oTable.fnDraw();
}
}
2.ueditor富文本编辑器
使用
<div class="form-group col-lg-12">
<label>内容</label>
<script id="container" type="text/plain"></script>
<!-- 配置文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/admin/js/ueditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="${pageContext.request.contextPath}/resources/admin/js/ueditor/ueditor.all.js"></script>
<!-- 实例化编辑器 -->
<script type="text/javascript">
var ue = UE.getEditor('container',{
autoWidth: true});
console.log(ue)
ue.ready(function() {
//将数据保存到本地
ue.setContent($("#content").val());
});
</script>
</div>
ueditor.config.js中做出如下配置：
实现上传图片的功能(上传附件、文件等同理)
大部分的需求，还是要上传图片或者附件的，甚至视频、其他文件，这里只以上传图片为例，第一是因为这个场景最常见，第二是因为其他的场景跟这个是一样的，只不过做不同的配置，让服务器端不同的处理方法去执行业务即可。
首先我们继续编写UEController.java，增加一个上传图片的处理方法：
/**
* 上传图片
* @param file 上传的图片
* @param request 请求体
* @return Map类型的响应结果
*/
@ResponseBody
@RequestMapping(value = "/images", method = RequestMethod.POST)
public Map<String, Object> images(@RequestParam(value = "imageFile", required = false) MultipartFile file, HttpServletRequest request) {
Map<String, Object> params = new HashMap<String, Object>();
if (file == null) {
System.out.println("文件为空，方法结束");
return null;
}
try {
//为了简便，这里上传到桌面上的static文件夹
String basePath = "C:\\Users\\Administrator\\Desktop\\static";
String ext = file.getOriginalFilename().substring(file.getOriginalFilename().lastIndexOf(".") + 1).toLowerCase();
String fileName = String.valueOf(System.currentTimeMillis()).concat("_").concat(String.valueOf(Math.random() * 1000) + 1000).concat(".").concat(ext);
StringBuilder sb = new StringBuilder();
//拼接保存路径
sb.append(basePath).append("\\").append(fileName);
String visitUrl = "http://localhost/ue/upload/" + fileName;
File f = new File(sb.toString());
if (!f.exists()) {
f.getParentFile().mkdirs();
}
OutputStream out = new FileOutputStream(f);
FileCopyUtils.copy(file.getInputStream(), out);
params.put("state", "SUCCESS");
params.put("url", visitUrl);
params.put("size", file.getSize());
params.put("original", fileName);
params.put("type", file.getContentType());
params.put("filename", file.getOriginalFilename());
} catch (Exception e) {
params.put("state", "ERROR");
e.printStackTrace();
}
return params;
}
ueditor.config.js，做出如下配置：
注意：这里有坑，网上有说直接配置在config.json的，有说两个都要配置的，但博主亲测之后，发现只需要在ueditor.config.js配置即可，config.json可以说压根儿就没什么卵用(当然不能删除)，官方文档说是config.json的优先级较低，但是我ueditor.config.js不配置，应该读取config.json啊？实际上配置config.json并不会有效。
$(function(){
//富文本编辑器
UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action){
if(action == 'action-image'){
return 'http://localhost/ueditor/images';
}else{
return this._bkGetActionUrl.call(this,action);
}
}
});
我们的文件夹写在了tomcat服务器外部，这也是我们经常做的做法，否则服务器目录会愈发臃肿，所以我们需要做一下虚拟路径的映射，在tomcat的server.xml中配置：
保存到数据库
function saveArticle(){
var saveVo={
};
saveVo.title=$("#title").val();
saveVo.category=$("#categoryId").val();
saveVo.content=ue.getContent();
$.ajax({
type: "POST",
url: "${pageContext.request.contextPath}/"+ur,
data: JSON.stringify(saveVo),
contentType:"application/json;charset=utf-8",
dataType: "json",
success: function(data){
showcommon(data);
}
});
}
3.qrcode 二维码插件
第一步：vue-cli下载插件
cnpm install --save qrcodejs2
第二步：组件中引入插件
<template>
<div>
<div id="qrcode"></div> <!-- 创建一个div，并设置id为qrcode -->
</div>
</template>
<script>
import QRCode from 'qrcodejs2' // 引入qrcode
export default {
name : 'test',
mounted () {
this.qrcode();
},
methods: {
qrcode() {
let qrcode = new QRCode('qrcode', {
width: 132,
height: 132,
text: 'https://127.0.0.1：id商品的id', // 二维码地址访问地址
})
},
}
}
</script>
四、前端打包发布
1、对当前vue项目进行打包的命令如下：npm run build
2、打包完成，会输出Build complete并且在vue项目中会生成一个名字为dist的打包文件。如下图：
3、修改dist 文件夹为项目名称: 比赛规定名称（本例中xxx为vue_demotest），将 xxx（本例中xxx为vue_demotest） 拷贝到运行的 tomcat 的 webapps 目录下，如下图：
访问该地址即可（比赛规定了端口号和IP地址）http://localhost:8080/xxx（本例中xxx为vue_demotest）
五、IDE 项目打包
1.首先选中项目名称，再点点击右上角的Projiect Structure,或者使用快捷键Ctrl+Alt+Shift+S
2.选中Artifacts，再点击右上方的+按钮，选中JAR下拉菜单点第二栏
3，在弹出的窗口中填写你的项目，项目启动类，复制依赖包等
然后一路点击ok，返回代码编辑后，左边的项目目录会出现一个名为：META-INF的文件夹，里面的文件，就是你的项目依赖的第三方包的路径
5. 选中项目，点击菜单栏的Build，在下拉菜单中选择Build Artficts… 然后在打开的工具栏中选择Build,编译器会自动开打包
，编译完成后，可再项目目录中看到classes -> artifaces 下有一个以你的项目名开始的 XXX_jar,打开后里面会有很多的.jar文件，其中有个是你的项目名的jar，表明打包已经完成，接下就是去启动它。
7.我们打开电脑的文件管理，找到你的项目所在盘符和路径，如图
8. 打开cmd窗口，切换路径到你的项目文件路劲下，我的是在D:\Java\intelworkspace\Photographys\classes\artifacts\photographys_jar
9.路径切换成功后使用 java -jar 你的项目名.jar,即可运行,当出现以下输出字符时，恭喜你的项目通过jar方式启动成功了！！！！！！！
在application.yml设置端口和访问路径
IDE 打war包
打开Project Structure窗口，可以点击工具栏中间那个按钮，也可以直接快捷键Shift+Ctrl+Alt+S 然后依次点击图中的选项
点击下图红色箭头所指+图标，选择Directory Content,添加你的WebRoot目录，然后点击OK
在主界面选择Build – Build Artifacts，找到刚才需要打包的项目名点击build
将war改成题目要求的文件名，拷贝到运行的 tomcat 的 webapps重新启动tomcat即可
2。使用maven Springboot中IDE支持两种打包方式，即jar包和war包
