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>