对接后台论文上传接口

master
pan 4 years ago
parent 9c4e3da4e2
commit 5b86913910
  1. 8
      components/account/login.vue
  2. 2
      components/account/register.vue
  3. 6
      nuxt.config.js
  4. 119
      pages/index/upload.vue
  5. 9
      plugins/global.js

@ -15,7 +15,9 @@
<script lang="ts"> <script lang="ts">
export default { import Vue from 'vue'
export default Vue.extend({
name: 'login', name: 'login',
data() { data() {
return { return {
@ -41,7 +43,7 @@
this.$refs.form.validate((valid: boolean) => { this.$refs.form.validate((valid: boolean) => {
if (valid) { if (valid) {
let that = this let that = this
this.GLOBAL.postJSON('/v1/api/users/sign_in', { this.GLOBAL.fetchJSON('/v1/api/users/sign_in','POST', {
userName: this.form.user, userName: this.form.user,
password: this.form.password password: this.form.password
}, function(res) { }, function(res) {
@ -66,5 +68,5 @@
}) })
} }
} }
} })
</script> </script>

@ -64,7 +64,7 @@
this.$refs.form.validate((valid: boolean)=>{ this.$refs.form.validate((valid: boolean)=>{
if(valid){ if(valid){
let that=this let that=this
this.GLOBAL.postJSON('/v1/api/users/sign_up',{ userName: this.form.user, password: this.form.password },function(res) { this.GLOBAL.fetchJSON('/v1/api/users/sign_up','POST',{ userName: this.form.user, password: this.form.password },function(res) {
if(res.code==='200'){ if(res.code==='200'){
that.$message.info(that.$t('account.form.tip.register_ok').toString()) that.$message.info(that.$t('account.form.tip.register_ok').toString())
that.$router.push(that.localePath('/')) that.$router.push(that.localePath('/'))

@ -216,13 +216,14 @@ export default {
}, },
"reading_online": "在线阅读", "reading_online": "在线阅读",
"reset": "重置", "reset": "重置",
"select_please": "请选择{keyword}",
"tip": "提示", "tip": "提示",
"today_recommend": "今日推荐", "today_recommend": "今日推荐",
"unknown_error": "未知错误", "unknown_error": "未知错误",
"upload": { "upload": {
"form": { "form": {
"author": "论文作者", "author": "论文作者",
"content": "论文", "content": "正文内容",
"profession": "学科专业", "profession": "学科专业",
"remove": "确定移除{file}", "remove": "确定移除{file}",
"school": "学校", "school": "学校",
@ -237,6 +238,7 @@ export default {
"ok": "论文上传成功" "ok": "论文上传成功"
} }
}, },
"upload_please": "请上传{keyword}",
"user": "帐号", "user": "帐号",
"zhCN": "简体中文" "zhCN": "简体中文"
}, },
@ -371,6 +373,7 @@ export default {
}, },
"reading_online": "", "reading_online": "",
"reset": "", "reset": "",
"select_please": "",
"tip": "", "tip": "",
"today_recommend": "", "today_recommend": "",
"unknown_error": "", "unknown_error": "",
@ -392,6 +395,7 @@ export default {
"ok": "" "ok": ""
} }
}, },
"upload_please": "",
"user": "", "user": "",
"zhCN": "Simplified Chinese" "zhCN": "Simplified Chinese"
} }

@ -1,40 +1,40 @@
<template> <template>
<el-form ref="form" :model="form" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item :label="$t('upload.form.type')"> <el-form-item :label="$t('upload.form.type')" prop="type">
<el-select v-model="form.type" :placeholder="$t('input_please',{type:$t('upload.form.type')})"> <el-select v-model="form.type" :placeholder="$t('select_please',{keyword:$t('upload.form.type')})">
<el-option v-for="item in options" :key="item.value" :value="item.value">{{item.label}}</el-option> <el-option v-for="item in options" :key="item.value" :value="item.value">{{item.label}}</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('upload.form.author')"> <el-form-item :label="$t('upload.form.author')" prop="author">
<el-col :span="4"> <el-col :span="4">
<el-input v-model="form.author" <el-input v-model="form.author"
:placeholder="$t('input_please',{keyword:$t('upload.form.author')})"></el-input> :placeholder="$t('input_please',{keyword:$t('upload.form.author')})"></el-input>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item :label="$t('upload.form.profession')"> <el-form-item :label="$t('upload.form.profession')" prop="profession">
<el-col :span="4"> <el-col :span="4">
<el-input v-model="form.profession" <el-input v-model="form.profession"
:placeholder="$t('input_please',{keyword:$t('upload.form.profession')})"></el-input> :placeholder="$t('input_please',{keyword:$t('upload.form.profession')})"></el-input>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item :label="$t('upload.form.school')"> <el-form-item :label="$t('upload.form.school')" prop="school">
<el-col :span="4"> <el-col :span="4">
<el-input v-model="form.school" <el-input v-model="form.school"
:placeholder="$t('input_please',{keyword:$t('upload.form.school')})"></el-input> :placeholder="$t('input_please',{keyword:$t('upload.form.school')})"></el-input>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item :label="$t('upload.form.year')"> <el-form-item :label="$t('upload.form.year')" prop="year">
<el-select v-model="form.year" :placeholder="$t('input_please',{keyword:$t('upload.form.year')})"> <el-select v-model="form.year" :placeholder="$t('select_please',{keyword:$t('upload.form.year')})">
<el-option v-for="n in 10" :key="n" :value="2019-n">{{2019-n}}</el-option> <el-option v-for="n in 10" :key="n" :value="2019-n">{{2019-n}}</el-option>
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item :label="$t('upload.form.summary')"> <el-form-item :label="$t('upload.form.summary')" prop="summary">
<el-col :span="4"> <el-col :span="4">
<el-input v-model="form.summary" type="textarea" <el-input autosize v-model="form.summary" type="textarea"
:placeholder="$t('input_please',{keyword:$t('upload.form.summary')})"></el-input> :placeholder="$t('input_please',{keyword:$t('upload.form.summary')})"></el-input>
</el-col> </el-col>
</el-form-item> </el-form-item>
<el-form-item :label="$t('upload.form.tag')"> <el-form-item :label="$t('upload.form.tag')" prop="tag">
<el-tag <el-tag
:key="tag" :key="tag"
v-for="tag in form.tag.dynamicTags" v-for="tag in form.tag.dynamicTags"
@ -57,22 +57,27 @@
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ {{$t('upload.form.tag')}}</el-button> <el-button v-else class="button-new-tag" size="small" @click="showInput">+ {{$t('upload.form.tag')}}</el-button>
</el-form-item> </el-form-item>
<el-form-item :label="$t('upload.form.content')"> <el-form-item :label="$t('upload.form.content')" prop="content">
<el-upload <el-upload
class="upload-demo" class="upload-demo"
action="https://jsonplaceholder.typicode.com/posts/" :action="GLOBAL.server_address+'/v1/api/file/upload'"
:on-preview="handlePreview" :on-preview="handlePreview"
:on-remove="handleRemove" :on-remove="handleRemove"
:before-remove="beforeRemove" :before-remove="beforeRemove"
:on-success="uploadOK"
:file-list="form.fileList" :file-list="form.fileList"
accept=".txt"> :limit="1"
<el-button size="small" type="primary">{{$t('upload.form.upload')}}</el-button> accept=".txt"
v-model="form.fileList"
ref="file">
<el-button size="small" type="primary" v-if="form.fileList.length===0">{{$t('upload.form.upload')}}</el-button>
<div slot="tip" class="el-upload__tip">{{$t('upload.form.upload_tip')}}</div> <div slot="tip" class="el-upload__tip">{{$t('upload.form.upload_tip')}}</div>
</el-upload> </el-upload>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">{{$t('button.submit')}}</el-button> <el-button type="primary" @click="onSubmit">{{$t('button.submit')}}</el-button>
<el-button @click="$refs.form.resetFields();$refs.file.clearFiles();form.fileList=[]">{{$t('reset')}}</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</template> </template>
@ -83,6 +88,7 @@
export default Vue.extend({ export default Vue.extend({
name: 'upload', name: 'upload',
data() { data() {
let that=this
return { return {
form: { form: {
type: '', type: '',
@ -98,6 +104,42 @@
}, },
fileList: [] fileList: []
}, },
rules: {
type:[{
required: true,
message: this.$t('select_please',{keyword:this.$t('upload.form.type')})
}],
author:[{
required: true,
message: this.$t('input_please',{keyword:this.$t('upload.form.author')})
}],
profession:[{
required: true,
message: this.$t('input_please',{keyword:this.$t('upload.form.profession')})
}],
school:[{
required: true,
message: this.$t('input_please',{keyword:this.$t('upload.form.school')})
}],
year:[{
required: true,
message: this.$t('select_please',{keyword:this.$t('upload.form.year')})
}],
summary:[{
required: true,
message: this.$t('input_please',{keyword:this.$t('upload.form.summary')})
}],
content:[{
validator:(rule, value, callback) => {
if(that.form.fileList.length===0){
callback(rule.msg)
}else{
callback()
}
},
msg: this.$t('upload_please',{keyword:this.$t('upload.form.content')})
}]
},
options: [{ options: [{
value: '硕士论文', value: '硕士论文',
label: '硕士论文' label: '硕士论文'
@ -108,6 +150,11 @@
} }
}, },
methods: { methods: {
//
uploadOK(response, file, fileList){
this.form.fileList=fileList
file.id=response.data
},
// //
handleClose(tag:string) { handleClose(tag:string) {
this.form.tag.dynamicTags.splice(this.form.tag.dynamicTags.indexOf(tag), 1) this.form.tag.dynamicTags.splice(this.form.tag.dynamicTags.indexOf(tag), 1)
@ -132,7 +179,14 @@
}, },
// //
handleRemove(file: any, fileList: any) { handleRemove(file: any, fileList: any) {
console.log(file, fileList) let that=this
this.GLOBAL.fetchJSON(`/v1/api/file/remove/${this.form.fileList[0].id}`,'DELETE',{},function(res) {
if(res.code==='200'){
that.form.fileList=[]
}else{
that.$message.error(that.$t('error_500').toString())
}
})
}, },
// //
handlePreview(file: any) { handlePreview(file: any) {
@ -140,11 +194,40 @@
}, },
// //
beforeRemove(file: { name: string }, fileList: any) { beforeRemove(file: { name: string }, fileList: any) {
return this.$confirm(this.$t('upload.form.remove',{file:file.name}).toString()) return this.$confirm(this.$t('upload.form.remove',{file:file.name}).toString(),{
confirmButtonText:this.$t('button.ok').toString(),
cancelButtonText:this.$t('button.cancel').toString()
})
}, },
// //
onSubmit(){ onSubmit(){
this.$alert(this.$t('upload.tip.ok').toString()) this.$refs.form.validate((valid: boolean) => {
if(valid){
let that=this
this.GLOBAL.fetchJSON('/v1/api/paper/upload','POST',{
type: this.form.type,
author: this.form.author,
profession: this.form.profession,
school: this.form.school,
year: this.form.year,
summary: this.form.summary,
tag:this.form.tag.dynamicTags.join(','),
fileId:this.form.fileList[0].id
},function(res) {
if(res.code==='200'){
that.$message.info(that.$t('upload.tip.ok').toString())
}else{
that.$message.error(that.$t('error_500').toString())
}
})
}else{
this.$message.error({
message: this.$t('form_err').toString(),
duration: 2000
})
return false
}
})
} }
} }
}) })

@ -14,16 +14,17 @@ Vue.prototype.GLOBAL ={
return !(r.top > z.bottom || r.bottom < z.top || return !(r.top > z.bottom || r.bottom < z.top ||
r.left > z.right || r.right < z.left); r.left > z.right || r.right < z.left);
}, },
postJSON(url,form,success){ fetchJSON(url,method, form, success){
fetch(this.server_address + url, { fetch(this.server_address + url, {
body:JSON.stringify(form), body:JSON.stringify(form),
method: 'POST', method: method,
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
} },
credentials: "include"
}).then(res=>res.json()).then(res=>success(res)).catch(err=>{ }).then(res=>res.json()).then(res=>success(res)).catch(err=>{
console.error(err) console.error(err)
}) })
} },
} }

Loading…
Cancel
Save