vue使用mock教程,vue+mock
这篇文章主要给大家介绍了关于在某视频剪辑软件项目中使用mock.js的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
在某视频剪辑软件项目中使用mock.js
开发工具选择：Vscode
1.使用命令行创建某视频剪辑软件项目（手动选择巴别塔、路由器、Vuex)
2.导入元素-用户界面（为了显示效果好一点),命令行输入
国家预防机制一元素-ui -S
3.在主要的。射流研究…中进行引用
从"元素-用户界面"导入ElementUI
导入“元素-ui/lib/主题-粉笔/索引。CSS”；//样式文件一定要引入
Vue.use(ElementUI)
4.新建src/views/main/List.vue使用元素用户界面中的自定义列模板
模板
差异
埃尔表
:data=tableData
style=宽度：100%
埃尔-表格-列
标签=日期
宽度=180
模板槽-范围="范围"
i class=el-icon-time/i
span style= margin-left:10px " { scope。划。日期} }/span
/模板
/El-表格-列
埃尔-表格-列
标签=姓名
宽度=180
模板槽-范围="范围"
埃尔-波普沃触发器=悬停位置=顶部
p姓名：{{ scope.row.name }}/p
p住址：{{ scope.row.address }}/p
div slot= reference class= name-wrapper
El-tag size= medium { scope。划。name } }/El标签
/div
/el-popover
/模板
/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
埃尔按钮
size=mini
@click=handleEdit(范围 index，scope.row)编辑/el-button
埃尔按钮
size=mini
类型=危险
@click=handleDelete(范围 index，scope.row)删除/el-button
/模板
/El-表格-列
/el-table
/div
/模板
脚本
导出默认值{
data() {
返回{
表数据：[{
日期："2016年5月2日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1518 弄
}, {
日期："2016年5月四日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1517 弄
}, {
日期："2016年5月一日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1519 弄
}, {
日期："2016年5月3日",
名称： 王小虎，
地址： 上海市普陀区金沙江路1516 弄
}]
}
},
方法：{
handleEdit(索引，行){
console.log(索引，行);
},
句柄删除(索引，行){
console.log(索引，行);
}
}
}
/脚本
5.router/index.js配置如下
从“vue”导入某视频剪辑软件
从“vue路由器"导入某视频剪辑软件路由器
//导入组件
导入列表自./views/main/List.vue
Vue.use(VueRouter)
常量路由=[
{
路径："/",
名称：列表，
组件：列表
},
]
const router=new VueRouter({
路线
})
导出默认路由器
现在的网页显示效果如下
5.安装mockjs和爱可信
新公共管理安装-保存-开发模拟
新公共管理安装-保存爱可信
6.新建api/getData.js和请求。射流研究…
请求。射流研究…
从" axios "导入爱可信
const service=axios.create({
baseURL:"http://localhost:8080 "，
})
导出默认服务
getData.js
从导入爱可信./请求
//数据列表接口
export const getList=()=axios。get(/list )
7.在科学研究委员会下新建模拟/模拟服务器。射流研究…
从“莫克杰”导入模拟
//从""导入数据 data.json
嘲笑。mock( http://localhost:8080/list ，{
代码：0,数据：
{
数据1000: [
{
id:"@ id "，//随机编号
名称： @name ，//随机名称
昵称： @last ，//随机昵称
电话：/^1[34578]\d{9}$/,//随机电话号码
年龄11-99: 1,//年龄
地址： @county(true)，//随机地址
电子邮件： @email ，//随机邮箱
伊斯梅尔： @布尔,//随机性别
创建时间：“@ datetime”，//创建时间
avatar() {
//用户头像
回复模拟Random.image(100100 ，模拟Random.color()， #757575 ， png ，this.nickName)
}
}
]
}
})
8.在主页。射流研究…中导入模拟服务器
"导入"。/mock/mockServer
9.修改src/views/main/List.vue(数据获取与绑定，设置表格居中)
模板
差异
El-table:data= table data style= width:600 px；边距：0自动
埃尔-表格-列标签=随机ID width=200
模板槽-范围="范围"
i class=el-icon-time/i
span style= margin-left:10px " { scope。划。id } }/span
/模板
/El-表格-列
埃尔-表格-列标签=姓名宽度=180
模板槽-范围="范围"
埃尔-波普沃触发器=悬停位置=顶部
p姓名：{{ scope.row.name }}/p
p住址：{{ scope.row.address }}/p
div slot= reference class= name-wrapper
El-tag size= medium { scope。划。name } }/El标签
/div
p邮箱：{{ scope.row.email }}/p
p性别：{{ scope.row.isMale }}/p
p昵称：{{ scope.row.nickName }}/p
p手机号：{{ scope.row.phone }}/p
p头像：/p
/el-popover
/模板
/El-表格-列
埃尔-表格-列标签=操作
模板槽-范围="范围"
El-button size= mini @ click= handleEdit(scope .$index，scope.row)
编辑/el-button
埃尔按钮
size=mini
类型=危险
@click=handleDelete(范围 index，scope.row)
删除/el-button
/模板
/El-表格-列
/el-table
/div
/模板
脚本
从导入{ getList }././API/get data ；
导出默认值{
data() {
返回{
表格数据：[
//{
//日期： 2016-05-02 ,
//名称： 王小虎，
//地址： 上海市普陀区金沙江路1518 弄，
//},
//{
//日期： 2016-05-04 ,
//名称： 王小虎，
//地址： 上海市普陀区金沙江路1517 弄，
//},
//{
//日期： 2016-05-01 ,
//名称： 王小虎，
//地址： 上海市普陀区金沙江路1519 弄，
//},
//{
//日期： 2016-05-03 ,
//名称： 王小虎，
//地址： 上海市普陀区金沙江路1516 弄，
//},
],
};
},
方法：{
handleEdit(索引，行){
console.log(索引，行);
},
句柄删除(索引，行){
console.log(索引，行);
},
异步getMockList() {
尝试{
const result=await getList()；
//console.log(结果);
if (result.data.code==0) {
这个。表数据=结果。数据。数据。数据；
}
//控制台。日志(结果。数据。数据。数据)；
} catch(错误){
console.log(错误);
}
},
},
已安装(){
这个。getmocklist()；
},
};
/脚本
10.再次运行
鼠标放在姓名上，会有更多信息显示
显示测试的数据1000条
分页就懒得做了。
总结
到此这篇关于某视频剪辑软件项目中使用mock.js的文章就介绍到这了，更多相关项目使用mock.js内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。