new QDM 前后端开发总结(net6+vue+mysql+redis+mq+mongodb+ES+docker)

new project 前后端开发总结

1.开发工具：vscode,vs2022,mysql
2.前端：vue3,vite,typescript,scss,element plus,router,asiox,vuex
3.后端：.net6,automapper,autoface,sqlsugar,jwt,log4net

4.MQ,ES,MONGODB,docker 发布

1.开发环境：安装 nodejs.cn ,版本检查 node --version
2.使用Vite创建项目：
npm init vite@latest newqiandama.adminweb
选择y
选择vue
选择typescript
npm run dev
3.安装pnpm，提升速度:npm install -g pnpm www.pnpm.cn
检查版本:pnpm --version

4安装scss，vscode 终端安装: pnpm install sass --save
pnpm dev //简化命名 ==npm run dev

5.element plus 框架基于vue3 ，官网element-plus.io
安装：pnpm install element-plus --save
引用：main.js
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
createApp(App)
.use(ElementPlus)
.mount('#app')

6.路由安装
pnpm install vue-router@next --save

7.vuex的安装使用，保存状态
pnpm install vuex@next --save

8.安装icon包：
pnpm install @element-plus/icons-vue

9.安装echarts 画图工具
pnpm install echarts --save

10.安装axios 调用后端接口
pnpm install axios --save

11.axios 拦截器

12.全局公共方法
global.ts

13.pnpm build

14. 跨域解决：前端解决：代理，后端解决

15.sqlsugarcore,

16.注册接口和实现的关联：autofac,autoface.extensions.dependencyInjection

17.传输实体到模型实体之间的转换：automapper

18.ResultHelper,apiResult

19.JWT
Microsoft.AspNetCore.Authorization.jwtBearer

20.前端调用后端api

68.导航守卫，跳转前做的事逻辑：跳转登录，跳转桌面

69.webapi动态读取数据库菜单路径数据

70.页面跳转：
个人中心@click="goToPerson"，退出@click="loginOut"
import {userRouter} from 'vue-router'
const router=userRouter()
const goToPerson=()=>{
router.push({path:"/personcenter"})
}

退出
new Tool().ClearLocalStorage()
router.push({path:"/login"})
71.清空浏览器缓存
import Tool from '../../global'
new Tool().ClearLocalStorage()

72. 跳转到登录页：
import {useRouter} from 'vue-router';
const router=useRouter()
router.push({path:'/login'})

73.elemessage
导入import {ElMessage} from 'element-plus';
ElMessage.success("设置成功！");

74.格式化时间nuget:Microsoft.AspNetCore.Mvc.NewtonsoftJson
option.SerializerSettings.DateFormatString="yyyy-MM-dd HH:mm:ss";
75.后端发布
76.前端发布
77.动态加载数据库的目录树