json-server
npm install -g json-server 先安装json-server，在电脑上进行全局安装，如果想局部安装也可以
直接使用创建一个db.json文件
使用 json-server --watch db.json 启动服务器
mockjs
json-server与mockjs可以很方便的实现前后台分离的交互
首先在项目中下载mockjs npm i mockjs -S 然后建立一个mock文件： eg.aaa.js
var Mock = require('mockjs')
var data = Mock.mock({
// 属性 list 的值是一个数组，其中含有 1 到 10 个元素
'user|3-6': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1,
'name':'@cfirst@cname',
'imgDes':"",
'img': () => Mock.Random.image('80x80',Mock.Random.color(),Mock.Random.province())
}]
})
// 输出结果
// console.log(JSON.stringify(data, null, 4))
module.exports= ()=>{
return data
}
生成结果：
id|+1 ：1，2，3
@cfirst@cname ：姓氏+名字
imgDes：可以传空值
'img': () => Mock.Random.image('80x80',Mock.Random.color(),Mock.Random.province())
生成一个固定80*80大小的图片 图片的颜色、上面写有的省份随机
然后通过json-server aaa.js 启动运行这个后台数据
接着可以编写一个前台的html页面与后台进行交互
eg.
可以实现图片上传的一个例子
使用到vue
vue：cdn.bootcss.com/vue/2.6.10/…
axios：cdn.bootcss.com/axios/0.19.…
html：
<div id="app">
<!--文本输入框-->
<input type="text" v-model="inputName">
<!--图片/文件上传-->
<input type="file" accept="image/*" ref='input' @change="handleFileChange"/>
<!--这里用来显示返回的值-->
<div class="box" v-for="user in users">
<div class="userId" @click="deleteImg(user.id)">{{user.id}}</div>
<div class="userName">{{user.name}}</div>
<img class="userImg" :src="user.img">
</div>
<!--点击这里将input的内容填入数据-->
<button @click="add(inputName)">添加内容</button>
</div>
script：
new Vue({
el:'#app',
data:{
users:null, //接受返回的数据
newUrl:null, //base64位的路径
inputName:null,//文本框中的内容
id:null,//用来切换要删除的内容
fileName:'',//文件名
preUrl:''//存储本地预览的路径
},
mounted(){
this.getUserInfo();
},
methods:{
//用来处理文件上传的路径
handleFileChange:function(){
var that = this
var file = this.$refs.input.files[0]; this.preUrl=window.URL.createObjectURL(this.$refs.input.files[0])
if(file.type.indexOf("image")==0){
var reader = new FileReader(); //创建FileReader对象实例reader
reader.readAsDataURL(file); //将图片url转换为base64码
reader.onload = function(){
that.newUrl = this.result;
}
};
},
//删除当前id的所有数据
//入参e代表当前点击值的id
deleteImg:function(e){
var that = this;
axios({
method:'delete',
url:'http://localhost:3000/user/'+e,
data:{}
}).then(function(res){
alert('delete success!')
that.getUserInfo();
})
},
//添加数据，像json-server中添加
add:function(inputName){
var that = this;
console.log(that.newUrl)
axios({
method:'post',
url:'http://localhost:3000/user',
data:{
name:inputName,
imgDes:that.preUrl,
img:that.newUrl
}
}).then(function(res){
console.log(res)
that.getUserInfo();
that.inputName='';
})
},
//渲染请求数据
getUserInfo(){
var that = this; axios.get('http://localhost:3000/user').then(function(res){
that.users=res.data
})
}
}
})
