hellogithub-vue/src/components/OneFile/OneFileDetail.vue

<template>
    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
            <div class="PageHeader">
                <br/>
                <el-page-header  @back="goBack" style="justify-content:left;display: flex;">
                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
                    <div slot="content" class="test" style="font-size:23px;font-weight: 600;">
                        <div>OneFile</div>
                    </div>
                </el-page-header>
            </div>
            <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
              <el-card style="border: none">
                  <div style="display: flex;flex-direction: column;flex-wrap: nowrap;">
                      <el-card style="box-shadow: none;border-radius: 10px">
                        <div style="display: flex;flex-direction: row;flex-wrap: nowrap;align-items: center">
                            <span style="font-size: 18px;color: #6b7280;font-weight: bold">
                            {{oneFileName}} :
                            </span>
                            <span style="font-size: 16px;color: #6b7280;font-weight: bold">
                                {{description}}
                            </span>
                        </div>
                          <div style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center;justify-content: space-between">
                              <div style="font-size: 15px;color: #9ca3af;margin-top: 20px;">
                                  <span>发布于: </span>
                                  <span>{{userName}}</span>
                                  <span> · </span>
                                  <span> 主语言 {{language}}</span>
                                  <span> · </span>
                                  <span> {{formatNumber(lookNum)}} </span>
                                  <span> 次查看 </span>
                              </div>
                              <div style="display: flex;align-items: center;justify-content: center;margin-top: 20px;">
                                  <el-button plain icon="el-icon-link" size="mini" @click="goTo(url)">访问</el-button>
                                  <el-button plain icon="el-icon-document-copy" size="mini" @click="copyText">复制</el-button>
                              </div>
                          </div>
                      </el-card>

                      <el-card style="box-shadow: none;margin-top: 20px;border-radius: 10px">
                          <PrismEditor
                              class="my-editor height-300"
                              v-model="content"
                              aria-disabled
                              :highlight="highlighter"
                              line-numbers
                              :readonly="true"
                              autoStyleLineNumbers
                              :tabSize="4"
                          ></PrismEditor>

                      </el-card>
                  </div>
              </el-card>
            </div>
        </div>
        <RightTools></RightTools>
    </div>
</template>

<script>
import RightTools from "@/components/Home/RightTools.vue";
import axios from "axios";
import { PrismEditor } from "vue-prism-editor";
import "vue-prism-editor/dist/prismeditor.min.css";
import { highlight, languages } from "prismjs/components/prism-core";
import "prismjs/components/prism-clike";
import "prismjs/components/prism-javascript";
import "prismjs/themes/prism-tomorrow.css";
import Vue from "vue";
export default {
    name: "OneFileDetail",
    components: {RightTools,PrismEditor},
    data(){
        return{

            id:'',
            oneFileName:'',
            language:'',
            description:'',
            userId:'',
            url:'',
            lookNum:'',
            content:'',
            isValid:'',
            userName:'',

        }
    },
    methods:{
        copyText() {
            let text = this.content;
            let inputElement = document.createElement('input')
            inputElement.value = text;
            document.body.appendChild(inputElement);
            inputElement .select(); //选中文本
            document.execCommand("copy"); //执行浏览器复制命令
            inputElement.remove();
            Vue.prototype.$notify({
                title: '成功',
                message: ('i', {style: 'color: teal'}, "复制成功"),
                type: 'success',
                offset: 50
            });
        },
        highlighter(code) {
            return highlight(code, languages.js); //returns html
        },
        formatNumber(num) {
            return num >= 1e3 && num < 1e4 ? (num / 1e3).toFixed(1) + 'k' : num >= 1e4 ? (num / 1e4).toFixed(1) + 'w' : num
        },
        goBack() {
            window.history.go(-1);
        },
        addLookCount(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/addFileLookCount',
                // URL 中的查询参数
                params: {
                    id:this.$route.query.id
                }
            });
        },
        getOneFileDetail(){
            var that=this;
            axios({
                method: 'post',
                // 请求的地址
                url: 'http://localhost:8082/helloGithub_war_exploded/selectFileById',
                // URL 中的查询参数
                params: {
                    id:this.$route.query.id
                }
            }).then(function (res) {
                console.log(res);
                that.id=res.data.id;
                that.language=res.data.language;
                that.lookNum=res.data.lookNum;
                that.oneFileName=res.data.oneFileName;
                that.url=res.data.url;
                that.userId=res.data.userId;
                that.description=res.data.description;
                that.content=res.data.content;
                that.userName=res.data.userName;

            })
        },
        goTo(url){
            window.open(url);
        },

    },
    mounted() {
        this.getOneFileDetail();
    },
    created() {
        this.addLookCount();
    },
    watch: {
        $route () {
            if(this.$route.query.refresh){
                this.getOneFileDetail() //重新调用http请求实现页面的重新渲染
            }
        }
    },
}
</script>

<style scoped>
::v-deep .el-page-header__left{
    left:10px;
}
::v-deep .el-page-header__content{
    flex:1;
}
::v-deep .el-table {
    tr th,
    tr td {
        border-right: none;
    }
}
/* required class */
::v-deep .my-editor {
    background: transparent;
    color: #ccc;

    font-family: Fira code, Fira Mono, Consolas, Menlo, Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    padding: 5px;
}

/* optional */
::v-deep .prism-editor__textarea:focus {
    outline: none;
}
</style>