项目建立
导入依赖
这里笔者用的时Vscode开发工具所以我们按照vscode来讲解
在本地选择新建一个文件夹命名axios_crud并用vscode打开,如图
在该目录下初始化对象:点击左侧空白区域,右键在集成终端打开
右侧输入框初始化:
npm init -y //回车导入依赖
npm i [email protected] -S //下载Vue依赖 笔者采用的2.6.12版本 -S表示生产模式
npm i mockjs -S //下载mock
npm i axios -S //下载Vue的异步插件axios
目前的项目效果(图片截图截的太急了应该还有个axio文件夹在.bin下面):
新建目录
在项目根目录新建utils目录,api目录,mock目录,src目录 并按照笔者新建相应的js文件 效果如下
截至目前项目的初始化就完成了
静态html书写布局
首先初始化代码如下引入Vue,mock把架子搭好,代码如下:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询</title>
</head>
<body>
<div id="app">
</div>
<!--引入所有的js进来-->
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/mockjs/dist/mock.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../api/dao.js"></script>
<script src="../mock/logResp.js"></script>
<script src="../utils/request.js"></script>
<script>
new Vue({
}).$mount('#app')
</script>
</body>
</html>
页面的架子就差不多了…
布局mock
页面我们简单来弄 主要讲流程,页面上我就放6个按钮 分别对应增删改查 登录 和分页显示 mock做后台 从登录开始我们一个一个来:
打开logResp.js文件如下配置 这是我们的后台返回的json 由于只是简单演示前端流程(大神勿喷哈) 我们前端写死一点登录即返回登陆成功
<!--这里为什么用正则我在下文会详细说-->
Mock.mock(RegExp('http://mock.api.com/log' + '.*'), 'get', {
"code": 200,
"flag": true,
"message": "登录成功"
})
布局request.js
这个utils下的文件也是刚才让大家创建好的 这个文件相当于是前端发出请求的开始 主要任务是新建一个axios实例 命名叫request
const request =axios.create({
baseURL:'http://mock.api.com',//地址头部具体的发送内容我们在dao层写
timeout:20000,//随便写个等待时间
})
dao层
打开api中的dao.js 这个是我们前后端的桥梁
const dao ={
/*用户登录测试*/
log(name,pass){
return request({
<!--此处的url拼接在request实例中的baseURL参数之后
http://mock.api.com+url-->
url:`/log?name=${
name}&$pass=${
pass}`,//请求地址的后半部分
method:'get',//请求方式
})
}
}
相信大家也发现了登录我采用get的请求方式,get是无法用json的 为了解决跨域问题在mock.js的地址那里我用正则也就是说只要地址的前面部分是对的那就能够拦截成功 和?后的内容无关
请求发送
html和vue
先把页面的按钮和单击事件给办了…
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>查询</title>
</head>
<body>
<div id="app">
<!--页面上只有一个按钮-->
<button @click="log">登陆测试</button>//绑定单击事件
<p>{
{result}}</p>
</div>
<script src="../node_modules/vue/dist/vue.js"></script>
<script src="../node_modules/mockjs/dist/mock.js"></script>
<script src="../node_modules/axios/dist/axios.js"></script>
<script src="../api/dao.js"></script>
<script src="../mock/logResp.js"></script>
<script src="../utils/request.js"></script>
<script>
new Vue({
data:{
obj:{
/*我们把账号密码写死了 如下*/
id:250,
name:'elena',
pass:'12345',
age:20,
salary:5000.00,
type:1,
},
result :'',
},
methods:{
log(){
dao.log(this.obj.name,this.obj.pass)//调用dao层的log 把请求地址补全
.then(response=> {
console.log(response.data)
this.result = response.data.message
})
}
}
}).$mount('#app')
</script>
</body>
</html>
运行
ok我们的目的已经达成了 运行一下试试点击Vscode右下角 Go live (先安装好go live插件)
由于笔者已经实现全部功能了所以和大家显示不一样后续会陆续介绍剩下的功能
点击登录看看你是不是跟我一样的效果呢?
F12开发者工具查看一下!
总结
虽然功能十分简单 但是整个流程就是模拟的前后端交互的前端部分的完整流程 麻雀虽小五脏俱全吧 后续会更新把剩下的功能补全 纯前端练习! 适合刚接触Vue的小伙伴 enjoy your ride
下一篇Vue 异步请求二 普通查询