vue实现教改系统的相关需求实现（前端）

注意：本项目前端页面基于Vue.js框架编写，后端服务基于Spring Boot框架编写。
传送门：vue实现教改系统的相关需求实现（后端）

1.设置与获取cookie

  • 第一步、定义 cookie 处理函数
// 生成cookie
// 设置过期时间以秒为单位
setCookie(c_name,value,expireseconds){
    var exdate=new Date()
    exdate.setTime(exdate.getTime()+expireseconds * 1000)
    document.cookie=c_name+ "=" +escape(value)+
        ((expireseconds==null) ? "" : ";expires="+exdate.toGMTString())
 }

getCookie(userName){
    if (document.cookie.length>0){
        var c_start=document.cookie.indexOf(userName+ "=")
        if (c_start!=-1){
            c_start=c_start + userName.length+1
            var c_end=document.cookie.indexOf(";",c_start)
            if (c_end==-1){
                c_end=document.cookie.length
            }
            return unescape(document.cookie.substring(c_start,c_end))
        }
    }
    return ""
}

export {
    setCookie,
    getCookie
}
  • 第二步、引用 cookie 处理函数
<script>
    // 引入cookie处理模块
    import {setCookie,getCookie} from "../js/cookieService"

    export default {
        data() {
            return {
                msg: '123456',
            }
        },
        methods: {
            // 登录
            login() {
                // 86400s: cookie有效时间: 86400s，即一个工作日。
                setCookie("sessionId",msg,86400)
            },
        }
</script>

2.上传文件

var formData = new window.FormData() // vue 中使用 window.FormData(),否则会报 'FormData isn't definded'

submit: function() {
          formData.append('file', document.querySelector('input[type=file]').files[0]) // 'file' 这个名字要和后台获取文件的名字一样;
          formData.append('user',this.name)
          //'userfile'是formData这个对象的键名
          axios({
            url: 'https://47.106.242.51:8081/ensure/uploadwork',
            data: formData,
            method: 'post',
            headers: {
              'Content-Type': 'multipart/form-data',
              // 'Access-Control-Allow-Origin': 'http://127.0.0.1:8080'
            }
          }).then((res) => {
            console.log(res.data);
            alert(this.name + ",你的作业已提交成功!")
          }).catch((error) => {
            alert("作业提交失败!请通过其他渠道将作业发给相关负责人！")
          })
        }

3.字符串加密与解密

  • 一、字符串加密
// ***** 第一步、定义
// 对字符串进行加密
var compileStr = function(code){ //对字符串进行加密
    var c=String.fromCharCode(code.charCodeAt(0)+code.length);
    for(var i=1;i<code.length;i++)
    {
        c+=String.fromCharCode(code.charCodeAt(i)+code.charCodeAt(i-1));
    }
    return escape(c);
}

//字符串进行解密
var uncompileStr = function(code) {
    code = unescape(code);
    var c = String.fromCharCode(code.charCodeAt(0) - code.length);
    for (var i = 1; i < code.length; i++) {
        c += String.fromCharCode(code.charCodeAt(i) - c.charCodeAt(i - 1));
    }
    return c;
}

export {
    compileStr,
    uncompileStr
}
  • 二、Base64加密
// 引入Base64加密
const Base64 = require('js-base64').Base64

// 加密
var s_password = Base64.encode(password)

// 解密
var password= Base64.encode(s_password )

4.带参数路由转向

// 发送路由 
login(identity) {
    this.$router.push({path:'/login',query:{msg: this.compileStr(identity)}})
}

// 接收路由
mounted(){
  this.identity = this.uncompileStr(this.$route.query.msg)
}

5.绘制验证码

// 绘制验证码
var ranNum = function(min, max) {
    return Math.random() * (max - min) + min;
}
var ranColor = function(min, max) {
    var r = ranNum(min, max);
    var g = ranNum(min, max);
    var b = ranNum(min, max);

    // return "rgb(" + r + "," + g + "," + b + ")";
    return `rgb(${r},${g},${b})`;
}
var ranStr = function() {
    // var str = "QWERTYUIOPASDFGHJKLZXCVBNMqwertyuiopasdfghjklzxcvbnm0123456789";
    var str = "0123456789";
    return str.split("").sort(function () {
        return Math.random() - 0.5
    });
}
var drawText = function(canvasId, canvasW, canvasH, num, fsMin, fsMax, frMin, frMax, min, max) {
    var ctx = document.getElementById("check").getContext("2d");
    var str = "";
    for (var i = 0; i < num; i++) {
        var char = ranStr()[Math.floor(0, ranStr().length)];
        var fs = ranNum(fsMin, fsMax);
        canvasId.font = fs + "px Verdana";
        canvasId.fillStyle = ranColor(min, max);
        canvasId.save();
        canvasId.translate(canvasW / num * i + canvasW / 20, 0);
        canvasId.rotate(ranNum(frMin, frMax) * Math.PI / 180);
        canvasId.fillText(char, 0, (canvasH + fs) / 2.5, canvasW / num);
        ctx.restore();
        str += char;
    }
    // console.log(str);
    return str;
}
var drawBg = function(canvasId, canvasW, canvasH, min, max) {
    // 绘制canvas背景
    canvasId.fillStyle = ranColor(min, max);

    // 填充颜色
    canvasId.fillRect(0, 0, canvasW, canvasH);
}
var drawCircle = function(canvasId, canvasW, canvasH, num, r, min, max) {
    for (var i = 0; i < num; i++) {
        canvasId.beginPath();
        canvasId.arc(ranNum(0, canvasW), ranNum(0, canvasH), r, 0, 2 * Math.PI);
        canvasId.fillStyle = ranColor(min, max);
        canvasId.fill();
        canvasId.closePath();
    }
}
var drawLine = function(canvasId, canvasW, canvasH, num, min, max) {
    for (var i = 0; i < num; i++) {
        // 开始绘制 （拿起笔）
        canvasId.beginPath();
        // 绘制开始点
        canvasId.moveTo(ranNum(0, canvasW), ranNum(0, canvasH));
        // 绘制结束点
        canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
        canvasId.strokeStyle = ranColor(min, max);
        canvasId.stroke();
        canvasId.closePath();
    }
}

// 绘制函数，调用即可
var drawCanvas = function() {
    var ctx = document.getElementById("check").getContext("2d");
    var ctxW = document.getElementById("check").clientWidth;
    var ctxH = document.getElementById("check").clientHeight;
    // 清空canvas
    ctx.clearRect(0, 0, 100, 30);
    // 绘制背景
    drawBg(ctx, ctxW, ctxH, 200, 255);
    // 绘制干扰圆点
    drawCircle(ctx, ctxW, ctxH, 20, 5, 200, 255);
    // 绘制干扰线段
    drawLine(ctx, ctxW, ctxH, 20, 0, 255);
    // 绘制验证码
    var str = drawText(ctx, ctxW, ctxH, 4, 10, 50, -30, 30, 0, 100);
    console.log(str)
    return str;
}

export {
    drawCanvas
}

6.1.js函数模块化

  • 首先，新建一个js文件，在src主目录下创建即可。并填写以下内容
// 对字符串进行加密
var test= function(){ //对字符串进行加密
  xx = oo
  return xx;
}

// 注意，这一步是关键所在
export {
  test
}
  • 第二步，在vue文件内引入js文件中的方法
// 引入test处理模块
<script>

  import {test} from "../js/test.js"

  export default {
    name: "expert"
  }

</script>
  • 第三步，在需要的地方直接调用
var result = test()

6.2.js变量模块化

  • 首先，新建一个js文件，在src主目录下创建即可。并填写以下内容
var setting = {
    email : '123456789@lnpu.com',             //邮箱
}

module.exports = setting
  • 第二步，在vue文件内引入js文件中的方法
//引入有两种方法
<script>
  // 方法一
  const api = require('../../../js/api')
  // 方法二
  import setting from '../../../js/custom_setting'

  export default {
    name: "expert"
  }

</script>
  • 第三步，在需要的地方直接调用
var ip= api.ip
var email = setting.email

7.Vue中引入富文本编辑器

  • 富文本编辑器有很多种，这里使用的是UEditor。并且，为了简单起见，我们只使用了它前端编辑文本的功能，上传图片等涉及后端的功能这里不予概述。
  • 1.下载UEditor包：UEditor下载地址
    下载完成之后，解压缩，更名为ueditor删掉其中的jsp文件夹。

  • 2.将文件夹其放入Vue项目中的public文件夹中（我是使用vue-cli3.0创建的项目）。


    image.png
  • 3.前期准备工作完成之后，准备安装vue-ueditor-wrap插件：
npm install --save vue-ueditor-wrap
  • 4.新建UEditor.vue文件，并填入下面的代码：
<template>
    <div class="ueditor">
        <vue-ueditor-wrap v-model="content" :config="myConfig"></vue-ueditor-wrap>
        {{ content }}
    </div>
</template>

<script>
    import VueUeditorWrap from 'vue-ueditor-wrap'
    export default {
        name: 'UEditor',
        components: {
            VueUeditorWrap
        },
        data () {
            return {
                myConfig: {
                    UEDITOR_HOME_URL: '/ueditor/',
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 工具栏是否可以浮动
                    autoFloatEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 340,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 关闭自动保存
                    enableAutoSave: true
                },
                content: ''
            }
        }
    }
</script>

<style scoped>

</style>
  • 5.在需要的地方引入UEDitor组件即可：
<template>
  <div id="app">
    <UEditor></UEditor>
  </div>
</template>

<script>
import UEditor from './components/UEditor'

export default {
  name: 'app',
  components: {
      UEditor
  }
}
</script>

<style>

</style>
  • 6.注意点
    一、富文本数据在ajax请求中会在&处被截断，需要进行稍微处理:
// 传输的文本会在&处被截断。需要稍微处理一下
content = encodeURIComponent(content)

// 注：后台服务程序接收到的数据为解码之前的数据，无需进行额外解析

二、一般富文本数据都比较长，存储在数据库中需要选择LONGTEXT字段
三、富文本文件中文本过长，服务器接收端会报错，因此直接在请求字段中添加文本信息不是一个好的选择。而应该用以下方法：

var formData = new window.FormData

formData.append("pId",pId)
formData.append("title",title)
formData.append("content",content)
axios({
    url: api.ip + 'notice/insert',
    data: formData,
    method: 'post'
}).then((res) => {
    this.fullscreenLoading = false
    this.$message({
        message: '通知发布成功!',
        type: 'success'
    })
}).catch((res) => {
    this.fullscreenLoading = false
    this.$message({
        message: '通知发布失败!',
        type: 'warning'
    });
})

8.对象转换成JSON数据

JSON.stringify(project)

9.比较两个日期的大小

//两个时间相差天数
var datedifference = function(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式
    var dateSpan,
        tempDate,
        iDays;
    sDate1 = Date.parse(sDate1);
    sDate2 = Date.parse(sDate2);
    dateSpan = sDate2 - sDate1;
    // dateSpan = Math.abs(dateSpan);
    iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
    return iDays
}

export {
    datedifference
}

10.本地存储

// 本地存储教工号
localStorage.setItem("number",number)

11.一些css效果实现

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
    <style>
        .demo1 {
            height:100px;
            width:0;
            border-left:300px solid rgb(63, 129, 204);
            border-bottom:100px solid transparent;
        }
        .demo2 {
            width: 100px;
            height: 40px;
            border-radius: 5px;
            background-color: blueviolet;
            box-shadow: rgba(182, 182, 182, 0.25) 0px 1px 0px, inset rgba(255,255,255,0.25) 0px 1px 0px, inset rgba(0,0,0,0.25) 0px 0px 0px, inset rgba(255,255,255,0.03) 0px 20px 0px, inset rgba(0,0,0,0.15) 0px -20px 20px, inset rgba(255,255,255,0.05) 0px 20px 20px;
        }
        .demo3 {
            width: 600px;
            height:400px;
            background: -webkit-linear-gradient(left top, red , blue); /* Safari 5.1 - 6.0 */
            background: -o-linear-gradient(bottom right, red, blue); /* Opera 11.1 - 12.0 */
            background: -moz-linear-gradient(bottom right, red, blue); /* Firefox 3.6 - 15 */
            background: linear-gradient(to bottom right, red , blue); /* 标准的语法（必须放在最后） */
        }
    </style>
</head>
<body>
    <!--实现梯形效果-->
    <div class="demo1"></div>

    <!--实现一个有凸起效果的按钮-->
    <div class="demo2"></div>

    <!--实现颜色渐变-->
    <div class="demo3"></div>
</body>
</html>

12.vue 3.0项目打包

  • 首先需要更改一下路径(vue.config.js文件)
module.exports = {
    // 添加基本路径
    publicPath:"./",
    // 其他属性
    configureWebpack: {
        ......
}
  • 然后到包部署即可
npm run build

13.获取系统时间

var getDate = function() {
    var Space_mark = '-'
    var date = new Date()

    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var strDate = date.getDate()
    if (month >= 1 && month <= 9) {
        month = "0" + month
    }
    if (strDate >= 0 && strDate <= 9) {
        strDate = "0" + strDate
    }
    var date = year + Space_mark + month + Space_mark + strDate
    return date
}

var getTime = function() {
    var date_pace = '-'
    var time_pace = ':'
    var date = new Date()

    var year = date.getFullYear()
    var month = date.getMonth() + 1
    var day = date.getDate()
    var hour=date.getHours()
    var minute=date.getMinutes()
    var second=date.getSeconds()
    if (month >= 1 && month <= 9) {
        month = "0" + month
    }
    if (day >= 0 && day <= 9) {
        day = "0" + day
    }
    if (hour >= 0 && hour <= 9) {
        hour = "0" + hour
    }
    if (minute >= 0 && minute <= 9) {
        minute = "0" + minute
    }
    if (second >= 0 && second <= 9) {
        second = "0" + second
    }
    var date = year + date_pace + month + date_pace + day + ' ' + hour + time_pace + minute +time_pace + second
    return date
}

//两个时间相差天数 兼容firefox chrome
var datedifference = function(sDate1, sDate2) {    //sDate1和sDate2是2006-12-18格式
    var dateSpan,
        tempDate,
        iDays;
    sDate1 = Date.parse(sDate1);
    sDate2 = Date.parse(sDate2);
    dateSpan = sDate2 - sDate1;
    // dateSpan = Math.abs(dateSpan);
    iDays = Math.floor(dateSpan / (24 * 3600 * 1000));
    return iDays
}

export {
    datedifference,
    getDate,
    getTime
}

14.页面路由带值传递

// 发送
this.$router.push({path:'/login',query: {msg: 'hello'}})

// 接收
var msg = this.$route.query.msg

15.点击子组件向父组件传递值

// 组件上添加点击触发函数
<el-menu-item index="1-1" @click="change(0)">当前项目</el-menu-item>

// 传递函数
methods: {
    change(res) {
    // 更改父组件Admin属性值
        this.$emit('change',res)
    }
},

// 父组件中设置除法函数
<div class="left-con">
    <AdminLeft class="admin-left" :index="index" @change="update"></AdminLeft>
</div>

// 父组件中处理接收到的值
methods: {
    update(res) {
        this.index = res
    }
},
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 206,214评论 6赞 481
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 88,307评论 2赞 382
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 152,543评论 0赞 341
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 55,221评论 1赞 279
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 64,224评论 5赞 371
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,007评论 1赞 284
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,313评论 3赞 399
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,956评论 0赞 259
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 43,441评论 1赞 300
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,925评论 2赞 323
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,018评论 1赞 333
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,685评论 4赞 322
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,234评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,240评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,464评论 1赞 261
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,467评论 2赞 352
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,762评论 2赞 345

推荐阅读更多精彩内容

  • 手摸手，带你用vue撸后台 系列三(实战篇)
    完整项目地址：vue-element-admin系类文章一：手摸手，带你用vue撸后台 系列一（基础篇）系类文章二...
    7cd975786ccd阅读 6,873评论 2赞 35
  • 2018-07-31
    基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 1,140评论 0赞 1
  • vue 常用插件
    UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    柴东啊阅读 15,848评论 2赞 140
  • 何来爱屋及乌
    社会人际关系复杂吗？是的，复杂。社会人形形色色各有所图。 家庭关系复杂吗？对的。同样不简单。中国家庭老一辈向晚辈传...
    简单而透明阅读 463评论 0赞 0
  • 如也——《我的少女时代》
    昨天去看了在台湾上映时就备受称赞的《我的少女时代》，在我看来，它和那些年不相上下，但是没有初恋那件小事出彩。看到大...
    一个大写的Sue阅读 372评论 0赞 0