纯前端体验 ZR.Admin.NET背景管理体系
（掩护开源大神是每个羊毛党应尽的义务）一、官方文档说明
拉取代码
堆栈
Github
Gitee
前端 vue3
克隆/下载
克隆/下载
推荐
前端 uniapp
打赏获取
打赏获取
后端 net7
克隆/下载
克隆/下载
后端 net8
克隆/下载
怎样开发
[*]fork 代码到自己的堆栈(留意：不要通过下载的方式获取代码)
[*]新增一个分支用来开发自己的业务 好比：business。主分支一般是master用来拉取同步最新代码(会被欺压覆盖)不要开发自己的业务
[*]之后通过同步拉取到的最新代码合并到自己的 business 分支上 https://img-blog.csdnimg.cn/img_convert/4bde4dd684ee18e5631848a88a9b7a48.png
开发准备
vs2022 及以上 以及 vscode(开发前端用到)
vsCode 建议安装以下插件
[*]volar(vue3)
[*]vetur(vue2)
[*]Chinese (Simplified),
[*]eslint,
[*]i18n Ally(多语言)
[*]vue-component
[*]安装.netSdk .NET 下载(Linux、macOS 和 Windows)
https://img-blog.csdnimg.cn/img_convert/a718a29ebaa57990774b3f8937b43591.png
sdk
[*]数据库任选以下此中一种(通过测试的)
- MySql >= 5.7.0
- SqlServer >= 2008(推荐 2012 以上)
- Oracle
- PgSql >=15 其他数据库理论上也支持（如果有需要可以提供数据库测试）。sqlsugar 支持数据库传送门
[*]node 情况
Node >= 16
[*]node 下载地址
[*]node 安装步调
[*]查看 node 安装
C:\Users\admin>node -v
v16.15.0
C:\Users\admin>npm -v
9.4.1 新版本的 node 已经集成了 npm 所以不需要额外的安装
[*]设置 npm 镜像地址
C:\Users\admin> npm config set registry=https://registry.npmmirror.com
//执行以下命令查看是否配置成功
C:\Users\admin> npm config get registry
[*]安装 vue 脚手架
npm install -g @vue/cli 留意
由于本项目是前后端分离的，所以需要前后端都启动好，才能举行访问。 前端安装完 node 后，最好设置下淘宝镜像源，不建议利用 cnpm(可能会出现奇怪的题目)
后端启动
拉取项目
- 克隆项目
git clone https://gitee.com/izory/ZrAdminNetCore d:/zradmin/
- 打开项目
打开 ZRAdmin.sln 解决方案
- 运行项目
设置 ZR.Admin.WebApi 为启动项目 在项目根目录中运行 `startup.bat` 进行启动
- 打包发布
选择 ZR.Admin.WebApi 右键菜单点击发布 提示
建议利用 Git克隆，由于克隆的方式可以和ZRAdmin随时保持更新同步
建库表
[*]✨ 通过 codefirst 建库建表 推荐
目前仅支持 框架 net7 以上 利用
设置 appsettings.json 设置文件，将下面的 false 设置为 true，然后重新启动程序既可自动创建数据库表，创建好后修改成fasle
{
"InitDb": true //是否初始化db
}
[*]修改 appsettings.json 设置文件
"dbConfigs": [
// 业务库
{
"Conn": "Data Source=LAPTOP-STKF2M8H\\SQLEXPRESS;User ID=admin;Password=admin123;Initial Catalog=ZrAdmin;",
"DbType": 1, //数据库类型 MySql = 0, SqlServer = 1, Oracle = 3，PgSql = 4
"ConfigId": "0",//
"IsAutoCloseConnection": true //是否自动释放
},
//...下面添加更多的数据库源
],
"urls": "http://localhost:8888", //项目启动url，如果改动端口前端对应devServer也需要进行修改
[*]数据库毗连字符串格式参考
MySQLsqlserverOraclePgSql其他库
// 系统内置 mysql 驱动不需要安装
Data Source=localhost;port=3306;User ID=admin;Password=zradmin123;Database=ZrAdmin;CharSet=utf8;sslmode=none;
// 代码生成字符串
Data Source=localhost;port=3306;User ID=admin;Password=zradmin123;Database={dbName};CharSet=utf8;sslmode=none; 提示
[*]体系已内置 mysql 库的驱动MySqlConnector，如果是其他库，将项目内里全部类库内里的MySqlConnector驱动举行更换
[*]或者 将全部 SqlSugarCoreNoDrive驱动更换成 SqlSugarCore，这个包包罗了全部的数据库驱动，不需要在举行单独的安装数据库驱动
[*]启动成功会出现以下内容，如果启动失败请查看项目目次 admninLogs 文件夹日志
https://img-blog.csdnimg.cn/img_convert/c97d8027b637c7a2b73923afc96a7501.png
启动结果
后端运行成功可以通过http://localhost:8888访问，但是不会出现静态页面，可以继承参考下面步调摆设前端，然后通过前端地址来访问。建议不要修改启动端口地址
提示
如果 ORM 毗连不上数据库，请看这里.NET 操作 SqlServer - SqlSugar 5x - .NET果糖网
初始化种子数据
[*]通过接口导入，支持全部库推荐 后端启动成功后访问接口地址 http://localhost:8888/common/initseedData 即可初始化数据
留意
一定要是本地开发情况上执行，发布摆设到服务器上之后此接口不通
前端启动
请确保你已经安装了 node 情况
留意
前端代码路径不能有特别符号、空格之类 ,好比C#，这样启动会出现题目
vue2vue3
# 进入项目目录
cd ZR.Vue
# 安装依赖
npm install
# 本地开发 启动项目
npm run dev 启动程序
[*]启动成功后会自动打开浏览器，如果没自动打开手动在浏览器中输入：http://localhost:8887 若能正确展示登录页面，并能成功登录，菜单及页面展示正常，则表明情况搭建成功
验证(默认账号和密码)
[*]管理员账户/密码 admin/123456
[*]普通用户 user/123456
摆设体系
传送门
[*]nginx 设置参考
server {
#修改要监听的端口
listen 80;
#修改要绑定的域名或IP地址
server_name 域名/外网IP;
# charset koi8-r;
# access_loglogs/logs.access.logmain;
# vue项目配置
location / {
#linux 路径
root html/zradmin/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
# 后端接口
# 正式环境对应前端打包运行命令 npm run build:prod
location /prod-api/ {
proxy_passhttp://localhost:8888/;
# 后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
}
# signalR(websocket)
location ~* ^/msgHub {
proxy_passhttp://localhost:8888; #注意后面没有/
#后端的Web服务器可以通过X-Forwarded-For获取用户真实IP
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
#启用http长连接支持websocket
proxy_http_version 1.1;
proxy_set_header Upgrade $http_upgrade;
proxy_set_header Connection "upgrade";
}
} npm 设置(非必要)
node 安装过程：略 这里将 node 安装到 D:\nodejs 目次
先设置 npm 的全局模块的存放路径以及cache路径 详细方法：在 d:\nodejs 目次新建 node_cache、node_global 两个文件夹
[*]启动 cmd，然后执行以下 2 个命令
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
[*]如果要看是否设置成功，可在 cmd 里输入如下命令查看
npm config get prefix
//如果输出 D:\nodejs\node_global表示成功
npm config get cache
//将会输出 D:\nodejs\node_cache
[*]最后，我们要修改体系情况变量（“此电脑--右键--属性--高级体系设置---情况变量”）。首先在 用户变量 里新建一个变量NODE_PATH,值为安装 nodejs 文件夹下的 node_modules ，即：D:\nodejs\node_modules
[*]然后，在体系变量的 Path 变量里添加 node_global ，新建将 D:\nodejs\node_global 粘贴进去 https://img-blog.csdnimg.cn/img_convert/bfe39646582ca9110dd0355fdb0cab23.png
删除 node_modules
[*]利用 npm 包 rimraf 快速删除 node_modules 文件夹
先全局安装 npm 包
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 按照对应数据库要求设置
中文部分请自行更换
"dbConfigs": [
{
"Conn": "Data Source=域名;port=端口号;User ID=账号;Password=密码;Database=库名;CharSet=utf8;Max Pool Size=70;Pooling=true;Connection Reset=false;Connect Timeout=25;",
"DbType": 0, //数据库类型 MySql = 0, SqlServer = 1, Oracle = 3，PgSql = 4
"ConfigId": "0", //多租户唯一标识
"IsAutoCloseConnection": true
}
//...下面添加更多的数据库源
], 设置初始化表结构
自动化
设置 appsettings.json 设置文件，将下面的 false 设置为 true，然后重新启动程序既可自动创建数据库表，创建好后修改成fasle
{
"InitDb": true //是否初始化db
} 手动
在项目中找到 document 文件夹
https://img-blog.csdnimg.cn/img_convert/fd8cfd7803331e530b37a8846d56742b.png
根据对应数据库，找到此中的 sql 文件
https://img-blog.csdnimg.cn/img_convert/5119560f13e4c1f2dbb6c9efad4f28f9.png
我是利用数据库可视化工具 直接运行sql 文件，生成表结构
后端调试启动
启动
在 vs studio 中双击 ZRAdmin.sln 生成解决方案，
点击 调试 => 开始调试
https://img-blog.csdnimg.cn/img_convert/5e6f59d808167c7ec67f3285af612cff.png
按照官方说明，下一步 建库表 ，确认已经建表，且已设置好 appsettings.json
检查数据库中是否已经初始化表结构，
https://img-blog.csdnimg.cn/img_convert/374bebfa24806cccfcf1c268a2de6c36.png
初始化数据
直接调用官方给的接口：http://localhost:8888/common/initseedData
https://img-blog.csdnimg.cn/img_convert/3997500e1c1dee91910e69d4edaf9f80.png
检查用户表中是否已添加数据
前端启动
作为纯前端开发，这里就不详细说明了，日常基操
界面查看
如果项目正确启动，登录 admin 后 ，就可看到以下界面，其余就可根据自身需要修改开发啦！
https://img-blog.csdnimg.cn/img_convert/b62e75eacfcafb00e8eba66e6c19a991.png
尝试体验 C# 出一个新的 curd 接口
因原作者开源不易，本篇文章不做过多说明，开发过程就藏起来啦，全凭本领吧！
（掩护开源大神是每个羊毛党应尽的义务）
原作者也有开通引导文档通道、需要知识付费。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]