为了更进一步清晰地了解前台数据向后台提交的过程，更好地加强巩固前端开发学习，整理了基础的【前后台用户登录注册功能】实现代码。后台通过node.js开发，数据存储在sqlite中，前台vue+element完成开发，首先功能实现效果展示如下：
一、后台node.js
安装express、body-parser 【npm install express body-parser 】，关于express介绍，见/maidu_xbd/article/details/86632618 body-parser用于处理post请求
全局安装sqlite3【npm install sqlite3-g】sqlite使用说明详细见/maidu_xbd/article/details/99977786
server.js完整代码:
const express = require("express")const bodyParser = require("body-parser")const sqlite3 = require("sqlite3").verbose()const app = express()// sqlites数据库地址let sqliteDbPath = "C:\\Users\\lenovo\\Desktop\\Demo.db"// 打开sqlites数据库var db = new sqlite3.Database(sqliteDbPath)app.use(bodyParser.json()) // for parsing application/json// app.get('/', (req, res) => res.send('Hello World!'))// 登录请求处理app.post("/submitLogin", function(req, res) {var username = req.body.namevar password = req.body.passworddb.all(`select * from user where username=?`, username, function(err, row) {if (err) throw errelse {// console.log(row)if (row == "") {// 如果查找数据库用户名为空，则无此用户res.send({ status: 500, msg: "此用户不存在" })} else {// console.log(row[0].password)if (row[0].password != password) {// 检验密码是否一致res.send({ status: 500, msg: "密码错误" })} else {res.send({ status: 200, msg: "登录成功" })}}}})})// 注册请求处理app.post("/submitRegister", (req, res) => {var username = req.body.namevar email = req.body.emailvar password = req.body.passwordconsole.log(username)db.all("select * from user where username=?", username, function(err, row) {if (err) throw errelse {// console.log(row)if (row == "") {// 如果查找数据库用户名为空，则无此用户,在数据库中存储用户名，密码和邮箱信息// var sql_add = db.prepare(`insert into user (username, password, email) values('buding1', '1111', '221@')`)var sql_add = db.prepare(`insert into user (username, password, email) values(?,?,?)`)sql_add.run(username, password, email)res.send({ status: 200, msg: "恭喜你，注册成功！" })} else {res.send({ status: 500, msg: "用户名已注册，请更换用户名" })}}})})app.listen(9999, () => console.log("Example app listening on port 9999!"))
注意：接口文件
用户登录验证
2.用户注册验证
二、前台vue+element
安装element-ui 【npm i element-ui -S】
安装axios：【npm install axios --save-dev】
详细见/maidu_xbd/article/details/88566665
Login.vue完整代码如下：
<template><div class="login-demo"><div class="login-wrap"><el-row type="flex" justify="center"><!-- 登录框 --><el-form ref="loginForm" :rules="formRules" :model="user" status-icon label-width="70px"><el-tabs :stretch="true" v-model="activeName" @tab-click="handleClick"><el-tab-pane label="登录" name="login"><el-form-item prop="username" label="用户名"><el-input v-model="user.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="password" label="密码"><el-input v-model="user.password" show-password placeholder="请输入密码"><template slot="prepend"></template></el-input></el-form-item><el-checkbox id="savePassword" checked="checked" @click="savePassword()">记住密码</el-checkbox><router-link to="/forgetPassword">忘记密码</router-link><br><br><el-form-item><el-button type="primary" @click="doLogin('loginForm')">登 录</el-button></el-form-item></el-tab-pane><!-- 注册框 --><el-tab-pane label="注册" name="register"><el-form-item prop="username" label="用户名"><el-input v-model="user.username" placeholder="请输入用户名"></el-input></el-form-item><el-form-item prop="email" label="邮箱"><el-input v-model="user.email" placeholder="请输入邮箱"></el-input></el-form-item><el-form-item prop="password" label="设置密码"><el-input v-model="user.password" show-password placeholder="请输入密码"></el-input></el-form-item><el-form-item><el-button type="primary" icon @click="doRegister('loginForm')">注册账号</el-button></el-form-item></el-tab-pane></el-tabs></el-form></el-row></div></div></template><script>import axios from "axios";export default {name: "login",data() {return {activeName: "login",checked: false,user: {username: "",password: ""},// 通过 formRules 属性传入约定的验证规则formRules: {username: [{ required: true, message: "用户名不能为空", trigger: "blur" }],password: [{ required: true, message: "密码不能为空", trigger: "blur" },{ type: "string", min: 6, message: "密码不能小于6位", trigger: "blur" }],// bug--由于此处登录和注册共用一个el-form，因此只能绑定一个rules,如果邮箱设置为必填，将导致无法登陆。一般情况下，将登录和注册分别放在不同的el-form中，为它们设置不同的rulesemail: [// { required: true, message: "请输入邮箱地址", trigger: "blur" },{ type: "email", message: "请输入正确的邮箱地址", trigger: ["blur", "change"] }]}}},created() {},methods: {// 登录doLogin(form) {this.$refs[form].validate((valid) => {if (valid) {axios.post("/submitLogin/", {// .post("/api/login/", {name: this.user.username,password: this.user.password}).then(res => {// console.log("输出response.data", res.data);if (res.data.status === 200) {this.$router.push({ path: "/welcome" });} else {this.$message.error(res.data.msg)}});} else {return false;}});},// 注册账号doRegister(form) {this.$refs[form].validate((valid) => {if (valid) {console.log(valid);axios.post("/submitRegister/", {name: this.user.username,email: this.user.email,password: this.user.password}).then(res => {// console.log("输出response.data", res.data);if (res.data.status === 200) {this.$message.success(res.data.msg)this.activeName = "login";} else {this.$message.error(res.data.msg);}});} else {return false;}});},handleClick(tab, event) {console.log(tab, event);},// 记住密码savePassword() {if (document.getElementById("savePassword").checked) {var username = this.user.username;var password = this.user.password;window.sessionStorage.username = username;window.sessionStorage.password = password;localStorage.rmbPassword = true;} else {localStorage.rmbPassword = false;}}}}</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>/* 公共样式 */li {list-style: none;float: left;}.login-demo {position: fixed;width: 100%;height: 100%;background: url("../assets/images/bg2.png") no-repeat;background-size: cover;top: 0px;left: 0px;overflow: hidden;}.login-wrap {background: url("../assets/images/login_bg.png") no-repeat;width: 400px;height: 310px;margin: 175px auto;margin-left: 272px;border-radius: 6px;line-height: 20px;padding-top: 0px;}.el-tabs>>>.el-tabs__item {font-size: 18px;margin: 5px auto;}.el-tabs__nav {font-size: 18px;}a {text-decoration: none;color: #606266;font-size: 14px;float: right;}a:hover {color: coral;}.el-checkbox {text-indent: 4px;}>>>.el-form-item__label {padding: 0px 4px 0 0;}>>>.el-checkbox__label {padding-left: 0px;}.el-button {width: 118%;margin-left: -40px;background-color:#16696a;letter-spacing: 5px;border: 0px;}</style>
ForgetPassword.vue完整代码如下：
备注：发送邮件尚未做
<template><div class="forget-password"><div id="content"><h3>{{message}}</h3><el-form :rules="rules" label-width="40px" class="demo-ruleForm"><el-form-item label="邮箱" prop="pass"><el-input type="input" v-model="email" autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="sumbitForm">确定</el-button><el-button type="primary" @click="cancle">取消</el-button></el-form-item></el-form></div></div></template><script>import axios from "axios";export default {name: "forget-password",data() {return {message: "找回密码！",email: "",rules: {email: [{ message: "邮箱不能为空", trigger: "blur" }]}};},methods: {sumbitForm() {if (!this.email) {this.$message.error("请输入邮箱！");return;} else {var reg = /^(?:\w+\.?)*\w+@(?:\w+\.)*\w+$/;if (!reg.test(this.email)) {this.$message.error("邮箱格式不正确，请重新输入！");this.email.focus();return false;} else {this.$message("发送邮件");// axios//.post("/register/", {// name: this.user.username,// email: this.user.email,// password: this.user.password//})//.then(res => {// // console.log("111输出response.data", res.data);// // console.log("111输出response.data.status", res.data.status);// if (res.data.status === 200) {// this.$router.push({ path: "/" });// } else {// alert("您输入的用户名已存在！");// }//});}}},cancle() {this.$router.go(-1);}}};</script><!-- Add "scoped" attribute to limit CSS to this component only --><style scoped>.forget-password {position: fixed;width: 100%;height: 100%;background: url("../assets/images/bg4.png") no-repeat;background-size: cover;top: 0px;left: 0px;overflow: hidden;}#content {width: 400px;height: 200px;margin: 100px auto;/* background: #d7e695; */background-color: rgba(0, 0, 0, 0.2);padding: 10px;border-radius: 6px;}</style>
注意：【config】下【index.js】修改配置文件
proxyTable: {'/': {target: 'http://localhost:9999',changeOrigin: true,pathRewrite: {'^/': ''}}},
