Input type="text" v-model="formInline.user" placeholder="Username"

Icon type="ios-person-outline" slot="prepend" /Icon

/Input

/FormItem

FormItem prop="password"

Input type="password" v-model="formInline.password" placeholder="Password"

Icon type="ios-lock-outline" slot="prepend" /Icon

/Input

/FormItem

每一个formItem即是表格的一项。prop主要参数即是此项所填数据信息的认证标准。

3、做报表时要要分页查询及其和后台管理的互动

export async function getInformList(pid = 0, page_size, page_num, keyword){

return $http.post('Inform_Inform.getList',

{ pid: pid,

page_size: page_size,

page_num: page_num,

keyword: keyword,

});

它是查寻插口,必须给后台管理传送4个主要参数,page_size是每张展现的总数。
济宁网站建设难page_num就是指当今是第两页。Keyword用以检索时查寻重要字有关的list。

在网页页面原始化情况下,先运作一次getInformList涵数,取到全部的数据信息

再检索的情况下,把key值传送给keyword.用watch来监视keyword的转变。

created: function () {

this.getAllInformList();

},

watch:{

keyword: function (newQuestion) {

console.log(newQuestion)

this.search();

},

}

分页查询关键做两台分

(1)、点一下页数,显示信息本页。-change恶性事件。这一恶性事件方式只必须把涵数的回到值页码赋给要传送给网络服务器插口的主要参数就可以。

(2)、点一下每张显示信息是多少总数,-page-size-change恶性事件,这一恶性事件方式一样把涵数回到的总数传送给插口插口。

//更改页数

change(page) {

this.page_num = page;

this.getAllInformList();

},

changeSize(page_size) {

this.page_num = 1;

this.page_size = page_size;

this.getAllInformList();

}

4、在网页页面A点一下改动按键,要去网页页面B再次填写表格单,这一表格默认设置的值是必须发送给网页页面B的。

念头:在网页页面A点一下改动按键的情况下把这总数据的id值传送给网页页面B,应用到路由器传参。

this.$router.push({name:'announce',params:{id:id}});

留意!那样传送主要参数的方法不是会在访问器url栏显示信息?id=123那样。仅有下列这类方法传参时候有。

this.$router.push({path: '/describe',query: {id: id}})

那麼这时B网页页面必须分辨是不是是以A网页页面这一路由器进到本网页页面而且带上一个params.id主要参数。

beforeRouteEnter(to,from,next){

next(vm = {

if(to.params.id){

//恳求后台管理插口,依据此id寻找这一总数据而且,填写默认设置数据信息,

}else{

//并不是从改动这一实际操作进的网页页面,不做解决

}

}

5、此次新项目前后左右端插口查询用的是postman,恳求后台管理插口的情况下有时候会出現499,它是由于给后台管理的token到期了。

升级token :开启fidder抓包软件专用工具,进到一个恳求插口的网页页面。点一下某一项恳求,寻找响应头的token,而且在postman里边升级就可以。

6、此次新项目引进了富文字编写器。

import { quillEditor } from 'vue-quill-editor'

这一编写器会把传到的照片的详细地址开展base64编号,那样提交到网络服务器会慢,数据信息较长。因此此次解决是先把相片提交到网络服务器,网络服务器出示一个插口把照片详细地址变为真正详细地址,网页页面取到这一详细地址在显示信息出去。

7、对一条纪录增加和改动,能够用同一个网页页面,只不过是恳求的插口不一样罢了。

网页页面 恳求插口 作用

增加公示 http://192.168.1.13/ApiForProjectManage/public/?s=Inform_Inform.addInform 把本网页页面form表格开展递交,递交的数据信息为data=formItem

改动公示 http://192.168.1.13/ApiForProjectManage/public/?s=Inform_Inform.getInfo inform_id=12219 依据公示ID来搜索本总数据

http://192.168.1.13/ApiForProjectManage/public/?s=Inform_Inform.editInform 把改动后的表格开展递交,递交的数据信息为formItem,留意这条公示id不会改变

思索:在公示网页页面点一下编写(改动)按键,会进到编写网页页面,这时候要带上本条公示form_id。来到编写网页页面。必须分辨是以建立公示按键抵达的還是根据点一下编写回来的,必须分辨路由器由来。befoerRouterEnter

editInform(id) {

console.log(id);

this.$router.push({name:'announce',params:{id:id}});

}

vm是一个部件

beforeRouteEnter(to,from,next){

next(vm = {

if(to.params.id){

vm.isModify=true;

vm.announceList(to.params.id);

vm.inform_id_temp=to.params.id;

}

})

},

留意这儿启用this.announceList不是行的。务必用vm来启用。vm能够获得到method中的方式 及其自变量

递交按键增加和编写都不一样。

Button v-show="!isModify" type="primary" @click="handleSubmit('formValidate')" 确定递交 /Button

Button v-show="isModify" type="primary" @click="handleModify('formValidate')" 确定改动 /Button

formItem:{

title: '',

content: '',

inform_type: '',

inform_id: 0

},

在这里里有一个小点,困了我一个半钟头。一刚开始我仅有3总数据,沒有inform_id.由于增加的情况下,只要递交前三总数据,Inform_id是后台管理转化成的。而改动的情况下,显示信息插口启用取得成功,可是数据信息并沒有更改,之后查验发觉inform_id务必也事前界定在formItem里边。默认设置为0,假如是启用改动插口,在把Inform_id再次取值为从上一个网页页面回来时带上的主要参数。

handleModify(name) {

this.$refs[name].validate(valid = {

if (valid) {

let app = this;

app.send_loading = true;

app.formItem.inform_id = app.inform_id_temp;

modifyInform(app.formItem).then(res = {

console.log(app.formItem.inform_id);

const code = res.ret;

const msg = res.msg;

if (code !== 200) {

app.$Message.warning(msg);

} else {

app.$Message.success('改动取得成功');

this.$router.push('list');

// app.getTeamList()

}

});

}

})

},

8、根据种类挑选公示目录时,我给Select关联恶性事件,。-change。

---------------------

创作者:runner_123

全文:https://blog.csdn.net/runner_123/article/details/85169975

著作权申明:文中为时尚博主原創文章内容,转截请另附博闻连接!

小结:iview(根据vue.js的开源系统ui部件)学习培训的一些坑

作 者:admin

Input type="text" v-model="formInline.user" placeholder="Username" Icon type="ios-person-outline" slot="prepend" /Icon /Input /FormItem FormItem prop="password" Input type="password" v-model="formInline.password" placeholder="Password" Icon


立 刻 购 买



扫描二维码分享到微信

在线咨询
联系电话

400-888-8866