使用element-ui组件
首页引入了element-ui的表格,主要运用了
<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
<el-form-item label="姓名" prop="name">
<el-input v-model="ruleForm.name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="password">
<el-input v-model="ruleForm.password"></el-input>
</el-form-item>
<el-form-item label="组别编号" prop="groupId">
<el-input v-model.number="ruleForm.groupId"></el-input>
</el-form-item>
<el-form-item label="作者编号" prop="authorId">
<el-input v-model.number="ruleForm.authorId"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
<el-button @click="resetForm('ruleForm')">重置</el-button>
</el-form-item>
</el-form>
之后再使用rules对这些进行检查名字、密码、编号等,类似正则表达式
data() {
return {
ruleForm: {
name: '',
password: '',
groupId: '',
authorId: ''
},
rules: {
name: [
{ required: true, message: '请输入名字', trigger: 'blur' },
{ min: 2, max: 5, message: '长度在 2 到 5 个字符', trigger: 'blur' }
],
password:
[{required: true,message: '请输入密码',trigger: 'blur'},
{ min: 5,max:10,message: '长度在 5 到 10个字符'},
],
groupId: [
{required: true,message: '请输入组别编号',trigger: 'blur'},
{ min: 1,max:10,message: '长度在 1 到 10个字符'},
],
authorId: [
{required: true,message: '请输入作者编号',trigger: 'blur'},
{ min: 1,max:10,message: '长度在 1 到 10个字符'},
],
}
};
},
主页
这里使用了腾讯官网首页的视频,首先需要在vue安装
npm i vue-video --save-dev
之后在main.js引入
//插入视频
import Video from 'video.js'
import 'video.js/dist/video-js.css'
Vue.prototype.$video = Video
之后就可以引入标签,可以设置宽度100%,自动播放一直循环播放,不要进度条等
<video src="https://www.tencent.com/video/index-video.mp4"
width="100%" id="video" autoplay loop preload muted x-webkit-airplay="true" airplay="allow" webkit-playsinline="true" playsinline="true"
class="video1 video"></video>
不负后面的文字隔两秒变化一次
腾讯官网写的文字变化比较复杂,使用了动画等,这里我就做了一个简单的,只能实现简单文字变化,首先初始化状态显示韶华,让文字装在arr数组里面,让change=“arr[this.i]”,i从1开始,当i>arr.length-1时让i=0,此时便可以从韶华再开始循环
data () {
return {
change:'韶华',
timer: null,
i:1
}
},
components: {
},
mounted () {
let arr=["韶华","年华","青春"]
this.timer = setInterval( () => {
this.change=arr[this.i]
this.i++;
if (this.i>arr.length-1) {
this.i=0
}
}, 2000)
},
div在页面居中
当定义了一个div的时候,想让在页面居中,只需要简单的两行代码
margin:0 auto;
text-align: center;
利用定位让文字浮动在标签上
只需要简单的设置一下,可设置.banner_area的定位为relative,让想浮动的文字设置为absolute,再调试left与top,有必要的时候还可以设置z-index的值,让它浮动在最上面
样式随着路由变化
想要显示的功能是,当在actical的路由下,全部那个位置的文字样式为红色,并且下划线为红色,此时定义了一个routerRed的样式
.routerRed{
color: red;
border-bottom: 2px solid red;
}
再设置一个在当前路由下显示样式
<span style="text-align:left;"@click="$router.push('actical')" :class="{routerRed:'/actical'==$route.path}">全部</span>
<span @click="$router.push('recycle')" :class="{routerRed:'/recycle'==$route.path}">回收站</span>
这里的:class="{routerRed:’/recycle’==$route.path}"就是重点,意思就是如果当前路由是’/recycle’的话,那么便有routerRed这个样式否则就没有
引入富文本编辑器
引入的便是下面的这个富文本
首先要在官网下载1.4.3.3 Jsp 版本的Ueditor文件。
之后解压放到static里面,这里我命名为UE
之后在main.js中引入,要注意顺序,不可以错乱
//配置富文本编辑器
import '../static/UE/ueditor.config.js'
import '../static/UE/ueditor.all.min.js'
import '../static/UE/lang/zh-cn/zh-cn.js'
import '../static/UE/ueditor.parse.min.js'
然后再到ueditor.config.js中修改一下,在 var URL = window.UEDITOR_HOME_URL || getUEBasePath();前插入window.UEDITOR_HOME_URL = ‘/static/UE/’,这里的UE就是我命名的文件夹
之后可以在组件中新建一个vue文件,将ueditor的代码放进去
<template>
<div style="width: 100%;height: 500px;margin: 100px auto;">
<div id="ueditor">
</div>
</div>
</template>
<script>
import axios from 'axios'
export default {
data () {
return {
editor: null,
}
},
mounted () {
this.editor = UE.getEditor('ueditor') // 初始化UE
},
destroyed () {
this.editor.destroy()
}
}
</script>
此时便可以成功引入富文本编辑器了,但是当你想上传图片等的时候会发现它显示后台配置没有成功
遇到这个问题,首先打开ueditor.config.js将serverUrl: URL + "jsp/controller.jsp"注释掉
之后再到刚才的ueditor的vue文件中修改一下,将mounted中的代码修改成以下的样子,之后调用你后台的请求路劲便可以成功
mounted () {
//创建一个变量,来接收后台配置,之后将result塞到 this.editor = UE.getEditor('ueditor',result)里面
let result;
axios.get('http://xxx/ueditor')
.then((response) => {
result=response.data
console.log("result",result);
console.log(response.data);//请求的返回体
console.log("result1",result);
this.editor = UE.getEditor('ueditor',result) // 初始化UE
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
//上传图片
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return 'http://xxx/imgUpload';
//上传视频
}else if(action == "uploadvideo"){
return 'http://xxx/videoUpload';
}
//上传附件
else if(action == "uploadfile"){
return 'http://xxx/fileUpload';
}
//默认
else {
return this._bkGetActionUrl.call(this, action);
}
}
})
.catch((error) => {
console.log(error);//异常
});
},