Vue项目二 登录注册功能的实现
2024-04-29 13:05:54
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
- 一、系统注册功能的实现
- 1.配置注册页面路由
- 2.注册页面的搭建
- 3.api下发送ajax请求的文件创建
- 二、后台数据服务的创建
- 1.app.js文件的建立
- 2.User.js文件的建立
- 3.配置后端接口路由文件(router.js)
- 4.前端register调用方法
- 5.前端登录功能的实现
- 5.1前端登录
- 5.2前端登录验证成功后获取用户信息
- 总结
前言
环境搭建完，根据管理系统用户需要注册，实现登录然后将用户信息保存在本地中的需求，本章主要实现系统登录注册功能。
一、系统注册功能的实现
首先分析注册页面所要实现的功能，其功能包括账号、昵称、密码和二次确认密码。其中账号和昵称不能为空，密码和确认密码要一致。
在整个register页面的搭建过程中，我们需要使用ELementUI组件库。在编写注册页面前我们需要删除掉views下的home.vue和about.vue,并在App.vue中删除掉router-link的跳转
1.配置注册页面路由
在src/router/index.js中先把创建项目自带的home和about路由删除掉，在routes中配置register路由。然后在views下创建register文件夹并在register文件夹下创建index.vue。最后我们在src/router/index.js通过import导入注册页面，(注意需注释掉路由方式即mode: “history”,)
import Vue from "vue";
import VueRouter from "vue-router";
import Register from "../views/register";
Vue.use(VueRouter);
const routes = [{path: "/register",name: "register",component: Register,},
];const router = new VueRouter({// mode: "history",base: process.env.BASE_URL,routes,
});
export default router;
2.注册页面的搭建
注册页面使用的是ElementUI组件库中的Form表单的自定义校验规则。
elementui表单链接
在elementui中选中Form表单，创建我们需要的账号、昵称、密码和确认密码。然后在data的return函数中传入ruleForm所包含的prop值，由于账号和昵称不为空，我们通过表单验证传入校验规则，在页面中加入该规则前带星号表示设立成功。对密码的二次校验，我们可以设立validatePass和validatePass2进行验证。最后将我们提交的数据验证提交。
<template><div class="register-container"><el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm"label-width="100px"class="register-ruleForm"><h2 class="register-title">注册</h2><el-form-item label="账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="昵称" prop="nickname"><el-input v-model="ruleForm.nickname"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-inputtype="password"v-model="ruleForm.pass"autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-inputtype="password"v-model="ruleForm.checkPass"autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="goLogin('ruleForm')">登录</el-button></el-form-item></el-form></div>
</template><script>
import { register } from "@/api/login.js";
export default {data() {var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else {if (this.ruleForm.checkPass !== "") {this.$refs.ruleForm.validateField("checkPass");}callback();}};var validatePass2 = (rule, value, callback) => {if (value === "") {callback(new Error("请再次输入密码"));} else if (value !== this.ruleForm.pass) {callback(new Error("两次输入密码不一致!"));} else {callback();}};return {ruleForm: {username: "",nickname: "",pass: "",checkPass: "",},rules: {username: [{ required: true, message: "请输入账号", trigger: "blur" }],nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],pass: [{ validator: validatePass, trigger: "blur" }],checkPass: [{ validator: validatePass2, trigger: "blur" }],},};},components: {},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {// alert("submit!");} });} else {console.log("error submit!!");return false;}});},},
};
3.api下发送ajax请求的文件创建
这里我们新建login.js文件来发送ajax请求传递前台验证提交的数据（ username,nickname,password），并且获取后台响应前台数据得到的一个异步对象（request），我们可以在register下的index.vue导入使用axios方法（ register）拿到后台响应的异步对象。
import request from "@/utils/request.js";// 注册
export function register(username,nickname,password){ //这里的参数都是形参return request({method:"post",url:"/user/register",data:{ //需要向后台传输的数据是req，后台又会响应回来一个数据是resusername,nickname,password}})
}
二、后台数据服务的创建
我们在后台需要配置接口接受存储数据在数据库，并通过接口将数据返回给前台页面，首先通过npm init -y安装package.json,我们这里使用了express、mongoose、md5和body-parse。
安装指令为
npm i express blueimp-md5 body-parse mongoose@5.5.12
1.app.js文件的建立
代码如下：导入需要使用的组件
var express = require("express");
var bodyParser = require("body-parser");
var path = require("path");
var router = require("./router.js")
var app=express();app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json())// 开发资源
app.use("./node_modules",express.static(path.join(__dirname,"./node_modules/")))
app.use(router);
app.listen(3000,function(){console.log("running....");
})
2.User.js文件的建立
这里使用的是mongoose数据库，我们创建数据库的规则对象。
const mongoose = require('mongoose');
mongoose.connect('mongodb://localhost/msmstu');
//定义一个规则对象
var Schema = mongoose.Schema;
var userSchema = new Schema({username:{type:String,required:true},password:{type:String,required:true},nickname:{type:String,required:true},token:{type:String,required:true}
});
module.exports = mongoose.model('KeLi', userSchema);
3.配置后端接口路由文件(router.js)
var express = require("express");
var md5 = require("blueimp-md5");
var User = require("./User.js")
var router = express.Router()
// 注册
router.post("/user/register",function(req,res){var body = req.body; //req里面包含的就是我们前台传递过来的数据// console.log(body);// res.send("666")User.find({ //这里查询的是数据库中数据，find是mongoose中的方法$or:[{username:body.username},{nickname:body.nickname}]},function(err,data){// console.log("data1"+data);if(err){return res.status(500).json({code:3000,flag:false,message:"serve error",})}if(data.length !== 0){ //说明数据库中已有该数据return res.status(200).json({code:4000,flag:false,message:"账号或昵称已存在"})}body.token = md5(md5(body.username)+"KeLi"); //设置一个token存入数据库中new User(body).save(function(err,data){ //这里是新建User表对象用于存储body数据// console.log("data2"+data);if(err){return res.status(500).json({code:3000,flag:false,message:"存储失败",})}return res.status(200).json({code:2000,flag:true,message:"注册成功"})})})
})
这里是注册功能的实现，注册使用post传递数据，路径是/user/register，这里body是响应req（前台传递过来的数据）的body，User.find是调用数据库然后使用find方法查找username或nickname其中一条就表示注册成功，当有err时报错，当data.length不为0时，表明数据库中已有该数据，然后我们对注册的进行加密，然后新建一个User表来存储该对象。
router.js
var express = require("express");
var md5 = require("blueimp-md5");
var User = require("./User.js")
var router = express.Router()// 注册
router.post("/user/register",function(req,res){var body = req.body; //req里面包含的就是我们前台传递过来的数据// console.log(body);// res.send("666")User.find({ //这里查询的是数据库中数据，find是mongoose中的方法$or:[{username:body.username},{nickname:body.nickname}]},function(err,data){// console.log("data1"+data);if(err){return res.status(500).json({code:3000,flag:false,message:"serve error",})}if(data.length !== 0){ //说明数据库中已有该数据return res.status(200).json({code:4000,flag:false,message:"账号或昵称已存在"})}body.token = md5(md5(body.username)+"KeLi"); //设置一个token存入数据库中new User(body).save(function(err,data){ //这里是新建User表对象用于存储body数据// console.log("data2"+data);if(err){return res.status(500).json({code:3000,flag:false,message:"存储失败",})}return res.status(200).json({code:2000,flag:true,message:"注册成功"})})})
})
4.前端register调用方法
我们在register的index.vue中调用api下的login.js封装的register方法，获取后台响应的异步对象，通过获取到的异步对象，调用获取异步对象的方法，传入参数(this.ruleForm.username，this.ruleForm.nickname，this.ruleForm.pass)。设置一个值resp获取response.data。判断resp上的flag值的布尔值是为true，是true注册成功，页面跳转到登录页面，否则弹出警告。
在登录按钮上设置一个goLogin方法。点击触发。
代码如下
<template><div class="register-container"><el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm"label-width="100px"class="register-ruleForm"><h2 class="register-title">注册</h2><el-form-item label="账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="昵称" prop="nickname"><el-input v-model="ruleForm.nickname"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-inputtype="password"v-model="ruleForm.pass"autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-inputtype="password"v-model="ruleForm.checkPass"autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="goLogin('ruleForm')">登录</el-button></el-form-item></el-form></div>
</template>
<script>
import { register } from "@/api/login.js";
export default {data() {var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else {if (this.ruleForm.checkPass !== "") {this.$refs.ruleForm.validateField("checkPass");}callback();}};var validatePass2 = (rule, value, callback) => {if (value === "") {callback(new Error("请再次输入密码"));} else if (value !== this.ruleForm.pass) {callback(new Error("两次输入密码不一致!"));} else {callback();}};return {ruleForm: {username: "",nickname: "",pass: "",checkPass: "",},rules: {username: [{ required: true, message: "请输入账号", trigger: "blur" }],nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],pass: [{ validator: validatePass, trigger: "blur" }],checkPass: [{ validator: validatePass2, trigger: "blur" }],},};},components: {},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {// alert("submit!");// 调用方法发送ajax请求register(this.ruleForm.username,this.ruleForm.nickname,this.ruleForm.pass).then((response) => {// console.log(response.data);// 这里的逻辑是如果在后台的数据库中注册成功的话，通过flag的布尔值来判断是否进入登录页面const resp = response.data;if (resp.flag) {// 调转到登录界面this.$router.push("/login")} else {this.$message({message: resp.message,type: "warning",});}});} else {console.log("error submit!!");return false;}});},goLogin(){// 跳转到登录页面，使用的时编程式的登陆跳转方法this.$router.push("/login")}},
};
</script>
<style scoped>
.register-container {position: absolute;width: 100%;height: 100%;overflow: hidden;background: url("../../assets/bgu.gif");background-size: cover;
}
.register-ruleForm {width: 400px;height: 500px;margin: 150px auto;padding: 20px;background-color: aquamarine;border-radius: 20px;
}
.register-title {text-align: center;background-color: rgb(55, 0, 255);
}
</style>
注意将.env.development的VUE_APP_SERVICE_URL = ‘http://localhost:3000’，这里要换成与后端匹配的3000端口。
5.前端登录功能的实现
登录主要实现用户登录和登录成功后来获取用户的信息存储在本地中
实现逻辑与注册基本相似，首先在router下的index.js配置路由，然后搭建登录页面，再后来在login.js配置Api.js文件用于发送ajax请求和获取异步对象，最后在后台服务的router.js中配置登录接口。
5.1前端登录
router下的index.js配置路由
const routes = [{path: "/register",name: "register",component: Register,},{path: "/login",name: "login",component: Login,},
];
搭建登录页面，登陆页面需要的是账号和密码。搭建页面如注册一样采用ElementUI的Form表单。(注意这里密码的校验规则与注册不同，只是实现密码不为空的规则)
<template><div class="login-container"><el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm"label-width="100px"class="login-ruleForm"><h2 class="login-title">登录</h2><el-form-item label="账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-inputtype="password"v-model="ruleForm.pass"autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="goRegister('ruleForm')">注册</el-button></el-form-item></el-form></div>
</template>
<script>
//import { login, getUserInfo } from "@/api/login.js";
export default {data() {return {ruleForm: {username: "",pass: "",},rules: {username: [{ required: true, message: "请输入账号", trigger: "blur" }],pass: [{ required: true, message: "请输入昵称", trigger: "blur" }],},};},components: {},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {}});} });} else {console.log("error submit!!");return false;}});},goRegister() {// 跳转到注册页面，使用的时编程式的登陆跳转方法this.$router.push("/register");},},
};
</script>
<style scoped>
.login-container {position: absolute;width: 100%;height: 100%;overflow: hidden;background: url("../../assets/bgu.gif");background-size: cover;
}
.login-ruleForm {width: 400px;height: 500px;margin: 150px auto;padding: 20px;background-color: aquamarine;border-radius: 20px;
}
.login-title {text-align: center;background-color: rgb(55, 0, 255);
}
</style>
在api下的login.js文件中发送登录的ajax请求。
// 登录
export function login(username,password){return request({method:"post",url:"/user/login",data:{username,password}})
}
后端服务在router.js中配置登录接口
router.post("/user/login",function(req,res){var body = req.body;console.log(body);User.findOne({username:body.username,password:body.password},function(err,data){if(err){return res.status(500).json({code:3000,flag:false,message:"serve error登录失败",})}if(!data){return res.status(200).json({code:4000,flag:false,message:"账号或密码不存在"}) }return res.status(200).json({"code":2000,"flag":true,"message":"登录成功","data":{token:data.token}})})
});
这里是登录后端接口的实现，这里使用的是post接口。路径值为/user/login，获取到的是body，使用User用户表的findOne方法，这里与注册不同的是这里是要将username和password都要获取到，然后根据是否出错返回err，是否有数据，判断数据是否存在，最后如果数据匹配成功，返回一个"data",里面要传递一个token。
//登录
router.post("/user/login",function(req,res){var body = req.body;console.log(body);User.findOne({username:body.username,password:body.password},function(err,data){if(err){return res.status(500).json({code:3000,flag:false,message:"serve error登录失败",})}if(!data){return res.status(200).json({code:4000,flag:false,message:"账号或密码不存在"}) }return res.status(200).json({"code":2000,"flag":true,"message":"登录成功","data":{token:data.token}})})
});
返回到前端的login下的index.vue中导入login方法，调用该方法判断登录是否成功。
submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {login(this.ruleForm.username, this.ruleForm.pass).then((response) => {const resp = response.data;if (resp.flag) {} else {this.$message({message: resp.message,type: "warning",});}});} else {console.log("error submit!!");return false;}});},goRegister() {// 跳转到注册页面，使用的时编程式的登陆跳转方法this.$router.push("/register");},},
};
5.2前端登录验证成功后获取用户信息
在后端配置获取用户的信息
router.get("/user/info",function (req,res) {var body = req.query;console.log(body);User.findOne({token: body.token}, function (err, data) {console.log(data);if (err) {return res.status(500).json({code: 3000,flag: false,message: "server error"})}if (!data) {return res.status(200).json({code: 4000,flag: false,message: "token不存在"})}return res.json({"code": 2000,"flag": true,"message": "成功获取用户信息","data": {"nickname": data.nickname,"id":data._id}})})
});
这里使用的是get方法，获取的是req的query信息，通过User的findOne方法查找我们先前在登录接口设置的token值。然后判断是否获取用户信息成功，在用户信息中传入nickname和id两个值。
接下到前端页面的api下的login.js配置获取用户信息的axios
//获取用户信息
export function getUserInfo(token){return request({method:"get",url:`/user/info?token=${token}`,})
}
然后在views下的logn下的index.vue导入方法。
在登陆成功后通过getUserInfo将响应的data传入到respUser，在获取用户信息成功后，在本地存储用户信息，并且设置跳转到首页根目录。
import { login, getUserInfo } from "@/api/login.js";
methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {login(this.ruleForm.username, this.ruleForm.pass).then((response) => {const resp = response.data;if (resp.flag) {//登录成功则获取用户信息getUserInfo(resp.data.token).then((response) => {const respUser = response.data;console.log(respUser);if (respUser.flag) {localStorage.setItem("msm-user",JSON.stringify(respUser.data));localStorage.setItem("msm-token",resp.data.token)this.$router.push("/")} else {this.$message({message: respUser.message,type: "warning",});}});} else {this.$message({message: resp.message,type: "warning",});}});} else {console.log("error submit!!");return false;}});},goRegister() {// 跳转到注册页面，使用的时编程式的登陆跳转方法this.$router.push("/register");},},
};
总结
本章主要实现的是用户的注册、登录。在登录匹配成功后，获取用户信息，并将信息存储在本地中。整体页面的搭建使用的是ElementUI组件库。
api下的login.js
//用于发送ajax请求
import request from "@/utils/request.js";// 注册
export function register(username,nickname,password){ //这里的参数都是形参return request({method:"post",url:"/user/register",data:{ //需要向后台传输的数据是req，后台又会响应回来一个数据是resusername,nickname,password}})
}// 登录
export function login(username,password){return request({method:"post",url:"/user/login",data:{username,password}})
}//获取用户信息
export function getUserInfo(token){return request({method:"get",url:`/user/info?token=${token}`,})
}
router下的index.js
import Vue from "vue";
import VueRouter from "vue-router";
// import Register from "../views/register"
import Register from "../views/register";
import Login from "../views/login"Vue.use(VueRouter);const routes = [{path: "/register",name: "register",component: Register,},{path: "/login",name: "login",component: Login,},
];const router = new VueRouter({// mode: "history",base: process.env.BASE_URL,routes,
});export default router;
views/login/index.vue
<template><div class="login-container"><el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm"label-width="100px"class="login-ruleForm"><h2 class="login-title">登录</h2><el-form-item label="账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-inputtype="password"v-model="ruleForm.pass"autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="goRegister('ruleForm')">注册</el-button></el-form-item></el-form></div>
</template><script>
import { login, getUserInfo } from "@/api/login.js";
export default {data() {return {ruleForm: {username: "",pass: "",},rules: {username: [{ required: true, message: "请输入账号", trigger: "blur" }],pass: [{ required: true, message: "请输入昵称", trigger: "blur" }],},};},components: {},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {login(this.ruleForm.username, this.ruleForm.pass).then((response) => {const resp = response.data;if (resp.flag) {//登录成功则获取用户信息getUserInfo(resp.data.token).then((response) => {const respUser = response.data;console.log(respUser);if (respUser.flag) {localStorage.setItem("msm-user",JSON.stringify(respUser.data));localStorage.setItem("msm-token",resp.data.token)this.$router.push("/")} else {this.$message({message: respUser.message,type: "warning",});}});} else {this.$message({message: resp.message,type: "warning",});}});} else {console.log("error submit!!");return false;}});},goRegister() {// 跳转到注册页面，使用的时编程式的登陆跳转方法this.$router.push("/register");},},
};
</script><style scoped>
.login-container {position: absolute;width: 100%;height: 100%;overflow: hidden;background: url("../../assets/bgu.gif");background-size: cover;
}
.login-ruleForm {width: 400px;height: 500px;margin: 150px auto;padding: 20px;background-color: aquamarine;border-radius: 20px;
}
.login-title {text-align: center;background-color: rgb(55, 0, 255);
}
</style>
views/register/index.vue
<template><div class="register-container"><el-form:model="ruleForm"status-icon:rules="rules"ref="ruleForm"label-width="100px"class="register-ruleForm"><h2 class="register-title">注册</h2><el-form-item label="账号" prop="username"><el-input v-model="ruleForm.username"></el-input></el-form-item><el-form-item label="昵称" prop="nickname"><el-input v-model="ruleForm.nickname"></el-input></el-form-item><el-form-item label="密码" prop="pass"><el-inputtype="password"v-model="ruleForm.pass"autocomplete="off"></el-input></el-form-item><el-form-item label="确认密码" prop="checkPass"><el-inputtype="password"v-model="ruleForm.checkPass"autocomplete="off"></el-input></el-form-item><el-form-item><el-button type="primary" @click="submitForm('ruleForm')">提交</el-button><el-button @click="goLogin('ruleForm')">登录</el-button></el-form-item></el-form></div>
</template><script>
import { register } from "@/api/login.js";
export default {data() {var validatePass = (rule, value, callback) => {if (value === "") {callback(new Error("请输入密码"));} else {if (this.ruleForm.checkPass !== "") {this.$refs.ruleForm.validateField("checkPass");}callback();}};var validatePass2 = (rule, value, callback) => {if (value === "") {callback(new Error("请再次输入密码"));} else if (value !== this.ruleForm.pass) {callback(new Error("两次输入密码不一致!"));} else {callback();}};return {ruleForm: {username: "",nickname: "",pass: "",checkPass: "",},rules: {username: [{ required: true, message: "请输入账号", trigger: "blur" }],nickname: [{ required: true, message: "请输入昵称", trigger: "blur" }],pass: [{ validator: validatePass, trigger: "blur" }],checkPass: [{ validator: validatePass2, trigger: "blur" }],},};},components: {},methods: {submitForm(formName) {this.$refs[formName].validate((valid) => {if (valid) {// alert("submit!");// 调用方法发送ajax请求register(this.ruleForm.username,this.ruleForm.nickname,this.ruleForm.pass).then((response) => {// console.log(response.data);// 这里的逻辑是如果在后台的数据库中注册成功的话，通过flag的布尔值来判断是否进入登录页面const resp = response.data;if (resp.flag) {// 调转到登录界面this.$router.push("/login")} else {this.$message({message: resp.message,type: "warning",});}});} else {console.log("error submit!!");return false;}});},goLogin(){// 跳转到登录页面，使用的时编程式的登陆跳转方法this.$router.push("/login")}},
};
</script><style scoped>
.register-container {position: absolute;width: 100%;height: 100%;overflow: hidden;background: url("../../assets/bgu.gif");background-size: cover;
}
.register-ruleForm {width: 400px;height: 500px;margin: 150px auto;padding: 20px;background-color: aquamarine;border-radius: 20px;
}
.register-title {text-align: center;background-color: rgb(55, 0, 255);
}
</style>
Vue项目二 登录注册功能的实现相关推荐
- Vue项目之登录注册
Vue项目之登录注册 1. 注册 1.1 注册页面的布局 1.2 注册业务逻辑的实现 2. 登录 3.导航守卫 3.1全局导航守卫,全部路由都会经过这里.一定要调用next方法向下执行 3.2 路由独 ...
- javaweb开发的仿推特项目之登录注册功能
博主最近学习一个仿推特javaweb项目,其采用Jsp+Servlet的方式进行设计,MySQL数据库,Tomcat8服务,界面上十分美观,功能也较为健全,给大家分享一下: 项目地址 登录界面: 核心 ...
- vue项目实现登录/退出功能（包括token机制）
源码地址:https://gitee.com/cheng-xuyuan/blogWeb.git(请忽略这句) 一.登录业务的相关技术点 http是无状态的,为记录登录状态可通过cookie-sessi ...
- SpringBoot+Vue实现邮箱登录注册功能
点击链接查看项目 SpringBoot邮件发送 邮件发送是一个非常常见的功能,注册时的身份认证.重要通知发送等都会用到邮件发送.Sun公司提供了JavaMail用来实现邮件发送,但是配置烦琐,Spri ...
- 使用JSP实现简单的登录注册功能，并且使用Session跟踪用户登录信息
使用JSP实现简单的登录注册功能,并且使用了Session来跟踪用户的登录信息,这个是用纯JSP来实现此功能的,由于没有连接数据库,所以使用List来模拟数据库. 第一步:创建web项目 如果有不会创 ...
- vue+node---使用element框架实现的前后台用户登录注册功能
为了更进一步清晰地了解前台数据向后台提交的过程,更好地加强巩固前端开发学习,整理了基础的[前后台用户登录注册功能]实现代码.后台通过node.js开发,数据存储在sqlite中,前台vue+eleme ...
- Spring boot 搭建个人博客系统（二）——登录注册功能
Spring boot 搭建个人博客系统(二)--登录注册功能 一直想用Spring boot 搭建一个属于自己的博客系统,刚好前段时间学习了叶神的牛客项目课受益匪浅,乘热打铁也主要是学习,好让自己熟 ...
- Django(二)精美博客搭建(1)实现登录/注册功能
前言 之前我们用Django框架做了一个很简单的个人博客搭建,不论是页面还是功能都很粗糙 所以从这篇开始我打算做一个比较完整的[个人博客网站],可能会分好几篇博客来讲述 等所有功能完善的差不多后,再考 ...
- 快速上手Springboot项目（登录注册保姆级教程）
本文章对SpringBoot开发后端项目结构做了简单介绍,并示范了使用SpringBoot+MySQL实现登录的后端功能,与本博客的另一篇文章 Vue 实现登录注册功能(前后端分离完整案例) | Ma ...
最新文章
- Redis 主从复制的原理及演进
- 树莓派c语言led,用树莓派实现RGB LED的颜色控制——C语言版本号
- Java 并发编程—核心理论
- 转转钓鱼php,最新转转钓鱼源码程序网站微信:mm88wk 最新转转源码 - 下载 - 搜珍网...
- RHEL 6.5 中的KVM虚拟化新特性
- JAVA多线程--线程阻塞与唤醒
- 计算机的英语对话,英语口语对话：谈论电脑
- 美国确诊超46万！美国州长竟然抢起高龄程序员了，什么情况？
- 华为发布全容器化 5G 核心网；余承东评小米 MIX Aphla 手机无实用价值；PHP 新版本更新 | 极客头条...
- Windows下安装和配置Java JDK
- Caffe学习：Data
- 白嫖5T空间Onedrive并搭建下载站
- 史上最强 Java 学习路线图！
- 无线攻击 --Fern WiFi Cracker（图形化无线密码破解工具 ）
- win7计算机未连接网络,教你w7电脑本地连接受限制或无连接的七种解决方法
- IAB TCF 2.0(Transparency and Consent Framework)简介
- 什么是交互设计，为什么要进行交互设计
- 使用Docker如何搭建Web漏洞测试环境？
- 达梦 DM 执行SQL报字符串截断如何分析定位/超长文本截取
- window 删除文件提示指定的文件名无效或太长