commit
566d2223ac
27 changed files with 1165 additions and 0 deletions
@ -0,0 +1,52 @@ |
|||
from flask import Flask |
|||
from pymongo import MongoClient |
|||
|
|||
app = Flask(__name__) |
|||
client = MongoClient("mongodb://localhost:27019/") |
|||
db = client["back"] |
|||
collection = db["users"] |
|||
|
|||
|
|||
# 测试 |
|||
@app.route("/") |
|||
def hello(): |
|||
return "Hello World!" |
|||
|
|||
|
|||
# 新增用户 |
|||
@app.route("/insert") |
|||
def insert_data(): |
|||
user = {"name": "John Doe", "age": 25, "city": "New York"} |
|||
collection.insert_one(user) |
|||
return "Data inserted successfully!" |
|||
|
|||
|
|||
# 查询用户 |
|||
@app.route("/query") |
|||
def query_data(): |
|||
users = collection.find() |
|||
result = "" |
|||
for user in users: |
|||
result += f"Name: {user['name']}, Age: {user['age']}, City: {user['city']}<br>" |
|||
return result |
|||
|
|||
|
|||
# 更新用户 |
|||
@app.route("/update") |
|||
def update_data(): |
|||
query = {"name": "John Doe"} |
|||
new_data = {"$set": {"age": 30, "city": "San Francisco"}} |
|||
collection.update_one(query, new_data) |
|||
return "Data updated successfully!" |
|||
|
|||
|
|||
# 删除用户 |
|||
@app.route("/delete") |
|||
def delete_data(): |
|||
query = {"name": "John Doe"} |
|||
collection.delete_one(query) |
|||
return "Data deleted successfully!" |
|||
|
|||
|
|||
if __name__ == "__main__": |
|||
app.run() |
|||
@ -0,0 +1,25 @@ |
|||
# Logs |
|||
logs |
|||
*.log |
|||
npm-debug.log* |
|||
yarn-debug.log* |
|||
yarn-error.log* |
|||
pnpm-debug.log* |
|||
lerna-debug.log* |
|||
|
|||
node_modules |
|||
dist |
|||
package-lock.json |
|||
dist-ssr |
|||
*.local |
|||
|
|||
# Editor directories and files |
|||
.vscode/* |
|||
!.vscode/extensions.json |
|||
.idea |
|||
.DS_Store |
|||
*.suo |
|||
*.ntvs* |
|||
*.njsproj |
|||
*.sln |
|||
*.sw? |
|||
@ -0,0 +1,7 @@ |
|||
# base |
|||
|
|||
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more. |
|||
|
|||
## Recommended IDE Setup |
|||
|
|||
- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). |
|||
@ -0,0 +1,12 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="zh"> |
|||
<head> |
|||
<meta charset="UTF-8" /> |
|||
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|||
</head> |
|||
<body> |
|||
<div id="app"></div> |
|||
<script type="module" src="/src/main.js"></script> |
|||
</body> |
|||
</html> |
|||
@ -0,0 +1,30 @@ |
|||
{ |
|||
"name": "base", |
|||
"private": true, |
|||
"version": "0.0.0", |
|||
"type": "module", |
|||
"scripts": { |
|||
"dev": "vite", |
|||
"build": "vite build", |
|||
"preview": "vite preview" |
|||
}, |
|||
"dependencies": { |
|||
"@element-plus/icons-vue": "^2.3.1", |
|||
"axios": "^1.6.6", |
|||
"dayjs": "^1.11.10", |
|||
"element-plus": "^2.5.3", |
|||
"lodash": "^4.17.21", |
|||
"md5": "^2.3.0", |
|||
"nprogress": "^0.2.0", |
|||
"papaparse": "^5.4.1", |
|||
"qs": "^6.11.2", |
|||
"unplugin-auto-import": "^0.17.4", |
|||
"unplugin-vue-components": "^0.26.0", |
|||
"vue": "^3.3.11", |
|||
"vue-router": "^4.2.5" |
|||
}, |
|||
"devDependencies": { |
|||
"@vitejs/plugin-vue": "^4.6.2", |
|||
"vite": "^5.0.8" |
|||
} |
|||
} |
|||
@ -0,0 +1,9 @@ |
|||
{ |
|||
"title": "可视化预警平台", |
|||
"jianceduixiang1path": "@/assets/img/jianceduixiang1.gif", |
|||
"jianceduixiang2path": "@/assets/img/jianceduixiang2.jpg", |
|||
"jianceduixiang3path": "@/assets/img/jianceduixiang3.png", |
|||
"jianceduixiang4path": "@/assets/img/jianceduixiang4.png", |
|||
"jianceduixiang5path": "@/assets/img/jianceduixiang5.gif", |
|||
"jianceduixiang6path": "@/assets/img/jianceduixiang6.gif" |
|||
} |
|||
|
After Width: | Height: | Size: 702 B |
@ -0,0 +1,20 @@ |
|||
<template> |
|||
<router-view /> |
|||
</template> |
|||
|
|||
<script> |
|||
|
|||
export default { |
|||
name: "app", |
|||
data() { |
|||
return {}; |
|||
}, |
|||
async mounted() { }, |
|||
methods: { |
|||
|
|||
}, |
|||
watch: {}, |
|||
computed: {}, |
|||
}; |
|||
</script> |
|||
<style scoped></style> |
|||
@ -0,0 +1,11 @@ |
|||
import _axios from "@/plugins/axios"; |
|||
|
|||
//登录、注册
|
|||
export function loginFun(data) { |
|||
return _axios({ |
|||
url: `/v1/login`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
@ -0,0 +1,36 @@ |
|||
import _axios from "@/plugins/axios"; |
|||
|
|||
//增加用户
|
|||
export function addUser(data) { |
|||
return _axios({ |
|||
url: `/v1/addUser`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
//删除用户
|
|||
export function delUser(data) { |
|||
return _axios({ |
|||
url: `/v1/delUser`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
//修改用户
|
|||
export function getUser(data) { |
|||
return _axios({ |
|||
url: `/v1/updateUser`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
//查找用户
|
|||
export function getUser(data) { |
|||
return _axios({ |
|||
url: `/v1/getUser`, |
|||
method: "POST", |
|||
data, |
|||
}); |
|||
} |
|||
|
|||
@ -0,0 +1,3 @@ |
|||
body { |
|||
margin: 0; |
|||
} |
|||
|
After Width: | Height: | Size: 16 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 6.4 KiB |
|
After Width: | Height: | Size: 41 KiB |
|
After Width: | Height: | Size: 42 KiB |
@ -0,0 +1,71 @@ |
|||
<template> |
|||
<el-form :inline="true" :disabled="formDisabled" :model="formData" label-suffix=":" label-width="100px"> |
|||
<el-row> |
|||
<el-col v-for="(headerItem, headerIndex) in formHeader" :key="headerIndex" :span="8"> |
|||
<el-form-item :label="headerItem.label" v-if="!(['time'].indexOf(headerItem.type) !== -1 && type === 'add')"> |
|||
<template v-if="['select'].indexOf(headerItem.type) !== -1"> |
|||
<el-select-v2 filterable v-model="formData[headerItem.inputValue]" multiple collapse-tags |
|||
collapse-tags-tooltip :options="headerItem.options" :placeholder="headerItem.label" style="width: 330px" |
|||
:max-collapse-tags="2" /> |
|||
</template> |
|||
<template v-else-if="['time'].indexOf(headerItem.type) !== -1"> |
|||
<el-date-picker v-model="formData[headerItem.inputValue]" type="datetime" :disabled="headerItem.disabled" |
|||
:placeholder="headerItem.label" format="YYYY/MM/DD HH:mm:ss" style="width: 330px" /> |
|||
</template> |
|||
<template v-else-if="['switch'].indexOf(headerItem.type) !== -1"> |
|||
<el-switch v-model="formData[headerItem.inputValue]" style="width: 330px"/> |
|||
</template> |
|||
<template v-else-if="['text', 'email', 'textarea', 'password'].indexOf( |
|||
headerItem.type |
|||
) !== -1 |
|||
"> |
|||
<el-input v-model="formData[headerItem.inputValue]" :placeholder="headerItem.label" :type="headerItem.type" |
|||
clearable :show-password="headerItem.type === 'password'" style="width: 330px" /> |
|||
</template> |
|||
</el-form-item> |
|||
</el-col> |
|||
</el-row> |
|||
</el-form> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "bug", |
|||
props: { |
|||
type: { |
|||
typeof: String, |
|||
default: () => { |
|||
return ""; |
|||
}, |
|||
}, |
|||
formHeader: { |
|||
typeof: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
formData: { |
|||
typeof: Object, |
|||
default: () => { |
|||
return {}; |
|||
}, |
|||
}, |
|||
formDisabled: { |
|||
typeof: Boolean, |
|||
default: () => { |
|||
return false; |
|||
}, |
|||
}, |
|||
}, |
|||
components: {}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
watch: {}, |
|||
computed: {}, |
|||
async mounted() { }, |
|||
beforeUnmount() { }, |
|||
|
|||
methods: {}, |
|||
}; |
|||
</script> |
|||
<style scoped></style> |
|||
@ -0,0 +1,114 @@ |
|||
<template> |
|||
<el-table :ref="refName" :data="tableData" class="mainTable" show-overflow-tooltip> |
|||
<el-table-column type="selection" width="55"> </el-table-column> |
|||
<el-table-column type="index" width="50"> |
|||
<template #default="scope"> |
|||
{{ scope.$index + 1 + pageSize * (currentPage - 1) }} |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column v-for="(headerItem, headerIndex) in tableHeader" :key="headerItem._id" |
|||
:min-width="headerItem.minWidth" :label="headerItem.label"> |
|||
<template #default="scope"> |
|||
<template v-if="headerItem.type === 'time'"> |
|||
{{ $dayjs(scope.row[headerItem.prop]).format("YYYY-MM-DD HH:mm:ss") }} |
|||
</template> |
|||
<template v-else-if="headerItem.type === 'array'"> |
|||
{{ $_.join(scope.row[headerItem.prop], ",") }} |
|||
</template> |
|||
<template v-else-if="headerItem.type === 'password'"> ****** </template> |
|||
<template v-else> |
|||
{{ scope.row[headerItem.prop] }} |
|||
</template> |
|||
</template> |
|||
</el-table-column> |
|||
<el-table-column fixed="right" align="center" label="Operations" width="110"> |
|||
<template #default="scope"> |
|||
<el-button link type="primary" text @click="detailInfo(scope.row)"> |
|||
<el-icon> |
|||
<InfoFilled /> |
|||
</el-icon> |
|||
</el-button> |
|||
<el-button link type="primary" text @click="editInfo(scope.row)"> |
|||
<el-icon> |
|||
<Edit /> |
|||
</el-icon> |
|||
</el-button> |
|||
</template> |
|||
</el-table-column> |
|||
</el-table> |
|||
<el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="pageSizes" |
|||
layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange" |
|||
@current-change="handleCurrentChange" class="pagination" /> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
name: "app", |
|||
emits: ["detailInfo", "editInfo", "handleSizeChange", "handleCurrentChange"], |
|||
props: { |
|||
refName: { |
|||
typeof: String, |
|||
default: "table", |
|||
}, |
|||
tableHeader: { |
|||
typeof: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
tableData: { |
|||
typeof: Array, |
|||
default: () => { |
|||
return []; |
|||
}, |
|||
}, |
|||
currentPage: { |
|||
typeof: Number, |
|||
default: 1, |
|||
}, |
|||
pageSize: { |
|||
typeof: Number, |
|||
default: 20, |
|||
}, |
|||
pageSizes: { |
|||
typeof: Number, |
|||
default: () => { |
|||
return [16, 50, 100, 200]; |
|||
}, |
|||
}, |
|||
total: { |
|||
typeof: Number, |
|||
default: 0, |
|||
}, |
|||
}, |
|||
data() { |
|||
return {}; |
|||
}, |
|||
async mounted() { }, |
|||
methods: { |
|||
detailInfo(item) { |
|||
this.$emit("detailInfo", item); |
|||
}, |
|||
editInfo(item) { |
|||
this.$emit("editInfo", item); |
|||
}, |
|||
handleSizeChange(sizeVal) { |
|||
this.$emit("handleSizeChange", sizeVal); |
|||
}, |
|||
handleCurrentChange(currentSize) { |
|||
this.$emit("handleCurrentChange", currentSize); |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
computed: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.mainTable { |
|||
height: calc(100vh - 208px); |
|||
width: 100%; |
|||
} |
|||
|
|||
.pagination { |
|||
justify-content: right; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,22 @@ |
|||
import App from "./App.vue"; |
|||
import { createApp } from "vue"; |
|||
// 引入路由实例
|
|||
import router from "@/router/index.js"; |
|||
//全局引入lodash
|
|||
import _ from "lodash"; |
|||
//全局引入lodash
|
|||
import dayjs from "dayjs"; |
|||
// 引入css
|
|||
import "@/assets/css/base.css"; |
|||
//全局引入element-plus所有图标
|
|||
import * as ElementPlusIconsVue from '@element-plus/icons-vue' |
|||
|
|||
const app = createApp(App); |
|||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { |
|||
app.component(key, component) |
|||
} |
|||
app.config.globalProperties.$_ = _; //挂载到app实例上
|
|||
app.config.globalProperties.$dayjs = dayjs; //挂载到app实例上
|
|||
app |
|||
.use(router) //路由
|
|||
app.mount("#app"); |
|||
@ -0,0 +1,40 @@ |
|||
import axios from "axios"; |
|||
import qs from "qs"; |
|||
import router from "@/router/index.js"; |
|||
let config = { |
|||
baseURL: "", |
|||
timeout: 600 * 1000, |
|||
withCredentials: true, // Check cross-site Access-Control
|
|||
/* `paramsSerializer` 是一个负责 `params` 序列化的函数 |
|||
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' }) |
|||
// 'a[0]=b&a[1]=c'
|
|||
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' }) |
|||
// 'a[]=b&a[]=c'
|
|||
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' }) |
|||
// 'a=b&a=c'
|
|||
*/ |
|||
paramsSerializer: (params) => { |
|||
return qs.stringify(params, { arrayFormat: "indices" }); |
|||
}, |
|||
}; |
|||
|
|||
const _axios = axios.create(config); |
|||
|
|||
_axios.interceptors.request.use( |
|||
(config) => { |
|||
return config; |
|||
}, |
|||
(error) => { |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
_axios.interceptors.response.use( |
|||
(response) => { |
|||
return Promise.resolve(response.data); |
|||
}, |
|||
(error) => { |
|||
ElMessage.error(error.response.data.message); |
|||
return Promise.reject(error); |
|||
} |
|||
); |
|||
export default _axios; |
|||
@ -0,0 +1,44 @@ |
|||
import { createRouter, createWebHistory } from "vue-router"; |
|||
import { close, start } from "@/utils/nprogress"; |
|||
import home from "../views/home.vue" |
|||
const routes = [ |
|||
{ |
|||
path: "/", |
|||
name: "home", |
|||
component: home, |
|||
redirect: "/bug", |
|||
children: [{ |
|||
path: "bug", |
|||
name: "bug", |
|||
component: () => import("../views/bug.vue"), |
|||
}, |
|||
{ |
|||
path: "user", |
|||
name: "user", |
|||
component: () => import("../views/user.vue"), |
|||
},] |
|||
}, |
|||
{ |
|||
path: "/login", |
|||
name: "login", |
|||
component: () => import("../views/login.vue"), |
|||
}, |
|||
{ name: "重定向", path: "/:catchAll(.*)", redirect: "/bug" }, |
|||
]; |
|||
|
|||
// 创建路由实例
|
|||
const router = createRouter({ |
|||
history: createWebHistory(), |
|||
routes, //路由表
|
|||
}); |
|||
let witheRouter = ["login"]; |
|||
router.beforeEach((pre, next) => { |
|||
if (witheRouter.indexOf(pre.name) !== -1) { |
|||
} |
|||
start(); |
|||
}); |
|||
|
|||
router.afterEach(() => { |
|||
close(); |
|||
}); |
|||
export default router; |
|||
@ -0,0 +1,79 @@ |
|||
:root { |
|||
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; |
|||
line-height: 1.5; |
|||
font-weight: 400; |
|||
|
|||
color-scheme: light dark; |
|||
color: rgba(255, 255, 255, 0.87); |
|||
background-color: #242424; |
|||
|
|||
font-synthesis: none; |
|||
text-rendering: optimizeLegibility; |
|||
-webkit-font-smoothing: antialiased; |
|||
-moz-osx-font-smoothing: grayscale; |
|||
} |
|||
|
|||
a { |
|||
font-weight: 500; |
|||
color: #646cff; |
|||
text-decoration: inherit; |
|||
} |
|||
a:hover { |
|||
color: #535bf2; |
|||
} |
|||
|
|||
body { |
|||
margin: 0; |
|||
display: flex; |
|||
place-items: center; |
|||
min-width: 320px; |
|||
min-height: 100vh; |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 3.2em; |
|||
line-height: 1.1; |
|||
} |
|||
|
|||
button { |
|||
border-radius: 8px; |
|||
border: 1px solid transparent; |
|||
padding: 0.6em 1.2em; |
|||
font-size: 1em; |
|||
font-weight: 500; |
|||
font-family: inherit; |
|||
background-color: #1a1a1a; |
|||
cursor: pointer; |
|||
transition: border-color 0.25s; |
|||
} |
|||
button:hover { |
|||
border-color: #646cff; |
|||
} |
|||
button:focus, |
|||
button:focus-visible { |
|||
outline: 4px auto -webkit-focus-ring-color; |
|||
} |
|||
|
|||
.card { |
|||
padding: 2em; |
|||
} |
|||
|
|||
#app { |
|||
max-width: 1280px; |
|||
margin: 0 auto; |
|||
padding: 2rem; |
|||
text-align: center; |
|||
} |
|||
|
|||
@media (prefers-color-scheme: light) { |
|||
:root { |
|||
color: #213547; |
|||
background-color: #ffffff; |
|||
} |
|||
a:hover { |
|||
color: #747bff; |
|||
} |
|||
button { |
|||
background-color: #f9f9f9; |
|||
} |
|||
} |
|||
@ -0,0 +1,19 @@ |
|||
import NProgress from 'nprogress' |
|||
import 'nprogress/nprogress.css' |
|||
NProgress.configure({ |
|||
easing: 'ease', // 动画方式
|
|||
speed: 1000, // 递增进度条的速度
|
|||
showSpinner: false, // 是否显示加载ico
|
|||
trickleSpeed: 200, // 自动递增间隔
|
|||
minimum: 0.3, // 更改启动时使用的最小百分比
|
|||
parent: 'body', //指定进度条的父容器
|
|||
}) |
|||
// 打开进度条
|
|||
export const start = () => { |
|||
NProgress.start() |
|||
} |
|||
|
|||
// 关闭进度条
|
|||
export const close = () => { |
|||
NProgress.done() |
|||
} |
|||
@ -0,0 +1,85 @@ |
|||
<template> |
|||
<el-container> |
|||
<el-header class="appHeader"> |
|||
<el-row> |
|||
<el-col :span="23" style="align-self: center"> |
|||
<el-image style="width: 60px; height: 60px" :src="logoUrl" fit="contain" /> |
|||
</el-col> |
|||
<el-col :span="1" style="align-self: center"> |
|||
<el-dropdown> |
|||
<span> <el-avatar :src="teacherUrl" /> </span> |
|||
<template #dropdown> |
|||
<el-dropdown-menu> |
|||
<el-dropdown-item @click="logout">退出</el-dropdown-item> |
|||
</el-dropdown-menu> |
|||
</template> |
|||
</el-dropdown> |
|||
</el-col> |
|||
</el-row> |
|||
</el-header> |
|||
<el-container> |
|||
<el-container> |
|||
<el-main class="appMain"> |
|||
<router-view /> |
|||
</el-main> |
|||
<el-footer class="appFooter">版权所有</el-footer> |
|||
</el-container> |
|||
</el-container> |
|||
</el-container> |
|||
</template> |
|||
|
|||
<script> |
|||
import logo from "@/assets/img/logo.jpg"; |
|||
import teacher from "@/assets/img/teacher.png"; |
|||
import student from "@/assets/img/student.png"; |
|||
export default { |
|||
name: "home", |
|||
data() { |
|||
return { |
|||
logoUrl: logo, |
|||
teacherUrl: teacher, |
|||
studentUrl: student, |
|||
userName: "", |
|||
}; |
|||
}, |
|||
async mounted() { |
|||
await this.init(); |
|||
}, |
|||
methods: { |
|||
async init() { |
|||
if (!localStorage.getItem("userId")) { |
|||
this.$router.push("/login"); |
|||
} |
|||
this.userName = localStorage.getItem("userName") |
|||
}, |
|||
async logout() { |
|||
localStorage.clear() |
|||
await this.init() |
|||
}, |
|||
routerFun(route) { |
|||
this.$router.push(route); |
|||
}, |
|||
}, |
|||
watch: {}, |
|||
computed: {}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.appHeader { |
|||
background-color: #67c23a; |
|||
} |
|||
|
|||
.appMain { |
|||
height: calc(100vh - 120px); |
|||
padding: 8px; |
|||
} |
|||
|
|||
.appAside { |
|||
height: calc(100vh - 60px); |
|||
background-color: #eee; |
|||
} |
|||
|
|||
.appFooter { |
|||
background-color: #eee; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,103 @@ |
|||
<template> |
|||
<div class="loginMain"> |
|||
<div class="login"> |
|||
<el-card shadow="hover" style="width: 450px"> |
|||
<template #header> |
|||
<div style="text-align: center"> |
|||
<el-button class="button" text @click="regist = false"> |
|||
登录 |
|||
</el-button> |
|||
<el-button class="button" text @click="regist = true"> |
|||
注册 |
|||
</el-button> |
|||
</div> |
|||
</template> |
|||
<div> |
|||
<el-form :model="regForm" label-suffix=":"> |
|||
<el-form-item label="账号"> |
|||
<el-input v-model="regForm.name" placeholder="请输入账号" /> |
|||
</el-form-item> |
|||
<el-form-item label="密码"> |
|||
<el-input v-model="regForm.password" type="password" placeholder="请输入密码" show-password /> |
|||
</el-form-item> |
|||
<el-form-item label="邮箱" v-if="regist"> |
|||
<el-input v-model="regForm.email" placeholder="请输入邮箱" /> |
|||
</el-form-item> |
|||
</el-form> |
|||
</div> |
|||
<template #footer> |
|||
<div style="text-align: center"> |
|||
<el-button class="button" v-if="regist" @click="login"> |
|||
注册 |
|||
</el-button> |
|||
<el-button class="button" v-else @click="login"> 登录 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-card> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script> |
|||
import { |
|||
loginFun, //登录 |
|||
} from "@/api/login"; |
|||
import md5 from "md5" |
|||
export default { |
|||
name: "login", |
|||
components: {}, |
|||
data() { |
|||
return { |
|||
regist: false, |
|||
regForm: { |
|||
name: "", |
|||
password: "", |
|||
email: "", |
|||
}, |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
computed: {}, |
|||
async mounted() { |
|||
await this.init(); |
|||
}, |
|||
beforeUnmount() { }, |
|||
|
|||
methods: { |
|||
dealForm() { |
|||
return { |
|||
regist: this.regist, |
|||
name: this.regForm.name, |
|||
password: md5(this.regForm.password), |
|||
email: this.regForm.email, |
|||
} |
|||
}, |
|||
async init() { }, |
|||
async login() { |
|||
let formData = this.dealForm() |
|||
let res = await loginFun(formData) |
|||
if (!res.hasError) { |
|||
ElMessage.success("登陆成功"); |
|||
localStorage.setItem("userId", res.list._id) |
|||
localStorage.setItem("userName", res.list.name) |
|||
this.$router.push("/bug") |
|||
} else { |
|||
ElMessage.error(res.msg); |
|||
localStorage.clear() |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped> |
|||
.loginMain { |
|||
background-image: url("@/assets/img/login.jpg"); |
|||
background-size: 100% 100%; |
|||
height: 100vh; |
|||
width: 100vw; |
|||
} |
|||
|
|||
.login { |
|||
padding-top: calc(50vh - 165px); |
|||
padding-left: calc(50vw - 225px); |
|||
} |
|||
</style> |
|||
@ -0,0 +1,340 @@ |
|||
<template> |
|||
<el-row style="margin: 0 0 8px 0"> |
|||
<el-col :span="4"> |
|||
<el-button icon="Plus" type="primary" @click="addUserData"> |
|||
新增 |
|||
</el-button> |
|||
<el-button icon="Delete" type="danger" @click="delUserData"> |
|||
删除 |
|||
</el-button> |
|||
<el-button icon="Refresh" type="info" @click="init({})" text> |
|||
刷新 |
|||
</el-button> |
|||
</el-col> |
|||
<el-col :span="2"> |
|||
<el-upload |
|||
:limit="1" |
|||
accept="text/csv" |
|||
:auto-upload="false" |
|||
:on-change="fileChange" |
|||
> |
|||
<template #trigger> |
|||
<el-button type="primary">文件上传</el-button> |
|||
</template> |
|||
<template #file> </template> |
|||
</el-upload> |
|||
</el-col> |
|||
<el-col :span="6"> |
|||
<el-input |
|||
v-model="searchValue" |
|||
placeholder="Please input email" |
|||
@keyup.enter="searchId" |
|||
> |
|||
<template #append> |
|||
<el-button @click="searchId" icon="Search" /> |
|||
</template> |
|||
</el-input> |
|||
</el-col> |
|||
</el-row> |
|||
<div v-loading="loading"> |
|||
<vueTable |
|||
ref="userTableParent" |
|||
:refName="refName" |
|||
:tableHeader="tableHeader" |
|||
:tableData="tableData" |
|||
:currentPage="currentPage" |
|||
:pageSize="pageSize" |
|||
:pageSizes="pageSizes" |
|||
:total="total" |
|||
@detailInfo="detailInfo" |
|||
@editInfo="editInfo" |
|||
@handleSizeChange="handleSizeChange" |
|||
@handleCurrentChange="handleCurrentChange" |
|||
> |
|||
</vueTable> |
|||
</div> |
|||
|
|||
<el-dialog |
|||
v-model="addDialog.show" |
|||
:title="addDialog.title" |
|||
width="80%" |
|||
draggable |
|||
:close-on-click-modal="formDisabled" |
|||
> |
|||
<changeItem |
|||
:formData="formData" |
|||
:formDisabled="formDisabled" |
|||
:type="addDialog.type" |
|||
:formHeader="formHeaderLocal" |
|||
> |
|||
</changeItem> |
|||
<template #footer v-if="!formDisabled"> |
|||
<div class="dialog-footer"> |
|||
<el-button @click="closeDialog(addDialog)" type="info" plain> |
|||
取消 |
|||
</el-button> |
|||
<el-button type="primary" @click="submitAdd" plain> 提交 </el-button> |
|||
</div> |
|||
</template> |
|||
</el-dialog> |
|||
</template> |
|||
<script> |
|||
import md5 from "md5"; |
|||
import Papa from "papaparse"; |
|||
import vueTable from "../component/table.vue"; |
|||
import changeItem from "../component/changeItem.vue"; |
|||
import { |
|||
getUser, //获取user信息 |
|||
addUser, //新增user信息 |
|||
delUser, //删除user信息 |
|||
} from "@/api/user"; |
|||
export default { |
|||
name: "user", |
|||
components: { vueTable, changeItem }, |
|||
data() { |
|||
return { |
|||
refName: "userTable", |
|||
loading: false, |
|||
tableHeader: [ |
|||
{ prop: "name", label: "name" }, |
|||
{ prop: "password", label: "password", type: "password" }, |
|||
{ prop: "email", label: "email" }, |
|||
{ prop: "loginTime", label: "loginTime", type: "time", minWidth: 120 }, |
|||
{ prop: "create_at", label: "create_at", type: "time", minWidth: 120 }, |
|||
{ prop: "update_at", label: "update_at", type: "time", minWidth: 120 }, |
|||
], |
|||
tableData: [], |
|||
currentPage: 1, |
|||
pageSize: 16, |
|||
pageSizes: [16, 50, 100, 200], |
|||
total: 0, |
|||
addDialog: { |
|||
type: "add", |
|||
show: false, |
|||
title: "新增用户", |
|||
}, |
|||
formData: { |
|||
name: "", |
|||
password: "", |
|||
email: "", |
|||
loginTime: "", |
|||
}, |
|||
formHeader: [ |
|||
{ |
|||
type: "text", |
|||
label: "name", |
|||
inputValue: "name", |
|||
}, |
|||
{ |
|||
type: "password", |
|||
label: "password", |
|||
inputValue: "password", |
|||
}, |
|||
{ |
|||
type: "email", |
|||
label: "email", |
|||
inputValue: "email", |
|||
}, |
|||
{ |
|||
type: "switch", |
|||
label: "allowRegist", |
|||
inputValue: "allowRegist", |
|||
hidden: true, |
|||
}, |
|||
{ |
|||
type: "time", |
|||
disabled: true, |
|||
label: "loginTime", |
|||
inputValue: "loginTime", |
|||
}, |
|||
{ |
|||
type: "time", |
|||
disabled: true, |
|||
label: "create_at", |
|||
inputValue: "create_at", |
|||
}, |
|||
{ |
|||
type: "time", |
|||
disabled: true, |
|||
label: "update_at", |
|||
inputValue: "update_at", |
|||
}, |
|||
], |
|||
formHeaderLocal: [], |
|||
formDisabled: false, |
|||
searchValue: "", |
|||
}; |
|||
}, |
|||
watch: {}, |
|||
computed: {}, |
|||
async mounted() { |
|||
await this.init(); |
|||
}, |
|||
beforeUnmount() {}, |
|||
|
|||
methods: { |
|||
async init(params = {}, isReload = true) { |
|||
if (isReload) { |
|||
this.searchValue = ""; |
|||
} |
|||
this.loading = true; |
|||
let res = await getUser({ |
|||
subType: "get", |
|||
returnData: [ |
|||
"name", |
|||
"email", |
|||
"allowRegist", |
|||
"loginTime", |
|||
"create_at", |
|||
"update_at", |
|||
], |
|||
pageSize: this.pageSize, |
|||
currentPage: this.currentPage, |
|||
...params, |
|||
}); |
|||
this.tableData = res.list; |
|||
this.total = res.count; |
|||
this.loading = false; |
|||
}, |
|||
async addUserData() { |
|||
this.addDialog = { |
|||
type: "add", |
|||
show: true, |
|||
title: "新增用户", |
|||
}; |
|||
this.formData = {}; |
|||
this.formHeaderLocal = this.$_.reject(this.formHeader, { hidden: true }); |
|||
this.formDisabled = false; |
|||
}, |
|||
closeDialog(addDialog) { |
|||
addDialog.show = false; |
|||
}, |
|||
async submitAdd() { |
|||
let subData = { subType: this.addDialog.type }; |
|||
for (let i = 0; i < this.formHeader.length; i++) { |
|||
let elei = this.formHeader[i]; |
|||
if (elei.type !== "time") { |
|||
subData[elei.inputValue] = this.formData[elei.inputValue]; |
|||
} |
|||
if (elei.type === "select") { |
|||
subData[`${elei.inputValue}_str`] = this.$_.join( |
|||
this.formData[elei.inputValue], |
|||
"," |
|||
); |
|||
} |
|||
} |
|||
if (this.addDialog.type === "edit") { |
|||
subData["_id"] = this.formData._id; |
|||
} |
|||
subData["password"] = md5(this.$_.trim(this.formData.password)); |
|||
try { |
|||
let res = await addUser(subData); |
|||
ElMessage({ |
|||
message: res.msg, |
|||
type: "success", |
|||
}); |
|||
} catch (error) { |
|||
} finally { |
|||
this.closeDialog(this.addDialog); |
|||
await this.init(); |
|||
} |
|||
}, |
|||
async delUserData() { |
|||
let rowList = |
|||
this.$refs[`${this.refName}Parent`].$refs[ |
|||
this.refName |
|||
].getSelectionRows(); |
|||
let delData = []; |
|||
let delDispalyData = []; |
|||
for (let i = 0; i < rowList.length; i++) { |
|||
let elei = rowList[i]; |
|||
delData.push(elei._id); |
|||
delDispalyData.push(`${elei.BugID}`); |
|||
} |
|||
ElMessageBox.confirm(`${delDispalyData.join("、")}`, "删除", { |
|||
confirmButtonText: "确认", |
|||
cancelButtonText: "取消", |
|||
type: "error", |
|||
}).then(async () => { |
|||
let res = await delUser({ subType: "del", ids: delData }); |
|||
await this.init(); |
|||
ElMessage({ |
|||
message: res.msg, |
|||
type: "success", |
|||
}); |
|||
}); |
|||
}, |
|||
detailInfo(item) { |
|||
this.addDialog = { |
|||
type: "info", |
|||
show: true, |
|||
title: `查看${item.name}`, |
|||
}; |
|||
if (item.name !== "admin") { |
|||
this.formHeaderLocal = this.$_.reject(this.formHeader, { |
|||
hidden: true, |
|||
}); |
|||
} else { |
|||
this.formHeaderLocal = this.$_.cloneDeep(this.formHeader); |
|||
} |
|||
this.formDisabled = true; |
|||
this.formData = item; |
|||
}, |
|||
editInfo(item) { |
|||
this.addDialog = { |
|||
type: "edit", |
|||
show: true, |
|||
title: `编辑${item.name}`, |
|||
}; |
|||
if (item.name !== "admin") { |
|||
this.formHeaderLocal = this.$_.reject(this.formHeader, { |
|||
hidden: true, |
|||
}); |
|||
} else { |
|||
this.formHeaderLocal = this.$_.cloneDeep(this.formHeader); |
|||
} |
|||
this.formDisabled = false; |
|||
this.formData = { ...item }; |
|||
}, |
|||
async handleSizeChange(pageSize) { |
|||
this.pageSize = pageSize; |
|||
await this.init(); |
|||
}, |
|||
async handleCurrentChange(currentPage) { |
|||
this.currentPage = currentPage; |
|||
await this.init(); |
|||
}, |
|||
fileChange(file) { |
|||
let fileData = []; |
|||
let that = this; |
|||
Papa.parse(file.raw, { |
|||
complete: async (result) => { |
|||
for (let i = 1; i < result.data.length; i++) { |
|||
let elei = result.data[i]; |
|||
fileData.push({ |
|||
name: that.$_.trim(elei[4]), |
|||
password: md5(that.$_.trim(elei[4])), |
|||
email: that.$_.trim(elei[4]), |
|||
}); |
|||
} |
|||
let fileDataLocal = that.$_.uniqBy(fileData, "name"); |
|||
let res = await addUser({ subType: "multi", list: fileDataLocal }); |
|||
await this.init(); |
|||
ElMessage({ |
|||
message: res.msg, |
|||
type: "success", |
|||
}); |
|||
}, |
|||
}); |
|||
}, |
|||
async searchId() { |
|||
if (this.$_.trim(this.searchValue)) { |
|||
await this.init({ email: this.searchValue }, false); |
|||
} else { |
|||
await this.init(); |
|||
} |
|||
}, |
|||
}, |
|||
}; |
|||
</script> |
|||
<style scoped></style> |
|||
@ -0,0 +1,42 @@ |
|||
// Plugins
|
|||
import vue from "@vitejs/plugin-vue"; |
|||
|
|||
// Utilities
|
|||
import { defineConfig } from "vite"; |
|||
import { fileURLToPath, URL } from "node:url"; |
|||
import AutoImport from "unplugin-auto-import/vite"; |
|||
import Components from "unplugin-vue-components/vite"; |
|||
import { ElementPlusResolver } from "unplugin-vue-components/resolvers"; |
|||
|
|||
// https://vitejs.dev/config/
|
|||
export default defineConfig({ |
|||
plugins: [ |
|||
vue(), |
|||
AutoImport({ |
|||
resolvers: [ElementPlusResolver()], |
|||
}), |
|||
Components({ |
|||
resolvers: [ElementPlusResolver()], |
|||
}), |
|||
], |
|||
define: { "process.env": {} }, |
|||
resolve: { |
|||
alias: { |
|||
"@": fileURLToPath(new URL("./src", import.meta.url)), |
|||
}, |
|||
extensions: [".js", ".json", ".jsx", ".mjs", ".ts", ".tsx", ".vue"], |
|||
}, |
|||
server: { |
|||
port: 3000, |
|||
proxy: { |
|||
"/v1": { |
|||
target: "http://127.0.0.1:7001/v1", |
|||
changeOrigin: true, |
|||
rewrite: (path) => path.replace(/^\/v1/, ""), |
|||
}, |
|||
}, |
|||
}, |
|||
build: { |
|||
sourcemap: true, |
|||
}, |
|||
}); |
|||
Loading…
Reference in new issue