基于区块链技术实现的学历信息征信系统 视图层实现

5.1 目录结构

在项目的web目录下新创建一个名为 static 的目录,用来存放Web应用视图层的所有静态内容

$ cd $GOPATH/src/github.com/kongyixueyuan.com/education
$ mkdir web/static

web/static目录下包括四个子目录,分别为:

  • web/static/css :用于存放控制页面布局及显示样式所需的 CSS 文件
  • web/static/js :用于存放编写的与用户交互的 JavaScript 源代码文件
  • web/static/images:用户存放页面显示所需的所有图片文件
  • web/static/photo:用于存储添加信息时上传的图片文件
$ mkdir -p web/static/css
$ mkdir -p web/static/images
$ mkdir -p web/static/js
$ mkdir -p web/static/photo

在项目的web目录下新创建一个名为 tpl 的目录,用来存放Web应用响应客户端的模板页面

$ mkdir web/tpl

在 web/tpl 目录下主要有如下页面:

  • login.html:用户登录页面
  • index.html:用户登录成功之后进入的首页面
  • help.html: 显示帮助信息及相关操作的链接页面
  • query.html:根据证书编号与姓名查询的页面
  • query2.html:根据身份证号码查询的页面
  • queryResult.html:根据不同的查询请求显示查询结果的页面
  • addEdu.html:添加信息的页面
  • modify.html:修改信息的页面

5.2 相关源码实现

相关源代码请参考:

CSS 部分:

web/static/css/addEdu.css

web/static/css/bootstrap.min.css

web/static/css/help.css

web/static/css/index.css

web/static/css/login.css

web/static/css/query.css

web/static/css/queryResult.css

web/static/css/reset.css

JavaScript 部分

web/static/js/bootstrap.min.js

web/static/js/jquery.min.js

HTML 页面模板部分:

web/tpl/addEdu.html

web/tpl/help.html

web/tpl/index.html

web/tpl/login.html

web/tpl/modify.html

web/tpl/query.html

web/tpl/query2.html

web/tpl/queryResult.html

5.3 照片上传

在添加信息时需要额外实现一个功能-添加照片

使用jQuery Ajax功能实现

HTML代码如下:

            <div class="headImg">
                <div class="uploadImg">
                    <input type="file" name="" value="上传照片" id="file">
                    +
                    <!-- <img src="./images/head.jpg" alt=""> -->
                    <img src="" alt="">
                </div>
                <p>请上传照片(120*160px)</p>
            </div>
          </div>

JavaScript代码如下:

         // 上传图片
        $('#file').unbind('change').bind('change',function() {
            event.stopPropagation();
            uploadFile('img');
            return;
        });
        // 头像图片
        var artImg;
        function uploadFile(type) {
            event.stopPropagation();
            let formData = new FormData();
            if( type == "img"){
                formData.append('file', $('#file')[0].files[0]);
            }
            $.ajax({
                url: '/upload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                dataType: "json",
                contentType: false
            }).done(function (res) {
                if (res.error == "0") {
                    if( type == "img"){
                        $('.uploadImg img').attr('src',res.result.path);
                        $('#photo').val(res.result.path)
                        return artImg = res.result.path;
                    }
                } else {
                    alert("上传失败!" + res.result.msg)
                }
            }).fail(function (res) { });
        }

在 web/controller 目录下创建一个 upload.go 文件

$ vim web/controller/upload.go

upload.go 文件主要利用 Ajax完成 照片传功能的,完整代码如下:

/**
  @Author : hanxiaodong
*/

package controller

import (
    "fmt"
    "net/http"
    "io/ioutil"
    "crypto/rand"
    "path/filepath"
    "os"
    "mime"
    "log"
)

func (app *Application) UploadFile(w http.ResponseWriter, r *http.Request)  {

    start := "{"
    content := ""
    end := "}"

    file, _, err := r.FormFile("file")
    if err != nil {
        content = "\"error\":1,\"result\":{\"msg\":\"指定了无效的文件\",\"path\":\"\"}"
        w.Write([]byte(start + content + end))
        return
    }
    defer file.Close()

    fileBytes, err := ioutil.ReadAll(file)
    if err != nil {
        content = "\"error\":1,\"result\":{\"msg\":\"无法读取文件内容\",\"path\":\"\"}"
        w.Write([]byte(start + content + end))
        return
    }

    filetype := http.DetectContentType(fileBytes)
    //log.Println("filetype = " + filetype)
    switch filetype {
    case "image/jpeg", "image/jpg":
    case "image/gif", "image/png":
    case "application/pdf":
        break
    default:
        content = "\"error\":1,\"result\":{\"msg\":\"文件类型错误\",\"path\":\"\"}"
        w.Write([]byte(start + content + end))
        return
    }

    fileName := randToken(12)    // 指定文件名
    fileEndings, err := mime.ExtensionsByType(filetype)    // 获取文件扩展名
    //log.Println("fileEndings = " + fileEndings[0])
    // 指定文件存储路径
    newPath := filepath.Join("web", "static", "photo", fileName + fileEndings[0])
    //fmt.Printf("FileType: %s, File: %s\n", filetype, newPath)

    newFile, err := os.Create(newPath)
    if err != nil {
        log.Println("创建文件失败:" + err.Error())
        content = "\"error\":1,\"result\":{\"msg\":\"创建文件失败\",\"path\":\"\"}"
        w.Write([]byte(start + content + end))
        return
    }
    defer newFile.Close()

    if _, err := newFile.Write(fileBytes); err != nil || newFile.Close() != nil {
        log.Println("写入文件失败:" + err.Error())
        content = "\"error\":1,\"result\":{\"msg\":\"保存文件内容失败\",\"path\":\"\"}"
        w.Write([]byte(start + content + end))
        return
    }

    path := "/static/photo/" + fileName + fileEndings[0]
    content = "\"error\":0,\"result\":{\"fileType\":\"image/png\",\"path\":\"" + path + "\",\"fileName\":\"ce73ac68d0d93de80d925b5a.png\"}"
    w.Write([]byte(start + content + end))
    return
}

func randToken(len int) string {
    b := make([]byte, len)
    rand.Read(b)
    return fmt.Sprintf("%x", b)
}

 

© 版权声明
THE END
喜欢就支持一下吧
点赞0
分享