Admin.NET管理系统（vue3等前后端分离）学习笔记--持续更新
我的学习笔记 - 9iAdmin.NET
- 欢迎学习交流
- （一）前端笔记
- 1.1 关于.env的设置
- 1.2 关于路由模式问题
- 1.3 关于 vue.config.ts
- 1.4 关于 打包（pnpm run build）溢出问题
- 1.5 关于 打包（pnpm run build）后部署到IIS重定向问题
- 1.6 关于 代码生成器的使用
- 1.7 部署到linux参考
- 1.8 学习参考
- 1.9 关于部署到IIS后无法显示头像（签名）的问题
- 1.10 关于打包发布后mqtt.js出现未初始化错误问题
- （二）后端笔记
- （三）努力的方向
欢迎学习交流
学习贵在坚持，我与你同在…本帖持续更新
学习内容不分先后，每个都是知识点，可能有理解不对的地方，请多多指教，不胜感激！
（一）前端笔记
1.1 关于.env的设置
1）代码
# port 端口号 调试访问地址 如 http://localhost:8877
VITE_PORT = 8877# 运行npm run dev 时自动打开浏览器（true自动打开，false不打开）
VITE_OPEN = true# 打包是否开启 cdn（源文件 utils/build.ts），可自行修改 这个必须打开否则无法生成，错误见图1.1.1，优化打包体积
VITE_OPEN_CDN = false# public path 配置线上环境路径（打包）、本地通过 http-server 访问时，请置空即可 https://lyt-top.gitee.io/vue-next-admin-doc-preview/config/build/
# 本地预览必须把：根目录 .env 文件中的 置空，，，，，'/'
# 单文件发布时清空! 打包部署IIS时必须加上'/' 或在 .env.production 中设置该值；否则IIS部署刷新会404
VITE_PUBLIC_PATH =
图1.1.1
1.2 关于路由模式问题
1.2.1 官网解释 https://next.router.vuejs.org/zh/api/#createrouter https://router.vuejs.org/guide/essentials/history-mode.html
1.2.2 模式配置（web/src/router/index.ts）
export const router = createRouter({history: createWebHashHistory(),// 模式链接中出现#问题//history: createWebHistory(),//链接不出现#，但出现刷新404和部分资源图片路径错误,2023.5.22 图片路径以/开头即可解决问题/*** 说明：Hash Mode 会带小尾巴#，createWebHashHistory 此模式会产生路径带#的问题，createWebHistory 此模式能解决地址#问题但头像图片路径错误，createMemoryHistory 地址栏只有一级地址没有路由路径* 1、notFoundAndNoPower 默认添加 404、401 界面，防止一直提示 No match found for location with path 'xxx'* 2、backEnd.ts(后端控制路由)、frontEnd.ts(前端控制路由) 中也需要加 notFoundAndNoPower 404、401 界面。* 防止 404、401 不在 layout 布局中，不设置的话，404、401 界面将全屏显示*/routes: [...notFoundAndNoPower, ...staticRoutes],
});
总结：1.用单文件发布模式时，必须使用createWebHashHistory()模式否则，刷新就404，暂时没找到解决办法。2.用IIS部署发布时，都可以用。注意“createWebHashHistory()”模式下会在地址栏中出现#符号；而“createWebHistory()”模式下没有#符号。3.在.env中可能需要配置 VITE_PUBLIC_PATH = ‘/’
解决错误类似：类似：Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.
1.3 关于 vue.config.ts
有关路径和404问题可能会用到的配置
module.exports = {publicPath: './'，base: './',
}
1.4 关于 打包（pnpm run build）溢出问题
解决办法：修改 “web/package.json” 找到
"scripts": {"dev": "vite","build": "node --max_old_space_size=102400 ./node_modules/vite/bin/vite.js build","lint-fix": "eslint --fix --ext .js --ext .jsx --ext .vue src/"},
把 “build”:“vite build” 的值修改为“node --max_old_space_size=102400 ./node_modules/vite/bin/vite.js build” 这个方法最简单，不出问题！
其他方法就比较麻烦。
全局安装
npm i -g increase-memory-limit
进入项目运行
increase-memory-limit
执行set NODE_OPTIONS=–max_old_space_size=10240
1.5 关于 打包（pnpm run build）后部署到IIS重定向问题
需要在项目根目录（如web/dist）新建站点之后创建 web.config 代码如下
<?xml version="1.0" encoding="UTF-8"?>
<configuration><system.webServer><rewrite><rules><rule name="api" enabled="true" patternSyntax="Wildcard" stopProcessing="true"><match url="*api/*" /><action type="Rewrite" url="http://localhost:5005/api/{R:2}" /></rule><rule name="hubs" enabled="true" patternSyntax="Wildcard" stopProcessing="true"><match url="*hubs/*" /><action type="Rewrite" url="http://localhost:5005/hubs/{R:2}" /></rule><rule name="index" stopProcessing="true"><match url="^((?!(api)).)*$" /><conditions><add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" /><add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" /></conditions><action type="Rewrite" url="/" /></rule></rules></rewrite></system.webServer>
</configuration>
解决：刷新404问题和其他错误问题。
IIS部署参考：https://furion.baiqian.ltd/docs/deploy-iis/
单文件发布参考：https://furion.baiqian.ltd/docs/singlefile
IIS部署指南(重要)：https://gitee.com/zuohuaijun/Admin.NET/blob/master/doc/%E5%BF%AB%E6%8D%B7%E9%83%A8%E7%BD%B2%E5%88%B0IIS%E6%96%B9%E6%A1%88.md
IIS AAR配置
1.6 关于 代码生成器的使用
https://gitee.com/zuohuaijun/Admin.NET/blob/master/doc/%E4%BB%A3%E7%A0%81%E7%94%9F%E6%88%90%E5%99%A8%E4%BD%BF%E7%94%A8.md
1.7 部署到linux参考
https://gitee.com/zuohuaijun/Admin.NET/blob/master/doc/%E5%BF%AB%E6%8D%B7%E9%83%A8%E7%BD%B2%E5%88%B0linux%E6%96%B9%E6%A1%88.md
1.8 学习参考
1.8.1 UI参考（必看）：https://element-plus.gitee.io/zh-CN/component/button.html
1.8.2 框架参考文档（必看）：https://lyt-top.gitee.io/vue-next-admin-doc-preview/config/
1.8.3 框架参考（文档齐全，更新及时）：https://furion.baiqian.ltd/docs/
仓库：https://gitee.com/dotnetchina/Furion
1.8.4 相关MQTT.js 参考 https://github.com/mqttjs/MQTT.js
1.8.5 VUE3 router:https://v3.router.vuejs.org/zh/guide/
1.8.6 相关指令
打包指令：pnpm run build 注意在项目web目录下执行cmd
安装依赖：pnpm install 注意如果新增，变化等情况 可能需要重新安装依赖(有时候莫名其妙的错误时执行下看看）
运行前端：pnpm run dev 注意在web目录下执行cmd
AAR下载地址：https://iis-umbraco.azurewebsites.net/downloads/microsoft/application-request-routing
ASP.NET Core Runtime：https://dotnet.microsoft.com/en-us/download/dotnet/6.0
Swagger生成器（参考1.6方法）：https://editor-next.swagger.io/
1.9 关于部署到IIS后无法显示头像（签名）的问题
1.9.1 注意使用的路由模式 “createWebHistory()”，一般使用“createWebHashHistory()”都没问题。
1.9.2 .env中“VITE_PORT = 8877”的端口号要和IIS中定义的端口号一致，否则无法显示。有错误。
可能类似错误：Expected a JavaScript module script but the server responded with a MIME type of “text/html”. Strict MIME type checking is enforced for module scripts per HTML spec.
如果不想一致，就打包前修改下此值和IIS端口保持一致即可。开发时再改回来。
1.9.3 此createWebHistory模式下。调整个路径位置 web/src/stores/userinfo.ts修改第48和50行 图形路径前加’/'解决问题
如 avatar: d.avatar ? ‘/’+d.avatar : ‘/favicon.ico’,
1.9.4 IIS运行目录与后台之间的关系（后台默认占用5005端口，请勿重复）
1）第一步打包：在web目录下执行（cmd）指令：pnpm run build 打包后的文件夹dist
2）第二步定义IIS的web.config配置(已写好），复制到 dist （因为每次打包此文件夹将会被清空）
3）第三步将dist目录所有文件及文件夹复制到运行目录下（后台目录下的bin…\wwwroot中）
执行复制命令 （改地址哦）
xcopy “F:\Admin.NET-next\Web\web.config” “F:\Admin.NET-next\Web\dist” /y
xcopy “F:\Admin.NET-next\Web\dist” “F:\Admin.NET-next\Admin.NET\Admin.NET.Web.Entry\bin\Debug\net6.0\wwwroot” /s /y
1.10 关于打包发布后mqtt.js出现未初始化错误问题
页面内添加事件总线引用。可能没用到。不知道为何加上就不出错了。
import mittBus from ‘/@/utils/mitt’;
//事件总线mitt 解决打包后错误Uncaught (in promise) ReferenceError: Cannot access ‘oe’ before initialization
（二）后端笔记
2.1 仓库地址：https://gitee.com/zuohuaijun/Admin.NET
如果开发，一般在 Admin.NET.Application中开发，其他项目随官网更新，当然也可以加入一些自己的东东。
后台运行 入口 “Admin.NET.Web.Entry”
运行 “Admin.NET.Web.Entry\bin\Debug\net6.0*Admin.NET.Web.Entry.exe*”
发布目录在“Admin.NET.Web.Entry\bin\Release””下
运行后台的模板文件Admin.NET.Web.Entry\bin\Debug\net6.0\wwwroot\Template下
头像及其他相关在 Admin.NET.Web.Entry\bin\Debug\net6.0\wwwroot\Upload目录的对应文件夹中
Avatar：头像图片目录
Signature：签名图片目录
注意运行端口（.env中）与前台运行端口必须一致。否则图片无法显示。
2.2 后台生成顺序(依次生成文件个数1，2，3，4）
Admin.NET.Core–>Admin.NET.Application–>Admin.NET.Web.Core–>Admin.NET.Web.Entry
2.3 后台模块开发，找个类似的模块模仿去写 字段 接口即可。注意要生成swagger方法见1.6 放入对应的文件夹中
如api-services中，注意主文件对应引入api.ts和index.ts
接口在api-services/apis和models中。前端页面都在views中。
注意后续同步官方文件时，注意哪些不能覆盖！！
（三）努力的方向
3.1 引用mqtt.js功能之后，打包运行就出错误
ReferenceError:cannot access ‘oe’ before initialization at readable-stream
问题已经解决（5.25日）见1.10说明
3.2 其他待开发模块。。。
Admin.NET管理系统（vue3等前后端分离）学习笔记--持续更新相关推荐
- 前后端分离学习笔记(5) ---[表单的增删改操作；以及为管理员上传头像]
上一篇案例中也是查询到了表单的内容–>前后端分离学习笔记(4) -[路由嵌套, 查询表单显示] 文章目录 1.前端组件页面 添加管理员操作 修改管理员信息 删除管理员 为管理员上传头像 修改密码 ...
- SpringBoot后台管理+Uniapp（混合APP）前端 之 酒店住宿+景点下单管理系统（SpringBoot前后端分离）
酒店住宿+景点下单管理系统(SpringBoot前后端分离) 之 SpringBoot后台管理+Uniapp(混合APP)前端 SpringBoot前后端分离项目-Thymeleaf模板引擎景区旅游管 ...
- SpringBoot + Vue 前后端分离（用户信息更新头像上传Markdown图片上传）
文章目录 前言 用户信息更新 前端发送 后端接口 修改用户头像 前端 前端图片显示 图片上传 完整 代码 后端代码 图片存储 图片上传工具类 图片工具类的配置 工具类实现 效果 Markdown 图片 ...
- SpringBoot +Vue前后端分离（笔记）
前后端分离简介 前后端分离 前后端分离就是将⼀个应⽤的前端代码和后端代码分开写,为什么要这样做? 如果不使⽤前后端分离的⽅式,会有哪些问题? 传统的 Java Web 开发中,前端使⽤ JSP 开发, ...
- 若依管理系统RuoYi-Vue（前后端分离版）项目启动教程
RuoYi-Vue 是一个 Java EE 企业级快速开发平台,基于经典技术组合(Spring Boot.Spring Security.MyBatis.Jwt.Vue),内置模块如:部门管理.角色用 ...
- ajax+node前后端交互学习笔记（1）
大致理解前后端交互的概念 当你去餐馆吃饭的时候,坐下后服务员会带着⼀个菜单过来,问你需要点什么菜,这个时候你浏览了 菜单上的菜,把想吃的菜告诉服务员,服务员把你点的菜拿到后台,后台根据你点的菜名,逐⼀ ...
- 前后端交互学习笔记（二）：Node.js及npm学习
Node.js及npm 文章目录 Node.js及npm 复习引入 初识node.js fs文件系统模块 path路径模块 http模块 创建web服务器 根据不同url设置响应代码模板 模块化学习 ...
- 基于SSM实现前后端分离在线考试管理系统
作者主页:编程千纸鹤 作者简介:Java.前端.Pythone开发多年,做过高程,项目经理,架构师 主要内容:Java项目开发.毕业设计开发.面试技术整理.最新技术分享 项目编号:BS-XX-105 ...
- 前后端分离：SpringBoot治好了我的时间内耗
1.前后端分离为了什么 1.1前言 本文作为系列文章的第一篇,是铁柱在工作之余对自我学习的总结,以下内容是搭建基础的前后端分离的Demo来展开的,需要对MySQL,Spring,SpringMVC ...
最新文章
- php 实现tab切换_微信小程序实例：实现顶部tab切换以及滑动切换时导航栏会随着移动的效果（代码）...
- shujufenxi:一组数据透视复工复产“进度条”
- 使用wrk进行性能测试
- git常见错误failed to push some refs to
- 【C/C++多线程编程之六】pthread互斥量
- 学习笔记之四_Cisco系统IOS和安全设备管理系统SDM(CCNA知识考点)
- 依据imu姿态角计算z轴倾角_1. 姿态的表示方法
- table表格 html 1128
- c语言求数组中绝对值最小值,（C语言）简单的绝对值排序
- 44 岁的微软下一步是什么？
- idea mac xml注释快捷键
- Unity 动态更改鼠标样式
- 电工培训维修电工基础知识实训教学
- 解决maven报错JAVA_HOME should point to a JDK not a JRE问题
- 免费试用华为云服务器一个月，部署自己的网站
- html设置右键失灵,鼠标右键失灵是怎么回事
- 安装程序将在重启您的计算机后黑屏,解决Windows 10登陆后黑屏问题
- 索尼1000xm3成功配对小米5 蓝牙支持ldac传输
- idea文档注释的快捷键带参数
- 近期抖音刷播放量怎么刷、抖音刷播放量苹果突然走火如何防止刷量呢？