xunyingcloud/front-template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化请求体

Browse Source
This commit is contained in:
闵宪瑞 2025-01-09 23:09:36 +08:00
parent 5765208844
commit cae25ad4ce
14 changed files with 279 additions and 204 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/codeimg.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 9.4 KiB

8
src/api/user/adminUserApi.ts
View File

@ -1,7 +1,7 @@
import { adminRequest } from '~/composables/adminRequest' import { adminRequest } from '~/composables/adminRequest'
/** /**
* 登录 * 验证码
* @param data * @param data
*/ */
export function captchaAdmin(uid: Number) { export function captchaAdmin(uid: Number) {
@ -38,8 +38,6 @@ export function logoutAdmin() {
* 获取用户信息 * 获取用户信息
* @param userId * @param userId
*/ */
export function userInfoAdmin(userId: any) { export function userInfoAdmin() {
return adminRequest.get("/userInfo", { return adminRequest.get("/sys/user/info")
params: { userId: userId }
})
} }

3
src/api/user/frontUserApi.ts
View File

@ -6,6 +6,9 @@ export function loginFront(data:any) {
frontRequest.post("/api/user/login", data).then(response =>{ frontRequest.post("/api/user/login", data).then(response =>{
const user = userStore() const user = userStore()
user.frontToken = response.data.token user.frontToken = response.data.token
frontRequest.get("/api/user/userInfo").then(response =>{
user.frontUserInfo = response.data
})
}) })
} }
/** /**

4
src/components/Heads.vue
View File

@ -2,11 +2,11 @@
<div class="head"> <div class="head">
<div class="head_l"> <div class="head_l">
<!-- <img src="/icoimg.png" alt="收缩" />--> <!-- <img src="/icoimg.png" alt="收缩" />-->
</div> </div>
<el-dropdown> <el-dropdown>
<div class="head_r"> <div class="head_r">
<img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" /> <!-- <img :src="userStore().adminUserInfo.avatar" alt="头像" class="profile" />-->
<div class="head_user"> <div class="head_user">
<div class="head_user_name">{{ userStore().adminUserInfo.username }}</div> <div class="head_user_name">{{ userStore().adminUserInfo.username }}</div>
<div class="head_user_desc">管理员</div> <div class="head_user_desc">管理员</div>

58
src/components/nav/Navigation1.vue
View File

@ -1,7 +1,9 @@
<!--前端样式1--> <!--前端样式1-->
<template> <template>
<el-row justify="space-between"> <el-row justify="space-between">
<el-col :span="6"><div class="grid-content ep-bg-purple" /></el-col> <el-col :span="6">
<div class="grid-content ep-bg-purple" />
</el-col>
<el-col :span="12"> <el-col :span="12">
<el-menu <el-menu
:default-active="activeIndex" :default-active="activeIndex"
@ -11,36 +13,37 @@
> >
<el-menu-item <el-menu-item
v-for="r of getFrontList()" :key="r.path" v-for="r of getFrontList()" :key="r.path"
:index="r.path">{{ r.name }}</el-menu-item> :index="r.path">{{ r.name }}
</el-menu-item>
</el-menu> </el-menu>
</el-col> </el-col>
<el-col :span="3"> <el-col :span="3">
<el-dropdown> <el-dropdown>
<el-row :gutter="20"> <el-row :gutter="20">
<el-col :span="8"> <el-col :span="8">
<el-avatar <!-- <el-avatar :src="userStore().frontUserInfo.avatar" />-->
:src="userStore().adminUserInfo.avatar" </el-col>
/> <el-col :span="16">
</el-col> <h6>{{ userStore().frontUserInfo.username }}</h6>
<el-col :span="16"> </el-col>
<h6>{{ userStore().adminUserInfo.username }}</h6> </el-row>
</el-col> <template #dropdown>
</el-row> <el-dropdown-menu slot="dropdown">
<template #dropdown> <el-dropdown-item>个人中心</el-dropdown-item>
<el-dropdown-menu slot="dropdown"> <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
<el-dropdown-item >个人中心</el-dropdown-item> </el-dropdown-menu>
<el-dropdown-item @click="logout">退出登录</el-dropdown-item> </template>
</el-dropdown-menu> </el-dropdown>
</template>
</el-dropdown>
</el-col> </el-col>
</el-row> </el-row>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { getFrontList } from '~/utils/utils' import { getFrontList } from '~/utils/utils'
import { useRouter } from "vue-router"; import { useRouter } from 'vue-router'
const router = useRouter(); import { logoutFront } from '~/api/user/frontUserApi'
const router = useRouter()
const activeIndex = ref('1') const activeIndex = ref('1')
const handleSelect = (key: string, keyPath: string[]) => { const handleSelect = (key: string, keyPath: string[]) => {
console.log(key, keyPath) console.log(key, keyPath)
@ -49,9 +52,9 @@ const handleSelect = (key: string, keyPath: string[]) => {
* 退出登录 * 退出登录
*/ */
const logout = () => { const logout = () => {
logoutAdmin().then(()=>{ logoutFront().then(() => {
toast.success("退出成功~") toast.success('退出成功~')
router.push('/login'); router.push('/login')
}) })
} }
</script> </script>
@ -60,7 +63,8 @@ const logout = () => {
:deep(.el-menu--horizontal) { :deep(.el-menu--horizontal) {
border-bottom: none; border-bottom: none;
} }
h6{
h6 {
font-weight: 700; font-weight: 700;
font-size: 16px; font-size: 16px;
padding-top: 15px; padding-top: 15px;

5
src/composables/adminRequest.ts
View File

@ -32,12 +32,13 @@ adminRequest.interceptors.response.use(
return Promise.reject(response.data.msg) return Promise.reject(response.data.msg)
case 401: case 401:
toast.error(response.data.msg) toast.error(response.data.msg)
window.open(`/login`, '_self')
return Promise.reject(response.data.msg) return Promise.reject(response.data.msg)
default: default:
return response return response.data
} }
} }
return response return response.data
}, },
function (error) { function (error) {
let { msg, message } = error.response?.data ?? {} let { msg, message } = error.response?.data ?? {}

5
src/composables/frontRequest.ts
View File

@ -28,14 +28,13 @@ frontRequest.interceptors.response.use(
switch (code) { switch (code) {
case 500: case 500:
toast.error(response.data.msg) toast.error(response.data.msg)
break return Promise.reject(response.data.msg)
case 401: case 401:
window.open(`/login`, '_self') window.open(`/login`, '_self')
toast.error("请重新登录~") toast.error("请重新登录~")
break break
default: default:
toast.error(response.data.msg) return response
break
} }
} }
if (response.data) { if (response.data) {

98
src/pages/admin/index.vue
View File

@ -1,10 +1,100 @@
<template> <template>
dsdsd <!-- 客户类型销售情况饼图 -->
</template> <el-row>
<script setup lang="ts"> <el-col :span="24">
<v-chart class="chart" :option="customerTypeSalesOption" autoresize />
</el-col>
</el-row>
<!-- 客户购买频次、周期、金额漏斗图 -->
<el-row>
<el-col :span="24">
<v-chart class="chart" :option="customerPurchaseFunnelOption" autoresize />
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { PieChart, FunnelChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { use } from 'echarts/core'
// 引入并使用图表组件
use([CanvasRenderer, PieChart, FunnelChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
// 模拟数据
const customerData = ref([
{ customerType: '家庭用户', salesAmount: 5000 },
{ customerType: '商用用户', salesAmount: 8000 },
{ customerType: '工业用户', salesAmount: 12000 },
// 更多数据...
])
const purchaseData = ref([
{ stage: '潜在客户', value: 300 },
{ stage: '关注产品', value: 200 },
{ stage: '询价客户', value: 150 },
{ stage: '下单客户', value: 100 },
{ stage: '支付客户', value: 70 },
// 更多数据...
])
// 客户类型销售情况饼图
const customerTypeSalesOption = ref({
title: { text: '客户类型销售情况', left: 'center' },
tooltip: { trigger: 'item' },
legend: {
orient: 'vertical',
left: 'left',
data: customerData.value.map(item => item.customerType)
},
series: [
{
name: '销售额',
type: 'pie',
radius: '55%',
data: customerData.value.map(item => ({
value: item.salesAmount,
name: item.customerType
})),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
// 客户购买漏斗图（频次、周期、金额）
const customerPurchaseFunnelOption = ref({
title: { text: '客户购买漏斗分析', left: 'center' },
tooltip: { trigger: 'item' },
legend: {
data: ['客户转化情况']
},
series: [
{
name: '客户转化情况',
type: 'funnel',
left: '10%',
width: '80%',
data: purchaseData.value.map(item => ({
value: item.value,
name: item.stage
}))
}
]
})
</script> </script>
<style scoped> <style scoped>
.chart {
height: 400px;
}
</style> </style>

17
src/pages/front/index.vue Normal file
View File

@ -0,0 +1,17 @@
<template>
我是前台
</template>
<script setup lang="ts">
</script>
<style scoped>
</style>
<route lang="json">
{
"meta": {
"layout": "front"
}
}
</route>

100
src/pages/index.vue
View File

@ -1,100 +0,0 @@
<template>
<!-- 客户类型销售情况饼图 -->
<el-row>
<el-col :span="24">
<v-chart class="chart" :option="customerTypeSalesOption" autoresize />
</el-col>
</el-row>
<!-- 客户购买频次、周期、金额漏斗图 -->
<el-row>
<el-col :span="24">
<v-chart class="chart" :option="customerPurchaseFunnelOption" autoresize />
</el-col>
</el-row>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import VChart from 'vue-echarts'
import { PieChart, FunnelChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent, GridComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { use } from 'echarts/core'
// 引入并使用图表组件
use([CanvasRenderer, PieChart, FunnelChart, TitleComponent, TooltipComponent, LegendComponent, GridComponent])
// 模拟数据
const customerData = ref([
{ customerType: '家庭用户', salesAmount: 5000 },
{ customerType: '商用用户', salesAmount: 8000 },
{ customerType: '工业用户', salesAmount: 12000 },
// 更多数据...
])
const purchaseData = ref([
{ stage: '潜在客户', value: 300 },
{ stage: '关注产品', value: 200 },
{ stage: '询价客户', value: 150 },
{ stage: '下单客户', value: 100 },
{ stage: '支付客户', value: 70 },
// 更多数据...
])
// 客户类型销售情况饼图
const customerTypeSalesOption = ref({
title: { text: '客户类型销售情况', left: 'center' },
tooltip: { trigger: 'item' },
legend: {
orient: 'vertical',
left: 'left',
data: customerData.value.map(item => item.customerType)
},
series: [
{
name: '销售额',
type: 'pie',
radius: '55%',
data: customerData.value.map(item => ({
value: item.salesAmount,
name: item.customerType
})),
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)'
}
}
}
]
})
// 客户购买漏斗图（频次、周期、金额）
const customerPurchaseFunnelOption = ref({
title: { text: '客户购买漏斗分析', left: 'center' },
tooltip: { trigger: 'item' },
legend: {
data: ['客户转化情况']
},
series: [
{
name: '客户转化情况',
type: 'funnel',
left: '10%',
width: '80%',
data: purchaseData.value.map(item => ({
value: item.value,
name: item.stage
}))
}
]
})
</script>
<style scoped>
.chart {
height: 400px;
}
</style>

128
src/pages/login.vue
View File

@ -12,17 +12,26 @@
</div> </div>
<div class="module_m"> <div class="module_m">
<div class="module_text">密码</div> <div class="module_text">密码</div>
<input class="module_input" type="password" placeholder="输入密码" v-model="login.password" /> <input class="module_input" type="password" placeholder="输入密码" v-model="login.password" />
</div> </div>
<!-- <div class="module_m">-->
<!-- <div class="module_text">验证码</div>-->
<!-- <div class="module_code">-->
<!-- <input class="module_code_input" type="text" placeholder="输入验证码" v-model="login.captcha" />-->
<!-- <img class="module_code_img" :src="state.captchaUrl" @click="getCaptcha">-->
<!-- </div>-->
<!-- </div>-->
<div class="module_m"> <div class="module_m">
<div class="module_text">验证码</div>
<div class="module_code"> <div class="module_code">
<input class="module_code_input" type="text" placeholder="输入验证码" v-model="login.captcha" /> <el-radio-group v-model="state.role" class="ml-4">
<img class="module_code_img" :src="state.captchaUrl" @click="getCaptcha"> <el-radio :label=false size="large">普通用户</el-radio>
<el-radio :label=true size="large">管理员</el-radio>
</el-radio-group>
</div> </div>
</div> </div>
<!-- <div class="module_radio"><input type="radio"/>记住密码 </div>--> <!-- <div class="module_radio"><input type="radio"/>记住密码 </div>-->
<!-- <div class="forgetpwd" @click="router.push('/register')">没有密码吗？</div>--> <div class="forgetpwd" @click="router.push('/register')">没有密码吗？</div>
<button class="module_button" :disabled="state.loading" @click="onLogin">登录</button> <button class="module_button" :disabled="state.loading" @click="onLogin">登录</button>
</div> </div>
</div> </div>
@ -30,63 +39,76 @@
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router"; import { useRouter } from 'vue-router'
import { loginAdmin } from '~/api/user/adminUserApi' import { loginAdmin } from '~/api/user/adminUserApi'
import { getUuid } from '~/utils/utils' import { getUuid } from '~/utils/utils'
const router = useRouter(); import { loginFront } from '~/api/user/frontUserApi'
const router = useRouter()
const state = reactive({ const state = reactive({
role: false,
captchaUrl: '', captchaUrl: '',
loginFrom: {}, loginFrom: {},
loading: false, loading: false
}) })
const login = reactive({ username: 'admin', password: 'admin', captcha: '', uuid: '' }) const login = reactive({ username: 'admin', password: 'admin', captcha: '', uuid: '' })
const onLogin = () => { const onLogin = () => {
state.loading = true; state.loading = true
loginAdmin(login).then(response =>{ if (state.role) {
state.loading = false; console.log("管理员")
ElMessage.success("登录成功"); loginAdmin(login).then(response => {
userStore().isLogin = true state.loading = false
userStore().adminToken = response.data.token ElMessage.success('登录成功')
router.push("/") userStore().isLogin = true
}).catch(()=>{ userStore().adminToken = response.data.token
state.loading = false; router.push('/admin')
onRefreshCode() }).catch(() => {
}) state.loading = false
onRefreshCode()
})
} else {
loginFront(login)
toast.success("登录成功~")
router.push('/front')
}
} }
/** /**
* 获取验证码 * 获取验证码
*/ */
const getCaptchaUrl = () => { const getCaptchaUrl = () => {
login.uuid = getUuid() login.uuid = getUuid()
login.captcha = "" login.captcha = ''
state.captchaUrl = import.meta.env.VITE_ADMIN_API_BASE_URL + `/captcha?uuid=${login.uuid}` state.captchaUrl = import.meta.env.VITE_ADMIN_API_BASE_URL + `/captcha?uuid=${login.uuid}`
}; }
const onRefreshCode = () => { const onRefreshCode = () => {
getCaptchaUrl(); getCaptchaUrl()
}; }
onMounted(()=>{ onMounted(() => {
getCaptchaUrl(); getCaptchaUrl()
}) })
</script> </script>
<style scoped> <style scoped>
.login-container{ .login-container {
width: 100%; width: 100%;
height: 100vh; height: 100vh;
background: #FFFFFF; background: #FFFFFF;
} }
.module{
.module {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
height: 100vh; height: 100vh;
} }
.module_img{
.module_img {
width: 60%; width: 60%;
height: auto; height: auto;
} }
.module_r{
.module_r {
width: 40%; width: 40%;
background: #e5efee; background: #e5efee;
height: 100vh; height: 100vh;
@ -94,7 +116,7 @@ onMounted(()=>{
align-items: center; align-items: center;
justify-content: center; justify-content: center;
.module_mian{ .module_mian {
width: 65%; width: 65%;
background: #FFFFFF; background: #FFFFFF;
height: auto; height: auto;
@ -102,51 +124,59 @@ onMounted(()=>{
overflow: hidden; overflow: hidden;
padding-top: 40px; padding-top: 40px;
padding-bottom: 40px; padding-bottom: 40px;
.module_title{
.module_title {
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
text-align: center; text-align: center;
color:#333333; color: #333333;
} }
.module_desc{
.module_desc {
font-size: 12px; font-size: 12px;
text-align: center; text-align: center;
color:#a7a7a7; color: #a7a7a7;
margin-bottom: 20px; margin-bottom: 20px;
} }
.module_m{
.module_m {
margin: 0 auto; margin: 0 auto;
width: 80%; width: 80%;
height: auto; height: auto;
margin-top: 10px; margin-top: 10px;
.module_text{
.module_text {
font-size: 14px; font-size: 14px;
color: #333333; color: #333333;
margin-bottom: 5px; margin-bottom: 5px;
} }
.module_input{
.module_input {
width: 96%; width: 96%;
height: 40px; height: 40px;
padding-left: 2%; padding-left: 2%;
padding-right: 2%; padding-right: 2%;
border:1px solid #eee; border: 1px solid #eee;
border-radius: 5px; border-radius: 5px;
font-size: 12px; font-size: 12px;
} }
.module_code{
.module_code {
width: 96%; width: 96%;
display: flex; display: flex;
align-items: center; align-items: center;
.module_code_input{
.module_code_input {
width: 60%; width: 60%;
height: 40px; height: 40px;
border-radius: 5px; border-radius: 5px;
border:1px solid #eee; border: 1px solid #eee;
font-size: 12px; font-size: 12px;
padding-left: 2%; padding-left: 2%;
padding-right: 2%; padding-right: 2%;
} }
.module_code_img{
.module_code_img {
width: 130px; width: 130px;
height: 40px; height: 40px;
border-radius: 5px; border-radius: 5px;
@ -156,10 +186,11 @@ onMounted(()=>{
} }
} }
.module_radio input{ .module_radio input {
margin-right: 5px; margin-right: 5px;
} }
.forgetpwd{
.forgetpwd {
margin: 0 auto; margin: 0 auto;
width: 80%; width: 80%;
font-size: 14px; font-size: 14px;
@ -167,18 +198,21 @@ onMounted(()=>{
margin-top: 10px; margin-top: 10px;
cursor: pointer; cursor: pointer;
} }
.module_button{
.module_button {
margin: 0 auto; margin: 0 auto;
display: block; display: block;
width: 80%; width: 80%;
background:#328d86; background: #328d86;
color: #FFFFFF; color: #FFFFFF;
height: 40px; height: 40px;
margin-top: 20px; margin-top: 20px;
border-radius: 5px; border-radius: 5px;
font-weight: 500; font-weight: 500;
cursor: pointer;
} }
.module_button:active{
.module_button:active {
opacity: 0.4; opacity: 0.4;
} }
} }

26
src/pages/register.vue
View File

@ -5,16 +5,16 @@
<div class="module_desc">输入用户名 & 密码</div> <div class="module_desc">输入用户名 & 密码</div>
<div class="module_m"> <div class="module_m">
<div class="module_text">用户名</div> <div class="module_text">用户名</div>
<input class="module_input" type="text" placeholder="输入用户名" v-model="Email" /> <input class="module_input" type="text" placeholder="输入用户名" v-model="register.username" />
</div> </div>
<div class="module_m"> <div class="module_m">
<div class="module_text">密码</div> <div class="module_text">密码</div>
<input class="module_input" type="password" placeholder="输入密码" v-model="Password" /> <input class="module_input" type="password" placeholder="输入密码" v-model="register.password" />
</div> </div>
<div class="module_m"> <div class="module_m">
<div class="module_text">确认密码</div> <div class="module_text">确认密码</div>
<div class="module_code"> <div class="module_code">
<input class="module_input" type="password" placeholder="再次输入密码" v-model="Password" /> <input class="module_input" type="password" placeholder="再次输入密码" v-model="register.confirmPassword" />
</div> </div>
</div> </div>
<!-- <div class="module_m">--> <!-- <div class="module_m">-->
@ -26,15 +26,31 @@
<!-- </div>--> <!-- </div>-->
<!-- <div class="module_radio"><input type="radio"/>记住密码 </div>--> <!-- <div class="module_radio"><input type="radio"/>记住密码 </div>-->
<div class="forgetpwd" @click="router.push('/login')">有账号？</div> <div class="forgetpwd" @click="router.push('/login')">有账号？</div>
<button class="module_button">注册</button> <button class="module_button" @click="onRegister">注册</button>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useRouter } from "vue-router"; import { useRouter } from "vue-router";
import { registerFront } from '~/api/user/frontUserApi'
const router = useRouter(); const router = useRouter();
const register = reactive({
username: 'admin',
password: 'admin',
confirmPassword: 'admin',
captcha: '',
uuid: ''
})
/**
* 注册成功
*/
const onRegister = () => {
registerFront(register).then(() =>{
toast.success("注册成功~")
router.push("/login")
})
}
</script> </script>
<style scoped> <style scoped>
.module{ .module{

20
src/plugins/router.ts
View File

@ -1,6 +1,7 @@
import { setupLayouts } from 'virtual:meta-layouts' import { setupLayouts } from 'virtual:meta-layouts'
import { createRouter, createWebHistory } from 'vue-router' import { createRouter, createWebHistory } from 'vue-router'
import { routes as fileRoutes } from 'vue-router/auto-routes' import { routes as fileRoutes } from 'vue-router/auto-routes'
import { userInfoAdmin } from '~/api/user/adminUserApi'
declare module 'vue-router' {} declare module 'vue-router' {}
// 重定向 BASE_URL // 重定向 BASE_URL
@ -13,6 +14,25 @@ export const router = createRouter({
}) })
// 路由拦截 // 路由拦截
router.beforeEach((to, from, next) => { router.beforeEach((to, from, next) => {
if (to.fullPath.includes("/front")){
console.log(to.fullPath)
console.log(to)
}
// 管理员全部限制
else if (to.fullPath.includes("/admin")){
console.log("管理员认证~")
// 判断有没有登录
if (userStore().adminToken === null || userStore().adminToken === undefined ||userStore().adminToken == ""){
next('/login');
}else {
// 获取用户信息
userInfoAdmin().then(response => {
userStore().adminUserInfo = response.data
})
}
}
// 在这里编写拦截逻辑 // 在这里编写拦截逻辑
// 例如，检查用户是否认证 // 例如，检查用户是否认证
const isLogin = userStore().isLogin const isLogin = userStore().isLogin

11
src/stores/userStore.ts
View File

@ -6,15 +6,8 @@ export default defineStore('userStore', {
isLogin: true, isLogin: true,
adminToken: "", adminToken: "",
frontToken: "", frontToken: "",
adminUserInfo:{ adminUserInfo:{},
id: 0, frontUserInfo:{}
username: "18796357645",
email: "",
avatar: "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png",
role: "",
createTime: 0,
updateTime: 0,
}
} }
}, },
actions: { actions: {