使用vue,和express实现登录

实验环境：node.js, express,mysql, vue,windows10

1.前端部分：

先安装好axios :   cnpm install axios --save

*网络模块的文件夹

先写封装好网络模块的功能，以便后期调用：

1.1先建好config文件夹，在里面新建index.js,用于项目总体接口配置

export default{
  title:"blog_hmy",
  baseUrl:{
    dev:"/api_hu66",//开发接口
    pro:"/api_hu66"//上线接口
  }
}

2.新建好network文件夹，在下面建立好myAxios.js，并写入下面的内容

import axios from 'axios'
import config from '@/config'
// 判断是否上线还是开发中，选择对应的接口地址
const baseUrl = process.env.NODE_ENV == 'development' ? config.baseUrl.dev : config.baseUrl.pro
class HttpRequest{
  constructor(baseurl){
    this.baseUrl = baseUrl;//baseUrl="/api_hu66"
    // 请求队列
    //this.queue = {}
  }
  // 用于基本配置
  getInsideConfig(){
    const config = {
      baseURL:this.baseUrl,
      header:{

      }
    }
    return config
  }
 //拦截设置
 interceptors(instance,url){
  instance.interceptors.request.use((config) => {
    // 拦截请求配置
    return config
  })
  instance.interceptors.response.use((res) => {
    // 处理响应数据
    return res.data
  },(error) => {
    console.log(error)
    return {error:"网络出错了"}
  })
}
//用于创建axios实例,并且配置一些参数
request(options){
  const instance = axios.create() //创建axios实例
  // 结合传入的options和getInsideConfig()配置
  options = Object.assign(this.getInsideConfig(),options)
  this.interceptors(instance,options.url)
  return instance(options)
}

}

// 实例化httpRequest对象
const axiosObj = new HttpRequest(baseUrl)
export default axiosObj

1.3建立login.js用于发送登录的网络请求

import axios from 'network/myAxios'
//调用之前封装好的网络模块的功能
export function Login(username,password){
  // 返回axios里面的request方法
  return axios.request({
    // method:"get",request
    url:"/login",
    method:'post',
//data用于携带表单的数据
    data:{
      username,
      password
    }
  })
}

1.4处理跨域：

在src下新建，用于配置信息

module.exports = {

// 配置跨域
   devServer:{
    //设置代理
    proxy:{
      "/api_hu66":{
        // 允许访问数据的计算机地址
        target: 'http://localhost:3000',
        ws:true,//启用webSocket
        changeOrigin:true,//开启代理跨域
        pathRewrite:{
          // 重写请求地址，http://localhost:3000，会被http://localhost:8080代替
         //且http://localhost:8080，会被放在^这里，所以以后我们请求/api_hu66，就相当于请求http://localhost:8080/api_hu66
          '^/api_hu66':""
        }
      },
    }
}
}    

对于跨域的理解：我举得可能是浏览器的同源策略，导致我们直接在客户端发送网络请求时，浏览器会检查这个网络请求在不在项目本身这个服务器，如果在则不用配置跨域，如果不在则要配置跨域，前端跨域的思想应该是从浏览器直接向异于我们项目运行的地址发起请求，变为我们向自己项目运行的地址发起请求，由本项目的服务器代理发起请求。

画图如下：

 1.5login.vue组件书写：

    <template>
    <div class="login">
      <h1>登录</h1>
        <div>用户名：<input type="text" v-model="user"></div>
        <div>密码：<input type="password" v-model="password"></div>
        <button @click.prevent="login">登录</button>
        <div>{{msg}}</div>
    </div>
  </template>
  <script>
    import {Login} from 'network/login'
   export default{
      name:"Login",
      data(){
        return{
          msg:'',
          user:'',
          password:''
        }
      },
      methods: {
         login(){
           Login(this.user,this.password).then((result) => {
            console.log(result)
            //由于我们封装的login是一个promise，所以我们可以在then里面进行数据操作
            this.msg = result.msg;
            // console.log(result.data.msg)
           })
         } 
        },
    }
  </script>
  <style>
  </style>

2.后端

开始前先安装好mysql,body-parser(express的中间件，用于解析post的表单数据)

npm install mysql --save

npm install body-parser --save

数据库目录：

 路由目录：

 注：只有红线部分与此次实验有关

核心目录：

2.1后端数据库部分

直接建立一个表：

然后在项目里新建mysql文件夹，在下面新建mysl.js,进行数据库操作封装

let mysql = require("mysql");
let options = {
  host:"localhost",
  port:"3306",
  user:"root",
  password:"123",
  database:"hmy"
}
// 创建数据库连接
let con = mysql.createConnection(options)

// 建立连接
con.connect((err)=>{
  // 如果失败的操作
  if(err){
    console.log("连接数据库失败");
  }else{
    console.log("数据库连接成功！")
  }
})
// 封装查询数据库的内容，返回promise
function sqlQuery(strSql,arr){
  return new Promise((resolve,reject) => {
    con.query(strSql,arr,(err,results) => {
      if(err){
        reject("false")
      }else{
        resolve(results)
      }
    })
  })
  con.end();
}
// 导出函数
module.exports = sqlQuery;

 2.2express框架部分

路由部分：

建立login.js,书写路由的内容，express路由的作用是为了减少app.js的代码，所以就写在了路由文件夹下，再导入app.js即可

let express = require("express")
let login_router = express.Router()
let sqlQuery = require("../mysql/mysql");
// 处理post请求的中间件，用于解析post返回的数据
const bodyParser = require('body-parser')
login_router.use(bodyParser.urlencoded({extended:false}))

// 登录接口
login_router.post('/',async(req,res) => {
  let admin = req.body.username
  let password = req.body.password;
  console.log(admin,password)
  
  let sqlStr = "select * from onepice_root where user = ? and password = ?";
  let results = await sqlQuery(sqlStr,[admin,password]);
  //判断results有无数据来决定登录成功与否
  if(results.length!=0){
    console.log("66")
  return res.json({ status: 1, msg: '登录成功' })//成功时返回成功的json数据，下面亦然
  }else{
    console.log("6699")
   return res.json({ status: 2, msg: '登录失败' })
  }
 
  let options = {
    
  }
})

module.exports = login_router

app.js下面的内容

let express = require("express")
let app = express()
// 注册解析 表单数据的 body-parser
const bodyParser = require('body-parser')
// 处理post请求的中间件
app.use(bodyParser.urlencoded({extended:false}))
// 处理json格式的参数的中间件
app.use(bodyParser.json())
// 导入路由模块,app使用其模块
let login_router = require("./routes/login")
app.use("/login",login_router)
// 导出
module.exports = app;

实验结果：

 

 

 

 好了，到这里结束了……