# 基于特征挖掘的网络水军识别系统

**Repository Path**: fogx/Network-Navy-Identification

## Basic Information

- **Project Name**: 基于特征挖掘的网络水军识别系统
- **Description**: 网络水军识别前端UI
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-03-21
- **Last Updated**: 2025-03-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README


### UI设计
![img.png](GiteeImages/img.png)
![img.png](GiteeImages/img_1.png)
![img.png](GiteeImages/img_2.png)


### 技术框架

Vue3、Vite、Typescript、Naive-UI、axios、vue-router、pinia、jsencrypt、md-editor-v3、Tailwind等

### 创建新项目

```
npm create vite
```

基于Vue3、Vite4、TypeScript

```
#安装依赖包
npm i
```

### 类型声明

TypeScript类型检查和自动补全功能，以增加代码的可读性和可维护性

`vite-env.d.ts`文件

```
/// <reference types="vite/client" />
declare module '*.vue' {
    import  { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}
```

有了上述文件 TypeScript 就能够正确地识别和检查 Vue.js 组件的 props、事件和组件实例等类型信息。

### 配置解析路径

#### 配置模块路径别名

安装@types/node作为开发者依赖关系
它是 Node.js 官方发布的类型声明文件，包含了 Node.js 标准库和常用模块的类型声明

```
npm install @types/node --save-dev
```

```
#实现方法
import path from 'path'

export const getRootPath = () => {
    return path.resolve(process.cwd())
}
export  const getSrcPath = (srcName = 'src') => {
    return path.resolve(getRootPath(), srcName)
}

```

`vite.config.ts`文件配置模块路径别名

```
    resolve: {
        alias: {
            '@': getSrcPath(),
            '~': getRootPath()
        }
    },
```

#### 解析路径

`tsconfig.json`文件中 在compilerOptions对象加入

```
    "baseUrl": "./",  //指定了解析非相对路径模块时使用的基本目录路径
    "paths": {  //将路径缩写映射为具体的路径
      "@/*": ["src/*"],
      "~/*": ["./*"]
    },
```

### 安装Tailwind CSS框架

安装 Tailwind 以及其它依赖项:

```
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
```

创建配置文件

```
npx tailwindcss init -p
```

`tailwind.config.js`

```
/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{vue,js,ts,jsx,tsx}'],  //制定优化性能，扫描文件提取样式
  darkMode: 'class',  //class手动  media跟随浏览器
  theme: {  //用于指定自定义主题
    extend: {},

  },

  plugins: [], //用于指定一些插件
}
```

### 引入Tailwind

自定义一个样式文件

```
@tailwind base;
@tailwind components;
@tailwind utilities;
```

在`main.ts`引入

### 安装NaiveUI 前端框架

```
npm i -D naive-ui
```

### 全局引入NaiveUI

在`main.ts`引入

```
import naive from 'naive-ui'

app.use(naive)
```

### NaiveUI全局挂载组件

#### 挂载

组件包括 对话框、消息框，方便使用

在`App.vue`中包裹。

示例：

```
<template>
    <n-config-provider :theme="appStore.theme==='dark' ? darkTheme : undefined" :locale="locale" class="h-full">
        <n-loading-bar-provider>
            <n-message-provider>
                <n-dialog-provider>
                    <n-notification-provider>
                        <NaiveProviderContent></NaiveProviderContent>
                        <router-view></router-view>
                    </n-notification-provider>
                </n-dialog-provider>
            </n-message-provider>
        </n-loading-bar-provider>
    </n-config-provider>

</template>

<script setup lang="ts">
import {useDialog, useLoadingBar, useMessage, useNotification} from "naive-ui";
import {defineComponent, h, ref} from "vue";

import {darkTheme, zhCN} from 'naive-ui'
import {useAppStore} from "@/store";

const appStore = useAppStore()
const locale = ref(zhCN)
//定义新组建 实现挂载
const NaiveProviderContent = defineComponent({
    setup() {
        window.$message = useMessage();
        window.$dialog = useDialog();
        window.$notification = useNotification()
        window.$loadingBar = useLoadingBar()
    },
    render() {
        return h('div')
    },
})

</script>
<style scoped>
</style>
```

在模板中定义了一个名为 NaiveProviderContent 的组件，并在其中使用了 useDialog、useLoadingBar、useMessage 和 useNotification
四个 hook。

这四个 hook 返回了 Dialog、LoadingBar、Message 和 Notification 组件的实例，可以通过将其挂载在全局的 window 对象上，在全局范围内使用。

同时修改了 NaiveUI 的用户的语言环境为中文

#### 类型声明

创建一个类型声明文件。只要是`.d.ts`结尾文件都可以

声明全局变量 `$message`、`$dialog`、`$notification` 和 `$loadingBar` 的类型

在声明这些全局变量之后，就可以在项目中直接使用它们，而无需在每个需要使用它们的文件中都进行导入。

```
import {MessageApiInjection} from "naive-ui/es/message/src/MessageProvider";
import {DialogApiInjection} from "naive-ui/es/dialog/src/DialogProvider";
import {NotificationApiInjection} from "naive-ui/es/notification/src/NotificationProvider";
import {LoadingBarApiInjection} from "naive-ui/es/loading-bar/src/LoadingBarProvider";


/**
 * ts 添加定义 识别
 */
declare global{
    interface Window{
        $message:MessageApiInjection,
        $dialog:DialogApiInjection,
        $notification:NotificationApiInjection
        $loadingBar:LoadingBarApiInjection
    }
}
```

### 安装状态管理Pinia及持久化插件pinia-plugin-persistedstate

```
npm i pinia
npm i pinia-plugin-persistedstate
```

### 引入pinia及插件

在`main.ts`

```
import {createPinia} from "pinia";
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'

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

app.use(pinia)
```

创建相应store

```
export const useAppStore = defineStore('app', {
    persist: true, //使用持久化插件
    state: () => {   //是一个函数，返回一个对象，用于存储状态
        return {
            collapsed: true,
            theme: 'dark',
        }
    },
    getters: {},  //用于存储计算属性
    actions: {  //用于封装业务逻辑
        switchCollapsed() {
            this.collapsed = !this.collapsed
        },
        switchTheme() {
            if (this.theme === 'light') this.theme = 'dark'
            else this.theme = 'light'
        }
    },
})
```

### 安装axios

```
npm i axios
```

请求拦截器

```
//设置请求拦截器
axios.interceptors.request.use((config) => {
    // 携带上token
    let token = userStore.token
    token && (config.headers.Authorization = token)
    return config
}, error => {
    return Promise.reject(error)
})
```

响应拦截器

```
//响应拦截器
axios.interceptors.response.use(
    (response) => {
        //未登录
        if(response.data.code===405){
            router.push({
                path:'/auth'
            })
        }
        if (response.data.code !== 0) {
            window.$message.error(response.data.msg)
            return Promise.reject(response.data.msg); // 返回拒绝状态的 Promise 对象，将错误信息传递给后续的 Promise 处理函数
        }

        window.$message.success(response.data.msg)
        return response;
    }, (error => {
        // 请求错误时做些事
        let res = "";
        if (error.request) {
            res = error.request;
        } else if (error.response) {
            res = error.response;
        }
        if (res) {
            //@ts-ignore
            const data = JSON.parse(res.response)
            window.$message.error(data.msg)
            return Promise.reject(data.msg); // 返回拒绝状态的 Promise 对象，将错误信息传递给后续的 Promise 处理函数
        } else {
            window.$message.error(`链接服务器失败`)
            return Promise.reject(error); // 返回拒绝状态的 Promise 对象，将错误信息传递给后续的 Promise 处理函数
        }
    })
)
```

### 安装vue-router

```
npm i vue-router
```

创建router文件

```
import {createRouter, createWebHistory} from "vue-router";


const routes = [
        path: '/',
        name: 'redis',
        component: () => import('@/layout/admin/index.vue'),
]

const routerOptions = {
    history: createWebHistory('/redis'),
    routes: routes,
}

const router = createRouter(routerOptions)

export default router
```

在`main.ts`文件引入

```
import router from "@/router";

app.use(router)
```

### 安装 jsencrypt

对数据进行加密解密

```
npm i jsencrypt
```

封装
```js
import {JSEncrypt} from "jsencrypt";

/**
 * 数据加密
 * @param txt
 */
export const encrypt = (txt: any) => {
    const encryptor = new JSEncrypt()
    encryptor.setPublicKey(publicKey)
    return encryptor.encrypt(txt)
}
/**
 * 解密
 * @param txt
 */
export const decrypt = (txt: any) => {
    const encryptor = new JSEncrypt()
    encryptor.setPrivateKey(privateKey)
    return encryptor.decrypt(txt)
}
const publicKey ='-----BEGIN PUBLIC KEY-----\n' +
    'MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCdm4oLUPS4J0mS3rAFFOwbCign\n' +
    'msXP2chtg2XJp3gkTaUJpCvgFl6J1b4ZJGGiTq1OcV1tkdqgTDW0uazXE0jI0awu\n' +
    'PArYW8vlJ7CHbzrU0b4bPd4Nr/8xspNlLMQ2MyvR0G8vMHYUNEqSTsR4E5GxYGRH\n' +
    'sxfJ+wm8k1GC4FNSBwIDAQAB\n' +
    '-----END PUBLIC KEY-----'
const privateKey = ''

```

### 文本编辑器md-editor-v3

```
npm install md-editor-v3
```

官方文档：[Markdown编辑器](https://imzbf.github.io/md-editor-v3/zh-CN/index)

### 图标
引入

```shell
npm install --save-dev @iconify/vue
```

使用
```js
import { Icon } from '@iconify/vue';
```

渲染函数
```js
import {h} from "vue";
import {NIcon} from "naive-ui";
import {Icon} from "@iconify/vue";


/**
 * 渲染图标
 * @param icon
 * @param props
 */
export function renderIcon(icon: any, props = {size: 22}) {
    return () => h(NIcon, props, {default: () => h(Icon, {icon})})
}

```
### 时间格式化工具dayjs

安装

```js
npm install dayjs --save
```

封装
```js
import relativeTime from 'dayjs/plugin/relativeTime'
import dayjs from "dayjs";

import 'dayjs/locale/zh-cn.js'


dayjs.locale('zh-cn') // use loaded locale globally
dayjs.extend(relativeTime)

export default dayjs
```

### 防抖节流函数
```js
/**
 * 防抖 一定时间内执行一次  点击后时间到才触发，再次点击重新计时
 * 单位时间内事件触发会被重置，避免事件被误伤触发多次
 * @param fn
 * @param delay
 */
export function debounce (fn:Function, delay:number) {
    let timer :any
    return function () {
        if (timer) {
            clearTimeout(timer)
        }
        timer = setTimeout(() => {
            fn()
        }, delay)
    }
}

/**
 * 节流 一段时间内触发一次 触发后经过一段才能再触发
 * 单位时间内事件只能触发一次
 * @param fn
 * @param delay
 */
 export function throttle (fn:Function, delay:number) {
    let isThtottle = true
    return () => {
        if (!isThtottle) return
        isThtottle = false
        setTimeout(() => {
            fn()
            isThtottle = true
        }, delay)
    }
}
```