mysql+node+vue 初步连通

mysql+node+vue 初步连通

axios 封装

http_axios.js

import axios from 'axios';
import Vue from 'vue'

const requests = axios.create({
	baseURL:'http://localhost:8000/',
	timeout:600 //请求超时时间
})

//错误处理函数

const err = (error) =>{
	if(error.response){
		const data = error.response.data;
		if(error.response.status === 403){
			Notify({type:'danger',message:data.message||data.msg});
		}
		if(errsor.response.status === 401){
			Notify({type:'danger',message:'你没有权限.'});
		}
	}
	return Promise.reject(error);
}

//request interceptor 请求拦截器
requests.interceptors.request.use((config)=>{
	// localStorage.getItem(key);//获取指定key本地存储的值
	// localStorage.setItem(key,value);//将value存储到key字段
	// localStorage.removeItem(key);//删除指定key本地存储的值
	const token = localStorage.getItem('token');
	if(token){
		config.headers['token'] = token;
	}
	return config;
},err)
//response interceptor 接收拦截器
requests.interceptors.response.use((response)=>{
	const res = response.data;
	if(res.code !== 0&&res.code !==200){
		if(res.code === 410||res.code === 403||res.code === 999){
			Notify({type:'danger',message:'请登录'});
		}
		return Promise.reject('error');
	}else{
		return res;
	}	
},err);

Vue.prototype.rq = requests
export default{
	requests
}

node数据库请求封装(mysql)

server_db.js

const mysql = require('mysql');

const base = (sql,data,callback) =>{
	//创建数据库连接
	const connection = mysql.createConnection({
		host:'localhost',
		user:'root',
		password:'root',
		database:'ifs_dev'
	});
	//处理数据库请求
	connection.query(sql,data,function(error,results,fields){
		if(error){
			throw error;
		}
		if(results[0].per_con >= 1){
			callback(results);
		}
	});
	//关闭数据库连接
	connection.end();
}

module.exports = base;

登录login接口封装

login_index.js

module.exports = (app) =>{
	const base = require('../server_db.js')
	app.get('/login',(req,res)=>{
		let data = req.query;
		//console.log(data);
		res.send('get data');
	});
	
	app.post('/login',(req,res)=>{
		let data = req.body;
		
		let sql = 'select count(*) per_con from user_info_login_tab where user_id = ? and user_password = ?';
		let sql_data = [data.user,data.pass];
	
		base(sql,sql_data,(result)=>{
			if (result[0].per_con >=1){
				console.log(result[0])
				res.send('success');
			}
		});
	});
}

node服务搭建(包含跨域)

index_main.js

const express = require('express');
const app = express();
const bodyParser = require('body-parser');
const base = require('./server_db.js')

//解决跨域问题
app.use(require('cors')())
//挂载内置中间件
app.use(express.static('public'));
//挂载参数处理中间件(post)
//app.use(bodyParser.urlencoded({extended:false}));
app.use(bodyParser());
//处理json数据(get)
app.use(bodyParser.json())
//引用封装的login模块，并且执行传参（因为login导出的是个带参数的函数，所以这里可以执行传参）
require('./login/login_index.js')(app);

app.listen(8000,()=>{
	console.log('running...')
});

通过vue代码使用

<template>
  <div class="login">
		<div class="bg">
			<h1>登录信息</h1>
			<div class="form">
				<div class="item">
					<i></i>
					<input type="text" placeholder="账号（至少6位）" id="user"  v-model="user_id"/>
				</div>
				<div class="item">
					<i></i>
					<input type="password" placeholder="密码（至少8位）" id = "password" v-model="password"/>
				</div>
				<button @click="btn()">登 录</button>
			</div>
		</div>
	</div>
</template>

<script>
export default {
  name: 'login',
	data(){
		return{
			user_id:'',
			password:''
		}
	},
	methods:{
		btn(){
			let login_post = {
				user:this.user_id,
				pass:this.password
			}
			this.rq.post('/login',login_post).then(res=>{
				console.log(res)
			})
		}
	}
}
</script>

<style scoped lang="scss">
.login{
	background: url(../assets/img/bg.jpg);
	background-repeat:no-repeat;
	background-size: 100% 100%;
	// padding-top: 8%;
	// margin-top: 9%;
	height: 100%;
	width: 100%;
	position: absolute;
}
.bg{
	width: 400px;
	height: 450px;
	margin: 0 auto;
	position: relative;
	top: 15%;
	border: 1px solid bisque;
	text-align: center;
}
.form{
	margin-top: 50px;
}
input{
	border: 0;
	border-bottom: 2px solid white;
	padding: 5px;
	background: #ffffff00;
	color: black;
	width: 65%;
}
button{
	margin-top: 3px;
	width: 70%;
	height: 30px;
	background-color: coral;
	border-radius: 15px;
	border: 0px solid;
}
</style>

node 异步async/await

链接: 有关node异步 async/await