做项目过程中,需要用到后台模拟数据,在机缘巧合下发现了模拟,在学习使用的过程中又偶遇了axios-mock-adapter。现在将实例展示如下:
实例是建立在vue-cli的基础上实现
需要提前安装的插件有:
axios: <代码> npm安装axio——保存
mockjs: <代码> npm安装mockjd——save-dev
axios-mock-adapter: <代码> npm安装axios-mock-adapter——save-dev
第一种引入方式:按照es6的语法,以进口的方式引入
从“进口axios axios ';
从“axios-mock-adapter”进口MockAdapter; 之前
第二种引入方式:以要求方式引入
var axios=要求(“axios”);
var MockAdapter=要求(“axios-mock-adapter”);
整个项目的代码结构如下:
首先新建一个login.vue文件,代码如下
& lt; template>
& lt; el-form
类=" login-container "
ref=" AccountForm "
:模型="帐户"
:规则=" loginRules”
标签位置=白蟆北?
& lt; h4> Login
& lt; el-form-item道具=坝没北?
& lt; el-input
v模型=" account.username "
type=" text "
占位符="账号”比;
& lt;/el-input>
& lt;/el-form-item>
& lt; el-form-item道具=懊苈搿北?
& lt; el-input v模型="帐户。密码" type="密码"占位符="密码”祝辞& lt;/el-input>
& lt;/el-form-item>
& lt; el-checkbox v模型="检查" checked>记住密码& lt;/el-checkbox>
& lt; el-form-item>
& lt; el-button类型=爸鳌弊４莑ogin
& lt; el-button类型=爸鳌弊４莚eset
& lt;/el-form-item>
& lt;/el-form>
& lt;/template>
& lt; script>
从“. ./axios进口{requseLogin}/api”;
出口默认{
名称:“登录”,
数据(){
返回{
账户:{
用户名:”,
密码:"
},
loginRules: {
用户名:[{要求:真的,信息:“请输入账号”,触发:‘模糊’}),
密码:[{要求:真的,信息:“请输入密码”,触发:‘模糊’}),
},
检查:没错,
登录:假
};
},
方法:{}
& lt;/script>
& lt; scoped>风格;
身体{
背景:# DFE9FB;
}
.login-container {
宽度:350 px;
margin-left: 35%;
边界:1 px固体# d3d3d3;
box-sizing: border-box;
填充:10 px 30 px;
border - radius: 5 px;
}
.el-button {
宽度:100%;
box-sizing: border-box;
保证金:10 px 0;
}
& lt;/style>
由于路由的默认指向是HelloWorld,所以修改路由器文件夹下的index.js
从“Vue”进口Vue
从“vue-router”进口路由器//懒加载方式,当路由被访问的时候才加载对应组件
const登录=解决=比;要求(“@/组件/登录”,解决)
Vue.use(路由器)
出口默认新路由器({
路线:[{
路径:“/?
名称:“登录”,
组件:登录
}]
此时登录界面样式基本写好,接下来修改主要。js,将需要引入的文件引入
如下:
从“Vue”进口Vue
导入应用程序从“/App。”
从“进口路由器。/路由器的
从“element-ui”进口ElementUI
导入“element-ui/lib/theme-chalk/index.css”
从“axios”进口axios
Vue.prototype。$ ajax=axios//axios不能直接使用使用引入,只能每个需要发送请求的组件中即时引入,两种引入方式//第一种引入方式:引入axios后,修改原型链//导入axios从“axios”//Vue.prototype。$ axios=axios
Vue.config。productionTip=false;
Vue.use (ElementUI);/* eslint-disable没有新*/新Vue ({
埃尔:“#应用”,
路由器,
商店,//使用
组件:{应用},
模板:“& lt; App/祝辞;”
})
刷新页面
接下来就是对login.vue页面进行改造:增加登录点击事件和重置事件
