圣诞快乐!!!

一、前言

今年一直在学习java开发方面的知识,做了很多的项目,也看了很多的题,牛客也让我刷爆了,最近在看leetcode和做一些分布式的微服务项目,怎么说呢?互联网技术太多了,太深奥了,许多自己不了解的技术,但确实很有用还不得不去学习,而且大四了,也面临着实习啊,就业啊,这些,再碰到互联网寒冬…双非学校的血泪史啊.哎,年轻人,请努力把

二、圣诞节快乐

这次来呢,就是想混一个勋章,顺便记录一下学习这个圣诞树设计我构想了一下,好像和我一个后端没啥关系但是呢,我还是想简单的写一下.

三、效果展示

四、实现步骤

1.再html页面中编写一个框架,这个框架中需要由背景音乐和下雪的动态js效果和可以适当进行一些css的美工效果
2.其次,再第一个页面中添加跳转的按钮,点击后进入下一个圣诞快乐页面
3.进入后自动播放圣诞快乐歌曲,同时,可以添加自己的一段录音独白.增加和用户的互动效果
4.最后,设计js弹出一个diy的祝福语.

五、编码实现

<template>
  <div>
    <template>
      <div>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>圣诞快乐MessryChrismas!!!</span>
          </div>
          <div class="text item">
            <el-button type="primary"  @click.native="preview" >圣诞快乐MessryChrismas!!!</el-button>
            <br/><br/>
            <span v-if="previewurl && previewurl!=''"><a :href="previewurl" target="_blank">点我 </a> </span>
          </div>
        </el-card>
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span>圣诞快乐MessryChrismas!!!</span>
          </div>
          <div class="text item">
            <div v-if="course.status == '202001'">
              状态：制作中<br/>
              <el-button type="primary"  @click.native="publish" >圣诞快乐MessryChrismas!!!</el-button>
            </div>
            <div v-else-if="course.status == '202003'">
              状态：已下线
              <br/><br/>
              <span><a :href="'http://www.xuecheng.com/course/detail/'+this.courseid+'.html'" target="_blank">点我 </a> </span>
            </div>
            <div v-else-if="course.status == '202002'">
              状态：已发布<br/>
              <el-button type="primary"  @click.native="publish" >修改发布</el-button>
              <br/><br/>
              <span><a :href="'http://www.xuecheng.com/course/detail/'+this.courseid+'.html'" target="_blank">点我 </a> </span>
            </div>
          </div>
        </el-card>
      </div>
    </template>
  </div>
</template>
<script>
  import * as sysConfig from '@/../config/sysConfig';
  import * as courseApi from '../../api/course';
  import utilApi from '../../../../common/utils';
  import * as systemApi from '../../../../base/api/system';
export default{

  data() {
    return {
      dotype: '',
      courseid: '',
      course: {"id": "", "name": "", "status": ""},
      previewurl: ''
    }
  },
  methods:{
 
    preview(){
     
      courseApi.preview(this.courseid).then((res) => {
        if(res.success){
          this.$message.error('圣诞快乐MessryChrismas!!!');
          if(res.previewUrl){
            //预览url
            this.previewurl = res.previewUrl
          }
        }else{
          this.$message.error(res.message);
        }
      });
    },
    publish(){
   
      courseApi.publish(this.courseid).then(res=>{
          if(res.success){
              this.$message.success("圣诞快乐MessryChrismas!!!")
 this.getCourseView();
          }else{
            this.$message.error(res.message)
          }

      })
    },
    getCourseView(){
      courseApi.findCourseView(this.courseid).then(res=>{
        if(res && res.courseBase){
        
            this.course.status = res.courseBase.status;
        }

      })
    }

  },
  mounted(){
   
    this.courseid = this.$route.params.courseid;
  
    this.getCourseView();
  }

  }
</script>
<style>

</style>

这里的代码是水货,仅为完成任务.