vue 与 json-server 新增数据
列表页server.vue
<!-- 按钮 --><div class="tj">
<router-link to="/addlist">
<el-button type="info">新增数据</el-button>
</router-link>
</div>
<!--列表-->
<template>
<!-- 我这里用了分页 不用分页的话
<el-table :data="ulList" style="width: 100%" border>
-->
<el-table :data="ulList.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%" border>
<el-table-column prop="id" sortable label="ID" width="180"></el-table-column>
<el-table-column prop="title" label="标题"></el-table-column>
<el-table-column prop="city" label="城市"></el-table-column>
<el-table-column prop="peo" label="姓名"></el-table-column>
<el-table-column prop="tel" label="手机"></el-table-column>
<el-table-column prop="dataTimes" label="时间"></el-table-column>
<el-table-column label="头像">
<template scope="scope">
<p class="pic">
<img :src="scope.row.pho" :alt="scope.row.peo" />
</p>
</template>
</el-table-column>
<el-table-column label="操作" width="300">
<template slot-scope="scope">
<el-button size="small" type="info" @click="handlexiugai(scope.$index, scope.row)">当前页修改</el-button>
<el-button size="small" type="warning" @click="handleEdit(scope.$index, scope.row)">跳转修改</el-button>
<el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
列表页js
data() { return {
ulList: [],
}
},
新增页 addlist.vue
<el-form :model="ruleForm" status-icon :rules="rulestest" ref="ruleFormstest" label-width="100px" class="demo-ruleForm"> <el-form-item label="姓名：" prop="peo">
<el-input v-model.peo="ruleForm.peo"></el-input>
</el-form-item>
<el-form-item label="ID" prop="id">
<el-input v-model.id="ruleForm.id"></el-input>
</el-form-item>
<el-form-item label="标题：" prop="title">
<el-input v-model.title="ruleForm.title"></el-input>
</el-form-item>
<el-form-item label="城市：" prop="city">
<el-input v-model.city="ruleForm.city"></el-input>
</el-form-item>
<el-form-item label="手机：" prop="tel">
<el-input v-model.tel="ruleForm.tel"></el-input>
</el-form-item>
<el-form-item label="时间" prop="dataTimes">
<el-date-picker v-model.dataTimes="ruleForm.dataTimes" @change="times" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"></el-date-picker>
</el-form-item>
<el-form-item label="头像：" prop="pho">
<el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="onchange" :before-upload="beforeAvatarUpload">
<img v-if="imageUrl" :src="imageUrl" width="360" height="180" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</el-form-item>
<el-form-item label="密码：" prop="pass">
<el-input type="password" v-model.pass="ruleForm.pass"></el-input>
</el-form-item>
<el-form-item label="确认密码：" prop="pass2">
<el-input type="password" v-model.pass2="ruleForm.pass2"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="submitForm('ruleFormstest') ">提交</el-button>
<el-button @click="resetForm('ruleFormstest')">重置</el-button>
</el-form-item>
</el-form>
这里只对密码做了简单验证 ，其他验证没加，需要的可以自己加
js部分
export default { data() {
////密码
var zhengze = /^(?![^a-zA-Z]+$)(?!\D+$).{2,10}/;
var passW = (rules, value, callback) = > {
if (value === '') {
callback(new Error('请输入密码！'));
} else {
if (!zhengze.test(this.ruleForm.pass)) {
callback(new Error('密码必须是长度为2-10位的字母和数字组成！'));
}
callback();
}
};
////确认密码
var passW2 = (rules, value, callback) = > {
if (value === '') {
callback(new Error('请再次输入密码！'));
} else if (value !== this.ruleForm.pass) {
callback(new Error('两次输入密码不一致!'));
} else {
callback();
}
};
////手机号
var yPhone = /^\d{11}$/;
var phone = (rules, value, callback) = > {
if (value === '') {
callback(new Error("请输入手机号码！"));
} else if (!yPhone.test(this.ruleForm.tel)) {
callback(new Error("请输入11位的正确手机号！"))
} else {
callback();
}
};
return {
ruleForm: {
peo: '',
id: '',
title: '',
city: '',
pass: '',
pass2: '',
pho: '',
dataTimes: '',
tel: '',
},
//上传头像
imageUrl: '',
dialogVisible: false,
rulestest: {
name: [
{
required: true,
message: '请输入姓名',
trigger: 'blur'
},
{
min: 1,
max: 10,
message: '长度在 1 到 100个字符',
trigger: 'blur'
}
],
pass: [
{
required: true,
validator: passW,
trigger: 'blur'
}
],
pass2: [
{
required: true,
validator: passW2,
trigger: 'blur'
}
],
}
};
},
methods: {
//、、提交
submitForm(formName) {
this.$refs[formName].validate((valid) = > {
if (valid) {
// this.ruleForm.pho=this.imageUrl;//获取图片src
this.$message.success('提交成功！');
this.$axios.post('api/imgListData', this.ruleForm).then((res) = > {
console.log('添加成功')
//回到列表页
this.$router.push({
name: 'server'
})
}, function (err) {
console.log(err, '添加失败')
})
} else {
console.log('error submit!!');
return false;
}
});
},
///时间格式转换
times(time) {
this.ruleForm.dataTimes = time
},
//、、重置
resetForm(formName) {
this.$refs[formName].resetFields();
},
////、上传头像
handlePictureCardPreview(file) {
this.imageUrl = file.url;
this.dialogVisible = true;
console.log(this.imageUrl)
},
handleAvatarSuccess(res, file) {
this.imageUrl = URL.createObjectURL(file.raw);
//console.log(this.imageUrl)
},
beforeAvatarUpload(file) {
const isJPG = file.type === 'image/jpeg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isJPG) {
this.$message.error('上传头像图片只能是 JPG 格式!');
}
if (!isLt2M) {
this.$message.error('上传头像图片大小不能超过 2MB!');
}
return isJPG && isLt2M;
},
onchange(file, fileList) {
let _this = this;
let event = this.event || window.event;
file = event.target.files[0];
let reader = new FileReader();
// const reader= new FileReader()
//转base64
reader.onload = function (e) {
_this.imageUrl = e.target.result //将图片路径赋值给src
_this.ruleForm.pho = e.target.result //获取pho的src
// console.log(_this.imageUrl)
}
reader.readAsDataURL(file);
}
}
}
这里把图片转成base64 的了，也可以不转
以上是 vue 与 json-server 新增数据 的全部内容， 来源链接： utcz.com/z/375504.html
