更新
This commit is contained in:
@@ -19,9 +19,10 @@
|
||||
<div style="margin-top: 20px">
|
||||
<template>
|
||||
<el-table
|
||||
@row-click="toDetailPage"
|
||||
border
|
||||
:data="tableData"
|
||||
style="width: 100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 10px;border: none">
|
||||
style="cursor: pointer;width: 100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 10px;border: none">
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="名称"
|
||||
@@ -30,7 +31,7 @@
|
||||
<el-table-column
|
||||
prop="language"
|
||||
label="语言"
|
||||
width="130">
|
||||
width="100">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="description"
|
||||
@@ -41,12 +42,46 @@
|
||||
</div>
|
||||
<el-card style="border: none;margin-top: 20px">
|
||||
<div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start;text-align: left">
|
||||
<b>「OneFile」:</b><span>一个开源项目，在这里你可以找到有趣运行简单的程序。同时它也是一个编程挑战，你也可以提交一个文件接受挑战。<el-link><b>点击加入</b></el-link> OneFile 编程挑战，一个文件而已就写点有趣的代码吧！</span>
|
||||
<b>「OneFile」:</b><span>一个开源项目，在这里你可以找到有趣运行简单的程序。同时它也是一个编程挑战，你也可以提交一个文件接受挑战。快点加入OneFile 编程挑战，一个文件而已就写点有趣的代码吧！</span>
|
||||
</div>
|
||||
<div style="display: flex;flex-direction: row;justify-content: flex-end">
|
||||
<el-button plain size="small" @click="openSubmit">提交</el-button>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-card>
|
||||
|
||||
<el-dialog title="提交" :visible.sync="dialogVisible" width="46%"
|
||||
append-to-body
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<el-form ref="ruleForm" class="login_container" :model="form" :rules="rules" status-icon label-width="60px">
|
||||
<el-form-item label="名称" prop="oneFileName">
|
||||
<el-input v-model="form.oneFileName" placeholder='取个名字吧'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址" prop="url">
|
||||
<el-input v-model="form.url" placeholder='地址url'></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description" >
|
||||
<el-input v-model="form.description" placeholder='一句话描述一下' clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容" prop="Content" >
|
||||
<el-input v-model="form.Content"
|
||||
type="textarea"
|
||||
rows="10"
|
||||
placeholder='代码内容'
|
||||
clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="语言" prop="language" >
|
||||
<el-input v-model="form.language" placeholder='语言种类' clearable></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<div style="display: flex;flex-direction: row;align-items: center;flex-wrap: nowrap;justify-content: flex-end">
|
||||
<el-button @click="submit()" type="primary" style=";margin-top:10px">提交</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</div>
|
||||
<RightTools></RightTools>
|
||||
@@ -55,36 +90,91 @@
|
||||
|
||||
<script>
|
||||
import RightTools from "@/components/Home/RightTools.vue";
|
||||
import axios from "axios";
|
||||
import Vue from "vue";
|
||||
|
||||
export default {
|
||||
name: "OneFile",
|
||||
components: {RightTools},
|
||||
data(){
|
||||
return{
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
tableData: [],
|
||||
dialogVisible:false,
|
||||
form:{
|
||||
oneFileName:'',
|
||||
language:'',
|
||||
description:'',
|
||||
url:'',
|
||||
Content:'',
|
||||
},
|
||||
rules: {
|
||||
oneFileName: [
|
||||
// required：规则，o：失去焦点触发
|
||||
{required: true, message: "请输入名称", trigger: "blur"},
|
||||
],
|
||||
language: [{required: true, message: "请输入语言", trigger: "blur"}],
|
||||
description: [{required: true, message: "请输入描述", trigger: "blur"}],
|
||||
Content: [{required: true, message: "请输入内容", trigger: "blur"}],
|
||||
},
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
openSubmit(){
|
||||
this.dialogVisible=true;
|
||||
},
|
||||
submit(){
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/insertFileByAdmin',
|
||||
// URL 中的查询参数
|
||||
params: this.form,
|
||||
}).then(function (res) {
|
||||
if(res.data.code===200){
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data.msg+'请等待审核'),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
}else{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: res.data.msg,
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
|
||||
})
|
||||
},
|
||||
goBack() {
|
||||
window.history.go(-1);
|
||||
},
|
||||
}
|
||||
toDetailPage(row){
|
||||
this.$router.push({
|
||||
path:'/OneFileDetail',
|
||||
query: {
|
||||
id: row.id,
|
||||
refresh: true
|
||||
}})
|
||||
},
|
||||
getOneFile(){
|
||||
var that=this;
|
||||
axios({
|
||||
method: 'post',
|
||||
// 请求的地址
|
||||
url: 'http://localhost:8082/helloGithub_war_exploded/selectFile',
|
||||
// URL 中的查询参数
|
||||
params: {
|
||||
}
|
||||
}).then(function (res) {
|
||||
that.tableData=res.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getOneFile();
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@@ -13,11 +13,43 @@
|
||||
<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: 5px">
|
||||
|
||||
<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: 5px">
|
||||
<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>
|
||||
@@ -30,20 +62,112 @@
|
||||
|
||||
<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},
|
||||
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>
|
||||
|
||||
@@ -60,4 +184,19 @@ export default {
|
||||
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>
|
||||
Reference in New Issue
Block a user