我胡汉三又回来了！ 前段时间在写一个小系统，边学边写，感觉自己又变强壮了，想必带哥们也看不上代码就不放链接了，是一个管理系统还有数据库，纯手打，用html+css+js+jquery+ajax写的，js代码，html，css很多没分开，原因下面讲到了，数据库使用了C3P0操作，后面细说，还用了一点点（真一点点）vue的操作，算是对这一个阶段成果的总结，期间也遇到了不少问题，但面向百度编程，最终都是解决了，接下来会将遇到的问题以及解决都写来了，主要是自己回顾复习用。 还用css+html+一点点js写的模仿京东首页的html，没啥东西就放个效果图， 基本布局都差不多，弹框轮播倒计时什么功能都具备，但我的轮播用的办法很诡异，肯定有更好的，但精力问题就先放一放。这一次让我对网页的布局有了更加清楚的认识，谷歌控制台看网页的能力也upup! 我这里的图片都是自己导入的，我看京东的页面都是获取的，刚好现阶段在学习vue，我看整个页面可以风好多个组件，很多其实都可以进行组件的复用，内容图片用ajax（我不知道有啥更好的方法，我现在就会这个）读取，肯定不会更新都重写整个页面，那效率也太低了。 其中我还用到了小图标，用的时候不是单单复制class就完事了，还要加个iconfont，我还寻思着我为啥一直显示不出来~~~其他的基本都没啥大问题，布局这个说难不难，说简单不简单，差不多。
！！！重点来喽，时间有点凌乱，我就从我的制作顺序开始.
1.展示页面。 公司名字一看就很有前途 我在这里写了个定时器，3S自动跳转，或者监听到鼠标点击就自动跳转到登陆界面，没啥东西。 2.登录界面 好想把上面那个背景音乐的样子变帅 本来想把按钮做成流光的样子，但觉得这次主要是用来熟悉逻辑的，就没写。帅帅的多好看啊 之后是用户名，我写了管理员和普通用户，分了两张表，根据那个框被选中分别查询，用jquery封装的ajax，分别进行判定，管理员和普通用户登录成功的进入的界面各不相同，毕竟管理权限大过天 我在写背景图片时发现卸载一个div里我的样式居中会失效，具体啥原因我记不清了，总是我那张写法的背景图片会让剧中样式白给，于是我选择在最外面写一个div的图片relative，然后表单居中就OK了。 3.数据库 上面登录界面说到查询，还是先说完吧，我用了C3P0操作数据库，但我感觉还没最原始的快，可能我处理的数据太少了没感觉？我在其中分为了dao层，Service,utils,domain和 servlet， 并且我给用户，员工，工资，分别定义了一个接口，在继承接口重写方法，可靠！具体的操作就不多说了，我这个小菜比也8敢说话，我吧遇到的几个问题记录下， 首先就是c3p0的导入使用，我百度了好久，都没有像样的教程，估计是我太菜了，呜呜呜。我就说说我的，首先下载需要用到的c3p0的两个jar包，（百度的到我就不放了）导入到你的项目中，然后在c3p0-config.xml写好配置， （不是全部）`
<default-config> <property name="driverClass">com.mysql.cj.jdbc.Driver</property> <property name="jdbcUrl">jdbc:mysql://localhost:3306/test?serverTimezone=GMT%2B8&useSSL=false</property> <property name="user">root</property> <property name="password">root</property> <property name="initialPoolSize">10</property> <property name="maxIdleTime">30</property> <property name="maxPoolSize">100</property> <property name="minPoolSize">10</property> <property name="maxStatements">200</property> </default-config>一定要吧这个放在src目录下！其实还可以多写几个连接配置，但具体我就不深入了，驱动，url,账号密码写清楚，其他都默认就行了， 然后在utils中写好工具类，我也是百度到的：
package utils; import com.mchange.v2.c3p0.ComboPooledDataSource; import javax.sql.DataSource; import java.sql.Connection; import java.sql.ResultSet; import java.sql.SQLException; import java.sql.Statement; /** * c3p0工具类（数据库连接池工具），用于管理多个数据库连接对象。 */ public class C3POUtilsXML { private static ComboPooledDataSource ds = null; static { // 新建数据库连接池，注意这里的参数必须同c3p0-config.xml中的named-config标签中的name的值相同 // 如果不写，则默认调用default-config ds = new ComboPooledDataSource(); } public static DataSource getDataSource() { return ds; } /** * 得到数据库连接对象 * @return */ public static Connection getConnection() { Connection conn; try { conn = ds.getConnection(); return conn; } catch (SQLException e) { throw new RuntimeException("服务器忙"); } } /** * 关闭所有资源连接 * @param conn * @param ps * @param rs */ public static void close(Connection conn, Statement ps, ResultSet rs) { if (conn != null) { try { conn.close(); } catch (SQLException e) { e.printStackTrace(); } conn = null; } if (ps != null) { try { ps.close(); } catch (SQLException e) { e.printStackTrace(); } ps = null; } if (rs != null) { try { rs.close(); } catch (SQLException e) { e.printStackTrace(); } rs = null; } } }之后就可以用啦！ 还有非常经典的路径问题，我ajax的url刚开始真的一头雾水，现在想想，就这？servlet中写上：
@WebServlet(urlPatterns = "/updataWage")然后url已服务器为root向下找，我用的是tomcat，我自己还加了一层，所以写成“/_war_exploded/updataWage”,找不到就运行看看浏览器的地址栏再改改，就这东西折磨了我快一天，头晕。 还有经典的乱码问题，我是用了filter重写了doFilter，拦截所有页面，将传输的文件这样一下再放行就好了。 servletRequest.setCharacterEncoding(“utf-8”); servletResponse.setContentType(“text/html;charset=utf-8”); 我一开始的时候这样写没有问题，但后来我吧css和js用link引入的时候发现路径一定没问题，但就是引用不了，所以我接下来页面开发的时候就把html，css和js写在了一起，后来问题解决了但意思达到了就不想去分离了，不如抓紧时间看vue的学习视频。看报错害提示404，一开始我百度的结果我是吧!DOCTYPE html 头标签去除让他变成怪异浏览器，结果是能读取，但不是良策，又是研究了好久，后来一个晚上我灵光乍现，难道是过滤器的问题，我鬼使神差的停止了服务器，在本地上跑没有问题，我没理由的怀疑越来越重，自学是真的痛苦，我觉得这个问题现在想想也很简单，你放服务器上跑，也抽象成输入输出，你的css，js编码都错了，肯定不能一般性编译，经过百度后我在filter加了限制条件
HttpServletRequest httpServletRequest = (HttpServletRequest) servletRequest; String servletPath = httpServletRequest.getServletPath(); //获取客户端所请求的脚本文件的文件路径 //不过滤处理登录页面、JS和CSS文件 if (!servletPath.endsWith(".js") && !servletPath.endsWith(".css")) { // //省略校验代码... servletRequest.setCharacterEncoding("utf-8"); servletResponse.setContentType("text/html;charset=utf-8"); // filterChain.doFilter(servletRequest,servletResponse); } // 传递给下一过滤器 filterChain.doFilter(servletRequest,servletResponse);问题成功解决！那个晚上我要不是怕吵到室友我都想高歌一曲，太爽了。说道中文乱码我最后收尾的时候还碰到一个问题，你从servlet定位到一个网页你需要在地址中拼接中文，但你传递的时候中文变成了乱码，过滤器不好使因为你不是信息，最后我百度出来非常简单，你只要在你拼接的中文前加上URLEncoder.encode(ename, “UTF-8”)就可以了，路径就可以附带中文。 当时写的时候我还有一个困惑，是不是一次ajax只能运行一次sql语句，因为要求我一直都只用实现一次sql语句就行了，所以我一直以为只能写一个，即运行dao方法时dao只有一个QueryRunner update或者query，以至于我有一个写了三个请求来验证这个用户能否被创建。。后来越写越觉得不对，我就感觉一个方法写三个请求，竟然真的可以。。。感觉自己太失败了，，，然后好像真没啥大问题了，想起来再来补充。 4.注册页面 也没啥东西，写了个请求不允许注册员工编号重复的人，然后form提交注册，本来想用自动校验的一个插件的，嫌麻烦就没用，验证码是想实现来着，但其实就是一个方法自动挑选几个字符，然后吧字符存入数组与用户输入的比较，感觉没啥东西，就没写。注册成功返回登录界面，失败会提示。 5.所有员工信息：
单个员工和这个样式一样，但是不能添加不能操作，而且只有自己的信息，只能查看自己的工资详情，我在这里也用了个图片过场，因为怕数据太多加载不出来，一片空白影响用户体验，这里写个时候我遇到了一个问题，就是当你把浏览器缩小的时候，由于我的操作都是a标签，添加啊 工资明细什么的，所以缩小的时候他们会皱成一坨，非常丑陋，有点久了，我忘了我有没有试过固定表格宽度了，总之缩小浏览器后表格跟着缩小非常难看，我最后岁在body里写了一个div永安里存在这个蓝天背景，固定宽高把浏览器撑住，不让表格塌下来，这样缩放浏览器表格不会跟着缩放，就不会变难看了！ 虽然这是电脑端的，但我万一要做移动开发的话我这个该怎么移动到手机上呢？必定会缩放，我感觉我要重写表，这个样式写出来绝对是白给。 6.添加新员工 也做了验证，不让编号重复，没有的部门，重复的工资编号，考勤编号读入，写了的话会有提示，这里也没啥问题，或者问题太小我都不记得了= = ，注册成功有提示并返回员工展示界面。 7.删除就不看了，看下修改吧 其实摸清了以后这些东西写起来真没啥东西，都是一个样子，修改员工信息和修改我之后写的修改工资信息都差不多，都是默认值写上，不让修改存在的编号，没有的部门，会有提示，样式啥的凑凑活活。 8.工资详情
长得和单人员工信息表差不多，单人的工资表没有修改工资操作，用的是a标签传递，字符串拼接了下url，还有延迟动画，我好像很多都写了一点延迟动画，就怕加载不出来= = ， 9.修改工资 默认赋值，我这里只允许修改基础，三个天数和实际，用vue绑定了这几个值，实际工资的值会根据前面四个数据自动算出，（所以说真的只有一点点vue）。 10.验证系统 本来不想写的，但感觉有必要用一用Validation Plugin这个插件就写了写，效果图如下 这部分也就没啥要讲的，主要就是忘了怎么用这个插件还有自定义方法和正则表达式的复习。
差不多就这些，现在看看其实真不难，但是当时毫无头绪让我一点点搭建起来真的要了我的老命QAQ，特别是没有参考，让我遇到问题自己百度，大部分时间真的浪费在如何处理问题上了，适度浪费完全可以提升自己，又锻炼了查询能力又锻炼了解决问题的能力，我本来都看不懂控制台现在觉得自己入门了都， 从本来的啥也不会到现在感觉自己至少能写一点东西，这种成就感不言而喻，写完这个以后我觉得jquery html ajax css等部分可以说差不多告一个段落了，下面就是ES6和vue的学习，之后还有时间的话可能会用vue重构一下整个项目，又能加深vue理解又能看看自己现在是有多么菜！我也要开始找点实习，更快提升自己，冲冲冲！！！
