Skip to content

V
vue-kwan-admin

Kwan的解忧杂货铺@新空间代码工作室 / vue-kwan-admin

通知 38
Star 6
Fork 3
V
vue-kwan-admin
提交 1b7adc28 编写于 作者: Kwan的解忧杂货铺@新空间代码工作室's avatar Kwan的解忧杂货铺@新空间代码工作室 🐭
浏览文件
操作

整理

上级 bdcd31ec
展开全部 隐藏空白更改
内联 并排
Showing with 10862 addition and 1181 deletion
.prettierrc 0 → 100644
浏览文件 @ 1b7adc28
{
"printWidth": 800,
"tabWidth": 2,
"useTabs": true,
"semi": false,
"singleQuote": true,
"quoteProps": "as-needed",
"jsxSingleQuote": true,
"trailingComma": "all",
"bracketSpacing": true,
"jsxBracketSameLine": true,
"arrowParens": "always",
"requirePragma": false,
"insertPragma": false,
"htmlWhitespaceSensitivity": "ignore",
"vueIndentScriptAndStyle": false,
"endOfLine": "lf",
"embeddedLanguageFormatting": "auto",
"prettier.proseWrap": "preserve",
"vetur.format.defaultFormatter.js": "prettier"
}
src/App.vue
浏览文件 @ 1b7adc28
<template> <template>
<!-- 占位符 --> <!-- 占位符 -->
<router-view></router-view> <router-view></router-view>
</template> </template>
<script> <script>
export default { export default {
name: 'MyApp' name: 'MyApp',
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>
\ No newline at end of file
src/assets/css/bootstrap.css
浏览文件 @ 1b7adc28
此差异已折叠。
src/components/MyHome.vue
浏览文件 @ 1b7adc28
<template> <template>
<div class="home-container"> <div class="home-container">
<el-row> <el-row>
<el-col :span="24"> <el-col :span="24">
<!-- 头部区域 --> <!-- 头部区域 -->
<MyHeader></MyHeader> <MyHeader></MyHeader>
</el-col> </el-col>
</el-row> </el-row>
<el-row> <el-row>
<el-col :span="3"> <el-col :span="3">
<!-- 左侧边栏 --> <!-- 左侧边栏 -->
<MyAside></MyAside> <MyAside></MyAside>
</el-col> </el-col>
<el-col :span="21"> <el-col :span="21">
<!-- 主体区域 --> <!-- 主体区域 -->
<router-view></router-view> <router-view></router-view>
</el-col> </el-col>
</el-row> </el-row>
</div> </div>
</template> </template>
<script> <script>
// 头部区域组件 // 头部区域组件
import MyHeader from "./subcomponents/MyHeader.vue"; import MyHeader from './subcomponents/MyHeader.vue'
// 左侧边栏组件 // 左侧边栏组件
import MyAside from "./subcomponents/MyAside.vue"; import MyAside from './subcomponents/MyAside.vue'
export default { export default {
name: "MyHome", name: 'MyHome',
// 注册组件 // 注册组件
components: { components: {
MyHeader, MyHeader,
MyAside, MyAside,
}, },
}; }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.home-container { .home-container {
height: 100%; height: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
.home-main-box { .home-main-box {
height: 100%; height: 100%;
display: flex; display: flex;
.home-main-body { .home-main-body {
padding: 15px; padding: 15px;
flex: 1; flex: 1;
} }
} }
} }
</style> </style>
\ No newline at end of file
src/components/MyLogin.vue
浏览文件 @ 1b7adc28
<template> <template>
<div class="login-container"> <div class="login-container">
<div class="login-box"> <div class="login-box">
<!-- 头像区域 --> <!-- 头像区域 -->
<div class="text-center avatar-box"> <div class="text-center avatar-box">
<img src="../assets/kwan.png" class="img-thumbnail avatar" alt="kwan的解忧杂货铺" /> <img src="../assets/kwan.png" class="img-thumbnail avatar" alt="kwan的解忧杂货铺" />
</div> </div>
<!-- 表单区域 --> <!-- 表单区域 -->
<div class="form-login p-4"> <div class="form-login p-4">
<!-- 登录名称 --> <!-- 登录名称 -->
<div class="form-group form-inline"> <div class="form-group form-inline">
<label for="username">登录名称</label> <label for="username">登录名称</label>
<input <input type="text" class="form-control ml-2" id="username" placeholder="请输入登录名称" autocomplete="off" v-model.trim="username" />
type="text" </div>
class="form-control ml-2" <!-- 登录密码 -->
id="username" <div class="form-group form-inline">
placeholder="请输入登录名称" <label for="password">登录密码</label>
autocomplete="off" <input type="password" class="form-control ml-2" id="password" placeholder="请输入登录密码" v-model.trim="password" />
v-model.trim="username" </div>
/> <!-- 登录和重置按钮 -->
</div> <div class="form-group form-inline d-flex justify-content-end">
<!-- 登录密码 --> <button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
<div class="form-group form-inline"> <button type="button" class="btn btn-primary" @click="login">登录</button>
<label for="password">登录密码</label> </div>
<input </div>
type="password" </div>
class="form-control ml-2" </div>
id="password"
placeholder="请输入登录密码"
v-model.trim="password"
/>
</div>
<!-- 登录和重置按钮 -->
<div class="form-group form-inline d-flex justify-content-end">
<button type="button" class="btn btn-secondary mr-2" @click="reset">重置</button>
<button type="button" class="btn btn-primary" @click="login">登录</button>
</div>
</div>
</div>
</div>
</template> </template>
<script> <script>
export default { export default {
name: 'MyLogin', name: 'MyLogin',
data() { data() {
return { return {
username: '', username: '',
password: '' password: '',
} }
}, },
methods: { methods: {
reset() { reset() {
this.username = '' this.username = ''
this.password = '' this.password = ''
},
login() {
if (this.username === 'admin' && this.password === '666666') {
// 登录成功
// 1. 存储 token
localStorage.setItem('token', 'Bearer xxxx')
// 2. 跳转到后台主页
this.$router.push('/home')
} else {
// 登录失败
localStorage.removeItem('token')
}
},
}, },
login() {
if (this.username === 'admin' && this.password === '666666') {
// 登录成功
// 1. 存储 token
localStorage.setItem('token', 'Bearer xxxx')
// 2. 跳转到后台主页
this.$router.push('/home')
} else {
// 登录失败
localStorage.removeItem('token')
}
}
}
} }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.login-container { .login-container {
background-color: #35495e; background-color: #35495e;
height: 100%; height: 100%;
.login-box { .login-box {
width: 400px; width: 400px;
height: 250px; height: 250px;
background-color: #fff; background-color: #fff;
border-radius: 3px; border-radius: 3px;
position: absolute; position: absolute;
left: 50%; left: 50%;
top: 50%; top: 50%;
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
box-shadow: 0 0 6px rgba(255, 255, 255, 0.5); box-shadow: 0 0 6px rgba(255, 255, 255, 0.5);
.form-login { .form-login {
position: absolute; position: absolute;
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
box-sizing: border-box; box-sizing: border-box;
} }
} }
} }
.form-control { .form-control {
flex: 1; flex: 1;
} }
.avatar-box { .avatar-box {
position: absolute; position: absolute;
width: 100%; width: 100%;
top: -65px; top: -65px;
left: 0; left: 0;
.avatar { .avatar {
width: 120px; width: 120px;
height: 120px; height: 120px;
border-radius: 50% !important; border-radius: 50% !important;
box-shadow: 0 0 6px #efefef; box-shadow: 0 0 6px #efefef;
} }
} }
</style> </style>
\ No newline at end of file
src/components/menus/MyChat.vue
浏览文件 @ 1b7adc28
<template> <template>
<div> <div>
<el-container> <el-container>
<el-main> <el-main>
<el-form :inline="true" :model="formInline" class="demo-form-inline"> <el-form :inline="true" :model="formInline" class="demo-form-inline">
<el-form-item label="问题"> <el-form-item label="问题">
<el-input <el-input clearable v-model="formInline.question" placeholder="请输入问题" @keydown.enter.native="initCartList"></el-input>
clearable </el-form-item>
v-model="formInline.question" <el-form-item>
placeholder="请输入问题" <el-button type="primary" @click="initCartList">查询</el-button>
@keydown.enter.native="initCartList" </el-form-item>
></el-input> <el-form-item>
</el-form-item> <el-button type="primary" @click.prevent="addChat">新增</el-button>
<el-form-item> </el-form-item>
<el-button type="primary" @click="initCartList">查询</el-button> </el-form>
</el-form-item> <el-table border :data="userlist" v-loading="loading">
<el-form-item> <el-table-column prop="id" label="序号" width="100" sortable></el-table-column>
<el-button type="primary" @click.prevent="addChat"> <el-table-column prop="question" label="问题" width="240" show-overflow-tooltip></el-table-column>
新增 <el-table-column prop="response" label="答案" show-overflow-tooltip></el-table-column>
</el-button> <el-table-column label="创建时间" width="170">
</el-form-item> <template slot-scope="props">
</el-form> {{ props.row.createTime | dateFormat }}
<el-table border :data="userlist" v-loading="loading"> </template>
<el-table-column </el-table-column>
prop="id" <el-table-column prop="详情" label="详情" width="180">
label="序号" <template slot-scope="props">
width="100" <el-button type="success" @click.prevent="gotoDetail(props.row.id)">详情</el-button>
sortable <el-button type="danger" @click="onDelete(props.row.id)">删除</el-button>
></el-table-column> </template>
<el-table-column </el-table-column>
prop="question" </el-table>
label="问题" <el-pagination class="pagination" background :key="elementui_page_component_key" :current-page.sync="currentPage" :page-size="pageSize" :total="total" @current-change="handleCurrentChange"></el-pagination>
width="240" </el-main>
show-overflow-tooltip <el-backtop class="backtop"></el-backtop>
></el-table-column> </el-container>
<el-table-column </div>
prop="response"
label="答案"
show-overflow-tooltip
></el-table-column>
<el-table-column label="创建时间" width="170">
<template slot-scope="props">
{{ props.row.createTime | dateFormat }}
</template>
</el-table-column>
<el-table-column prop="详情" label="详情" width="180">
<template slot-scope="props">
<el-button
type="success"
@click.prevent="gotoDetail(props.row.id)"
>详情
</el-button>
<el-button type="danger" @click="onDelete(props.row.id)"
>删除</el-button
>
</template>
</el-table-column>
</el-table>
<el-pagination
class="pagination"
background
:key="elementui_page_component_key"
:current-page.sync="currentPage"
:page-size="pageSize"
:total="total"
@current-change="handleCurrentChange"
></el-pagination>
</el-main>
<el-backtop class="backtop"></el-backtop>
</el-container>
</div>
</template> </template>
<script> <script>
import axios from "axios"; import axios from 'axios'
export default { export default {
name: "MyChat", name: 'MyChat',
data() { data() {
return { return {
// 用户列表数据 // 用户列表数据
userlist: [], userlist: [],
loading: false, loading: false,
elementui_page_component_key: 0, elementui_page_component_key: 0,
currentPage: Number(localStorage.getItem("lastPage")) || 1, currentPage: Number(localStorage.getItem('lastPage')) || 1,
pageSize: 10, pageSize: 10,
total: 0, total: 0,
formInline: { formInline: {
question: "", question: '',
}, },
};
},
watch: {
"formInline.question"(newVal) {
if (newVal === "") {
this.currentPage = 1;
localStorage.setItem("lastPage", this.currentPage);
this.initCartList();
}
},
},
created() {
this.$nextTick(() => {
const foo = this.$route.query.back;
const add = this.$route.query.add;
if (foo === "back" && add != "add") {
this.currentPage = Number(localStorage.getItem("lastPage")) || 1;
this.formInline.question = localStorage.getItem("lastQuestion") || "";
} else {
localStorage.setItem("lastPage", 1);
localStorage.setItem("lastQuestion", "");
this.currentPage = 1;
this.formInline.question = "";
}
// 调用请求数据的方法
this.initCartList();
});
},
mounted() {
this.currentPage = Number(localStorage.getItem("lastPage")) || 1;
this.formInline.question = localStorage.getItem("lastQuestion");
this.elementui_page_component_key++;
},
methods: {
async onDelete(id) {
this.loading = true;
const { data: res } = await axios.get(
"http://120.79.36.53:8888/chatbot/delete",
{
params: {
id: id,
},
} }
);
this.initCartList();
this.loading = false;
}, },
refreshPage() { watch: {
location.reload(); 'formInline.question'(newVal) {
if (newVal === '') {
this.currentPage = 1
localStorage.setItem('lastPage', this.currentPage)
this.initCartList()
}
},
}, },
gotoDetail(id) { created() {
this.$router.push("/home/chatinfo/" + id); this.$nextTick(() => {
const foo = this.$route.query.back
const add = this.$route.query.add
if (foo === 'back' && add != 'add') {
this.currentPage = Number(localStorage.getItem('lastPage')) || 1
this.formInline.question = localStorage.getItem('lastQuestion') || ''
} else {
localStorage.setItem('lastPage', 1)
localStorage.setItem('lastQuestion', '')
this.currentPage = 1
this.formInline.question = ''
}
// 调用请求数据的方法
this.initCartList()
})
}, },
addChat() { mounted() {
this.$router.push("/home/addChat/"); this.currentPage = Number(localStorage.getItem('lastPage')) || 1
this.formInline.question = localStorage.getItem('lastQuestion')
this.elementui_page_component_key++
}, },
methods: {
async onDelete(id) {
this.loading = true
const { data: res } = await axios.get('http://120.79.36.53:8888/chatbot/delete', {
params: {
id: id,
},
})
this.initCartList()
this.loading = false
},
refreshPage() {
location.reload()
},
gotoDetail(id) {
this.$router.push('/home/chatinfo/' + id)
},
addChat() {
this.$router.push('/home/addChat/')
},
async initCartList() { async initCartList() {
this.loading = true; this.loading = true
const { data: res } = await axios.get( const { data: res } = await axios.get('http://120.79.36.53:8888/chatbot/page', {
"http://120.79.36.53:8888/chatbot/page", params: {
{ page: this.currentPage,
params: { pageSize: this.pageSize,
page: this.currentPage, question: this.formInline.question,
pageSize: this.pageSize, },
question: this.formInline.question, })
}, if (res.code === 200) {
} this.userlist = res.result.records
); this.total = res.result.total
if (res.code === 200) { localStorage.setItem('lastPage', this.currentPage)
this.userlist = res.result.records; localStorage.setItem('lastQuestion', this.formInline.question)
this.total = res.result.total; }
localStorage.setItem("lastPage", this.currentPage); this.loading = false
localStorage.setItem("lastQuestion", this.formInline.question); },
}
this.loading = false;
},
handleCurrentChange(currentPage) { handleCurrentChange(currentPage) {
this.currentPage = currentPage; this.currentPage = currentPage
this.initCartList(); this.initCartList()
},
}, },
}, }
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.el-header { .el-header {
background-color: #b3c0d1; background-color: #b3c0d1;
color: #333; color: #333;
line-height: 60px; line-height: 60px;
} }
.el-aside { .el-aside {
color: #333; color: #333;
} }
.pagination { .pagination {
margin-top: 16px; margin-top: 16px;
text-align: right; text-align: right;
} }
.header-button-item { .header-button-item {
margin-right: 15px; margin-right: 15px;
font-size: 20px; font-size: 20px;
} }
.backtop { .backtop {
position: fixed; position: fixed;
bottom: 50px; bottom: 50px;
right: 50px; right: 50px;
height: 40px; height: 40px;
width: 40px; width: 40px;
line-height: 40px; line-height: 40px;
text-align: center; text-align: center;
border-radius: 20px; border-radius: 20px;
background-color: #007aff; background-color: #007aff;
color: #fff; color: #fff;
cursor: pointer; cursor: pointer;
z-index: 999; z-index: 999;
} }
.backtop:hover { .backtop:hover {
background-color: #0050a0; background-color: #0050a0;
} }
</style> </style>
\ No newline at end of file
src/components/menus/MyGoods.vue
浏览文件 @ 1b7adc28
<template> <template>
<h4 class="text-center">商品管理</h4> <h4 class="text-center">商品管理</h4>
</template> </template>
<script> <script>
export default { export default {
name: 'MyGoods', name: 'MyGoods',
} }
</script> </script>
......
src/components/menus/MyOrders.vue
浏览文件 @ 1b7adc28
<template> <template>
<h4 class="text-center">订单管理</h4> <h4 class="text-center">订单管理</h4>
</template> </template>
<script> <script>
export default { export default {
name: 'MyOrders', name: 'MyOrders',
} }
</script> </script>
......
src/components/menus/MyRights.vue
浏览文件 @ 1b7adc28
<template> <template>
<h4 class="text-center">权限管理</h4> <h4 class="text-center">权限管理</h4>
</template> </template>
<script> <script>
export default { export default {
name: 'MyRights', name: 'MyRights',
} }
</script> </script>
......
src/components/menus/MySettings.vue
浏览文件 @ 1b7adc28
<template> <template>
<h4 class="text-center">系统设置</h4> <h4 class="text-center">系统设置</h4>
</template> </template>
<script> <script>
export default { export default {
name: 'MySettings', name: 'MySettings',
} }
</script> </script>
......
src/components/menus/MyUsers.vue
浏览文件 @ 1b7adc28
<template> <template>
<div> <div>
<!-- 标题 --> <!-- 标题 -->
<h4 class="text-center">用户管理</h4> <h4 class="text-center">用户管理</h4>
<!-- 用户列表 --> <!-- 用户列表 -->
<table class="table table-bordered table-striped table-hover"> <table class="table table-bordered table-striped table-hover">
<thead> <thead>
<tr> <tr>
<th>序号</th> <th>序号</th>
<th>姓名</th> <th>姓名</th>
<th>年龄</th> <th>年龄</th>
<th>头衔</th> <th>头衔</th>
<th>操作</th> <th>操作</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
<tr v-for="item in userlist" :key="item.id"> <tr v-for="item in userlist" :key="item.id">
<td>{{ item.id }}</td> <td>{{ item.id }}</td>
<td>{{ item.name }}</td> <td>{{ item.name }}</td>
<td>{{ item.age }}</td> <td>{{ item.age }}</td>
<td>{{ item.position }}</td> <td>{{ item.position }}</td>
<td> <td>
<a href="#" @click.prevent="gotoDetail(item.id)">详情</a> <a href="#" @click.prevent="gotoDetail(item.id)">详情</a>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: "MyUser", name: 'MyUser',
data() { data() {
return { return {
// 用户列表数据 // 用户列表数据
userlist: [ userlist: [
{ id: 1, name: "嬴政", age: 18, position: "始皇帝" }, { id: 1, name: '嬴政', age: 18, position: '始皇帝' },
{ id: 2, name: "李斯", age: 35, position: "丞相" }, { id: 2, name: '李斯', age: 35, position: '丞相' },
{ id: 3, name: "吕不韦", age: 50, position: "商人" }, { id: 3, name: '吕不韦', age: 50, position: '商人' },
{ id: 4, name: "赵姬", age: 48, position: "王太后" }, { id: 4, name: '赵姬', age: 48, position: '王太后' },
], ],
}; }
},
methods: {
gotoDetail(id) {
// /home/userinfo/1
// /home/userinfo/2
// /home/userinfo/3
this.$router.push("/home/userinfo/" + id);
}, },
}, methods: {
}; gotoDetail(id) {
this.$router.push('/home/userinfo/' + id)
},
},
}
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>
\ No newline at end of file
src/components/subcomponents/MyAside.vue
浏览文件 @ 1b7adc28
<template> <template>
<el-menu <el-menu default-active="$route.path" class="layout-aside-container" background-color="#fff" text-color="#000" active-text-color="#42b983">
default-active="$route.path" <router-link to="/home/users">
class="layout-aside-container" <el-menu-item index="/users" class="left-aside-item">
background-color="#fff" <i class="el-icon-user"></i>
text-color="#000" <span slot="title">用户管理</span>
active-text-color="#42b983" </el-menu-item>
> </router-link>
<router-link to="/home/users"> <router-link to="/home/chat">
<el-menu-item index="/users" class="left-aside-item"> <el-menu-item index="/chat" class="left-aside-item">
<i class="el-icon-user"></i> <i class="el-icon-chat-line-square"></i>
<span slot="title">用户管理</span> <span slot="title">对话管理</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<router-link to="/home/chat"> <router-link to="/home/rights">
<el-menu-item index="/chat" class="left-aside-item"> <el-menu-item index="/rights" class="left-aside-item">
<i class="el-icon-chat-line-square"></i> <i class="el-icon-setting"></i>
<span slot="title">对话管理</span> <span slot="title">权限管理</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<router-link to="/home/rights"> <router-link to="/home/goods">
<el-menu-item index="/rights" class="left-aside-item"> <el-menu-item index="/goods" class="left-aside-item">
<i class="el-icon-setting"></i> <i class="el-icon-goods"></i>
<span slot="title">权限管理</span> <span slot="title">商品管理</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<router-link to="/home/goods"> <router-link to="/home/orders">
<el-menu-item index="/goods" class="left-aside-item"> <el-menu-item index="/orders" class="left-aside-item">
<i class="el-icon-goods"></i> <i class="el-icon-s-order"></i>
<span slot="title">商品管理</span> <span slot="title">订单管理</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<router-link to="/home/orders"> <router-link to="/home/settings">
<el-menu-item index="/orders" class="left-aside-item"> <el-menu-item index="/settings" class="left-aside-item">
<i class="el-icon-s-order"></i> <i class="el-icon-setting"></i>
<span slot="title">订单管理</span> <span slot="title">系统设置</span>
</el-menu-item> </el-menu-item>
</router-link> </router-link>
<router-link to="/home/settings"> </el-menu>
<el-menu-item index="/settings" class="left-aside-item">
<i class="el-icon-setting"></i>
<span slot="title">系统设置</span>
</el-menu-item>
</router-link>
</el-menu>
</template> </template>
<script> <script>
export default {name: 'MyAside'}; export default { name: 'MyAside' }
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.layout-aside-container { .layout-aside-container {
width: 250px; width: 250px;
height: 100%; height: 100%;
border-right: 1px solid #eaeaea; border-right: 1px solid #eaeaea;
} }
.left-aside-item { .left-aside-item {
font-size: 20px; font-size: 20px;
} }
</style> </style>
\ No newline at end of file
src/components/subcomponents/MyHeader.vue
浏览文件 @ 1b7adc28
<template> <template>
<div class="layout-header-container d-flex justify-content-between align-items-center p-3"> <div class="layout-header-container d-flex justify-content-between align-items-center p-3">
<!-- 左侧 logo 和 标题区域 --> <!-- 左侧 logo 和 标题区域 -->
<div class="layout-header-left d-flex align-items-center user-select-none"> <div class="layout-header-left d-flex align-items-center user-select-none">
<!-- logo --> <!-- logo -->
<img class="layout-header-left-img" src="../../assets/kwan.png" alt=""/> <img class="layout-header-left-img" src="../../assets/kwan.png" alt="" />
<!-- 标题 --> <!-- 标题 -->
<h4 class="layout-header-left-title ml-3">kwan的解忧杂货铺</h4> <h4 class="layout-header-left-title ml-3">kwan的解忧杂货铺</h4>
</div> </div>
<el-row> <el-row>
<el-col :inline="true" :span="24"> <el-col :inline="true" :span="24">
<el-button class="el-button-header" type="success" round @click="myHome"> <el-button class="el-button-header" type="success" round @click="myHome">我的主页</el-button>
我的主页 <el-button class="el-button-header" type="primary" round @click="logout">退出登录</el-button>
</el-button> </el-col>
<el-button class="el-button-header" type="primary" round @click="logout"> </el-row>
退出登录 </div>
</el-button>
</el-col>
</el-row>
</div>
</template> </template>
<script> <script>
export default { export default {
name: "MyHeader", name: 'MyHeader',
methods: { methods: {
logout() { logout() {
// 1. 清空 token // 1. 清空 token
localStorage.removeItem("token"); localStorage.removeItem('token')
// 2. 跳转到登录页面 // 2. 跳转到登录页面
this.$router.push("/login"); this.$router.push('/login')
},
myHome() {
// 新页面打开
window.open('http://qinyingjie.top/')
// 当前页面打开
// window.location.href = "http://qinyingjie.top/";
},
}, },
myHome() { }
// 新页面打开
window.open("http://qinyingjie.top/");
// 当前页面打开
// window.location.href = "http://qinyingjie.top/";
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.layout-header-container { .layout-header-container {
height: 60px; height: 60px;
border-bottom: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;
} }
.layout-header-left-img { .layout-header-left-img {
height: 50px; height: 50px;
} }
</style> </style>
\ No newline at end of file
src/components/user/AddChatDetail.vue
浏览文件 @ 1b7adc28
<template> <template>
<div> <div>
<el-button @click="goBack">后退</el-button> <el-button @click="goBack">后退</el-button>
<h4 class="text-center">新增ChatGpt问答</h4> <h4 class="text-center">新增ChatGpt问答</h4>
<el-container class="container"> <el-container class="container">
<el-form ref="form" :model="form" label-width="80px"> <el-form ref="form" :model="form" label-width="80px">
<el-form-item label="问题"> <el-form-item label="问题">
<el-input v-model="form.question"></el-input> <el-input v-model="form.question"></el-input>
</el-form-item> </el-form-item>
<el-form-item label="答案"> <el-form-item label="答案">
<el-input type="textarea" v-model="form.response"></el-input> <el-input type="textarea" v-model="form.response"></el-input>
</el-form-item> </el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">立即创建</el-button> <el-button type="primary" @click="onSubmit">立即创建</el-button>
<el-button @click="clearContent">取消</el-button> <el-button @click="clearContent">取消</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form>
</el-container> </el-container>
</div> </div>
</template> </template>
<script> <script>
// 导入 axios 请求库 // 导入 axios 请求库
import axios from "axios"; import axios from 'axios'
export default { export default {
name: "AddChatDetail", name: 'AddChatDetail',
data() { data() {
return { return {
form: { form: {
question: "", question: '',
response: "", response: '',
}, },
}; }
},
methods: {
clearContent() {
this.form.question = "";
this.form.response = "";
}, },
async onSubmit() { methods: {
const data = { clearContent() {
question: this.form.question, this.form.question = ''
response: this.form.response, this.form.response = ''
}; },
axios async onSubmit() {
.post("http://120.79.36.53:8888/chatbot", data) const data = {
.then((response) => { question: this.form.question,
// 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中 response: this.form.response,
if (response.data.code === 200) { }
this.$message.success({ axios
message: "问题和答案新增成功", .post('http://120.79.36.53:8888/chatbot', data)
duration: 1000, .then((response) => {
}); // 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
this.goBack(); if (response.data.code === 200) {
} this.$message.success({
}) message: '问题和答案新增成功',
.catch((error) => { duration: 1000,
// 处理错误 })
this.$message.error("系统异常"); this.goBack()
}); }
})
.catch((error) => {
// 处理错误
this.$message.error('系统异常')
})
},
goBack() {
// 传递参数到前一个页面
const params = {
// 参数名: 参数值
back: 'back',
add: 'add',
}
// 使用 $router.push() 导航到前一个页面
this.$router.push({
path: '/home/chat', // 前一个页面的路径
query: params, // 参数对象
})
},
}, },
goBack() { }
// 传递参数到前一个页面
const params = {
// 参数名: 参数值
back: "back",
add: "add",
};
// 使用 $router.push() 导航到前一个页面
this.$router.push({
path: "/home/chat", // 前一个页面的路径
query: params, // 参数对象
});
},
},
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.container { .container {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 30vh; /* 如果希望 `el-container` 在整个视口居中，可以使用 height: 100vh; 来设置容器的高度 */ height: 30vh; /* 如果希望 `el-container` 在整个视口居中，可以使用 height: 100vh; 来设置容器的高度 */
} }
</style> </style>
\ No newline at end of file
src/components/user/MyChatDetail.vue
浏览文件 @ 1b7adc28
<template> <template>
<div> <div>
<!-- <el-button @click="$router.back()">后退</el-button> --> <!-- <el-button @click="$router.back()">后退</el-button> -->
<el-button @click="goBack()">后退</el-button> <el-button @click="goBack()">后退</el-button>
<h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4> <h4 class="text-center">ChatGpt问答详情 --- {{ id }}</h4>
<el-container> <el-container>
<el-main> <el-main>
<el-table border :data="list"> <el-table border :data="list">
<el-table-column label="序号" width="50"> <el-table-column label="序号" width="50">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.id }}</span> <span>{{ scope.row.id }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="问题" width="240"> <el-table-column label="问题" width="240">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.question }}</span> <span>{{ scope.row.question }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="回答"> <el-table-column label="回答">
<template slot-scope="scope"> <template slot-scope="scope">
<span id="td-response">{{ scope.row.response }}</span> <span id="td-response">{{ scope.row.response }}</span>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="创建时间" width="170"> <el-table-column label="创建时间" width="170">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ scope.row.createTime | dateFormat }}</span> <span>{{ scope.row.createTime | dateFormat }}</span>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
</el-main> </el-main>
</el-container> </el-container>
<div class="button-container"> <div class="button-container">
<el-button @click="copyCode">复制回答</el-button> <el-button @click="copyCode">复制回答</el-button>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
// 导入 axios 请求库 // 导入 axios 请求库
import axios from "axios"; import axios from 'axios'
export default { export default {
name: "MyChatDetail", name: 'MyChatDetail',
props: ["id"], props: ['id'],
data() { data() {
return { return {
list: [], list: [],
}; }
},
created() {
// 调用请求数据的方法
this.initChatList();
},
methods: {
goBack() {
// 传递参数到前一个页面
const params = {
// 参数名: 参数值
back: "back",
// baz: "qux",
};
// 使用 $router.push() 导航到前一个页面
this.$router.push({
path: "/home/chat", // 前一个页面的路径
query: params, // 参数对象
});
}, },
// 封装请求列表数据的方法 created() {
async initChatList() { // 调用请求数据的方法
// 调用 axios 的 get 方法，请求列表数据 this.initChatList()
const { data: res } = await axios.get(
"http://120.79.36.53:8888/chatbot/" + this.id
);
// 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
if (res.code === 200) {
this.list = [
{
id: res.result.id,
question: res.result.question,
response: res.result.response,
createTime: res.result.createTime,
},
];
}
}, },
copyCode() { methods: {
const codeBlock = document.getElementById("td-response"); goBack() {
const range = document.createRange(); // 传递参数到前一个页面
range.selectNode(codeBlock); const params = {
const selection = window.getSelection(); // 参数名: 参数值
selection.removeAllRanges(); back: 'back',
selection.addRange(range); // baz: "qux",
document.execCommand("copy"); }
selection.removeAllRanges();
this.$message.success("代码已复制到剪贴板"); // 使用 $router.push() 导航到前一个页面
this.$router.push({
path: '/home/chat', // 前一个页面的路径
query: params, // 参数对象
})
},
// 封装请求列表数据的方法
async initChatList() {
// 调用 axios 的 get 方法，请求列表数据
const { data: res } = await axios.get('http://120.79.36.53:8888/chatbot/' + this.id)
// 只要请求回来的数据，在页面渲染期间要用到，则必须转存到 data 中
if (res.code === 200) {
this.list = [
{
id: res.result.id,
question: res.result.question,
response: res.result.response,
createTime: res.result.createTime,
},
]
}
},
copyCode() {
const codeBlock = document.getElementById('td-response')
const range = document.createRange()
range.selectNode(codeBlock)
const selection = window.getSelection()
selection.removeAllRanges()
selection.addRange(range)
document.execCommand('copy')
selection.removeAllRanges()
this.$message.success('代码已复制到剪贴板')
},
}, },
}, }
};
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.button-container { .button-container {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;
margin: 16px; margin: 16px;
} }
</style> </style>
\ No newline at end of file
src/components/user/MyUserDetail.vue
浏览文件 @ 1b7adc28
<template> <template>
<div> <div>
<button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button> <button type="button" class="btn btn-light btn-sm" @click="$router.back()">后退</button>
<h4 class="text-center">用户详情 --- {{ id }}</h4> <h4 class="text-center">用户详情 --- {{ id }}</h4>
</div> </div>
</template> </template>
<script> <script>
export default { export default {
name: 'MyUserDetail', name: 'MyUserDetail',
props: ['id'] props: ['id'],
} }
</script> </script>
<style lang="less" scoped></style> <style lang="less" scoped></style>
\ No newline at end of file
src/router/index.js
浏览文件 @ 1b7adc28
...@@ -69,7 +69,7 @@ const router = new VueRouter({ ...@@ -69,7 +69,7 @@ const router = new VueRouter({
props: true props: true
}, { }, {
path: 'addChat', path: 'addChat',
component: AddChatDetail, component: AddChatDetail
}, },
] ]
} }
......
src/router/pathArr.js
浏览文件 @ 1b7adc28
export default ['/home', '/home/users', '/home/rights'] export default['/home', '/home/users', '/home/rights']
yarn.lock 0 → 100644
浏览文件 @ 1b7adc28
此差异已折叠。
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或