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

其他 2019-06-11 04:41:20 阅读次数: 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

文件名的解释

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

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

链接数据库

let mysql = require('mysql')
exports.base = (sql,data,callback)=>{
	let connection = mysql.createConnection({
	host     : 'localhost',
  	user     : 'root',
  	password : '',
  	database : 'user'
	})
	connection.connect();
	connection.query(sql,data, function (error, results, fields) {
  	if (error) throw error;
  		callback && callback(results)
	})
	connection.end();
}

业务逻辑

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

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
结果

现在回到我们的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>

测试一下，测试过程行云流水，没什么问题
结果

在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: '注册失败' })
            })
        }
    })
}

测试
刷新我们的数据库，查看结果是否一致
测试结果

总结前后端分离

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

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

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

参考文档

前后端分离的优缺点
Web 研发模式演变

猜你喜欢

转载自blog.csdn.net/weixin_41105030/article/details/89333208
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022