vue+mysql实现简单的登录注册功能
提示:写完文章后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
一、文件目录
二、具体实现步骤
1.下载需要的包
- 下载express:用来搭建服务器
npm install express
- 下载cors:解决跨域请求问题
npm install cors
- 下载mysql
npm install mysql
- 下载axios
npm install axios
2.搭建本地服务器
- 在main.js中引入下载的包
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from "axios"
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.config.productionTip = false
Vue.prototype.axios = axios
axios.defaults.baseURL = 'http://127.0.0.1'
Vue.use(ElementUI);
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
- 配置服务器相关信息–新建/server/app.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('服务器启动成功');
})
- 配置数据库相关信息–/server/db/index.js
let mysql = require('mysql')
let db = mysql.createPool({
host: '127.0.0.1',
user: 'root',
password: '123456',
database: 'test'
})
module.exports = db
- 操作数据库–/server/API/login.js
let db = require('../db/index')
exports.login = (req, res) => {
var sql = 'select * from user where name = ? and password = ?'
db.query(sql, [req.query.name, 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: '用户名或密码错误'
})
}
})
}
exports.register = (req, res) => {
const sql1 = 'select * from user where name = ?'
const sql2 = 'insert into user (name, password) value (?, ?)'
db.query(sql1, [req.body.params.name], (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.name, req.body.params.password], (err, data) => {
if(err) {
return res.send({
status: 400,
message: "注册失败"
})
}
res.send({
status: 200,
message: "注册成功"
})
})
}
})
}
- 配置对应路由–/server/router.js
let express = require('express')
let router = express.Router()
let login = require('./API/login')
router.get('/login', login.login)
router.post('/register', login.register)
module.exports = router
- 测试服务器是否搭建成功
server文件夹下执行
node app.js
3.新建登录页面、注册页面和首页(见5)
4.页面路由配置
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const home = () => import("../views/home.vue") //懒加载
const login = () => import("../views/login.vue")
const register = () => import("../views/register.vue")
const routes = [
{
path: '',
redirect: '/login' //重定向
},
{
path: '/login',
name: 'login',
component: login
},
{
path: '/register',
name: 'register',
component: register
},
{
path: '/home',
name: 'home',
component: home,
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
//解决相同路径跳转报错问题
//使用push的方法
const RouterPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (to) {
return RouterPush.call(this, to).catch(err => err)
}
//使用replace的方法
const RouterReplace = VueRouter.prototype.replace
VueRouter.prototype.replace = function replace (to) {
return RouterReplace.call(this, to).catch(err => err)
}
export default router
5.页面编写相应方法
<template>
<div class="bg">
<div id="login">
<h2>登录页面</h2>
<el-form ref="form" :model="form" label-width="20%">
<el-form-item label="用户名:">
<el-input v-model="form.username"></el-input>
</el-form-item>
<el-form-item label="密 码:">
<el-input v-model="form.password" type="password"></el-input>
</el-form-item>
</el-form>
<el-button type="primary" round @click="login" class="btn">登录</el-button>
</div>
</div>
</template>
<script>
import axios from "axios"
export default {
data () {
return {
form: {
username: '',
password: ''
}
};
},
methods: {
login() {
if(this.form.username == '') {
this.$message.error('用户名不能为空');
}else if(this.form.password == '') {
this.$message.error('密码不能为空');
}else{
axios.get('http://127.0.0.1/login', {
params: {
name: this.form.username,
password: this.form.password
}
}).then(res=>{
if(res.data.status == 200) {
this.$router.push({
path: '/home',
query: {
name: this.form.username
}
})
}else{
this.$alert('用户名或密码错误', '登录失败', {
confirmButtonText: '确定',
callback: action => {
this.form.username = '',
this.form.password = ''
}
});
}
}).catch(err=>{
console.log("登录失败" + err);
})
}
},
register() {
this.$router.push('/register')
}
}
}
</script>
三、常见报错信息
- 缺少包
npm install
- 端口号被占用
链接: 端口号被占用解决方法 - 先在server下启动服务器,在运行整个项目