初始化项目
This commit is contained in:
commit
e493bd98ab
|
|
@ -0,0 +1,3 @@
|
|||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
env: {
|
||||
node: true
|
||||
},
|
||||
'extends': [
|
||||
'plugin:vue/essential',
|
||||
'eslint:recommended'
|
||||
],
|
||||
parserOptions: {
|
||||
parser: '@babel/eslint-parser'
|
||||
},
|
||||
rules: {
|
||||
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||
'camelcase': 'off',
|
||||
'vue/attribute-hyphenation': 'off',
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,23 @@
|
|||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
|
|
@ -0,0 +1,24 @@
|
|||
# ChatABC
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Lints and fixes files
|
||||
```
|
||||
npm run lint
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
module.exports = {
|
||||
"presets": [
|
||||
"@vue/cli-plugin-babel/preset"
|
||||
],
|
||||
"plugins": [
|
||||
[
|
||||
"component",
|
||||
{
|
||||
"libraryName": "element-ui",
|
||||
"styleLibraryName": "theme-chalk"
|
||||
}
|
||||
]
|
||||
]
|
||||
}
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"module": "esnext",
|
||||
"baseUrl": "./",
|
||||
"moduleResolution": "node",
|
||||
"paths": {
|
||||
"@/*": [
|
||||
"src/*"
|
||||
]
|
||||
},
|
||||
"lib": [
|
||||
"esnext",
|
||||
"dom",
|
||||
"dom.iterable",
|
||||
"scripthost"
|
||||
]
|
||||
}
|
||||
}
|
||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,34 @@
|
|||
{
|
||||
"name": "vuedemo",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"serve": "vue-cli-service serve",
|
||||
"build": "vue-cli-service build",
|
||||
"lint": "vue-cli-service lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"axios": "^1.5.0",
|
||||
"core-js": "^3.8.3",
|
||||
"element-ui": "^2.4.5",
|
||||
"vue": "^2.6.14",
|
||||
"vue-router": "^3.5.1",
|
||||
"vuex": "^3.6.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.12.16",
|
||||
"@babel/eslint-parser": "^7.12.16",
|
||||
"@vue/cli-plugin-babel": "~5.0.0",
|
||||
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||
"@vue/cli-plugin-router": "~5.0.0",
|
||||
"@vue/cli-plugin-vuex": "~5.0.0",
|
||||
"@vue/cli-service": "~5.0.0",
|
||||
"babel-plugin-component": "^1.1.1",
|
||||
"eslint": "^7.32.0",
|
||||
"eslint-plugin-vue": "^8.0.3",
|
||||
"sass": "^1.32.7",
|
||||
"sass-loader": "^12.0.0",
|
||||
"vue-cli-plugin-element": "~1.0.1",
|
||||
"vue-template-compiler": "^2.6.14"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<link rel="icon" href="<%= BASE_URL %>xiaoxi.ico">
|
||||
<title>ChatABC</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>
|
||||
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||
</noscript>
|
||||
<div id="app"></div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view v-if="isRouterAlive"></router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
name: 'app',
|
||||
components: {
|
||||
|
||||
},
|
||||
provide(){
|
||||
return{
|
||||
reload:this.reload
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
isRouterAlive:true
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
reload(){
|
||||
this.isRouterAlive=false
|
||||
this.$nextTick(()=>{
|
||||
this.isRouterAlive=true
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,legend,input
|
||||
{margin: 0;padding: 0;}
|
||||
body{text-align: center;}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
|
|
@ -0,0 +1,22 @@
|
|||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import store from './store'
|
||||
import './router/permission'
|
||||
import axiosInstance from './store/request.js'
|
||||
import axios from 'axios'
|
||||
import ElementUI from 'element-ui';
|
||||
import 'element-ui/lib/theme-chalk/index.css';
|
||||
Vue.prototype.$http = axios
|
||||
Vue.config.productionTip = false
|
||||
// axiosInstance.defaults.baseURL = 'http://localhost:8081'; // 后端端口为8081
|
||||
|
||||
|
||||
Vue.use(ElementUI);
|
||||
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
axiosInstance,
|
||||
render: h => h(App)
|
||||
}).$mount('#app')
|
||||
|
|
@ -0,0 +1,66 @@
|
|||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import LayoutView from "../views/LayoutView.vue"
|
||||
import TableDemo from "../views/main/TableDemo"
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [
|
||||
{
|
||||
path: "/",
|
||||
name: "LayoutView",
|
||||
component: LayoutView,
|
||||
children: [
|
||||
{
|
||||
path: 'home',
|
||||
name: 'home',
|
||||
component: HomeView,
|
||||
meta: {
|
||||
isLogin: false
|
||||
},
|
||||
children: [
|
||||
{
|
||||
path: "/params",
|
||||
name: "paramsview",
|
||||
component: () => import("../views/main/ParamsView.vue"),
|
||||
meta: {
|
||||
isLogin: false
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/table",
|
||||
name: "TableDemo",
|
||||
component: TableDemo,
|
||||
meta: {
|
||||
isLogin: false
|
||||
}
|
||||
},
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
path: "tree",
|
||||
name: "TreeDemo",
|
||||
component: () => import("../views/main/TreeDemo.vue"),
|
||||
meta: {
|
||||
isLogin: true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
path: "/login",
|
||||
name: "LoginView",
|
||||
component: () => import("../views/LoginView.vue")
|
||||
}
|
||||
|
||||
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
routes
|
||||
})
|
||||
|
||||
export default router
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
import router from "./index";
|
||||
//路由守护
|
||||
router.beforeEach((to, from, next) => {
|
||||
if (to.meta.isLogin) {
|
||||
if (to.path === '/login') {
|
||||
next()
|
||||
}
|
||||
else {
|
||||
var tokenStr = window.localStorage.getItem('token')
|
||||
|
||||
if (!tokenStr) {
|
||||
return next('/login')
|
||||
}
|
||||
else {
|
||||
next()
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
next();
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,27 @@
|
|||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
|
||||
Vue.use(Vuex)
|
||||
|
||||
export default new Vuex.Store({
|
||||
state: {
|
||||
token: localStorage.getItem('token') ? localStorage.getItem('token') : 'abc'
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
setToken(state, token) {
|
||||
state.token = token
|
||||
localStorage.setItem("token", token)//存储token
|
||||
},
|
||||
delToken(state) {
|
||||
state.token = ''
|
||||
localStorage.removeItem("token")//删除token
|
||||
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
modules: {
|
||||
}
|
||||
})
|
||||
|
|
@ -0,0 +1,55 @@
|
|||
import router from "@/router";
|
||||
import axios from "axios";
|
||||
import { Message } from "element-ui";
|
||||
|
||||
//创建axios实例
|
||||
const axiosInstance = axios.create({
|
||||
baseURL: 'http://localhost:8081', // 设置默认发送地址为后端端口
|
||||
});
|
||||
|
||||
//添加拦截器，在每次ajax之前都会执行这个操作
|
||||
axiosInstance.interceptors.request.use(function (config) {
|
||||
console.log("操作了")
|
||||
//从本地缓存获得token
|
||||
const token = window.localStorage.getItem('token')
|
||||
|
||||
//如果存在将其加入请求头中
|
||||
if (token) {
|
||||
config.headers.token = token;
|
||||
}
|
||||
return config;
|
||||
}, function (error) {
|
||||
|
||||
|
||||
return Promise.reject(error);//发生错误返回一个拒绝的promise对象
|
||||
})
|
||||
|
||||
axiosInstance.interceptors.response.use(function (response) {
|
||||
return response
|
||||
},
|
||||
function (error) {
|
||||
if (error.response.status === 401) {
|
||||
router.push({ path: "/login" }, () => { }, () => { })
|
||||
var msg = "登录超时,请重新登录"
|
||||
Message({
|
||||
message: msg,
|
||||
type: 'error',
|
||||
duration: 3000
|
||||
})
|
||||
localStorage.removeItem('token')
|
||||
}
|
||||
else if (error.response.status === 402) {
|
||||
router.push({ path: "/login" });
|
||||
}
|
||||
else if (error.response.status === 500) {
|
||||
var msg1 = '出现未知错误'
|
||||
Message({
|
||||
message: msg1,
|
||||
type: 'error',
|
||||
duration: 3000
|
||||
})
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
export default axiosInstance;
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<div>
|
||||
<div>
|
||||
<el-row class="tac">
|
||||
<el-col :span="4">
|
||||
<el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" router>
|
||||
<el-submenu index="1">
|
||||
<template slot="title">
|
||||
<i class="el-icon-location"></i>
|
||||
<span>导航一</span>
|
||||
</template>
|
||||
<el-menu-item-group>
|
||||
<el-menu-item index="params">首页</el-menu-item>
|
||||
<el-menu-item index="table">选项2</el-menu-item>
|
||||
</el-menu-item-group>
|
||||
|
||||
</el-submenu>
|
||||
</el-menu>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<router-view></router-view>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
|
||||
export default {
|
||||
methods: {
|
||||
handleOpen(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
},
|
||||
handleClose(key, keyPath) {
|
||||
console.log(key, keyPath);
|
||||
}
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
<div>
|
||||
<router-view>
|
||||
layout
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
|
|
@ -0,0 +1,297 @@
|
|||
<template>
|
||||
<div class="login">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<span>ChatABC</span>
|
||||
</div>
|
||||
<el-tabs v-model="currentIndex" stretch @tab-click="handleClick">
|
||||
<el-tab-pane label="登录" name="login">
|
||||
<el-form :model="loginForm" :rules="rules" status-icon ref="loginForm">
|
||||
<el-form-item label="账号" label-width="80px" prop="account">
|
||||
<el-input type="text" v-model="loginForm.account" placeholder=""></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" label-width="80px" prop="password">
|
||||
<el-input type="password" v-model="loginForm.password"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('loginForm')">登录</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="注册" name="register">
|
||||
<el-form :model="registerForm" :rules="rules" status-icon ref="registerForm">
|
||||
<el-form-item label="账号" label-width="80px" prop="account">
|
||||
<el-input type="text" v-model="registerForm.account"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" label-width="80px" prop="email">
|
||||
<el-input type="text" v-model="registerForm.email"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="密码" label-width="80px" prop="password">
|
||||
<el-input type="password" v-model="registerForm.password"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="确认密码" label-width="80px" prop="checkPassword">
|
||||
<el-input type="password" v-model="registerForm.checkPassword"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="验证码" label-width="80px" prop="code">
|
||||
<el-input type="text" v-model="registerForm.code" class="code"></el-input>
|
||||
<span v-if="codeShow" style="color: rgb(0, 238, 255);cursor: pointer; /*悬停变小手的属性*/"
|
||||
@click="getCode()">获取验证码</span>
|
||||
<span v-if="!codeShow" style="color: rgb(0, 238, 255);">{{ count }}秒后重试</span>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm('registerForm')">注册</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axiosInstance from "@/store/request";
|
||||
export default {
|
||||
data() {
|
||||
|
||||
|
||||
|
||||
var validateAccount = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入账号"));
|
||||
} else if (value.length < 3) {
|
||||
return callback(new Error("请输入3位以上的账号"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
|
||||
var validatePassword = (rule, value, callback) => {
|
||||
if (this.activeTab === "login") {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入密码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
if (this.activeTab === "register") {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入密码"));
|
||||
} else if (value.length < 6) {
|
||||
callback(new Error("请输入六位以上的密码"));
|
||||
} else if (value.length > 16) {
|
||||
callback(new Error("请输入16位以下的密码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
}
|
||||
};
|
||||
var validateRegisterCheckPassword = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请再次输入密码"));
|
||||
} else if (this.registerForm.password !== value) {
|
||||
return callback(new Error("两次密码输入不一致"));
|
||||
} else {
|
||||
return callback();
|
||||
}
|
||||
};
|
||||
var validateEmail = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入邮箱"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
var validateCode = (rule, value, callback) => {
|
||||
if (!value) {
|
||||
return callback(new Error("请输入验证码"));
|
||||
} else {
|
||||
callback();
|
||||
}
|
||||
};
|
||||
return {
|
||||
codeShow: true,
|
||||
count: "",
|
||||
timer: null,
|
||||
|
||||
currentIndex: "login",
|
||||
loginForm: {
|
||||
account: "",
|
||||
password: "",
|
||||
},
|
||||
registerForm: {
|
||||
username: "",
|
||||
email: "",
|
||||
code: "",
|
||||
account: "",
|
||||
password: "",
|
||||
checkPassword: "",
|
||||
},
|
||||
activeTab: "login",
|
||||
rules: {
|
||||
account: [
|
||||
{
|
||||
validator: validateAccount,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
password: [
|
||||
{
|
||||
validator: validatePassword,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
checkPassword: [
|
||||
{
|
||||
validator: validateRegisterCheckPassword,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
email: [
|
||||
{
|
||||
validator: validateEmail,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
code: [
|
||||
{
|
||||
validator: validateCode,
|
||||
trigger: "blur",
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
getCode() {
|
||||
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
||||
if (!emailRegex.test(this.registerForm.email)) {
|
||||
alert("请输入正确的邮箱");
|
||||
}
|
||||
else {
|
||||
const TIME_COUNT = 60;
|
||||
axiosInstance.post("/sendCode", {
|
||||
email: this.registerForm.email,
|
||||
});
|
||||
if (!this.timer) {
|
||||
this.count = TIME_COUNT;
|
||||
this.codeShow = false;
|
||||
this.timer = setInterval(() => {
|
||||
if (this.count > 0 && this.count <= TIME_COUNT) {
|
||||
this.count--;
|
||||
|
||||
}
|
||||
else {
|
||||
this.codeShow = true;
|
||||
clearInterval(this.timer);
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
submitForm(formname) {
|
||||
const that = this;
|
||||
this.$refs[formname].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.activeTab === "login") {
|
||||
console.log(this.loginForm.username);
|
||||
console.log(this.loginForm.password);
|
||||
|
||||
axiosInstance
|
||||
.post("/login", {
|
||||
|
||||
account: this.loginForm.account,
|
||||
password: this.loginForm.password,
|
||||
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.data.responseStr !== "No") {
|
||||
that.$store.commit("setToken", response.data.responseStr);
|
||||
that.$router.push({ path: "/table" });
|
||||
} else {
|
||||
alert("账号密码错误");
|
||||
}
|
||||
});
|
||||
|
||||
// console.log(this.username+"pass"+this.password);
|
||||
}
|
||||
if (this.activeTab === "register") {
|
||||
const that = this;
|
||||
axiosInstance.post("/checkCode", {
|
||||
email: that.registerForm.email,
|
||||
code: that.registerForm.code,
|
||||
}).then(function (response) {
|
||||
if (response.data === true) {
|
||||
alert("验证码正确");
|
||||
|
||||
axiosInstance
|
||||
.post("/register", {
|
||||
|
||||
account: that.registerForm.account,
|
||||
password: that.registerForm.password,
|
||||
email: that.registerForm.email,
|
||||
|
||||
})
|
||||
.then(function (response) {
|
||||
if (response.data.status === 200) {
|
||||
alert("注册成功");
|
||||
} else if (response.data.status === 1001) {
|
||||
alert("账号已存在");
|
||||
} else if (response.data.status === 1002) {
|
||||
alert("该邮箱已被注册");
|
||||
} else {
|
||||
alert("注册失败")
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
} else if (response.data === false) {
|
||||
alert("验证码错误");
|
||||
} else {
|
||||
alert("验证码失效");
|
||||
}
|
||||
});
|
||||
|
||||
// .catch(){
|
||||
// //抛出网络请求异常
|
||||
// }
|
||||
console.log(this.registerForm);
|
||||
}
|
||||
} else {
|
||||
console.log("abc");
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
handleClick(tab) {
|
||||
this.activeTab = tab.name;
|
||||
// console.log("active"+this.activeTab)
|
||||
// console.log("tab"+tab.name)
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.login {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.box-card {
|
||||
width: 500px;
|
||||
margin: 100px auto;
|
||||
}
|
||||
|
||||
.code {
|
||||
width: 200px;
|
||||
margin-right: 107px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,17 @@
|
|||
<template>
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,48 @@
|
|||
<template>
|
||||
<div>
|
||||
<el-button type="primary" @click="openDialog">打开弹窗</el-button>
|
||||
<el-dialog title="多项输入" :visible.sync="dialogVisible" width="400px">
|
||||
<el-form :model="formData" label-width="80px">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱">
|
||||
<el-input v-model="formData.email"></el-input>
|
||||
</el-form-item>
|
||||
<!-- 在这里添加更多的输入字段 -->
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" @click="handleConfirm">确定</el-button>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dialogVisible: false,
|
||||
formData: {
|
||||
name: "",
|
||||
email: "",
|
||||
// 在这里添加更多的输入字段
|
||||
},
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
openDialog() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
handleConfirm() {
|
||||
// 在这里处理用户输入
|
||||
const { name, email } = this.formData;
|
||||
// 执行逻辑，保存用户输入或进行其他操作
|
||||
console.log("姓名:", name);
|
||||
console.log("邮箱:", email);
|
||||
|
||||
// 关闭对话框
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,219 @@
|
|||
<template>
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column fixed prop="date" label="日期" width="150">
|
||||
</el-table-column>
|
||||
<el-table-column prop="name" label="姓名" width="120"> </el-table-column>
|
||||
<el-table-column prop="province" label="省份" width="120">
|
||||
</el-table-column>
|
||||
<el-table-column prop="city" label="市区" width="120"> </el-table-column>
|
||||
<el-table-column prop="address" label="地址" width="300"> </el-table-column>
|
||||
<el-table-column prop="zip" label="邮编" width="120"> </el-table-column>
|
||||
<el-table-column fixed="right" label="操作" width="140">
|
||||
<template slot-scope="scope">
|
||||
<el-button @click="openDialog()" type="text" size="small"
|
||||
>添加</el-button
|
||||
>
|
||||
<el-dialog
|
||||
title="新增数据"
|
||||
:visible.sync="dialogVisible"
|
||||
:append-to-body="true"
|
||||
width="400px"
|
||||
>
|
||||
<el-form :model="formData" label-width="80px">
|
||||
<el-form-item label="日期">
|
||||
<el-input v-model="formData.date"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="省份">
|
||||
<el-input v-model="formData.province"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="市区">
|
||||
<el-input v-model="formData.city"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="formData.address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮编">
|
||||
<el-input v-model="formData.zip"></el-input>
|
||||
</el-form-item>
|
||||
<!-- 在这里添加更多的输入字段 -->
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<!-- 添加取消按钮 -->
|
||||
<el-button type="primary" @click="determine">确定</el-button>
|
||||
<!-- 添加确定按钮 -->
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
<el-button @click="dataDelete(scope.row)" type="text" size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
<el-button @click="openDialog1(scope.row)" type="text" size="small"
|
||||
>编辑</el-button
|
||||
>
|
||||
<el-dialog
|
||||
title="修改数据"
|
||||
:visible.sync="dialogVisible1"
|
||||
:append-to-body="true"
|
||||
width="400px"
|
||||
>
|
||||
<el-form :model="formData" label-width="80px">
|
||||
<el-form-item label="日期">
|
||||
<el-input v-model="formData.date"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="formData.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="省份">
|
||||
<el-input v-model="formData.province"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="市区">
|
||||
<el-input v-model="formData.city"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="地址">
|
||||
<el-input v-model="formData.address"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮编">
|
||||
<el-input v-model="formData.zip"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- 在这里添加更多的输入字段 -->
|
||||
<el-button @click="dialogVisible1 = false">取消</el-button>
|
||||
<el-button type="primary" @click="determine2">确定</el-button>
|
||||
</el-form>
|
||||
</el-dialog>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import axiosInstance from "@/store/request";
|
||||
|
||||
export default {
|
||||
inject: ["reload"],
|
||||
data() {
|
||||
return {
|
||||
oldname: "",
|
||||
dialogVisible: false,
|
||||
dialogVisible1: false,
|
||||
formData: {
|
||||
date: "",
|
||||
name: "",
|
||||
province: "",
|
||||
city: "",
|
||||
address: "",
|
||||
zip: "",
|
||||
// 在这里添加更多的输入字段
|
||||
},
|
||||
tableData: [],
|
||||
};
|
||||
},
|
||||
//钩子函数
|
||||
created() {
|
||||
console.log("hahaah");
|
||||
this.loadon();
|
||||
},
|
||||
methods: {
|
||||
//删除
|
||||
dataDelete(row) {
|
||||
console.log(row.name + "row");
|
||||
axiosInstance
|
||||
.get("/dropdata", {
|
||||
params: {
|
||||
name: row.name,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
|
||||
console.log(response);
|
||||
if (response.data === "ok") {
|
||||
this.$message({
|
||||
message: "删除成功",
|
||||
type: "success",
|
||||
this: this.reload(),
|
||||
});
|
||||
}
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
//查询
|
||||
loadon() {
|
||||
console.log("loadon被调用了");
|
||||
axiosInstance.post("/getdata").then((response) => {
|
||||
// console.log(response.status+"1")
|
||||
if (response) {
|
||||
if (response.status === 200) {
|
||||
console.log(response.status + "2");
|
||||
this.tableData = response.data;
|
||||
}
|
||||
}
|
||||
});
|
||||
console.log("aaaaaa");
|
||||
// this.tableData=this.respdata
|
||||
},
|
||||
openDialog() {
|
||||
this.dialogVisible = true;
|
||||
},
|
||||
openDialog1(row) {
|
||||
this.oldname = row.name;
|
||||
this.dialogVisible1 = true;
|
||||
},
|
||||
//新增数据确定按钮
|
||||
determine() {
|
||||
// 在这里处理用户输入
|
||||
const { date, name, province, city, address, zip } = this.formData;
|
||||
// 执行逻辑，保存用户输入或进行其他操作
|
||||
console.log(date + "date");
|
||||
|
||||
axiosInstance
|
||||
.get("/adddata", {
|
||||
params: {
|
||||
date: date,
|
||||
name: name,
|
||||
province: province,
|
||||
city: city,
|
||||
address: address,
|
||||
zip: zip,
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
this.reload();
|
||||
// 关闭对话框
|
||||
this.dialogVisible = false;
|
||||
},
|
||||
|
||||
//编辑数据确定按钮
|
||||
determine2() {
|
||||
// 在这里处理用户输入
|
||||
const { date, name, province, city, address, zip } = this.formData;
|
||||
|
||||
// 执行逻辑，保存用户输入或进行其他操作
|
||||
|
||||
axiosInstance
|
||||
.get("/updatedata", {
|
||||
params: {
|
||||
oldname: this.oldname,
|
||||
date: date,
|
||||
name: name,
|
||||
province: province,
|
||||
city: city,
|
||||
address: address,
|
||||
zip: zip,
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
|
||||
this.reload();
|
||||
// 关闭对话框
|
||||
this.dialogVisible1 = false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -0,0 +1,200 @@
|
|||
<template>
|
||||
<div>
|
||||
<div class="custom-tree-container">
|
||||
<div class="block">
|
||||
<p>使用 scoped slot</p>
|
||||
<el-tree
|
||||
:data="data1"
|
||||
show-checkbox
|
||||
node-key="id"
|
||||
default-expand-all
|
||||
:expand-on-click-node="false"
|
||||
>
|
||||
<span class="custom-tree-node" slot-scope="{ node, data }">
|
||||
<span>{{ node.label }}</span>
|
||||
<span>
|
||||
<el-button type="text" size="mini" @click="() => append(data)">
|
||||
添加
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="() => remove(node, data)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
<el-button type="text" size="mini" @click="() => update(data)">
|
||||
修改
|
||||
</el-button>
|
||||
<el-button
|
||||
type="text"
|
||||
size="mini"
|
||||
@click="() => queryChild(data)"
|
||||
>
|
||||
查询
|
||||
</el-button>
|
||||
</span>
|
||||
</span>
|
||||
</el-tree>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import axiosInstance from "@/store/request";
|
||||
|
||||
class TreeNode {
|
||||
constructor(id, label) {
|
||||
this.id = id;
|
||||
this.label = label;
|
||||
this.children = [];
|
||||
}
|
||||
}
|
||||
|
||||
export default {
|
||||
data() {
|
||||
const data1 = [];
|
||||
const childTree1=[]
|
||||
return {
|
||||
data1: JSON.parse(JSON.stringify(data1)),
|
||||
childTree1:JSON.parse(JSON.stringify(childTree1))
|
||||
};
|
||||
},
|
||||
created() {
|
||||
console.log("hahaa");
|
||||
this.treeLoadOn();
|
||||
},
|
||||
methods: {
|
||||
open() {
|
||||
const h=this.$createElement
|
||||
const treeComponent=h('el-tree',{
|
||||
props:{
|
||||
data:this.childTree1,
|
||||
"show-checkbox":false,
|
||||
nodeKey:"id",
|
||||
"default-expand-all":true,
|
||||
"expand-on-click-node":false
|
||||
}
|
||||
});
|
||||
this.$alert(treeComponent, "这是他的子树", {
|
||||
dangerouslyUseHTMLString: true,
|
||||
confirmButtonText: "确定",
|
||||
callback: () => {
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: `退出成功`,
|
||||
});
|
||||
},
|
||||
});
|
||||
},
|
||||
queryChild(data) {
|
||||
axiosInstance.post("/getTree").then((response) => {
|
||||
this.childTree1 = this.buildTree(response.data, data.id);
|
||||
console.log(this.childTree1);
|
||||
this.open()
|
||||
});
|
||||
},
|
||||
|
||||
buildTree(respdata, father) {
|
||||
const tree = [];
|
||||
for (const item of respdata) {
|
||||
if (item.father === father) {
|
||||
const treeNode = new TreeNode(item.id, item.label);
|
||||
treeNode.children = this.buildTree(respdata, treeNode.id);
|
||||
tree.push(treeNode);
|
||||
}
|
||||
}
|
||||
console.log(tree + "this is");
|
||||
return tree;
|
||||
},
|
||||
treeLoadOn() {
|
||||
console.log("asdsaad");
|
||||
axiosInstance.post("/getTree").then((response) => {
|
||||
if (response && response.status === 200) {
|
||||
console.log(response.data);
|
||||
this.data1 = this.buildTree(response.data, 0);
|
||||
console.log(this.data1);
|
||||
}
|
||||
});
|
||||
},
|
||||
append(data) {
|
||||
axiosInstance
|
||||
.get("/addNode", {
|
||||
params: {
|
||||
label: "newNode",
|
||||
father: data.id,
|
||||
},
|
||||
})
|
||||
.then((response) => {
|
||||
const newChild = {
|
||||
id: response.data,
|
||||
label: "newNode",
|
||||
children: [],
|
||||
};
|
||||
if (!data.children) {
|
||||
this.$set(data, "children", []);
|
||||
}
|
||||
data.children.push(newChild);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
|
||||
remove(node, data) {
|
||||
const parent = node.parent;
|
||||
const children = parent.data.children || parent.data;
|
||||
const index = children.findIndex((d) => d.id === data.id);
|
||||
children.splice(index, 1);
|
||||
axiosInstance
|
||||
.get("/delNode", {
|
||||
params: {
|
||||
id: data.id,
|
||||
},
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error);
|
||||
});
|
||||
},
|
||||
update(data) {
|
||||
this.$prompt("请输入节点名称", "修改节点名称", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
})
|
||||
.then(({ value }) => {
|
||||
axiosInstance.get("/updateNode", {
|
||||
params: {
|
||||
id: data.id,
|
||||
label: value,
|
||||
},
|
||||
});
|
||||
data.label = value;
|
||||
this.$message({
|
||||
type: "success",
|
||||
message: "修改后的节点名称为 " + value,
|
||||
});
|
||||
})
|
||||
.catch(() => {
|
||||
this.$message({
|
||||
type: "info",
|
||||
message: "取消输入",
|
||||
});
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<style>
|
||||
.custom-tree-node {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
const { defineConfig } = require('@vue/cli-service')
|
||||
module.exports = defineConfig({
|
||||
transpileDependencies: true
|
||||
})
|
||||
Loading…
Reference in New Issue