# 补充

参考全栈之巅和大山老师的课

大山老师侧重于 MVC, 且 mongoose 是未封装的与 mongodb 交互的库全栈之巅使用的是 subsystem 开发模式，且使用完全的前后端分离，分成三端，后端 - 后端前端 - 前端
typegoose 是已经封装完毕的库… 总而言之大山老师写的那套类似于 springMvc, 而全栈之巅写的那套类似于 SpringBoot 本文计划结合两者，只开发最基本的 RBAC 模块并且将大山的那套 RBAC 的思路迁移到全栈之巅这套课程讲的方案中来因为 RBAC 是大部分网站都必须要有的，所以为了节约开发成本，有一套写好的基项目是比较好的 (

# 参考列表

https://www.bilibili.com/video/BV18E41127N4?p=3
https://nestjs.bootcss.com/techniques/configuration
https://www.5axxw.com/wiki/content/5b0r8i

# 后端

基本前期的不记录了
在以前的博客里:
http://www.be-sunshine.cn/public/web/nestjs.html#%E5%AE%89%E8%A3%85%E4%B8%8E%E6%9C%80%E7%AE%80%E5%8D%95%E7%9A%84%E8%84%9A%E6%89%8B%E6%9E%B6 基于 Nestjs 搭建 RBAC
子项目模式:

nest g app admin

# 启动方式

nest start app-name

# 配置自动载入的环境变量 (异步)

如果将环境变量自动载入的话，所有需要环境变量注入的模块必须使用异步方式引用 @nestjs/config 模块

默认放在 .env 文件中

https://nestjs.bootcss.com/techniques/configuration

# 配置 Typegoose

新建 DB 模块

1	nest g lib db

安装依赖模块

1 2	cnpm i --save @types/mongoose @typegoose/typegoose @nestjs/platform-express mongoose nestjs-mongoose-crud nestjs-typegoose

# 配置 JWT

JWT 是用于前后端分离时获取 token 的方案

1 2	cnpm i --save @nestjs/jwt @nestjs/passport @nestjs/platform-express @nestjs/swagger @types/express @types/passport @types/passport-jwt @types/passport-local

新建 lib/common

import { Global, Module } from '@nestjs/common';
import { CommonService } from './common.service';
import { ConfigModule } from '@nestjs/config';
import { DbModule } from '@libs/db';
import { JwtModule } from '@nestjs/jwt';

/*
注册jwt(用于获取token,前后端分离一般用这个)
*/
@Global()
@Module({
  imports:[
    ConfigModule.forRoot({
      isGlobal:true
    }),
    JwtModule.registerAsync({
      useFactory(){
        return {
          secret: process.env.SECRET
        }
      }
    }),
    DbModule
  ],
  providers: [CommonService],
  exports: [CommonService,JwtModule],
})
export class CommonModule {}

其中 JwtModule 就是对应的 Jwt 模块 https://www.itying.com/nestjs/article-index-id-117.html

# 子项目模式下创建控制器

先创建一个模块
再创建一个控制器

1
2
3

nest g mo -p admin users

nest g co -p admin users

# Vue-ElementUI 管理前端搭建

# 依赖模块

@smallwei/avue

https://avuejs.com/
目标是为了将页面数据化，只接受 options 来填充页面.
基本所有信息都填充在: avue-input-table 标签内。通过 配置 来动态生成 form 表单和 table https://www.bookstack.cn/read/avue-2.x/e3d6c69369fd5625.md

@types/axios axios

http://www.axios-js.com/zh-cn/docs/
经常使用的请求库

vue-ele-form

专门用于数据化生成表单的插件，比 AVue 功能要少，不过不像 AVUE 那样高度封装

添加插件引用时可以直接在 Main.ts 中添加，也可以选择新建一个 plugins / 插件.ts (js) 然后 import 这个脚本来引用…

# 生成 Vue

vue create admin
cd admin
vue add element
vue add router

转 typescript

1	vue add typescript

# 新建主页面

先在 vscode 上安装 element-ui snippets 插件然后 elcon 就可以直接生成一个 elementui 的 Container
elmen 可以生成一个 elemnetUI 的 menu 新建 Main.vue (这里主要存放主页面模板类，方便后续对管理端的增减)

<template>
  <el-container :direction="vertical">
    <el-header height="">
      RBAC-后台管理界面
    </el-header>
    <el-container :direction="horizontal">
      <el-aside width="200px">

        <el-menu mode="vertical" style="height:100vh;" default-active="$route.path" router>
          <el-submenu v-for="(item, index) in menu.items"
            :index="index + 1"
            :key="`menu-item-${index}`">
            <template slot="title">{{item.title}}</template>
            <el-menu-item v-for="(subItem, subIndex) in item.items"
              :index="subItem.path"
              :key="`menu-item-${index}-${subIndex}`">
                {{subItem.title}}
            </el-menu-item>
          </el-submenu>
        </el-menu>

      </el-aside>
      <el-container :direction="vertical">
        <el-main height="">
          <router-view>
          </router-view>
        </el-main>
        <el-footer height="">
          <!-- Footer content -->
        </el-footer>
      </el-container>
    </el-container>
  </el-container>

</template>

<script lang='ts'>
import { Component,Vue } from 'vue-property-decorator';

@Component({

})
export default class Mian extends Vue {
  menu = {
    items:[
      {
        title:'内容管理',
        items:[
          {title:'课程管理',path:'/courses/list'},
          {title:'课时管理',path:'/courses/list'},
        ]
      },
      {
        title:'运营管理',
        items:[
          {title:'用户管理',path:'/courses/list'},
          {title:'角色管理',path:'/courses/list'},
        ]
      }
    ]
  }
}
</script>

<style>

</style>

前端杂记