vue+node+MySQL实现登录

  1. 下载wampServer 或者XAMPP
    wampServer下载出现错误:
    由于找不到MSVCR110.dll,无法继续执行代码,重新安装程序可能会解决问题
    原因:缺少vc运行集成库,建议先安装。
  2. 建立数据库mytest,表login
    在这里插入图片描述
  3. 创建目录
    在这里插入图片描述
  4. 安装需要用到的.axios ,mysql,body-parser必须,其他自由选择
npm install element-ui vuex axios mysql express body-parser --save  (回车)
npm install node-sass sass-loader --save-dev  (回车)
  1. server/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...')
})

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

  1. server/router.js
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

  1. server/services.js
const db = require('./db.js')
exports.start = (req,res)=>{
}
// 登录注册处理
exports.login = (req,res)=>{
    let username = req.body.username
    let pwd = req.body.password
    // 查询语句
    let sql = 'select * from login 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: '密码错误' })
        }
    })
}
exports.register = (req,res)=>{
    console.log(req.body)
    res.send('测试')
}

  1. src/pages/home.vue
<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>

  1. main.js
import Vue from 'vue'
import App from './App'
import router from './router'
import Axios from 'axios'

Vue.prototype.HOST = 'http://localhost:4000'

import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI);

Vue.prototype.$axios  = Axios
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  components: { App },
  template: '<App/>'
})

  1. 打开两个命令窗口分别运行工程,运行后端服务,即可进行测试。注意后端在server目录下
PS C:\Users\foresee\Desktop\demo>$ npm run dev
PS C:\Users\foresee\Desktop\demo\server> node app
  1. 每次改变server中的代码都要重新node app 一下。如果想动态改变,则可npm i -g nodemon。
    报错
    nodemon : 无法加载文件 C:\Users\foresee\AppData\Roaming\npm\nodemon.ps1,因为在此系统上禁止运行脚本
    原因,没有权限,解决,以管理员方式运行
    在这里插入图片描述
    输入:set-ExecutionPolicy RemoteSigned
    选择y
  2. 最后来测试。成功
    在这里插入图片描述
发布了25 篇原创文章 · 获赞 2 · 访问量 1458
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览