vue 與 json-server 新增資料 （一）
阿新 • • 發佈：2018-12-21
列表頁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": "標籤八" }
]
}
]
}