vue實現(xiàn)教改系統(tǒng)的相關(guān)需求實現(xiàn)（前端）

注意：本項目前端頁面基于Vue.js框架編寫，后端服務(wù)基于Spring Boot框架編寫。
傳送門：vue實現(xiàn)教改系統(tǒng)的相關(guān)需求實現(xiàn)（后端）

1.設(shè)置與獲取cookie

  • 第一步、定義 cookie 處理函數(shù)
// 生成cookie
// 設(shè)置過期時間以秒為單位
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 處理函數(shù)
<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 + ",你的作業(yè)已提交成功!")
          }).catch((error) => {
            alert("作業(yè)提交失敗!請通過其他渠道將作業(yè)發(fā)給相關(guān)負(fù)責(zé)人！")
          })
        }

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.帶參數(shù)路由轉(zhuǎn)向

// 發(fā)送路由 
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},$)`;
}
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));
        // 繪制結(jié)束點
        canvasId.lineTo(ranNum(0, canvasW), ranNum(0, canvasH));
        canvasId.strokeStyle = ranColor(min, max);
        canvasId.stroke();
        canvasId.closePath();
    }
}

// 繪制函數(shù)，調(diào)用即可
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函數(shù)模塊化

  • 首先，新建一個js文件，在src主目錄下創(chuàng)建即可。并填寫以下內(nèi)容
// 對字符串進行加密
var test= function(){ //對字符串進行加密
  xx = oo
  return xx;
}

// 注意，這一步是關(guān)鍵所在
export {
  test
}
  • 第二步，在vue文件內(nèi)引入js文件中的方法
// 引入test處理模塊
<script>

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

  export default {
    name: "expert"
  }

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

6.2.js變量模塊化

  • 首先，新建一個js文件，在src主目錄下創(chuàng)建即可。并填寫以下內(nèi)容
var setting = {
    email : '123456789@lnpu.com',             //郵箱
}

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

  export default {
    name: "expert"
  }

</script>
  • 第三步，在需要的地方直接調(diào)用
var ip= api.ip
var email = setting.email

7.Vue中引入富文本編輯器

  • 富文本編輯器有很多種，這里使用的是UEditor。并且，為了簡單起見，我們只使用了它前端編輯文本的功能，上傳圖片等涉及后端的功能這里不予概述。
  • 1.下載UEditor包：UEditor下載地址
    下載完成之后，解壓縮，更名為ueditor刪掉其中的jsp文件夾。

  • 2.將文件夾其放入Vue項目中的public文件夾中（我是使用vue-cli3.0創(chuàng)建的項目）。


    image.png
  • 3.前期準(zhǔn)備工作完成之后，準(zhǔn)備安裝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/',
                    // 編輯器不自動被內(nèi)容撐高
                    autoHeightEnabled: false,
                    // 工具欄是否可以浮動
                    autoFloatEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 340,
                    // 初始容器寬度
                    initialFrameWidth: '100%',
                    // 關(guān)閉自動保存
                    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.注意點
    一、富文本數(shù)據(jù)在ajax請求中會在&處被截斷，需要進行稍微處理:
// 傳輸?shù)奈谋緯?amp;處被截斷。需要稍微處理一下
content = encodeURIComponent(content)

// 注：后臺服務(wù)程序接收到的數(shù)據(jù)為解碼之前的數(shù)據(jù)，無需進行額外解析

二、一般富文本數(shù)據(jù)都比較長，存儲在數(shù)據(jù)庫中需要選擇LONGTEXT字段
三、富文本文件中文本過長，服務(wù)器接收端會報錯，因此直接在請求字段中添加文本信息不是一個好的選擇。而應(yīng)該用以下方法：

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: '通知發(fā)布成功!',
        type: 'success'
    })
}).catch((res) => {
    this.fullscreenLoading = false
    this.$message({
        message: '通知發(fā)布失敗!',
        type: 'warning'
    });
})

8.對象轉(zhuǎn)換成JSON數(shù)據(jù)

JSON.stringify(project)

9.比較兩個日期的大小

//兩個時間相差天數(shù)
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效果實現(xiàn)

<!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); /* 標(biāo)準(zhǔn)的語法（必須放在最后） */
        }
    </style>
</head>
<body>
    <!--實現(xiàn)梯形效果-->
    <div class="demo1"></div>

    <!--實現(xiàn)一個有凸起效果的按鈕-->
    <div class="demo2"></div>

    <!--實現(xiàn)顏色漸變-->
    <div class="demo3"></div>
</body>
</html>

12.vue 3.0項目打包

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

13.獲取系統(tǒng)時間

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
}

//兩個時間相差天數(shù) 兼容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.頁面路由帶值傳遞

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

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

15.點擊子組件向父組件傳遞值

// 組件上添加點擊觸發(fā)函數(shù)
<el-menu-item index="1-1" @click="change(0)">當(dāng)前項目</el-menu-item>

// 傳遞函數(shù)
methods: {
    change(res) {
    // 更改父組件Admin屬性值
        this.$emit('change',res)
    }
},

// 父組件中設(shè)置除法函數(shù)
<div class="left-con">
    <AdminLeft class="admin-left" :index="index" @change="update"></AdminLeft>
</div>

// 父組件中處理接收到的值
methods: {
    update(res) {
        this.index = res
    }
},
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 完整項目地址：vue-element-admin系類文章一：手摸手，帶你用vue擼后臺 系列一（基礎(chǔ)篇）系類文章二...
    7cd975786ccd閱讀 7,183評論 2贊 35
  • 基于Vue的一些資料 內(nèi)容 UI組件 開發(fā)框架 實用庫 服務(wù)端 輔助工具 應(yīng)用實例 Demo示例 element★...
    嘗了又嘗閱讀 1,275評論 0贊 1
  • UI組件 element- 餓了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的組件庫 m...
    柴東啊閱讀 15,953評論 2贊 140
  • 社會人際關(guān)系復(fù)雜嗎？是的，復(fù)雜。社會人形形色色各有所圖。 家庭關(guān)系復(fù)雜嗎？對的。同樣不簡單。中國家庭老一輩向晚輩傳...
    簡單而透明閱讀 510評論 0贊 0
  • 昨天去看了在臺灣上映時就備受稱贊的《我的少女時代》，在我看來，它和那些年不相上下，但是沒有初戀那件小事出彩?？吹酱?..
    一個大寫的Sue閱讀 441評論 0贊 0

友情鏈接更多精彩內(nèi)容