考试系统full-stack总结
前言：女友因为担任班上学委，学校要求进行以读书为主题开展相关的活动。她就找到我，让我给她做一个考试管理系统，自己花了大概一天时间完成了，偷偷告诉她我做了两周，哈哈。尽管这个考试系统比较小，但也算是麻雀虽小，五脏俱全了。因为最近沉迷于vue-element无法自拔，所以该项目仍然是采用vue进行前端代码的编写。自己已经放在了GitHub上面，感兴趣的读者可以去看看源码。
源码地址
如何想要登录玩一下，登录账号在GitHub上已经给出
GitHub
项目需求
- 用户通过姓名和学号进行登录
- 实时获取答案
- 在规定时间内完成题目并上传成绩
网站性能
说实话，看到这个数据，心里还是很开心的（嘿嘿），如果还不知道如何测试网站性能的读者，可以看我的另外一篇博客如何测试网站性能
成果展示
前端
bundle.js文件的压缩
这次前端最大的收获就是对于bundle.js文件的压缩，自己通过一些列操作将bundle.js压缩了差不多8倍，先放几张自己图片
没有任何处理的bundle.js
使用webpack自带的UglifyJsPlugin以后
new webpack.optimize.UglifyJsPlugin({
compress: {
warnings: false
}
})
服务器开启gzip以后
修改httpd.conf，去掉下面代码的前面注释（#），一般第一个和二个是默认没注释的，第三个需要取消注释（删除#）
LoadModule headers_module modules/mod_headers.so
LoadModule deflate_module modules/mod_deflate.so
LoadModule filter_module modules/mod_filter.so在http.conf末尾增加代码（下面代码我也是抄的，就不多做解释）
<ifmodule mod_deflate.c>
DeflateCompressionLevel 6
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/php
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/atom_xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/x-httpd-php
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/gif image/png image/jpe image/swf image/jpeg image/bmp
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI .(?:html|htm)$ no-gzip dont-varySetEnvIfNoCase
#SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
</ifmodule>
自己通过两部操作，从1.75到发送给客户端只有208k。
vue-resource的坑
这是自己第一个采用这个插件进行数据请求，之前不是直接通过ajax请求，就是通过es6中的promise。这个插件最大的问题就是不能够携带cookie进行请求，导致我处理登录操作的时候不能够通过生成cookie的方式，最后采用了localStorage进行处理。关于localStorage不太了解的读者，可以看我另外的一篇博客HTML5的存储功能
后台
其实这个收获最大的应该就是后台了，通过这个小项目，自己对后台的安全问题和结构都有了一个更进一步的认识和了解。
防止SQL注入
在Java中，我们都知道如何要防止SQL注入需要preparestatement，在php中，我们要使用PDO，这个不多说，放一个数据库连接类的代码
$dbms='mysql'; //数据库类型
$host='localhost'; //数据库主机名
$dbName='Exam'; //使用的数据库
$user='root'; //数据库连接用户名
$pass='root.'; //对应的密码
$dsn="$dbms:host=$host;dbname=$dbName";
try {
//初始化一个PDO对象
$con = new PDO($dsn, $user, $pass);
//注意这里一定要注意设置字符集编码，否则不能够插入中文
$con->query("SET NAMES utf8");
} catch (PDOException $e) {
die ("Error!: " . $e->getMessage() . "<br/>");
}
return $con;在登录的时候，我们看看如何通过防止SQL注入的，下面是我的登录方法
public function Login($username, $studentid) {
$sql = "SELECT userid, finish FROM `Users` WHERE `username`=:username AND `studentid`=:studentid ";
$pst = $this->con->prepare($sql);
$pst->bindParam(":username", $username);
$pst->bindParam(":studentid", $studentid);
$pst->execute();
$result = $pst->fetch(PDO::FETCH_ASSOC);
if(empty($result)) {
throw new Exception(ErrorMsg::LOGIN_ERROR);
}
//已经完成考试
if($result['finish'] == 1) {
throw new Exception(ErrorMsg::FINISH_EXAM);
}
return $result['userid'];
}性能优化
通过性能测试，可以看到整个项目性能是很不错的，很感谢那个网站，告诉自己应该如何去优化，这次优化是通过开启Keep-alive，为什么要开启，网上找一个文章看一下就知道了。
修改htttpd.conf，将下面的off修改为on即可
总结
之前给公司做的一个项目有空也拿来总结一下，自己很满足现在的状态，每一个小的项目完成以后总能够收到到不少的东西，也许一段时间以后看待这个项目觉得很菜，但是这是自己曾经走过的路，总是值得记录的。