vue+node前后端实现登录注册功能

矫情吗；* 2022-02-19 11:43 670阅读 0赞

## 使用vue cli3脚手架搭建一个vue项目 ##

1.  创建一个vue\_cms项目，没安装脚手架全局安装即可，安装过程选择默认的即可

vue create vue_cms

1.  安装路由，axios，完成后启动项目，

cnpm i vue-router axios -S

1.  在项目根目录下新建一下vue还需要修改一下端口,避免端口冲突

module.exports = { 
        devServer:{ 
            host: 'localhost',
            port: 5000
        }
    }

1.  启动项目`cnpm run server`
2.  如果需要跨域还需要在devServer配置跨域（这里可以在后台设置允许跨域，或则我们设置同源）

proxyTable: { 
          "/api": { 
            target: "http://tingapi.ting.baidu.com/v1/restserver/ting",
            changeOrigin: true,
            pathRewrite: { 
                '^/api': '/api'
            }
        }

1.  接下来最重要的一步,最难的一个技术…先放着不管

## 使用node+mysql ##

#### 构建基本的项目 ####

1.  使用express框架和body-parser

cnpm init -y
    cnpm i express body-parser -S

![文件名的解释][20190416163606385.png]

1.  打开wampserver集成工具（或则程序员工具自己配置都可以）
2.  打开可视化工具（Navicat）链接上数据库，wamp的用户名是’root’,密码是空（当然不用mysql的话，可以自己使用json模拟数据）  
    ![可以测试一下][20190416164031710.png]
3.  新建一个数据库，然后插入一些数据  
    ![使用中文][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]  
    ![随便模拟一些数据][2019041616480775.png]

#### node.js的app.js文件 ####

虽然我们不用跨域，但这里我设置了跨域；该文件是入口文件；路由还有全局的配置都可以在这里配置

// 创建express服务器
    const express = require('express')
    const app = express()
    // 注册解析 表单数据的 body-parser
    const bodyParser = require('body-parser')
    // 将请求响应设置content-type设置为application/json
    const router = require('./router.js')
    app.use('/api/*', function (req, res, next) { 
    	// 设置请求头为允许跨域
        res.header("Access-Control-Allow-Origin", "*");
        // 设置服务器支持的所有头信息字段
        res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
        // 设置服务器支持的所有跨域请求的方法
        res.header("Access-Control-Allow-Methods", "POST,GET");
        // next()方法表示进入下一个路由
        next();
    });
    // post
    app.use(bodyParser.urlencoded({ extended:false}))
    // 处理json格式的参数
    app.use(bodyParser.json())
    // 配置路由
    app.use(router)
    // 服务器已经启动
    app.listen('4000',function(){ 
        console.log('running...')
    })

#### router路由文件 ####

路由文件只出路路由规则，这里使用post传递过来的用户名和密码

const express = require('express')
    const router = express.Router()
    const services = require('./services.js')
    // router.get('/',services.start)
    // 登录功能
    router.post('/api/login',services.login)
    // 注册功能
    router.post('/api/register',services.register)
    module.exports = router

#### 链接数据库 ####

#### 业务逻辑 ####

处理客户端传递过来的数据，现在暂时不做处理

const db = require('./db.js')
    exports.start = (req,res)=>{ 
    }
    // 登录注册处理
    exports.login = (req,res)=>{ 
        console.log(req.body)
        res.send('测试')
    }
    exports.register = (req,res)=>{ 
        console.log(req.body)
        res.send('测试')
    }

启动服务器`nodemon app.js`，测试一下有没有bug  
![结果][20190416210106749.png]

## 现在回到我们的vue项目 ##

在src文件夹新建一个router.js用来处理路由

import Vue from 'vue'
    import VueRouter from 'vue-router'
    Vue.use(VueRouter)
    import Login from './components/Login.vue'
    import Register from './components/Register.vue'
    const router = new VueRouter({ 
        routes:[
            { path:'/login',component:Login},
            { path:'/register',component:Register},
        ]
    })
    export default router

在main.js挂载到我们的路由，并引入axios

import Vue from 'vue'
    import App from './App.vue'
    import router from './router.js'
    import Axios from 'axios'
    Vue.prototype.HOST = 'http://localhost:4000'
    Vue.prototype.$axios  = Axios
    Vue.config.productionTip = false
    
    new Vue({ 
      render: h => h(App),
      router
    }).$mount('#app')

App.vue文件

<template>
      <div id="app">
         <h1></h1>
         <router-link to="/login">登录</router-link>
         <router-link to="/register">注册</router-link>
         <router-view></router-view>
      </div>
    </template>
    <style>
    #app { 
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

## 实现登录功能 ##

### 登录功能 ###

再业务逻辑后台的services.js这一块处理我们的登录按钮

1.  确认我们的数据库已经连接好了
2.  接收前端返回的数据（用户名和密码）
3.  查询该条数据是否存在，可以打印一下结果
4.  不存在使用`res.json()`返回数据
5.  存在判断密码是否一致，返回数据
6.  数据库名称和前端post的名称和node查询的名称需要一致，过程可以打印查询的结果在进一步操作

exports.login = (req,res)=>{ 
        let username = req.body.username
        let pwd = req.body.password
        // 查询语句
        let sql = 'select * from user where username = ?'
        db.base(sql,username,(result)=>{ 
            if(!result.length){ 
                return res.json({  status: 1, msg: '登录失败' })
            }else{ 
                // [ RowDataPacket { password: '123', username: 'admin', id: 1 } ]
                if(result[0].password==pwd){ 
                    return res.json({  status: 1, msg: '登录成功' })
                }
                return res.json({  status: 1, msg: '密码错误' })
            }
        })
    }

### vue项目vue\_cms的components组件 ###

1.  写好表单界面（这里我只写基本的功能）
2.  使用v-model实现数据的双向绑定
3.  点击按钮使用axios发送post请求，接收后台返回的数据

<template>
        <form>
            <label for="username">用户名:</label>
            <input type="text" v-model="username" id="username">
            <br>
            <label for="pwd">密码:</label>
            <input type="text" v-model="pwd" id="pwd">
            <br>
            <button @click.prevent="login">登录</button>
            <div>{ { msg}}</div>
        </form>
    </template>
    <script>
    export default { 
        data(){ 
            return { 
                username:'',
                pwd:'',
                msg:''//接收数据
            }
        },
        methods:{ 
            login(){ 
                this.$axios.post(this.HOST+'/api/login',{ username:this.username,password:this.pwd})
                .then(result=>{ 
                    console.log(result.data)
                    this.msg = result.data.msg
                })
                .catch(err=>{ 
                    console.log(err)
                })
            }
        }
    }
    </script>

测试一下，测试过程行云流水，没什么问题  
![结果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]

### 在components写好注册界面 ###

1.  相比登录功能，只不过是多了个确认密码
2.  保持两次密码一致在vue检测即可
3.  使用axios发送post请求给node服务器，并提交用户名和密码
4.  接收node服务器返回的数据并进行下一步操作

<template>
        <form>
            <label for="username">用户名:</label>
            <input type="text" v-model="username" id="username">
            <br>
            <label for="pwd">密码:</label>
            <input type="text" v-model="pwd" id="pwd">
            <br>
            <label for="again">密码:</label>
            <input type="text" v-model="again" id="again" @blur="verify">
            <br>
            <button @click.prevent="register">注册</button>
            <div>{ { msg}}</div>
        </form>
    </template>
    <script>
    export default { 
        data(){ 
            return { 
                username:'',
                pwd:'',
                again:'',
                msg:''//接收数据
            }
        },
        methods:{ 
            verify(){ 
                if(this.pwd!==this.again){ 
                    this.msg = '两次密码不一致'
                    return;
                }
            },
            register(){ 
                this.verify()
                this.$axios.post(this.HOST+'/api/register',{ username:this.username,password:this.pwd})
                .then(result=>{ 
                    this.msg = result.data.msg
                })
                .catch(err=>{ 
                    
                })
            }
        }
    }
    </script>

### node实现注册功能（services.js） ###

1.  先查询用户名是否存在
2.  存在则不能注册，返回给客户端信息
3.  不存在，通过接收传入来的数据，插入该条数据进入数据库
4.  判断数据库受影响的行数`affectedRows`是否为1，是的话，表示插入成功
5.  保证名称一致，可以打印结果来测试

exports.register = (req,res)=>{ 
        let username = req.body.username
        let password = req.body.password
        // 查询语句
        let sql = 'select * from user where username = ?'
        // 插入语句
        let insert = 'insert into user set ?'
        db.base(sql,username,(result)=>{ 
            console.log(result.length)
            if(result.length!==0){ 
                return res.json({  status: 1, msg: '该用户名已经存在' })
            }else{ 
                db.base(insert,{ username,password},(result)=>{ 
                    console.log(result)
                    if(result.affectedRows==1){ 
                        return res.json({  status: 1, msg: '注册成功' })
                    }
                    return res.json({  status: 1, msg: '注册失败' })
                })
            }
        })
    }

![测试][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]  
刷新我们的数据库，查看结果是否一致  
![测试结果][2019041710501927.png]

## 总结前后端分离 ##

> 前后端分离并不只是开发模式，而是web应用的一种架构模式。在开发阶段，前后端工程师约定好数据交互接口，实现并行开发和测试；在运行阶段前后端分离模式需要对web应用进行分离部署，前后端之前使用HTTP或者其他协议进行交互请求。然而作为一种架构模式，我们在实施的过程中主要对以下四个方面来进行比较和重新认识。

##### 分离的好处 #####

1.  通过将开发团队前后端分离化，让前后端工程师只需要专注于前端或后端的开发工作，是的前后端工程师实现自治，培养其独特的技术特性，然后构建出一个全栈式的精益开发团队。
2.  前后端分离以后，可以实现前后端代码的解耦，只要前后端沟通约定好应用所需接口以及接口参数，便可以开始并行开发，无需等待对方的开发工作结束。与此同时，即使需求发生变更，只要接口与数据格式不变，后端开发人员就不需要修改代码，只要前端进行变动即可。如此一来整个应用的开发效率必然会有质的提升。
3.  如果开发团队能完成前后端分离的转型，打造优秀的前后端团队，开发独立化，让开发人员做到专注专精，开发能力必然会有所提升，能够完美应对各种复杂多变的前端需求。
4.  前后端分离后，应用的代码不再是前后端混合，只有在运行期才会有调用依赖关系。应用代码将会变得整洁清晰，不论是代码阅读还是代码维护都会比以前轻松。

--------------------

概括来说，可以为优质产品打造精益团队；提升开发效率；完美应对复杂多变的前端需求；增强代码可维护性

##### 参考文档 #####

[前后端分离的优缺点][Link 1]  
[Web 研发模式演变 ][Web _]

[20190416163606385.png]: /images/20220219/f32c45c01a5043198d518762a2862d00.png
[20190416164031710.png]: /images/20220219/7c5e13a2f53e4158b580c35f7823e6eb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70]: /images/20220219/ac3ebc7d3aeb4de1bdfc86dadad6df62.png
[2019041616480775.png]: /images/20220219/d1dec765ec404d9b97470b420b981f95.png
[20190416210106749.png]: /images/20220219/d737a29cd7cc4404b9b22edcd48a38c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 1]: /images/20220219/e23918e4446741ba9ac88609f0487082.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTEwNTAzMA_size_16_color_FFFFFF_t_70 2]: /images/20220219/3d9feabf86b6442b8defdfb158ef3113.png
[2019041710501927.png]: /images/20220219/1e674be59c3b4843a2bc2e5ce61f7cad.png
[Link 1]: https://www.jianshu.com/p/2e3e50d90dfb
[Web _]: https://github.com/lifesinger/blog/issues/184