纯前端体验 ZR.Admin.NET背景管理体系

（掩护开源大神是每个羊毛党应尽的义务）


一、官方文档说明

拉取代码

堆栈	Github	Gitee
前端 vue3	克隆/下载	克隆/下载 推荐
前端 uniapp	打赏获取	打赏获取
后端 net7	克隆/下载	克隆/下载
后端 net8		克隆/下载

怎样开发

• fork 代码到自己的堆栈(留意：不要通过下载的方式获取代码)
  
• 新增一个分支用来开发自己的业务 好比：business。主分支一般是master用来拉取同步最新代码(会被欺压覆盖)不要开发自己的业务
  
• 之后通过同步拉取到的最新代码合并到自己的 business 分支上
  
  
  

开发准备

vs2022 及以上 以及 vscode(开发前端用到)
vsCode 建议安装以下插件

• volar(vue3)
  
• vetur(vue2)
  
• Chinese (Simplified),
  
• eslint,
  
• i18n Ally(多语言)
  
• vue-component
  
• 安装.netSdk .NET 下载(Linux、macOS 和 Windows)
  

sdk

• 数据库任选以下此中一种(通过测试的)
  

1. - MySql >= 5.7.0
2. - SqlServer >= 2008(推荐 2012 以上)
3. - Oracle
4. - PgSql >=15

复制代码

其他数据库理论上也支持（如果有需要可以提供数据库测试）。sqlsugar 支持数据库传送门

• node 情况
  

1. Node >= 16

复制代码

• node 下载地址
  
• node 安装步调
  
• 查看 node 安装
  

1. C:\Users\admin>node -v
2. v16.15.0
4. C:\Users\admin>npm -v
5. 9.4.1

复制代码

新版本的 node 已经集成了 npm 所以不需要额外的安装

• 设置 npm 镜像地址
  

1. C:\Users\admin>        npm config set registry=https://registry.npmmirror.com
3.         //执行以下命令查看是否配置成功
4. C:\Users\admin>        npm config get registry

复制代码

• 安装 vue 脚手架
  

1. npm install -g @vue/cli

复制代码

留意
由于本项目是前后端分离的，所以需要前后端都启动好，才能举行访问。 前端安装完 node 后，最好设置下淘宝镜像源，不建议利用 cnpm(可能会出现奇怪的题目)
后端启动

拉取项目

1. - 克隆项目
2. git clone https://gitee.com/izory/ZrAdminNetCore d:/zradmin/
4. - 打开项目
5. 打开 ZRAdmin.sln 解决方案
7. - 运行项目
8. 设置 ZR.Admin.WebApi 为启动项目 在项目根目录中运行 `startup.bat` 进行启动
10. - 打包发布
11. 选择 ZR.Admin.WebApi 右键菜单点击发布

复制代码

提示
建议利用 Git克隆，由于克隆的方式可以和ZRAdmin随时保持更新同步
建库表

• ✨ 通过 codefirst 建库建表 推荐
  

目前仅支持 框架 net7 以上 利用
设置 appsettings.json 设置文件，将下面的 false 设置为 true，然后重新启动程序既可自动创建数据库表，创建好后修改成fasle

1. {
2.   "InitDb": true //是否初始化db
3. }

复制代码

• 修改 appsettings.json 设置文件
  

1. "dbConfigs": [
2.         // 业务库
3.         {
4.                 "Conn": "Data Source=LAPTOP-STKF2M8H\\SQLEXPRESS;User ID=admin;Password=admin123;Initial Catalog=ZrAdmin;",
5.                 "DbType": 1, //数据库类型 MySql = 0, SqlServer = 1, Oracle = 3，PgSql = 4
6.                 "ConfigId": "0",//
7.                 "IsAutoCloseConnection": true //是否自动释放
8.         },
9.         //...下面添加更多的数据库源
10. ],
11. "urls": "http://localhost:8888", //项目启动url，如果改动端口前端对应devServer也需要进行修改

复制代码

• 数据库毗连字符串格式参考
  

MySQLsqlserverOraclePgSql其他库

1. // 系统内置 mysql 驱动不需要安装
2. Data Source=localhost;port=3306;User ID=admin;Password=zradmin123;Database=ZrAdmin;CharSet=utf8;sslmode=none;
4. // 代码生成字符串
5. Data Source=localhost;port=3306;User ID=admin;Password=zradmin123;Database={dbName};CharSet=utf8;sslmode=none;

复制代码

提示

• 体系已内置 mysql 库的驱动MySqlConnector，如果是其他库，将项目内里全部类库内里的MySqlConnector驱动举行更换
  
• 或者 将全部 SqlSugarCoreNoDrive驱动更换成 SqlSugarCore，这个包包罗了全部的数据库驱动，不需要在举行单独的安装数据库驱动
  

• 启动成功会出现以下内容，如果启动失败请查看项目目次 admninLogs 文件夹日志
  

启动结果
后端运行成功可以通过http://localhost:8888访问，但是不会出现静态页面，可以继承参考下面步调摆设前端，然后通过前端地址来访问。建议不要修改启动端口地址
提示
如果 ORM 毗连不上数据库，请看这里.NET 操作 SqlServer - SqlSugar 5x - .NET果糖网
初始化种子数据

• 通过接口导入，支持全部库推荐 后端启动成功后访问接口地址 http://localhost:8888/common/initseedData 即可初始化数据
  

留意
一定要是本地开发情况上执行，发布摆设到服务器上之后此接口不通
前端启动

请确保你已经安装了 node 情况
留意
前端代码路径不能有特别符号、空格之类 ,好比C#，这样启动会出现题目
vue2vue3

1. # 进入项目目录
2. cd ZR.Vue
4. # 安装依赖
5. npm install
7. # 本地开发 启动项目
8. npm run dev

复制代码

启动程序

• 启动成功后会自动打开浏览器，如果没自动打开手动在浏览器中输入：http://localhost:8887 若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明情况搭建成功
  

验证(默认账号和密码)

• 管理员账户/密码 admin/123456
  
• 普通用户 user/123456
  

摆设体系

传送门

• nginx 设置参考
  

1. server {
2.   #修改要监听的端口
3.   listen 80;
4.   #修改要绑定的域名或IP地址
5.   server_name 域名/外网IP;
7.   # charset koi8-r;
8.   # access_log  logs/logs.access.log  main;
10.   # vue项目配置
11.   location / {
12.     #linux 路径
13.     root html/zradmin/dist;
14.     index index.html;
15.     try_files $uri $uri/ /index.html;
16.   }
18.   # 后端接口
19.   # 正式环境对应前端打包运行命令 npm run build:prod
20.   location /prod-api/ {
21.     proxy_pass  http://localhost:8888/;
23.     # 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
24.     proxy_set_header Host $host;
25.     proxy_set_header X-Real-IP $remote_addr;
26.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
27.   }
29.   # signalR(websocket)
30.   location ~* ^/msgHub {
31.     proxy_pass  http://localhost:8888;   #注意后面没有/
32.     #后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
33.     proxy_set_header Host $host;
34.     proxy_set_header X-Real-IP $remote_addr;
35.     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
36.     #启用http长连接支持websocket
37.     proxy_http_version 1.1;
38.     proxy_set_header Upgrade $http_upgrade;
39.     proxy_set_header Connection "upgrade";
40.   }
41. }

复制代码

npm 设置(非必要)

node 安装过程：略 这里将 node 安装到 D:\nodejs 目次
先设置 npm 的全局模块的存放路径以及cache路径 详细方法：在 d:\nodejs 目次新建 node_cache、node_global 两个文件夹

• 启动 cmd，然后执行以下 2 个命令
  

1. npm config set prefix "D:\nodejs\node_global"
2. npm config set cache "D:\nodejs\node_cache"

复制代码

• 如果要看是否设置成功，可在 cmd 里输入如下命令查看
  

1. npm config get prefix
2. //如果输出 D:\nodejs\node_global表示成功
3. npm config get cache
4. //将会输出 D:\nodejs\node_cache

复制代码

• 最后，我们要修改体系情况变量（“此电脑--右键--属性--高级体系设置---情况变量”）。首先在 用户变量 里新建一个变量NODE_PATH,值为安装 nodejs 文件夹下的 node_modules ，即：D:\nodejs\node_modules
  
• 然后，在体系变量的 Path 变量里添加 node_global ，新建将 D:\nodejs\node_global 粘贴进去
  
  
  

删除 node_modules

• 利用 npm 包 rimraf 快速删除 node_modules 文件夹
  

先全局安装 npm 包

1. npm install rimraf -g

复制代码

rimraf node_modules
更新包

参考文章：https://juejin.cn/post/6913833065647341581
个人实现步调

前期工作

1、请先按照官方文档完成开发准备
2、拉取代码
新建数据库

我利用的是mysql，仅创建数据库，表生成按照官方引导方法，后续步调会说明
修改设置文件

找到设置文件 appsettings.json

项目路径： \ZR.Admin.WebApi\appsettings.json
根据个人需要 新建 appsettings.Development.json 和 appsettings.Test.json
（复制修改文件名即可）
这里有一个基础题目:
因本人纯前端，没有利用过 vs studio；
新建 appsettings.Development.json 后解决方案中看不到文件，
修改 .gitignore 文件，将对应行解释掉即可

设置数据库信息

在对应情况的 appsettings.json 文件中 设置 dbConfigs
我利用的数据库是MySql，所以 DbType=0，Conn 按照对应数据库要求设置
中文部分请自行更换

1. "dbConfigs": [
2.    {
3.      "Conn": "Data Source=域名;port=端口号;User ID=账号;Password=密码;Database=库名;CharSet=utf8;Max Pool Size=70;Pooling=true;Connection Reset=false;Connect Timeout=25;",
4.      "DbType": 0, //数据库类型 MySql = 0, SqlServer = 1, Oracle = 3，PgSql = 4
5.      "ConfigId": "0", //多租户唯一标识
6.      "IsAutoCloseConnection": true
7.    }
8.    //...下面添加更多的数据库源
9. ],

复制代码

设置初始化表结构

自动化

设置 appsettings.json 设置文件，将下面的 false 设置为 true，然后重新启动程序既可自动创建数据库表，创建好后修改成fasle

1. {
2.   "InitDb": true //是否初始化db
3. }

复制代码

手动

在项目中找到 document 文件夹

根据对应数据库，找到此中的 sql 文件

我是利用数据库可视化工具 直接运行sql 文件，生成表结构
后端调试启动

启动

在 vs studio 中双击 ZRAdmin.sln 生成解决方案，
点击 调试 => 开始调试

按照官方说明，下一步 建库表 ，确认已经建表，且已设置好 appsettings.json
检查数据库中是否已经初始化表结构，

初始化数据

直接调用官方给的接口：http://localhost:8888/common/initseedData

检查用户表中是否已添加数据
前端启动

作为纯前端开发，这里就不详细说明了，日常基操
界面查看

如果项目正确启动，登录 admin 后 ，就可看到以下界面，其余就可根据自身需要修改开发啦！

 尝试体验 C# 出一个新的 curd 接口

因原作者开源不易，本篇文章不做过多说明，开发过程就藏起来啦，全凭本领吧！
（掩护开源大神是每个羊毛党应尽的义务）
原作者也有开通引导文档通道、需要知识付费。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。