Vue axios增删改查纯前端练习一登录

Vue axios_crud纯前端练习一登录项目建立导入依赖新建目录静态html书写布局布局mock布局request.jsdao层请求发送html和vue运行总结项目建立导入依赖这里笔者用的时Vscode开发工具所以我们按照vscode来讲解在本地选择新建一个文件夹命名axios_crud并用vscode打开,如图在该目录下初始化对象:点击左侧空白区域,右键在集成终端打开右侧输入框初始化:np

商朝

968人浏览 · 2021-01-13 21:04:39

商朝 · 2021-01-13 21:04:39 发布

Vue axios_crud纯前端练习一登录

项目建立
- 导入依赖
- 新建目录
静态html书写布局
请求发送
- html和vue
- 运行
总结

项目建立

导入依赖

这里笔者用的时Vscode开发工具所以我们按照vscode来讲解
在本地选择新建一个文件夹命名axios_crud并用vscode打开,如图
新建项目
在该目录下初始化对象:点击左侧空白区域,右键在集成终端打开

右侧输入框初始化:

npm init -y                 //回车导入依赖

npm i vue@2.6.12 -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>