使用vue,和express實現登陸

 

實驗環境：node.js, express,mysql, vue,windows10

1.前端部分：

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

*網絡模塊的文件夾

 

 

 

先寫封裝好網絡模塊的功能，以便後期調用：

1.1先建好config文件夾，在裏面新建index.js,用於項目整體接口配置

1 export default{
2   title:"blog_hmy",
3   baseUrl:{
4     dev:"/api_hu66",//開發接口
5     pro:"/api_hu66"//上線接口
6   }
7 }

 

2.新建好network文件夾，在下面創建好myAxios.js，並寫入下面的內容

 1 import axios from 'axios'
 2 import config from '@/config'
 3 // 判斷是否上線仍是開發中，選擇對應的接口地址
 4 const baseUrl = process.env.NODE_ENV == 'development' ? config.baseUrl.dev : config.baseUrl.pro
 5 class HttpRequest{
 6   constructor(baseurl){
 7     this.baseUrl = baseUrl;//baseUrl="/api_hu66"
 8     // 請求隊列
 9     //this.queue = {}
10   }
11   // 用於基本配置
12   getInsideConfig(){
13     const config = {
14       baseURL:this.baseUrl,
15       header:{
16 
17       }
18     }
19     return config
20   }
21  //攔截設置
22  interceptors(instance,url){
23   instance.interceptors.request.use((config) => {
24     // 攔截請求配置
25     return config
26   })
27   instance.interceptors.response.use((res) => {
28     // 處理響應數據
29     return res.data
30   },(error) => {
31     console.log(error)
32     return {error:"網絡出錯了"}
33   })
34 }
35 //用於建立axios實例,而且配置一些參數
36 request(options){
37   const instance = axios.create() //建立axios實例
38   // 結合傳入的options和getInsideConfig()配置
39   options = Object.assign(this.getInsideConfig(),options)
40   this.interceptors(instance,options.url)
41   return instance(options)
42 }
43 
44 }
45 
46 // 實例化httpRequest對象
47 const axiosObj = new HttpRequest(baseUrl)
48 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組件書寫：

 1     <template>
 2     <div class="login">
 3       <h1>登陸</h1>
 4         <div>用戶名：<input type="text" v-model="user"></div>
 5         <div>密碼：<input type="password" v-model="password"></div>
 6         <button @click.prevent="login">登陸</button>
 7         <div>{{msg}}</div>
 8     </div>
 9   </template>
10   <script>
11     import {Login} from 'network/login'
12    export default{
13       name:"Login",
14       data(){
15         return{
16           msg:'',
17           user:'',
18           password:''
19         }
20       },
21       methods: {
22          login(){
23            Login(this.user,this.password).then((result) => {
24             console.log(result)
25             //因爲咱們封裝的login是一個promise，因此咱們能夠在then裏面進行數據操做
26             this.msg = result.msg;
27             // console.log(result.data.msg)
28            })
29          } 
30         },
31     }
32   </script>
33   <style>
34   </style>

 

2.後端

開始前先安裝好mysql,body-parser(express的中間件，用於解析post的表單數據)

npm install mysql --save

npm install body-parser --save

數據庫目錄：

 

 路由目錄：

 

 注：只有紅線部分與這次實驗有關

核心目錄：

 

 

2.1後端數據庫部分

直接創建一個表：

 

而後在項目裏新建mysql文件夾，在下面新建mysl.js,進行數據庫操做封裝

 1 let mysql = require("mysql");
 2 let options = {
 3   host:"localhost",
 4   port:"3306",
 5   user:"root",
 6   password:"123",
 7   database:"hmy"
 8 }
 9 // 建立數據庫鏈接
10 let con = mysql.createConnection(options)
11 
12 // 創建鏈接
13 con.connect((err)=>{
14   // 若是失敗的操做
15   if(err){
16     console.log("鏈接數據庫失敗");
17   }else{
18     console.log("數據庫鏈接成功！")
19   }
20 })
21 // 封裝查詢數據庫的內容，返回promise
22 function sqlQuery(strSql,arr){
23   return new Promise((resolve,reject) => {
24     con.query(strSql,arr,(err,results) => {
25       if(err){
26         reject("false")
27       }else{
28         resolve(results)
29       }
30     })
31   })
32   con.end();
33 }
34 // 導出函數
35 module.exports = sqlQuery;

 

 2.2express框架部分

路由部分：

創建login.js,書寫路由的內容，express路由的做用是爲了減小app.js的代碼，因此就寫在了路由文件夾下，再導入app.js便可

 1 let express = require("express")
 2 let login_router = express.Router()
 3 let sqlQuery = require("../mysql/mysql");
 4 // 處理post請求的中間件，用於解析post返回的數據
 5 const bodyParser = require('body-parser')
 6 login_router.use(bodyParser.urlencoded({extended:false}))
 7 
 8 // 登陸接口
 9 login_router.post('/',async(req,res) => {
10   let admin = req.body.username
11   let password = req.body.password;
12   console.log(admin,password)
13   
14   let sqlStr = "select * from onepice_root where user = ? and password = ?";
15   let results = await sqlQuery(sqlStr,[admin,password]);
16   //判斷results有無數據來決定登陸成功與否
17   if(results.length!=0){
18     console.log("66")
19   return res.json({ status: 1, msg: '登陸成功' })//成功時返回成功的json數據，下面亦然
20   }else{
21     console.log("6699")
22    return res.json({ status: 2, msg: '登陸失敗' })
23   }
24  
25   let options = {
26     
27   }
28 })
29 
30 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;

實驗結果：

 

 

 

 

 

 

 

 好了，到這裏結束了……