The above SSMP integration case (10) Adjust the project environment on the vue side Send the request Basic interface writing We have built a basic page structure
Then let's make a new function.
First of all, we must add it after the user clicks on the new function, and then we will process this logic.
Our previous code addition is bound to an event,
but there is no content in this AddBook.
First, we have to write A component to handle the logic of adding a piece of book data.
We create a file called bookFillIn.vue under the components folder.
The reference code is as follows
<template>
<el-dialog
:title="title"
:visible.sync="switchs"
:before-close="bookClose"
width="500px"
>
<el-form
label-width="120px"
:model="formInline"
:rules="rules"
ref = "formInline"
size="small"
>
<el-form-item
label="图书名称："
prop="name"
>
<el-input
v-model="formInline.name"
placeholder="请输入图书名称"
style="width: 300px;"
></el-input>
</el-form-item>
<el-form-item
label="图书类别："
prop="type"
>
<el-select
v-model="formInline.type"
placeholder="请选择图书类别"
style="width: 300px;"
>
<el-option
v-for = "item in typeIn"
:label="item.label"
:value="item.value"
:key="item.value"
></el-option>
</el-select>
</el-form-item>
<el-form-item label="图书描述：">
<el-input
type="textarea"
style="width: 300px;"
:rows="2"
placeholder="请输入图书描述"
v-model="formInline.description">
</el-input>
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button @click="bookClose">关闭</el-button>
<el-button type="primary" @click="submitTo">确定</el-button>
</div>
</el-dialog>
</template>
<script>
export default {
name: 'bookFillIn',
data() {
return {
title: "",
switchs: false,
formInline: {
name: "",
type: "",
description: ""
},
rules: {
name: [
{
required: true, message: '图书名称不能为空', trigger: 'blur' },
],
type: [
{
required: true, message: '图书类别为必选项', trigger: 'blur' },
]
},
typeIn: [
{
value: 0,
label: "知识科普"
},
{
value: 1,
label: "休闲图书"
},
{
value: 2,
label: "官方记录"
},
{
value: 3,
label: "典藏"
}
]
}
},
methods: {
bookClose() {
this.switchs = false;
},
submitTo(){
this.$refs.formInline.validate((valid) => {
if (valid) {
console.log("提交");
}
});
},
sensor(name){
this.switchs = true;
this.title = name?name:"";
},
}
}
</script>
<style scoped>
</style>
Here we write an el-dialog Element pop-up window component
and then we define a form for users to manually fill in the book information
Here we loop through the typeIn to add selection items to the el-select drop-down box
and then we verify that the data is empty through rules In order to prevent users from submitting empty data to us,
we need everyone to have a little vue2+Element UI foundation
, and then after writing, our App.vue will call this component
We call it as shown below and then use
it Then we modify the AddBook function as follows
AddBook() {
this.$refs.bookFill.sensor("添加图书");
},
When AddBook is triggered, we get our bookFillIn component element through refs and then call the sensor function below to open the pop-up window.
We start the project and click the New button.
The running results are as follows, and
our pop-up window will come out
Then we don’t fill in anything and just click the OK button in the lower right corner,
the above will prompt us
So now we need to call the interface.
We add a function to bookApi.js under the api under src.
The reference code is as follows
export function AddBook(data){
return request({
url:`/books`,
method:'post',
data:data,
})
}
Because we used the post request to add before and our data is under the body, so we use data to pass parameters
Then we introduce the AddBook we just wrote in bookFillIn.vue under components under src
and then change the submitTo submission data method in bookFillIn.vue as follows
submitTo(){
this.$refs.formInline.validate((valid) => {
if (valid) {
AddBook(this.formInline).then(res => {
if(res.state == 200) {
this.$message({
message: res.message,
type: 'success'
});
}else{
this.$message.error(res.message);
}
})
}
});
},
Here we directly call AddBook to pass in the processed formInline
and then judge the return value res.state == 200,
because what we processed before is state 200, which means success and 500 failed.
Use two pairs, use different prompt syntax, and
use the message returned by our background Make a prompt
, then we run the code to fill in the corresponding form information in the pop-up form,
and then we click OK.
The running results are as follows.
We see the information returned by the console request
, and there is no problem
Then look at the database table, our data has already been added,
but here we still have a few problems to deal with.
First, we can’t see it on the list for the first time after adding it. Second, the pop-up box will not close automatically after adding.
First, we change the local code used by the bookFill component in App.vue to this
<book-fill ref = "bookFill" @getAll = "getAll" />
Pass the getAll function of our query to the subcomponent and then change the submitTo function
of our subcomponent bookFillIn.vue as follows
submitTo(){
this.$refs.formInline.validate((valid) => {
if (valid) {
AddBook(this.formInline).then(res => {
if(res.state == 200) {
this.$message({
message: res.message,
type: 'success'
});
this.bookClose();
this.$emit('getAll');
}else{
this.$message.error(res.message);
}
})
}
});
},
You can see that after we succeed, we call bookClose to close the current pop-up and then call getAll from the parent component
to let the list re-query.
We click OK,
the pop-up is closed, and our data is refreshed.
But here is another problem.
After we add it, click New again and we will find that the content we entered before is still on it.
Because vue is a front-end responsive framework, the form here will not jump after it is submitted, so the interface is not updated.
We need to reset the data every time we open the popup window
We define a function in bookFillIn.vue.
The reference code is as follows
resetting() {
this.formInline = {
name: "",
type: "",
description: ""
}
}
Then call it in the sensor that opens the pop-up window,
then we add another piece of data, and
then reopen the pop-up window to see that everything is normal
