注意：本项目前端页面基于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 处理函数
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- 二、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处理模块
- 第三步，在需要的地方直接调用
var result = test()
6.2.js变量模块化
- 首先，新建一个js文件，在src主目录下创建即可。并填写以下内容
var setting = {
email : '[email protected]', //邮箱
}
module.exports = setting
- 第二步，在vue文件内引入js文件中的方法
//引入有两种方法
- 第三步，在需要的地方直接调用
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文件，并填入下面的代码：
- 5.在需要的地方引入UEDitor组件即可：
- 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效果实现
Document
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.点击子组件向父组件传递值
// 组件上添加点击触发函数
当前项目
// 传递函数
methods: {
change(res) {
// 更改父组件Admin属性值
this.$emit('change',res)
}
},
// 父组件中设置除法函数