前端：Layui（第一次接触并使用html）
后端：SSM
管理工具：maven
设计前提：场车是在一个工厂内部行驶缓慢，轨迹不定，数据每30S发送一次，
监控功能重述
对应六张表：fact_user、fact_car、fact_driver、fact_gps、fact_car_road、fact_gps_data
做的过程中发现Layui需要传输如下四个参数：
1.code ：设置为0
2.msg：设置为空
3.count：数据总数
4.data：需要传输的数据
这里对这个格式进行了封装处理：
注：这里的封装其实可以更加简化，但是后期系统已经完成了才发现，就没有去修改了
private UserService userService;
private CarService carService;
private DriverService driverService;
private GpsService gpsService;
private static LayuiJsonUtils layuiJsonUtils;
@Autowired
public void setUserService(UserService userService) {
this.userService = userService;
}
@Autowired
public void setCarService(CarService carService) {
this.carService = carService;
}
@Autowired
public void setDriverService(DriverService driverService) {
this.driverService = driverService;
}
@Autowired
public void setGpsService(GpsService gpsService) {
this.gpsService = gpsService;
}
//这里是一个工具类，所以一定要使用这个格式，调用的时候也要通过Spring实现
@PostConstruct
public void init() {
layuiJsonUtils = this;
layuiJsonUtils.userService= this.userService;
layuiJsonUtils.carService= this.carService;
layuiJsonUtils.driverService= this.driverService;
layuiJsonUtils.gpsService= this.gpsService;
}
//UserCount
public static Map getUserJson(Object object,Map newMap){
Map map = new HashMap();
map.put("code",0);
map.put("msg","");
map.put("count",layuiJsonUtils.userService.getUserCount(newMap));
map.put("data",object);
return map;
}
//CarCount
public static Map getCarJson(Object object,Map newMap){
Map map = new HashMap();
map.put("code",0);
map.put("msg","");
map.put("count",layuiJsonUtils.carService.getCarCount(newMap));
map.put("data",object);
return map;
}
//CarRoadCount
public static Map getCarRoadJson(Object object,Map newMap){
Map map = new HashMap();
map.put("code",0);
map.put("msg","");
map.put("count",layuiJsonUtils.carService.getCarRoadCountById(newMap));
map.put("data",object);
return map;
}
//DriverCount
public static Map getDriverJson(Object object,Map newMap){
Map map = new HashMap();
map.put("code",0);
map.put("msg","");
map.put("count",layuiJsonUtils.driverService.getDriverCount(newMap));
map.put("data",object);
return map;
}
//GpsCount
public static Map getGpsJson(Object object,Map newMap){
Map map = new HashMap();
map.put("code",0);
map.put("msg","");
map.put("count",layuiJsonUtils.gpsService.getGpsCount(newMap));
map.put("data",object);
return map;
}
如下三个问题：
1.一对多查询时可以只查询需要的部分就可以了
2.修改使用动态sql时，假如本身数据为空，是无法修改的，这里还没有想到解决方案，只能去掉动态sql
3.当进行多种属性可选或者同时查询时，假设部分属性为下拉框这种固定属性，也要设置为模糊查询，否则无法查询，原因不明，代码如下：
<resultMap id="userRoleName" type="User">
<result property="userRoleName" column="roleName"></result>
</resultMap>
<select id="getLikeUser" resultMap="userRoleName" parameterType="Map"> select u.*,r.roleName from fact_user u inner join fact_role r on u.rid = r.id <where> <if test="username != null and username != ‘‘ "> username like "%"#{username}"%" </if> <if test="gender != null "> and gender like "%"#{gender}"%" </if> <if test="userCode != null and userCode != ‘‘ "> and userCode like "%"#{userCode}"%" </if> <if test="rid != null"> and rid like "%"#{rid}"%" </if> </where> order by u.create_time desc limit #{page},#{pageSize} </select>
当使用了success：function 时 Controller层一定要有一个返回值，这个值仅仅作为json数据返回，可以用来做判断等，这个数据只在该函数内有效。意思就是此时的Controller已经完全不依赖于视图解析器，由前端实现页面跳转，后端只负责提供接口传递数据。
第一次使用前端框架，慢慢罗列
这里主要用来查询数据表格，通过绑定一个搜索按钮，然后加载数据。（注：因为查询之后数据的总数是会变动的，所以count在传输时，sql语句需要连带模糊搜索一起写上）
这里用来传输给后台数据的是where（该where可以用在数据表格中，不仅仅是重载）：
// 监听搜索操作 form.on(‘submit(data-search-btn)‘, function (data) { // data.field;可以直接拿到文本框的所有数据，以键值对的形式存在
// 这里通过Jquery拿的数据
var username1 = $("#username").val(); var gender1 = $("#gender").val(); var userCode = $("#userCode").val(); var rid = $("#rid").val(); //执行搜索重载 table.reload(‘currentTableId‘, { page: { curr: 1, }, where: {
//左边为后端接收的数据名称，右边为前端数据的名称 username: username1, gender: gender1, userCode: userCode, rid: rid } });
//Layui设置表单的脚本文件，这个return false一定要加，否则执行失败 return false; });
这里遇到的问题也比较多，首先是查看，因为Layui的数据表格是不支持以列展示的（就是一列列名，对应一列数据，说不定也可以，反正我没找到，也不会去编写），于是只能用jquery自己拼接html。
这里有一个Layui非常重要的代码，就是Layui父子页面经常会有交互，所以数据的传递是一个大问题。代码如下：
//从父层获取值，json是父层的全局js变量。eval是将该string类型的json串变为标准的json串。这里tableData是传递的当前行的数据 var tableData = eval(‘(‘ + parent.json + ‘)‘);
当然也可以给页面一个隐藏的文本框，然后进行数据取值（做修改个人登录信息的时候用到了这点）
<input type="hidden" id="id" name="id" value="" class="layui-input"> <input type="hidden" id="id_password" name="id_password" value="" class="layui-input">
然后就是用到了一些其他技术例如密码明文显示(当时从网页上找的，具体来源已经不明）
<i id="iconShowView" class="layui-icon layui-icon-face-smile" style="color: lawngreen;"></i> <i id="iconHiddenView" class="layui-icon layui-icon-face-cry" style="color: orangered;" hidden></i> <tip>密码明文</tip> <script> //密码明文显示 var password = $("#password"); $("#iconShowView").on(‘click‘, function(e){ password[0].type = "text"; $("#iconShowView")[0].hidden = true; $("#iconHiddenView")[0].hidden = false; form.render(); }); $("#iconHiddenView").on(‘click‘, function(e){ password[0].type = "password"; $("#iconShowView")[0].hidden = false; $("#iconHiddenView")[0].hidden = true; form.render(); }); </script>
这个问题还没有解决，但是明明在配置文件中配置了，确依然无法生效，假如使用Java代码可以解决，但这无疑增加了程序复杂性；
<settings> <!-- 开启驼峰命名自动映射从经典数据库列名 A_COLUMN 映射到经典 Java 属性名aColumn-->
<setting name="mapUnderscoreToCamelCase" value="ture"/> </settings>
Java代码
//公共工具类 package com.ameng.utils; import org.apache.ibatis.io.Resources; import org.apache.ibatis.session.SqlSession; import org.apache.ibatis.session.SqlSessionFactory; import org.apache.ibatis.session.SqlSessionFactoryBuilder; import java.io.IOException; import java.io.InputStream; public class MybatisUtils { private static SqlSessionFactory sqlSessionFactory; static { try { String resource = "mybatis-config.xml"; InputStream inputStream = Resources.getResourceAsStream(resource); sqlSessionFactory = new SqlSessionFactoryBuilder().build(inputStream); } catch (IOException e) { e.printStackTrace(); } } public static SqlSession getSqlSession(){ //驼峰映射，由于配置文件失效，在此配置 //<!--开启驼峰命名自动映射从经典数据库列名 A_COLUMN 映射到经典 Java 属性名 aColumn--> //<setting name="mapUnderscoreToCamelCase" value="ture"/> sqlSessionFactory.getConfiguration().setMapUnderscoreToCamelCase(true); return sqlSessionFactory.openSession(true); }
做测试之前请一定要关闭并清除浏览器缓存！关闭并清除浏览器缓存！关闭并清除浏览器缓存！
重要的事情说3遍。因为这个一直以为是我的代码的问题。
1.放行所有的静态资源和你需要放行的请求，例如png，js之类的
<!-- 排除一些文件|不拦截一些文件 --> <mvc:exclude-mapping path="/**/*.css"/> <mvc:exclude-mapping path="/**/*.js"/> <mvc:exclude-mapping path="/**/*.png"/> <mvc:exclude-mapping path="/**/*.jpg"/> <mvc:exclude-mapping path="/**/*.tff"/> <mvc:exclude-mapping path="/**/*.woff"/> <mvc:exclude-mapping path="/**/*.woff2"/> <mvc:exclude-mapping path="/**/*.json"/> <mvc:exclude-mapping path="/**/*.ico"/> <mvc:exclude-mapping path="/index.html"/> <mvc:exclude-mapping path="/page/temp.html"/> <mvc:exclude-mapping path="/nowYear"/> <mvc:exclude-mapping path="/login"/> <mvc:exclude-mapping path="/getVerifyCode"/> <mvc:exclude-mapping path="/getCode"/>
2.验证的配置就不说了，只需要一个登录存入session，登出session过期
3.这里主要是配置拦截器的代码，可以通过打印请求地址来判断哪些请求是否被拦截或放行，假如不是则重定向到404页面，而不是登录页面，需要用户手动到登录页面
package com.ameng.config; import com.ameng.pojo.User; import com.ameng.utils.Constants; import org.springframework.web.servlet.HandlerInterceptor; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import javax.servlet.http.HttpSession; public class MyInterceptor implements HandlerInterceptor { public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { /* System.out.println("uri: " + request.getRequestURI()); System.out.println("Referer:" + request.getHeader("Referer"));*/ HttpSession session = request.getSession(); User user = (User) session.getAttribute(Constants.USER_SESSION); // System.out.println(user); // 如果用户已登陆也放行 if(null != user) { return true; } response.sendRedirect("/page/temp.html"); return false; } }
验证码部分已经写在另一个地方了（点击跳转）
1.所有的地图加载要写在ajax请求内部，因为要用到后端的数据；
2.所有的经纬度数据都是数组，一组是一维数组，多组是二维数组；解决方案：
var latitude = new Array(data.length); var longitude = new Array(data.length); var gps = new Array(); for (let i = 0; i < data.length; i++) { longitude[i] = data[i].longitude; latitude[i] = data[i].latitude; } for (let i = 0; i < data.length; i++) { gps[i] = new Array(); for (let j = 0; j < 2; j++) { if (j == 0) { gps[i][j] = longitude[i]; } else { gps[i][j] = latitude[i]; } } }
3.高德地图是火星坐标，官方也提供了转换函数，但是该代码不能用作全局变量，感觉局限性很大，所以用到了坐标转换工具类（这里不提供代码了，大佬写的，百度即可）
附官方函数:
AMap.convertFrom(gps, ‘gps‘, function (status, result) { if (result.info === ‘ok‘) { var lnglats = result.locations; // Array.<LngLat> } })
转换后的坐标
var start = coordtransform.wgs84togcj02(data[0].longitude, data[0].latitude); var end = coordtransform.wgs84togcj02(data[data.length - 1].longitude, data[data.length - 1].latitude);
原文：https://www.cnblogs.com/amengsama/p/14761696.html