vue 与 json-server 新增数据 （一）

列表页server.vue

<!-- 按钮  -->
<div class="tj">   
	<span class="demonstration">ID</span>			
	<el-input class="int-1"  v-model='numId'  placeholder="请输入ID"></el-input>
    <el-button  type="info"  @click="sou()">确定</el-button>     
	<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:[], //数据列表
     selectData:[],
     editbox:'', //编辑
     numId:'', //查询id
  
     ok:false,//弹窗
     pho: '', //上传头像
     dialogVisible: false,   		
    //url:"/static/db.json",
    currentPage:1,
    pagesize:5,  
    }
},

新增页 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);
        }
       ////、上传头像 END
 
    }
}

这里把图片转成base64 的了，也可以不转 

json格式

{
    "imgListData": [
        {
            "id": "1",
            "title": "标题",
            "content": "描述",
            "city": "扬州",
            "adrs": "地址",
            "imgUrl": "图片路径",
            "dataTimes": "2017-10-27",
            "peo": "姓名",
            "tel": "电话",
            "pho": "头像图片路径",
            "tag": [
                { "tags": "标签一"  },
                { "tags": "标签三" },
                { "tags": "标签六" },
                { "tags": "标签八" }
            ]
        }
    ]
}