Version1.0代码日志

本文主要介绍关于服务器,java,tomcat,html5,前端的知识点，对【Version 1.0 代码日志】和【2.5版本开发者日志】有兴趣的朋友可以看下由【scoutee】投稿的技术文章，希望该技术和经验能帮到你解决你所遇的【管理系统】相关技术问题。

2.5版本开发者日志

记录我们研一小分队的寒假任务——实验室zc管理系统的代码调试过程（后面要在教研室实际使用的，我们改完后的源码和数据库不方便分享）

我的视角以前端为主 夹杂一些java后端

源代码来源：cqutwangyu? ?他的github地址为：cqutwangyu (王渔) · GitHub

项目涉及技术与工具

前端：html、css、Javascript、jquery、ajax

后端：java、jdbc、servlet、org.json

数据库:mysql、Navicat for MySQL

IDE：IntelliJ IDEA、Visual Studio Code

---

Part1: 主要工作是调一下java的运行环境，在IDEA中配置并运行Tomcat。

1.第一步：在IDEA中配置并运行Tomcat

主要问题：报错1099

解决过程：一开始他们说IDEA professional版本自带了Tomcat，但实际运行下来我发现是没有的，一开始下载了Tomcat 10系列版本，但是有不知名bug，后来下载了Tomcat 9.0.56。这里需要注意一个问题，你的Tomcat一定要装在C:\Program Files\Java\jdk1.8.0_291（即和环境变量里面的JAVA_HOME同路径），否则IDEA应该会一直报1099（Application Server was not connected before run configuration stop, reason: Unable to ping server at localhost:1099）。

此外，注意一下上图中，我也单独加了一行JRE_HOME，据说Tomcat是需要这个路径的。

2.第二步：新建Web项目，使项目能正常运行在Tomcat服务器上

在装好Tomcat以后，后端报错信息变为：

D:\Idea_Project\StudentMS-master\out\artifacts\unnamed not found for the web module.

而且前端还会报错404找不到UserServlet。这里是因为没有配置Tomcat需要的artifacts。

步骤说明：

File——Project Structure——Artifacts

然后右击StudentMS，就配置好Artifacts了：

【补充】这里Artifacts的问题其实卡了挺久的，后来想起来要去查看Tomcat Localhost Log，一直在报错昨天自己引入的artifact的unnamed的地方,突然想起来当时不小心删除了StudentsMS:war?exploded,然后自己加了个unnamed…

所以一定要去看本地日志！！！（如下图）

然后Tomcat的配置：

Run——Edit Configurations

3.第三步：创建数据库，进入数据库，创建表。

这里因为我自己用MySQL还比较多的，没什么太多问题，唯一就是你要记得在MyDatabaseConnection下面把数据库的名字和密码改成自己的。（否则前端会报500）

数据库里边的表number是char类型?? 日期是data类型?? 其他都是varchar

另外就是老生常谈，如果你运行SQL文件报错，看报错日志！

至此，这个项目在其原有数据库基础上能跑出来了，前端显示：

登录界面：

登录后主界面：?

---

?Part2：改前端登录界面

1.一个特别小的，但是影响细节的问题：

为什么修改了后台的HTML代码，前端页面没变化？原因是没有清除网页缓存，清除网页缓存以后，刷新页面，页面就会显示变化。清除网页缓存快捷键Ctrl?+?Shift?+?Del。

2.介绍一下前端的功能组成：

这个系统在开发的时候是前后端分离的，前端的文件都放在web目录下面，其中sql文件下是数据库文件，可以忽略一下，前端的功能，按照语言实现来分是三个部分：HTML（框架）+CSS（样式设计）+JS（前后端功能交互）。

前端按照具体功能来分是两个部分：login（登录）+main（主界面）。

我这边在修改前端的时候，因为在等后端的调试，所以先对login做了修改，主要更改的地方包括：

login.html 中：

//这就是我们打开一个网页的时候显示在标签栏的内容

?

 

   
   

    无线楼实验室资产管理系统
   
 //登录框上面的文字也修改了 
 

? ?这里遇到一个问题，我本来想换字体的，然后font-family不生效：编辑器检查?css?错误的时候， 总是提示“font?property?font-family?does?not?have?generic?default”，编辑器是根据W3C标准来提示的，原来是因为没有定义?“generic-family”即?字体的所属风格。例如：serif，sans-serif，cursive。

? ?然后要改的就是：背景图片，一般开发页面都会用自己学校的logo或者学校的图片，我们教研室旁边有个三好亭，觉得用这个能体现我们是无线楼的特点，所以图片换了，前端所需图片都放在img文件夹下。

  
 
   

   

   

   
 
    
  

//这个子块下面 src就是给出背景图片的路径的

其实login.html没什么需要改的，因为这边主要改的是显示效果，根据前面所述，最主要改的就是login.css

login.css

首先第一个要改的就是：背景图片的位置。其实一般开发，不应该在前端改背景图片位置，一般是前端要多少分辨率的，那美工就做多少分辨率的图。（但是我们没美工哈哈哈）我们看下login.css

为了调位置，我改了top和left属性，调整的地方我一般都直接在代码里加了备注。调页边距的时候,此处margin-top失效。

/*设置背景图片的位置*/
.background_img{
    position: absolute;
    width: 98%;
    top: -0.7cm; /*top调负值是往上移动图片*/
    left: 0.15cm;
    z-index: -1; /*z-index 属性当元素发生覆盖的时候，哪个元素在上面，哪个元素在下面。通常来说，z-index 值较大的元素会覆盖较低的元素。*/
    opacity: 0;
    transition: opacity .8s ease;
}

Top和left属性的说明如图，改完页边距和图片后，前端大概就这样：

补充一下margin-top的属性设置

外边距(margin)

? ? ? ? ? ? ? ? -外边距不会影响盒子可见框的大小

? ? ? ? ? ? ? ? -但是外边距会影响盒子的位置

? ? ? ? ? ? ? ? -一共有四个方向的外边距（正值都是向反方向移动）

? ? ? ? ? ? ? ? ? ? margin-top 盒子上边和其他盒子的距离

? ? ? ? ? ? ? ? ? ? ? ? 上外边距 设置一个正值 元素会向下移动

? ? ? ? ? ? ? ? ? ? margin-right 盒子右边和其他盒子的距离

? ? ? ? ? ? ? ? ? ? ? ? 右外边距 设置一个正值 其右边的元素会向右移动

? ? ? ? ? ? ? ? ? ? margin-bottom 盒子下边和其他盒子的距离

? ? ? ? ? ? ? ? ? ? ? ? 下外边距 设置一个正值 其下边的元素会向下移动

? ? ? ? ? ? ? ? ? ? margin-left 盒子左边和其他盒子的距离

? ? ? ? ? ? ? ? ? ? ? ? 左外边距 设置一个正值 元素会向右移动

? ? ? ? ? ? ? ? -元素在页面中是按照自左向右的顺序排列的

? ? ? ? ? ? ? ? ? ? 所以默认情况下如果我们设置的是 ?左外边距 和 上外边距 则会移动元素自身

? ? ? ? ? ? ? ? ? ? 而设置下外边距和右外边距会移动其他元素 ? ? ?

然后是我觉得登录框有点小，背景白色有点太白，于是对那个白色大框框进行了修改，主要是调透明了，四个角变成圆角。

/*登录整个大方框*/
.login_body{
    position: relative;
    background-color:rgba(255,255,255,0.6);
    /*rgba(255,255,255,0.6)登录块的颜色设置成白色 透明度0.6*/
    width: 418px;
    height: 316px;
    left: 64%;
    top: 210px;
    border-radius:15px; /*    把矩形的四个角设置成圆角*/
    transform:scale(1.25,1.25);
    -webkit-transform:scale(1.25,1.25);
}

?（其实还试过加蓝色阴影的，有点太花里胡哨，弃了）

/*text-shadow: 0 0 30px #00d8ff; !*添加阴影效果*!*/

然后然后，我们知道一般你登录框都会有提示让输入用户名和密码的嘛，但是这个程序一开始是设计成，一打开界面就默认输入admin001及其密码，这显然很反人类，所以我改了。

首先是在login.js这里把这个功能注释掉了。

?然后在login.html里面加了两行这个

效果如图：

差不多整个改完就是这样。

输入账号密码：

登录进去是这样（此处为我们已经做好的1.0版本，但是在没改后端的时候，登录进去不会显示我们自己的数据库的）：

---

part3：改前后端交互

?为了要显示我们自己的数据库，必须要对后端的字段进行修改，而且我们不想单纯换内容不换字段，这样代码的可读性会下降，所以进行了字段的修改。对应关系如图：

这边一开始我们的变量对应关系做的很混乱，就有各种变量不对应情况下出现的bug和功能的无法实现，本系统的主要功能就是增删改查，第一遍改完，只有删和查能用，而且查里面的根据日期查也用不了，这里改了一天吧，一开始是不知道问题在哪，后来发现前端输入了东西但是后端拿到的是null,推测是字段不对应，知道问题后自查了一遍，改了一遍，还是不对。

这里是前后端一起在改，主要涉及的就是main.html和main.js，里面很多key值都要改，很考验耐心，哦对了，还有就是我们自建的数据库之前数据类型也不匹配，这里也改了。

其实这里，我前端问题比较多。（还好大家没怪我）

最后就一个个查，硬是找出哪里不匹配，然后调整了变量对应关系，总算是把修改的功能调好了，增加的功能也是同理，这里不赘述了，展示一下增删改查的功能。（这里还是用改完的1.0做演示，其实改完以后前端还有一些显示的bug，后面说）

添加功能：

?

?

删除功能（把刚刚这个删除了）：

修改功能：

我们以这一条为例，修改前

改完之后：

最后是查询功能：

以这个索引（索引的修改我略了，大概思路很简单）来看（演示两个）：

以资产名称搜索：

以时间搜索：

至此，主要功能都调出来啦~

?part4：前端显示bug调整

一个小tips：改这里的时候我发现，浏览器的检查功能真好用，你可以看到这个方块的属性，比如字号是14px，还有在哪个文件里，那你可以回到对应的文件里面去用Ctrl+F搜索这个属性，比如直接搜14px。

改完后端以后莫名其妙，登录框框变小了一大圈，采用利用CSS实现整体缩放：?

前端页面显示，文字靠左，不居中：

导航栏的html设置明显少了个?is-center

改完以后，导航栏正常了，具体文字还是不对：

?歪个楼，调这个bug期间发现了一些东西哈哈哈

在索引的下拉栏里面

然后关于文字居中的：

改完以后：已经居中了

还有就是，之前的弹窗有问题，三个带星号的显示有问题，改了对应位置的font-size：

大概1.0版本就是这样啦~

---

part5：我同门补充的一些问题

1.navicat连接SQL8.0时，报错caching_sha2_password,是由于SQL8版本之后加密规则改变了，通过将加密规则修改为mysql_native_password解决。

其中abc123是自己数据库的密码

2.SQL文件无法正确读取，查询多少次就报错多少次，是由于navicat连接MYSQL时的编码规则与我们运行SQL文件时的编码规则没有保持一致为65001 (UTF-8)

3.在src-util中后端与数据库连接，改为我们导入的表，修改用户名密码与当前电脑上的数据库相对应。

4.一开始在修改对应的字段时，前端后端数据库只简单确定了中文字段对应的英文名称，前后端修改的字段对应不上，而且和导入的数据库对应的规则也不一致，导致后来不断的返工，浪费了时间。

5. 在下载tomcat时，发现下载10.0版本之后，配置好了环境，而与数据库之间的连接却没有响应，在更换为9.0版本后，成功登录进了系统，可能是最新的版本不稳定，导致与IDEA等等有不兼容的问题。

---

part6：一些碎碎念

其实是改了好几版的，14号开会的时候我导表示没想到我们第一版改的很好。然后还给w老师演示了一遍，问了致命问题是不是现成的，我说框架是，这个框架是很普遍的，我导好像也没期待我们自己搭框架。

当然，第一版离实际使用还有一定距离，老师们也提出了一些修改意见：

1.最好就是，普通用户登录之后，只能看到自己使用的，和自己管理的资产。然后普通用户可以去提交自己名下，自己管理的东西的修改要求，管理员这一侧要能够审核这些请求，还有就是管理员要能够改谁管理，谁使用的权限。（大概我们觉得是加一个标签字段，通过0/1来判断是管理员/普通用户，然后就跳到不同的页面）。

2.注册功能，要能够先点注册，跳出弹框，再注册。（贴近实际系统）。

3.增加一个索引部分的 ? “全部”功能 ? 点击会返回到全部（这样就不用刷新）。

4.索引的时候，查询到无的话 ?应该有一个弹窗并且清空上次查询。

本文《Version 1.0 代码日志》版权归scoutee所有，引用Version 1.0 代码日志需遵循CC 4.0 BY-SA版权协议。