考试系统full-stack总结

水深无声 2022-06-04 01:43 225阅读 0赞

#### 前言：女友因为担任班上学委，学校要求进行以读书为主题开展相关的活动。她就找到我，让我给她做一个考试管理系统，自己花了大概一天时间完成了，偷偷告诉她我做了两周，哈哈。尽管这个考试系统比较小，但也算是麻雀虽小，五脏俱全了。因为最近沉迷于vue-element无法自拔，所以该项目仍然是采用vue进行前端代码的编写。自己已经放在了GitHub上面，感兴趣的读者可以去看看源码。 ####

### 源码地址 ###

如何想要登录玩一下，登录账号在GitHub上已经给出  
***[GitHub][]***

### 项目需求 ###

1.  用户通过姓名和学号进行登录
2.  实时获取答案
3.  在规定时间内完成题目并上传成绩

### 网站性能 ###

![这里写图片描述][SouthEast]  
说实话，看到这个数据，心里还是很开心的（嘿嘿），如果还不知道如何测试网站性能的读者，可以看我的另外一篇博客***[如何测试网站性能][Link 1]***

### 成果展示 ###

![这里写图片描述][SouthEast 1]  
  
  
![这里写图片描述][SouthEast 2]

### 前端 ###

#### bundle.js文件的压缩 ####

这次前端最大的收获就是对于bundle.js文件的压缩，自己通过一些列操作将bundle.js压缩了差不多8倍，先放几张自己图片  
  
没有任何处理的bundle.js  
  
![这里写图片描述][SouthEast 3]  
  
  
使用webpack自带的UglifyJsPlugin以后

new webpack.optimize.UglifyJsPlugin({ compress: { warnings: false }
    })

![这里写图片描述][SouthEast 4]  
  
  
服务器开启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>

![这里写图片描述][SouthEast 5]  
  
自己通过两部操作，从1.75到发送给客户端只有208k。

#### vue-resource的坑 ####

这是自己第一个采用这个插件进行数据请求，之前不是直接通过ajax请求，就是通过es6中的promise。这个插件最大的问题就是不能够携带cookie进行请求，导致我处理登录操作的时候不能够通过生成cookie的方式，最后采用了localStorage进行处理。关于localStorage不太了解的读者，可以看我另外的一篇博客***[HTML5的存储功能][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即可  
  
![这里写图片描述][SouthEast 6]

### 总结 ###

之前给公司做的一个项目有空也拿来总结一下，自己很满足现在的状态，每一个小的项目完成以后总能够收到到不少的东西，也许一段时间以后看待这个项目觉得很菜，但是这是自己曾经走过的路，总是值得记录的。

[GitHub]: https://github.com/deng1234/webpack-vuel
[SouthEast]: /images/20220604/e441256c3043466ca176f3f8a964a33c.png
[Link 1]: http://blog.csdn.net/m0_37568521/article/details/78510723
[SouthEast 1]: /images/20220604/36625fb398034374be2cf648cb790010.png
[SouthEast 2]: /images/20220604/39689f239f6049f4bac76f26e2935b78.png
[SouthEast 3]: /images/20220604/13842b96ae7a468496c6cb830691ed34.png
[SouthEast 4]: /images/20220604/460d5d94f5fc40c5950e39fc1375254d.png
[SouthEast 5]: /images/20220604/f1083250ff6348f2ba014fd7b8e346ef.png
[HTML5]: http://blog.csdn.net/m0_37568521/article/details/75193680
[SouthEast 6]: /images/20220604/d27234ad72e54515ba0ef25fd8d63330.png