vue+mysql连接数据库实现登录注册

 数据库配置:

let mysql = require('mysql')

let db = mysql.createPool({
  host: '127.0.0.1', // 数据库IP地址
  user: 'root', // 数据库登录账号
  password: '1234', // 数据库登录密码
  database: 'websetting' // 要操作的数据库
})

module.exports = db

使用node.js配置跨域

let express = require('express')
let app = express()
let cors = require('cors')
let bodyParser = require('body-parser')
let router = require('./router')
app.use(bodyParser.json()) // 配置解析,用于解析json和urlencoded格式的数据
app.use(bodyParser.urlencoded({extended: false}))
app.use(cors()) // 配置跨域,必须在路由之前
app.use(router)
app.listen(80, () => {
  console.log('服务器启动成功')
})

 所有的登录注册,以及el-table中数据的增删改查接口

let express = require('express')
let router = express.Router()
let login = require('./API/login')
let user = require('./API/user')
let info = require('./API/list')
router.get('/login', login.login)
router.post('/register', login.register)

router.get('/user', user.get)
router.get('/list/all', info.all)
router.get('/list/get', info.get)
router.post('/list/add', info.add)
router.post('/list/update', info.update)
router.get('/list/del', info.del)

let test = require('./API/test')
router.get('/test', test.get)

module.exports = router

 详细步骤看这位大佬的文章我也是在这里学的大佬文章;

        

 

 登录:

先给出页面代码为敬:

通过登录按钮触发一个login()事件,在login事件中可以直接在浏览器验证输入是否符合要求,然后在通过axios的get请求方法并携带两个参数在数据库中验证用户名和密码是否正确





login.js文件中的配置:

exports.login = (req, res) => {
  var sql = 'select * from users where username = ? and password = ?'
  db.query(sql, [req.query.username, req.query.password], (err, data) => {
    if (err) {
      return res.send({
        status: 400,
        message: '登录失败'
      })
    }

    if (data.length > 0) {
      res.send({
        status: 200,
        message: '登录成功'
      })
    } else {
      res.send({
        status: 202,
        message: '用户名或密码错误'
      })
    }
  })
}

 其实就是通过携带过来的参数在数据库中的user表中查询是否有满足条件的记录。

 注册:





login.js中的注册代码

exports.register = (req, res) => {
  const sql1 = 'select * from users where username = ?'
  const sql2 = 'insert into users (username, password) values (?, ?)'
  db.query(sql1, [req.body.params.username], (err, data) => {
    if (err) {
      return res.send({
        status: 400,
        message: '操作失败'
      })
    }
    if (data.length > 0) {
      return res.send({
        status: 202,
        message: '用户名已存在'
      })
    } else {
      db.query(sql2, [req.body.params.username, req.body.params.password], (err, data) => {
        if (err) {
          return res.send({
            status: 400,
            message: '注册失败'
          })
        }
        res.send({
          status: 200,
          message: '注册成功'
        })
      })
    }
  })
}

 

 

你可能感兴趣的:(css,html,JavaScript,vue,vue.js,数据库,mysql)