vue-admin-work-x 与Furion框架制作 商城系统之《登录》

2023-10-09 00:20
文章标签 系统 登录 vue 框架 制作 商城 admin work furion

本文主要是介绍vue-admin-work-x 与Furion框架制作 商城系统之《登录》，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

 简介：   本系统紧用于初学者研究相关框架的学习思路，已便于掌握高效率工作其手段，进一步效率减少工作时间，更快推进项目上线，并使用其相关领域前沿技术，时代在进步，不卷不行啊！

介绍：   本篇所实现的是后台部分，管理员登陆 ，使用框架为下方：

  • 前端后台框架：Vue Admin Work X
  • 后台Api ：Furion框架(代码均在前几章的基础上进行)
  • 数据库：Sql Server2008
  • 开发软件：Vs code   ，Vs 2022

  • 前台语言：Vue3，Webpack，Typescript，Element Plus，js

1.下载 Vue Admin Work X 后台前端框架 

  • 官网下载    Vue Admin Work X
  • github下载       GitHub - qingqingxuan/vue-admin-work-x:

2. 使用github 下载 ，解压用code 打开，安装依赖 

​

  根目录执行：  npm install

​

3.启动运行    

     指令： npm run dev

启动成功 

4.分析其登陆所需数据，在后台建立相关模型（这里我是根据前台框架作者模型进行构建，如需调整，自行研究）

  •   管理员表   模型如下：
 [Table("DB_User")]public class DB_User : IEntity, IEntityTypeBuilder<DB_User>{public DB_User(){userId = 0;UserName = "";PassWord = "";roleId = 0;token = "";jsonmenu = "";}/// <summary>/// 编号/// </summary>public int userId { get; set; }/// <summary>/// 账号/// </summary>public string UserName { get; set; }/// <summary>/// 密码/// </summary>public string PassWord { get; set; }/// <summary>/// 角色类型/// </summary>public int roleId { get; set; }/// <summary>/// token 标识/// </summary>public string token { get; set; }/// <summary>/// 存该用户列表权限/// </summary>public string jsonmenu { get; set; }    public void Configure(EntityTypeBuilder<DB_User> entityBuilder, DbContext dbContext, Type dbContextLocator){entityBuilder.HasKey(u => u.userId);}}
  • 角色表 模型如下：
namespace F2.Core.Entity
{/// <summary>/// 角色表/// </summary>[Table("DB_UserType")]public class DB_UserType : IEntity, IEntityTypeBuilder<DB_UserType>{public DB_UserType(){roleId = 0;roleCode = "";roleName = "";}/// <summary>/// 角色标识/// </summary>public string roleCode { get; set; }/// <summary>/// 角色名称/// </summary>public string roleName { get; set; }/// <summary>/// 角色类型id/// </summary>public int roleId { get; set; }public void Configure(EntityTypeBuilder<DB_UserType> entityBuilder, DbContext dbContext, Type dbContextLocator){entityBuilder.HasKey(u => u.roleId);}}}

前端使用数组  模型如下：

  public class user{public user(){userId = 0;UserName = "";PassWord = "";roleId = 0;token = "";nickName = "";roles = new List<DB_UserType>();jsonmenu = "";}/// <summary>/// 编号/// </summary>public int userId { get; set; }/// <summary>/// 账号/// </summary>public string UserName { get; set; }/// <summary>/// 密码/// </summary>public string PassWord { get; set; }/// <summary>/// 角色类型/// </summary>public int roleId { get; set; }/// <summary>/// token 标识/// </summary>public string token { get; set; }/// <summary>/// 角色名称/// </summary>public string nickName { get; set; }/// <summary>/// 该人员的角色列表/// </summary>public List<DB_UserType> roles { get; set; }/// <summary>/// 存该用户列表权限/// </summary>public string jsonmenu { get; set; }}

5.创建  其相关数据库字段：

  • DB_User   如下：
GOCREATE TABLE [dbo].[DB_User]([userId] [int] IDENTITY(1,1) NOT NULL,[UserName] [nvarchar](100) NULL,[PassWord] [nvarchar](100) NULL,[roleId] [int] NULL,[token] [nvarchar](100) NULL,[jsonmenu] [nvarchar](max) NULL,CONSTRAINT [PK_DB_AdminUser_1] PRIMARY KEY CLUSTERED 
([userId] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY] TEXTIMAGE_ON [PRIMARY]GO
  • DB_UserType 如下：
GOCREATE TABLE [dbo].[DB_UserType]([roleId] [int] IDENTITY(1,1) NOT NULL,[roleCode] [nvarchar](100) NULL,[roleName] [nvarchar](100) NULL,CONSTRAINT [PK_DB_UserType] PRIMARY KEY CLUSTERED 
([roleId] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]GO

添加默认 超管账号  如下：


insert into dbo.DB_UserType values('ROLE_admin','超级管理员')insert into dbo.DB_User  Values('admin','123asd2',1,'tokaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa','[{"menuUrl":"/system","menuName":"系统管理","icon":"SettingIcon","tip":"new","parentPath":"","children":[{"parentPath":"/system","menuUrl":"/system/department","menuName":"部门管理","isSelect":true},{"parentPath":"/system","menuUrl":"/system/user","menuName":"用户管理","isSelect":true},{"parentPath":"/system","menuUrl":"/system/role","menuName":"角色管理","isSelect":true},{"parentPath":"/system","menuUrl":"/system/menu","menuName":"菜单管理","cacheable":true,"isSelect":true}],"isSelect":true},{"menuUrl":"/list","menuName":"列表页面","icon":"OperationIcon","parentPath":"","children":[{"parentPath":"/list","menuUrl":"/list/table-with-search","menuName":"表格搜索","isSelect":true},{"parentPath":"/list","menuUrl":"/list/table-custom","menuName":"自定义表格","isSelect":true},{"parentPath":"/list","menuUrl":"/list/list","menuName":"普通列表","isSelect":true},{"parentPath":"/list","menuUrl":"/list/card-list","menuName":"卡片列表","isSelect":true}],"isSelect":true},{"menuUrl":"/form","menuName":"表单页面","tip":"dot","icon":"PostcardIcon","parentPath":"","children":[{"parentPath":"/form","menuUrl":"/form/base-form-view","menuName":"基本表单","cacheable":true,"isSelect":true},{"parentPath":"/form","menuUrl":"/form/advance-form","menuName":"高级表单","cacheable":true,"isSelect":true},{"parentPath":"/form","menuUrl":"/form/step-form","menuName":"分步表单","isSelect":true},{"parentPath":"/form","menuUrl":"/form/form-component","menuName":"表单组件","isSelect":true}],"isSelect":true},{"menuUrl":"/other","menuName":"功能/组件","icon":"GridIcon","parentPath":"","children":[{"parentPath":"/other","menuUrl":"/other/chart","menuName":"图表","children":[{"parentPath":"/other/chart","menuUrl":"/other/chart/icon","menuName":"图标","children":[{"parentPath":"/other/chart","menuUrl":"/other/chart/icon/icon-font","menuName":"IconFont"},{"parentPath":"/other/chart","menuUrl":"/other/chart/icon/element-plus","menuName":"ElementPlus"},{"parentPath":"/other/chart","menuUrl":"/other/chart/icon/icon-select","menuName":"图标选择器"}]},{"parentPath":"/other/chart","menuUrl":"/other/chart/echarts","menuName":"echarts"}],"isSelect":true},{"parentPath":"/other","menuUrl":"/other/print","menuName":"打印","isSelect":true},{"parentPath":"/other","menuUrl":"/other/tip","menuName":"消息提示","isSelect":true},{"parentPath":"/other","menuUrl":"/other/clipboard","menuName":"剪切板","isSelect":true},{"parentPath":"/other","menuUrl":"http://www.vueadminwork.com","menuName":"外链","isSelect":true},{"parentPath":"/other","menuUrl":"/other/cropper","menuName":"图片裁剪","isSelect":true},{"parentPath":"/other","menuUrl":"/other/qrcode","menuName":"二维码","isSelect":true},{"parentPath":"/other","menuUrl":"/other/css-animation","menuName":"Css动画","isSelect":true},{"parentPath":"/other","menuUrl":"/other/descriptions","menuName":"详情页面","isSelect":true}],"isSelect":true},{"menuUrl":"/result","menuName":"结果页面","icon":"TakeawayBoxIcon","parentPath":"","children":[{"parentPath":"/result","menuUrl":"/result/success","menuName":"成功页面","isSelect":true},{"parentPath":"/result","menuUrl":"/result/fail","menuName":"失败页面","isSelect":true}],"isSelect":true},{"menuUrl":"/exception","menuName":"异常页面","icon":"WarningIcon","parentPath":"","children":[{"parentPath":"/exception","menuUrl":"/exception/404","menuName":"404页面","isSelect":true},{"parentPath":"/exception","menuUrl":"/exception/403","menuName":"403页面","isSelect":true},{"parentPath":"/exception","menuUrl":"/exception/500","menuName":"500页面","isSelect":true}],"isSelect":true},{"menuUrl":"/editor","menuName":"编辑器","tip":"12","icon":"EditIcon","parentPath":"","children":[{"parentPath":"/editor","menuUrl":"/editor/rich-text","menuName":"富文本","isSelect":true},{"parentPath":"/editor","menuUrl":"/editor/markdown","menuName":"markdown","isSelect":true}],"isSelect":true},{"menuUrl":"/excel","menuName":"Excel","icon":"NotebookIcon","parentPath":"","children":[{"parentPath":"/excel","menuUrl":"/excel/export-excel","menuName":"导出Excel","isSelect":true},{"parentPath":"/excel","menuUrl":"/excel/export-rows-excel","menuName":"导出选中行","isSelect":true}],"isSelect":true},{"menuUrl":"/draggable","menuName":"拖拽","icon":"PointerIcon","parentPath":"","children":[{"parentPath":"/draggable","menuUrl":"/draggable/dialog-draggable","menuName":"拖拽对话框","isSelect":true},{"parentPath":"/draggable","menuUrl":"/draggable/card-draggable","menuName":"卡片拖拽","cacheable":true,"isSelect":true}],"isSelect":true},{"menuUrl":"/next","menuName":"多级菜单","icon":"ShareIcon","parentPath":"","children":[{"parentPath":"/next","menuUrl":"/next/menu1","menuName":"menu-1","cacheable":true,"isSelect":true},{"parentPath":"/next","menuUrl":"/next/menu2","menuName":"menu-2","children":[{"parentPath":"/next/menu2","menuUrl":"/next/menu2/menu-2-1","menuName":"menu-2-1","children":[{"parentPath":"/next/menu2/menu-2-1","menuUrl":"/next/menu2/menu-2-1/menu-2-1-1","menuName":"menu-2-1-1","cacheable":true},{"parentPath":"/next/menu2/menu-2-1","menuUrl":"/next/menu2/menu-2-1/menu-2-1-2","menuName":"menu-2-1-2"}]},{"parentPath":"/next/menu2","menuUrl":"/next/menu2/menu-2-2","menuName":"menu-2-2","cacheable":true}],"isSelect":true}],"isSelect":true},{"menuUrl":"/map","menuName":"地图","icon":"MapLocationIcon","children":[{"parentPath":"/map","menuUrl":"/map/gaode","menuName":"高德地图","isSelect":true},{"parentPath":"/map","menuUrl":"/map/baidu","menuName":"百度地图","isSelect":true}],"isSelect":true}]' )

6. 书写所需要的接口

using F2.Core.Entity;
using Furion.DatabaseAccessor;
using Furion.DatabaseAccessor.Extensions;
using Furion.DynamicApiController;
using Furion.JsonSerialization;
using Microsoft.AspNetCore.Mvc;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;namespace F2.Application
{/// <summary>/// 管理员相关接口/// </summary>[ApiDescriptionSettings("管理员相关接口")]public class DB_AdminUserService : IDynamicApiController{/// <summary>/// 管理员数据服务/// </summary>public readonly IRepository<Core.Entity.DB_User> _DB_UserService;public readonly IRepository<Core.Entity.DB_UserType> _DB_UserTypeService;/// <summary>/// json转换/// </summary>private readonly IJsonSerializerProvider _jsonSerializer;/// <summary>/// 依赖注入/// </summary>public DB_AdminUserService(IRepository<Core.Entity.DB_User> DB_UserService, IRepository<Core.Entity.DB_UserType> DB_UserTypeService, IJsonSerializerProvider jsonSerializer){this._DB_UserService = DB_UserService;this._DB_UserTypeService = DB_UserTypeService;this._jsonSerializer = jsonSerializer;}/// <summary>/// 登陆/// </summary>/// <returns></returns>public string PostLogin(DB_User dB_User){if (string.IsNullOrEmpty(dB_User.PassWord)|| string.IsNullOrEmpty(dB_User.UserName)){var code = new { code = 205, data = new user(), msg = "请输入用户或密码" };return _jsonSerializer.Serialize(code);}else{var liqns = from a in _DB_UserService.AsQueryable()join d in _DB_UserTypeService.AsQueryable() on a.roleId equals d.roleId into resultsfrom d in results.DefaultIfEmpty()select new user{userId = a.userId,UserName = a.UserName,PassWord = a.PassWord,jsonmenu = a.jsonmenu,nickName = d.roleName,roleId = d.roleId,token = a.token,};var liqn = liqns.ToList().Where(p => p.UserName == dB_User.UserName && p.PassWord == dB_User.PassWord).ToList();if (liqn.Count() <= 0){var code = new { code = 205, data = new user(), msg = "用户或密码错误" };return _jsonSerializer.Serialize(code);}else{var model = liqn.FirstOrDefault();model.roles = _DB_UserTypeService.Entities.Where(p => p.roleId == model.roleId).ToList();var code = new { code = 200, data = model, msg = "登录成功" };return _jsonSerializer.Serialize(code);}}}/// <summary>/// 查询菜单列表/// </summary>/// <param name="dB_User"></param>/// <returns></returns>public string PostMenuListByRoleId(DB_User dB_User){ var model = _DB_UserService.Find(dB_User.userId);var code = new { code = 200, data = model.jsonmenu, msg = "获取菜单列表成功" };return _jsonSerializer.Serialize(code);}}
}

7.解决跨域，注册服务  Program.cs

 8.配置允许通过域名：根据是否生产中程序进行配置

 9.修改 vue-admin-work-x 框架相关接口配置

  • \src\api\axios.config.ts  ：const baseIp = "http://api.vueadminwork.com/";  换成你接口的域名
  • \src\api\url.ts ：export const getMenuListByRoleId = "/api/db_-admin-user/menu-list-by-role-id";export const login = "/api/db_-admin-user/db_-admin-user";   换成你接口的域名

10  修改这里代码    \src\utils\router.ts

 11.登陆测试

账号:  admin            密码:     123asd

 

 感谢观看，圣诞快乐！！！！！！！！！

这篇关于vue-admin-work-x 与Furion框架制作 商城系统之《登录》的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/168992。

相关文章

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案

《Vue3组件中getCurrentInstance()获取App实例,但是返回null的解决方案》：本文主要介绍Vue3组件中getCurrentInstance()获取App实例,但是返回nu... 目录vue3组件中getCurrentInstajavascriptnce()获取App实例，但是返回n
阅读更多...
kali linux 无法登录root的问题及解决方法

kali linux 无法登录root的问题及解决方法

《kalilinux无法登录root的问题及解决方法》：本文主要介绍kalilinux无法登录root的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,... 目录kali linux 无法登录root1、问题描述1.1、本地登录root1.2、ssh远程登录root2、
阅读更多...
使用Node.js制作图片上传服务的详细教程

使用Node.js制作图片上传服务的详细教程

《使用Node.js制作图片上传服务的详细教程》在现代Web应用开发中,图片上传是一项常见且重要的功能,借助Node.js强大的生态系统,我们可以轻松搭建高效的图片上传服务,本文将深入探讨如何使用No... 目录准备工作搭建 Express 服务器配置 multer 进行图片上传处理图片上传请求完整代码示例
阅读更多...
Vuex Actions多参数传递的解决方案

Vuex Actions多参数传递的解决方案

《VuexActions多参数传递的解决方案》在Vuex中,actions的设计默认只支持单个参数传递,这有时会限制我们的使用场景,下面我将详细介绍几种处理多参数传递的解决方案,从基础到高级,... 目录一、对象封装法（推荐）二、参数解构法三、柯里化函数法四、Payload 工厂函数五、TypeScript
阅读更多...
利用Python快速搭建Markdown笔记发布系统

利用Python快速搭建Markdown笔记发布系统

《利用Python快速搭建Markdown笔记发布系统》这篇文章主要为大家详细介绍了使用Python生态的成熟工具,在30分钟内搭建一个支持Markdown渲染、分类标签、全文搜索的私有化知识发布系统... 目录引言：为什么要自建知识博客一、技术选型：极简主义开发栈二、系统架构设计三、核心代码实现（分步解析
阅读更多...
Vue3使用router,params传参为空问题

Vue3使用router,params传参为空问题

《Vue3使用router,params传参为空问题》：本文主要介绍Vue3使用router,params传参为空问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录vue3使用China编程router,params传参为空1.使用query方式传参2.使用 Histo
阅读更多...
vue使用docxtemplater导出word

vue使用docxtemplater导出word

《vue使用docxtemplater导出word》docxtemplater是一种邮件合并工具,以编程方式使用并处理条件、循环,并且可以扩展以插入任何内容,下面我们来看看如何使用docxtempl... 目录docxtemplatervue使用docxtemplater导出word安装常用语法 封装导出方
阅读更多...
Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

Python FastAPI+Celery+RabbitMQ实现分布式图片水印处理系统

《PythonFastAPI+Celery+RabbitMQ实现分布式图片水印处理系统》这篇文章主要为大家详细介绍了PythonFastAPI如何结合Celery以及RabbitMQ实现简单的分布式... 实现思路FastAPI 服务器Celery 任务队列RabbitMQ 作为消息代理定时任务处理完整
阅读更多...
Linux系统中卸载与安装JDK的详细教程

Linux系统中卸载与安装JDK的详细教程

《Linux系统中卸载与安装JDK的详细教程》本文详细介绍了如何在Linux系统中通过Xshell和Xftp工具连接与传输文件,然后进行JDK的安装与卸载,安装步骤包括连接Linux、传输JDK安装包... 目录1、卸载1.1 linux删除自带的JDK1.2 Linux上卸载自己安装的JDK2、安装2.1
阅读更多...
springboot security验证码的登录实例

springboot security验证码的登录实例

《springbootsecurity验证码的登录实例》：本文主要介绍springbootsecurity验证码的登录实例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,... 目录前言代码示例引入依赖定义验证码生成器定义获取验证码及认证接口测试获取验证码登录总结前言在spring
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2