213 lines
9.1 KiB
Vue
213 lines
9.1 KiB
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">
|
||
<el-image :src="require('@/assets/images/oneFile.png')"></el-image>
|
||
<span style="text-align: left;display: flex;flex-direction: row;justify-content: flex-start;margin-top: 15px">
|
||
OneFile 汇集了一个文件、运行简单、一看就懂的开源项目。 包括：游戏、编译器、服务器、工具、实用库等有趣的开源项目，而且复制代码就能跑，点击即可在线查看源码和试玩。
|
||
</span>
|
||
<div style="margin-top: 20px">
|
||
<template>
|
||
<el-table
|
||
@row-click="toDetailPage"
|
||
border
|
||
:data="tableData"
|
||
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="名称"
|
||
width="130">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="language"
|
||
label="语言"
|
||
width="100">
|
||
</el-table-column>
|
||
<el-table-column
|
||
prop="description"
|
||
label="描述">
|
||
</el-table-column>
|
||
</el-table>
|
||
</template>
|
||
</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>一个开源项目，在这里你可以找到有趣运行简单的程序。同时它也是一个编程挑战，你也可以提交一个文件接受挑战。快点加入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.native.stop.once="submit('ruleForm')" type="primary" style=";margin-top:10px">提交</el-button>
|
||
</div>
|
||
</el-form-item>
|
||
</el-form>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
<RightTools></RightTools>
|
||
</div>
|
||
</template>
|
||
|
||
<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: [],
|
||
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(formName){
|
||
this.$refs[formName].validate((valid) => {
|
||
if (valid) {
|
||
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
|
||
});
|
||
}
|
||
|
||
}).catch((error)=>{
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: error,
|
||
offset: 50
|
||
});
|
||
})
|
||
}else{
|
||
return false;
|
||
}
|
||
})
|
||
|
||
},
|
||
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;
|
||
}).catch((error)=>{
|
||
Vue.prototype.$notify.error({
|
||
title: '错误',
|
||
message: error,
|
||
offset: 50
|
||
});
|
||
})
|
||
}
|
||
},
|
||
mounted() {
|
||
this.getOneFile();
|
||
},
|
||
}
|
||
</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;
|
||
}
|
||
}
|
||
</style> |