# NodeRBAC_front

**Repository Path**: qing0306/node-rbac_front

## Basic Information

- **Project Name**: NodeRBAC_front
- **Description**: 小程序后台管理系统-采用vue3+element-plus+pinia
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-06-27
- **Last Updated**: 2026-05-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 项目介绍
    后台采购系统

## 安装依赖
    1. vue create vue3-project
    2. npm i axios -S
    3. npm i echarts -S
    4. npm i element-plus -S
    5. npm i dayjs -S
    6. npm i momentjs -S
    7. npm i normalize.css -S
    8. npm install @element-plus/icons-vue -S

## 后端
    nodejs+mysql+Express
    1. npm i express -S
    2. npm i cors -S
    3. npm i mysql -S
    4. npm i multer -S
    5. npm i mockjs -S

## 在项目中引入 Apache ECharts
1. 安装
    npm install echarts -S
2. 配置
    /plugins/echarts.js
## 在项目中引入 WangEditor
1. 安装
    npm install @wangeditor/editor --save
    npm install @wangeditor/editor-for-vue@next --save
    ```js
        <div style="border: 1px solid #ccc">
            <Toolbar
            style="border-bottom: 1px solid #ccc"
            :editor="editorRef"
            :defaultConfig="toolbarConfig"
            :mode="mode"
            />
            <Editor
            style="height: 500px; overflow-y: hidden"
            v-model="valueHtml"
            :defaultConfig="editorConfig"
            :mode="mode"
            @onCreated="handleCreated"
            @onChange="onChange"
            />
        </div>

        <script setup>
        import "@wangeditor/editor/dist/css/style.css"; // 引入 css
        import { onBeforeUnmount, ref, shallowRef, onMounted } from "vue";
        import { Editor, Toolbar } from "@wangeditor/editor-for-vue";
        const emit = defineEmits('sendWangEditor') //定义WangEditor发送数据的自定义事件
        const mode = 'default'
        // 编辑器实例，必须用 shallowRef
        const editorRef = shallowRef();

        // 内容 HTML
        const valueHtml = ref("<p>hello</p>");

        // 模拟 ajax 异步获取内容
        // onMounted(() => {
        //   setTimeout(() => {
        //     valueHtml.value = "<p>模拟 Ajax 异步设置内容</p>";
        //   }, 1500);
        // });

        const toolbarConfig = {};
        const editorConfig = { placeholder: "请输入内容..." };

        // 组件销毁时，也及时销毁编辑器
        onBeforeUnmount(() => {
        const editor = editorRef.value;
        if (editor == null) return;
        editor.destroy();
        });

        const handleCreated = (editor) => {
        editorRef.value = editor; // 记录 editor 实例，重要！
        };

        // 修改wangeditor
        const onChange = (editor) => {
        //  console.log('content', editor.children[0].children[0].text)
        emit('sendWangEditor',editor.children[0].children[0].text)//触发自定义事件sendWangEditor
        }
        </script>
    ```
##  pinia
    安装 npm install pinia -S

##  pinia的持久化
    npm install pinia-plugin-persistedstate

    配置使用

    ```js
        // main.js/main.ts
        import { createPinia } from 'pinia'
        import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

        const pinia = createPinia()
        pinia.use(piniaPluginPersistedstate)

        app.use(pinia)

        // Store配置
        import { defineStore } from 'pinia'

        export const useAuthStore = defineStore('auth', {
        state: () => ({
            user: null,
            token: ''
        }),
        persist: {
            enabled: true, // 开启持久化
            strategies: [
            {
                key: 'auth', // 存储的 key，默认是 store id
                storage: localStorage, // 可选 sessionStorage
                paths: ['user', 'token'] // 指定要持久化的字段
            }
            ]
        }
        })
    ```