Skip to content

H
horse
Commit 718837fb authored by 罗超's avatar 罗超
Browse files
Options

1

parent 095fa2e3
Show whitespace changes
Inline Side-by-side
Showing with 285 additions and 171 deletions
quasar.conf.js
View file @ 718837fb
......@@ -61,7 +61,7 @@ module.exports = configure(function (ctx) {
env: ctx.dev
? {
BASE_APP_API: 'http://192.168.20.51:8088/api'
BASE_APP_API: 'http://192.168.10.9:8085/api'
}
: {
BASE_APP_API: 'https://eduapi.oytour.com/api'
......
src/api/axios.ts
View file @ 718837fb
......@@ -74,6 +74,7 @@ const service = Axios.create({
*/
service.interceptors.request.use(
async (config: AxiosRequestConfig) => {
console.log(config)
// 如果是获取token接口：
if (config.url === '/auth/oauth/token') {
//TODO:用户登录的特殊处理，
......
src/api/user.ts
View file @ 718837fb
......@@ -17,9 +17,9 @@ interface HttpParams {
* @property {string} password -用户密码
*/
interface LoginParams {
grant_type: string
username: string
password: string
grant_type?: string
Account: string
Password: string
}
/**
......@@ -89,22 +89,22 @@ export interface UserApi {
class UserService {
// 登录
static async login(params: LoginParams): Promise<HttpResponse> {
return Axios('/auth/oauth/token', {
static async login(data: LoginParams): Promise<HttpResponse> {
return Axios('/login/login', {
method: 'post',
responseType: 'json',
params: params
data
})
}
// 刷新令牌
static async refreshToken(params: RefreshTokenParams): Promise<HttpResponse> {
static async refreshToken(data: RefreshTokenParams): Promise<HttpResponse> {
return Axios('/auth/oauth/token', {
method: 'post',
responseType: 'json',
params: {
data: {
grant_type: 'refresh_token',
...params
...data
}
})
}
......@@ -126,47 +126,47 @@ class UserService {
}
// 发送邮箱验证码
static sendEmailCode(params: SendEmailCodeParams): Promise<HttpResponse> {
static sendEmailCode(data: SendEmailCodeParams): Promise<HttpResponse> {
return Axios('/bus/common/sendEmailCode', {
method: 'get',
responseType: 'json',
params
data
})
}
// 验证邮箱验证码
static verifyEmailCode(params: VerifyEmailCodeParams): Promise<HttpResponse> {
static verifyEmailCode(data: VerifyEmailCodeParams): Promise<HttpResponse> {
return Axios('/bus/common/verifyEmailCode', {
method: 'post',
responseType: 'json',
params
data
})
}
// 发送手机验证码
static sendPhoneCode(params: SendPhoneCodeParams): Promise<HttpResponse> {
static sendPhoneCode(data: SendPhoneCodeParams): Promise<HttpResponse> {
return Axios('/bus/common/sendPhoneCode', {
method: 'get',
responseType: 'json',
params
data
})
}
// 绑定手机
static bindPhone(params: BindPhoneParams): Promise<HttpResponse> {
static bindPhone(data: BindPhoneParams): Promise<HttpResponse> {
return Axios('/bus/user/bindingPhone', {
method: 'post',
responseType: 'json',
params
data
})
}
// 注册
static register(params: RegisterParams): Promise<HttpResponse> {
static register(data: RegisterParams): Promise<HttpResponse> {
return Axios('/bus/user/register', {
method: 'post',
responseType: 'json',
data: params
data
})
}
}
......
src/boot/axios.ts
View file @ 718837fb
import { boot } from 'quasar/wrappers'
import axios, { AxiosInstance } from 'axios'
import 'element-plus/dist/index.css'
declare module '@vue/runtime-core' {
interface ComponentCustomProperties {
$axios: AxiosInstance
......@@ -17,7 +17,6 @@ const api = axios.create({ baseURL: 'https://api.example.com' })
export default boot(({ app }) => {
// for use inside Vue files (Options API) through this.$axios and this.$api
app.config.globalProperties.$axios = axios
// ^ ^ ^ this will allow you to use this.$axios (for Vue Options API form)
// so you won't necessarily have to import axios in each vue file
......
src/module/user/loginModule.ts
View file @ 718837fb
import { ResultType } from '@/@types/enumHelper'
import router from '@/router'
import { UserActionsType } from '@/store/modules/user/actions'
import { UserGetter } from '@/store/modules/user/getters'
import { dispatchAction, getStoreGetter, setStoreState } from '@/store/utils'
// import { ResultType } from '@/@types/enumHelper'
// import router from '@/router'
// import { UserActionsType } from '@/store/modules/user/actions'
// import { UserGetter } from '@/store/modules/user/getters'
// import { dispatchAction, getStoreGetter, setStoreState } from '@/store/utils'
import message from '@/utils/message'
import { reactive, ref } from 'vue'
import UserService from '@/api/user'
interface LoginParams {
username: string
password: string
......@@ -40,38 +41,43 @@ const userUserLoginModule = () => {
stateManager.subLogin = false
} else {
setTimeout(() => {
setTimeout(async () => {
//#region 测试使用
const param = {
username: userModel.username,
password: userModel.password
Account: userModel.username,
Password: userModel.password
}
dispatchAction<UserActionsType>('user', 'userLogin', param)
// dispatchAction<UserActionsType>('user', 'userLogin', param)
const menu:any = {
menuId: 1,
menuName: '首页',
menuUrl: '/index'
}
const menu2:any = {
menuId: 2,
menuName: '首页',
menuUrl: '/'
}
const menus: Array<any> = []
const auths = getStoreGetter<UserGetter>('user', 'getUserAllAuth')
if (auths != ResultType.EmptyArray) {
Object.assign(menus, ...auths)
}
menus.push(menu)
menus.push(menu2)
setStoreState('user', 'menuList', menus)
message.successMsg('登录成功')
stateManager.subLogin = false
router.push({
path: '/index'
// const menu:any = {
// menuId: 1,
// menuName: '首页',
// menuUrl: '/index'
// }
// const menu2:any = {
// menuId: 2,
// menuName: '首页',
// menuUrl: '/'
// }
// const menus: Array<any> = []
// const auths = getStoreGetter<UserGetter>('user', 'getUserAllAuth')
// if (auths != ResultType.EmptyArray) {
// Object.assign(menus, ...auths)
// }
// menus.push(menu)
// menus.push(menu2)
//-------------
UserService.login(param).then(res => {
console.log(72, res)
})
// setStoreState('user', 'menuList', menus)
// message.successMsg('登录成功')
// stateManager.subLogin = false
// router.push({
// path: '/index'
// })
//#endregion
}, 2000)
}
......
src/pages/auth/login.vue
View file @ 718837fb
<template>
<div class="row">
<div class="col window-height column">
<div class="row login-bg">
<!-- <div class="col window-height column">
<div class="col q-pa-lg flex justify-center items-center">
<div class="relative-position">
<img src="../../assets/images/big-logo.png" style="height: 60px" class="q-mb-lg" alt="" />
......@@ -11,9 +11,9 @@
</div>
</div>
</div>
<div class="col q-mb-lg login-bg"></div>
</div>
<div class="col q-pa-xl column">
<div class="col q-mb-lg login-bg1"></div>
</div> -->
<!-- <div class="col q-pa-xl column">
<div class="col">
<q-card class="w-450 q-ma-xl q-pa-xl">
<div class="text-h5 pfb q-mb-md text-center">登录大水豚</div>
......@@ -42,49 +42,157 @@
</div>
</q-card>
</div>
<div class="q-my-lg q-mx-xl text-center row w-450-only">
</div> -->
<div class="login-box">
<div class="login-box-desc"></div>
<div class="login-box-form">
<div class="form-title">登录</div>
<div class="form-content">
<q-input standout v-model="userModel.username" dense ref="usernameRef" label="账号"
:rules="userValidateRule.usernameRule" />
<q-input standout v-model="userModel.password" type="password" dense ref="passwordRef" label="密码"
:rules="userValidateRule.userpasswordRule" />
<q-btn color="primary" label="登录" class="login-btn" @click="loginSubmit" />
</div>
</div>
</div>
<div class="q-my-lg q-mx-xl text-center row w-450-only right-copy">
<div class="f12 text-dark">© 2021-{{ dtNow }} 微途科技 版权所有</div>
<div class="text-center col text-right">
<router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">关于大水豚</router-link>
<router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">关于大水豚
</router-link>
<router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">联系我们</router-link>
<router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">技术支持</router-link>
</div>
<router-link :to="{ path: '/auth/forget' }" class="f12 no-underline change-a-primary q-mr-md">技术支持
</router-link>
</div>
</div>
</div>
</template>
<script>
import { defineComponent } from 'vue'
import useLgoinModule from '@/module/user/loginModule'
import useMetaModule from '@/module/meta/metaModule'
import {
defineComponent
} from 'vue'
import useLgoinModule from '@/module/user/loginModule'
import useMetaModule from '@/module/meta/metaModule'
export default defineComponent({
components: {
export default defineComponent({
},
setup() {
//TODO: 缺陷，验证与提交应该使用Form表单来完成，不应该进行单个验证
let { userModel, usernameRef, passwordRef, userValidateRule, loginSubmit, stateManager } = useLgoinModule()
let { setTitle } = useMetaModule()
let {
userModel,
usernameRef,
passwordRef,
userValidateRule,
loginSubmit,
stateManager
} = useLgoinModule()
let {
setTitle
} = useMetaModule()
setTitle('登录')
const dtNow = new Date().getFullYear()
return { userModel, usernameRef, passwordRef, userValidateRule, loginSubmit, dtNow, stateManager }
return {
userModel,
usernameRef,
passwordRef,
userValidateRule,
loginSubmit,
dtNow,
stateManager
}
}
})
})
</script>
<style>
.login-bg {
background-image: url(../../assets/images/8.png);
background-position-x: center;
background-position-y: bottom;
<style lang="scss" scoped>
.login-bg {
min-height: 100vh;
background-image: url(../../assets/images/login-bg.jpeg);
background-position-x: 50%;
background-position-y: center;
background-repeat: no-repeat;
background-size: contain;
}
.w-450 {
background-size: cover;
position: relative;
.login-box {
height: 440px;
display: flex;
box-shadow: 0 0 15px 0 rgb(0 66 255 / 9%);
border-radius: 15px;
overflow: hidden;
background-color: #fff;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
.login-box-desc {
position: relative;
width: 375px;
height: 100%;
background: url(../../assets/images/8.png) no-repeat 50%;
background-size: 100%;
text-align: center;
}
.login-box-form {
position: relative;
height: 100%;
width: 366px;
.form-title {
width: 252px;
margin: 60px auto 50px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #e7e7e7;
position: relative;
text-align: center;
position: relative;
font-size: 20px;
font-weight: 600;
color: #000;
line-height: 28px;
padding-bottom: 11px;
cursor: pointer;
}
.form-content {
width: 237px;
text-align: center;
margin: 0 auto;
.login-btn {
width: 100%;
margin-top: 15px;
}
}
}
}
}
.right-copy{
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
text-align: center;
}
.w-450 {
width: 450px;
box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.075) !important;
border-radius: 0.475rem !important;
}
.w-450-only {
}
.w-450-only {
width: 450px;
}
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment