【愚公系列】《循序渐进Vue.js 3.x前端开发实践》067-商业项目：电商后台管理系统实战（用户登录模块开发）
🚀前言
在当今的数字经济时代，电子商务已成为商业运营的重要组成部分。一个高效、稳定的电商后台管理系统是确保企业顺利运营的关键。作为电商系统的核心组成部分，用户登录模块不仅关乎系统的安全性，还直接影响到用户的体验和满意度。
本文将带你深入探讨电商后台管理系统中用户登录模块的开发实战。我们将从项目需求分析入手，逐步引导你实现一个功能齐全的用户登录模块，包括用户注册、登录验证、密码重置等功能。通过使用现代前端技术（如 Vue.js）和后端框架（如 Node.js 或 Express），我们将展示如何实现安全、高效的用户认证机制。
🚀一、用户登录模块开发
🔎1. 项目搭建
首先，我们需要创建一个新的 Vue 项目并安装必要的依赖模块。
🦋1.1 创建 Vue 项目
在终端中执行以下命令来创建一个新的 Vue 项目：
npm create vite@latest在创建过程中设置项目名称为 shop-admin。
🦋1.2 安装依赖
进入项目目录后，安装 Vue Router 和 Pinia：
npm install vue-router@4 --save
npm install pinia --save确保 package.json 文件中包含了 vue-router 和 pinia 模块。
🦋1.3 项目结构
删除默认的 HelloWorld.vue 文件。在 components 文件夹下新建 home 和 login 两个子文件夹，并分别创建 Home.vue 和 Login.vue 文件。
components/
home/
Home.vue
login/
Login.vue示例代码：
<!-- Home.vue -->
<template>
主页
</template>
<!-- Login.vue -->
<template>
登录页面
</template>🔎2. 全局状态管理
在 src 文件夹下新建一个 tools 文件夹，并在其中创建 Storage.js 文件。
src/
tools/
Storage.js🦋2.1 Storage.js
// src/tools/Storage.js
import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
const Store = defineStore("UserStore", () => {
// 全局存储用户名和密码
const userName = ref("");
const userPassword = ref("");
// 进行是否登录的判断
const isLogin = computed(() => {
return userName.value.length > 0;
});
// 清除缓存的用户信息，登出使用
const clearUserInfo = () => {
userName.value = "";
userPassword.value = "";
};
// 注册用户信息，登录使用
const registUserInfo = (name, password) => {
userName.value = name;
userPassword.value = password;
};
return { userName, userPassword, isLogin, clearUserInfo, registUserInfo };
});
export default Store;🔎3. 路由配置
在 tools 文件夹下新建 Router.js 文件，用于路由配置。
// src/tools/Router.js
import { createRouter, createWebHashHistory } from 'vue-router';
import Login from '../components/login/Login.vue';
import Home from '../components/home/Home.vue';
import store from '../tools/Storage';
// 创建路由实例
const Router = createRouter({
history: createWebHashHistory(),
routes: [
{ path: '/login', component: Login, name: "login" },
{ path: '/home', component: Home, name: "home" }
]
});
// 路由守卫，当未登录时，非登录页面的任何页面都不允许跳转
Router.beforeEach((to, from, next) => {
const userStore = store();
let isLogin = userStore.isLogin;
if (isLogin || to.name === "login") {
next();
} else {
next({ name: "login" });
}
});
export default Router;🔎4. 修改 App.vue
为 App.vue 文件添加路由渲染出口：
// src/App.vue
<template>
<router-view></router-view>
</template>🔎5. 初始化项目
在 main.js 文件中完成基础的初始化工作：
// src/main.js
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import Router from './tools/Router';
import App from './App.vue';
const app = createApp(App);
app.use(createPinia());
app.use(Router);
app.mount('#app');🔎6. 用户登录页面开发
🦋6.1 安装 Element Plus
npm install element-plus --save
npm install element-plus/icons-vue --save🦋6.2 引入 Element Plus
在 main.js 文件中添加 Element Plus 模块的相关初始化代码：
// src/main.js
import ElementPlus from 'element-plus';
import 'element-plus/dist/index.css';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import Router from './tools/Router';
import App from './App.vue';
const app = createApp(App);
// 遍历 ElementPlusIconsVue 中的所有组件进行注册
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component);
}
app.use(ElementPlus);
app.use(createPinia());
app.use(Router);
app.mount('#app');🦋6.3 修改 Storage.js
为 Storage.js 文件添加两个修改用户状态的方法：
// src/tools/Storage.js
const Store = defineStore("UserStore", () => {
const userName = ref("");
const userPassword = ref("");
const isLogin = computed(() => {
return userName.value.length > 0;
});
const clearUserInfo = () => {
userName.value = "";
userPassword.value = "";
};
const registUserInfo = (name, password) => {
userName.value = name;
userPassword.value = password;
};
return { userName, userPassword, isLogin, clearUserInfo, registUserInfo };
});
export default Store;🦋6.4 完善 Login.vue
<!-- src/components/login/Login.vue -->
<script setup>
import Storage from "../../tools/Storage";
import { ElMessage } from 'element-plus';
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
const store = Storage();
const router = useRouter();
const name = ref("");
const password = ref("");
const disabled = computed(() => {
return name.value.length == 0 || password.value.length == 0;
});
function login() {
store.registUserInfo(name.value, password.value);
ElMessage({
message: '登录成功',
type: 'success',
duration: 3000,
});
setTimeout(() => {
router.push({ name: "home" });
}, 3000);
}
</script>
<template>
<div id="container">
<div id="title">
<h1>电商后台管理系统</h1>
</div>
<div class="input">
<el-input v-model="name" prefix-icon="user" placeholder="请输入用户名"></el-input>
</div>
<div class="input">
<el-input v-model="password" prefix-icon="lock" placeholder="请输入密码" auto-complete="new-password" show-password></el-input>
</div>
<div class="input">
<el-button @click="login" style="width:500px" type="primary" :disabled="disabled">登录</el-button>
</div>
</div>
</template>
<style scoped>
#container {
background: #595959;
background-image: url("/public/login_bg.jpg");
height: 100vh;
width: 100vw;
position: absolute;
}
#title {
text-align: center;
color: azure;
margin-top: 200px;
}
.input {
margin: 20px auto;
width: 500px;
}
</style>🔎7.总结
以上就是一个简单的 Vue 后台管理系统的基础搭建和用户登录模块的实现。运行代码后，无论输入怎样的页面路径，页面都会被重定向到登录页面。在登录成功后，页面会跳转到后台管理系统的主页。
举报
腾讯云开发者
