diff --git a/mock/tools.ts b/mock/tools.ts index 579606e..2670e74 100644 --- a/mock/tools.ts +++ b/mock/tools.ts @@ -124,8 +124,8 @@ function getTools() { logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/icon_%E7%BC%96%E7%A0%81%E5%AF%B9%E7%85%A7.png', desc: 'ASCII码表,控制代码、标准ASCII字符和非标准ASCII字符对照表', url: '/ascii', - cateId: 2, - cate: '开发运维' + cateId: 4, + cate: '教育学术' }, { id: 1, @@ -214,8 +214,8 @@ function getTools() { logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/text_to_img.png', desc: '把文本转换成图片，生成长图，具有超多个性文字排版', url: '/textToImg', - cateId: 3, - cate: '文本处理' + cateId: 5, + cate: '设计工具' } ] } @@ -255,16 +255,6 @@ function getToolsCate() { cateId: 2, cate: '开发运维', }, - - { - id: 1, - title: 'ASCII码表', - logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/icon_%E7%BC%96%E7%A0%81%E5%AF%B9%E7%85%A7.png', - desc: 'ASCII码表,控制代码、标准ASCII字符和非标准ASCII字符对照表', - url: '/ascii', - cateId: 2, - cate: '开发运维' - }, { id: 1, title: '时间戳转换', @@ -335,15 +325,6 @@ function getToolsCate() { cateId: 3, cate: '文本处理' }, - { - id: 1, - title: '文本转图片', - logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/text_to_img.png', - desc: '把文本转换成图片，生成长图，具有超多个性文字排版', - url: '/textToImg', - cateId: 3, - cate: '文本处理' - }, { id: 1, title: '摩斯电码', @@ -386,7 +367,16 @@ function getToolsCate() { url: '/scaletran', cateId: 4, cate: '教育学术', - } + }, + { + id: 1, + title: 'ASCII码表', + logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/icon_%E7%BC%96%E7%A0%81%E5%AF%B9%E7%85%A7.png', + desc: 'ASCII码表,控制代码、标准ASCII字符和非标准ASCII字符对照表', + url: '/ascii', + cateId: 4, + cate: '教育学术' + }, ] }, { @@ -420,6 +410,15 @@ function getToolsCate() { url: '/signimage', cateId: 5, cate: '设计工具', + }, + { + id: 1, + title: '文本转图片', + logo: 'https://baseran2.oss-cn-shenzhen.aliyuncs.com/toools-web/icon/text_to_img.png', + desc: '把文本转换成图片，生成长图，具有超多个性文字排版', + url: '/textToImg', + cateId: 5, + cate: '设计工具' } ] }, diff --git a/src/api/tools/index.ts b/src/api/tools/index.ts index 6a43f47..63f14bc 100644 --- a/src/api/tools/index.ts +++ b/src/api/tools/index.ts @@ -5,11 +5,13 @@ import type { ToolsReqData, ToolsResponseData, ToolCateResponseData, - ToolRecommendResponseData + ToolRecommendResponseData, + ToolCollectResponseData, + CollectReqData, + GetToolCollectResponseData } from './type' //项目用户相关的请求地址 - enum API { //获取tools GET_TOOLS = '/tools', @@ -17,6 +19,10 @@ enum API { GET_TOOL_CATES = '/tool/cates', //获取推荐 GET_TOOL_RECOMMEND = '/tool/recommends', + //收藏工具 + COLLECT = '/tool/collects', + //我的收藏 + GET_TOOL_COLLECTS = '/get/tool/collects', } //获取tools export const getTools = (data: ToolsReqData) => request.get(API.GET_TOOLS, { @@ -25,4 +31,8 @@ export const getTools = (data: ToolsReqData) => request.get request.get(API.GET_TOOL_CATES) //获取推荐 -export const getToolRecommend = () => request.get(API.GET_TOOL_RECOMMEND) \ No newline at end of file +export const getToolRecommend = () => request.get(API.GET_TOOL_RECOMMEND) +//收藏工具 +export const toolCollect = (data: CollectReqData) => request.post(API.COLLECT + '/' + data.toolId) +//我的收藏 +export const getToolCollect = () => request.get(API.GET_TOOL_COLLECTS) \ No newline at end of file diff --git a/src/api/tools/type.ts b/src/api/tools/type.ts index 75536d1..4dce600 100644 --- a/src/api/tools/type.ts +++ b/src/api/tools/type.ts @@ -2,7 +2,8 @@ import { ResponseData } from "../common" export interface ToolsReqData { cateId: number, - title: string + title: string, + route: string, } //tools @@ -26,6 +27,10 @@ export interface ToolCate { list: ToolsInfo[] } +export interface CollectReqData { + toolId: number +} + //tools list response export interface ToolsResponseData extends ResponseData { data: ToolsInfo[] @@ -41,4 +46,12 @@ export interface ToolRecommendResponseData extends ResponseData { data: ToolsInfo[] } +//tools collect response +export interface ToolCollectResponseData extends ResponseData { +} + +//get collect response +export interface GetToolCollectResponseData extends ResponseData { + +} \ No newline at end of file diff --git a/src/api/user/index.ts b/src/api/user/index.ts new file mode 100644 index 0000000..38d2990 --- /dev/null +++ b/src/api/user/index.ts @@ -0,0 +1,53 @@ +import request from '@/utils/request' + +import type { + LoginReqData, + LoginResponseData, + LogoutResponseData, + RegisterReqData, + RegisterResponseData, + SendCodeEmailResponseData, + sendCodeEmailReq, + UserInfoResponseData, + ForgetReqData, + ForgetResponseData +} from './type' + +//项目用户相关的请求地址 +enum API { + //login + LOGIN = '/login', + //logout + LOGOUT = '/logout', + //register + REGISTER = '/register', + //forget + FORGET = '/forget/password', + //注册 - 发送邮箱验证码 + SEND_CODE_EMAIL = '/send/register/code', + //忘记密码 - 发送邮箱验证码 + SEND_FORGET_CODE_EMAIL = '/send/forget/password/code', + //获取用户信息 + USER_INFO = '/user/info' +} + +//login +export const login = (data: LoginReqData) => request.post(API.LOGIN, data) + +//logout +export const logout = () => request.post(API.LOGOUT) + +//register +export const register = (data: RegisterReqData) => request.post(API.REGISTER, data) + +//forget +export const forget = (data: ForgetReqData) => request.post(API.FORGET, data) + +//register - send code +export const sendCodeEmail = (data: sendCodeEmailReq) => request.post(API.SEND_CODE_EMAIL, data) + +//forget - send code +export const sendForgetCodeEmail = (data: sendCodeEmailReq) => request.post(API.SEND_FORGET_CODE_EMAIL, data) + +//获取用户信息 +export const userInfo = () => request.get(API.USER_INFO) \ No newline at end of file diff --git a/src/api/user/type.ts b/src/api/user/type.ts new file mode 100644 index 0000000..4596e82 --- /dev/null +++ b/src/api/user/type.ts @@ -0,0 +1,49 @@ +import { ResponseData } from "../common" + +export interface LoginReqData { + email: string, + password: string +} + +export interface RegisterReqData { + email: string, + code: string, + password: string, + password_confirmation: string +} + +export interface ForgetReqData { + email: string, + code: string, + password: string, + password_confirmation: string +} + +export interface sendCodeEmailReq { + email: string +} + +export interface LoginResponseData extends ResponseData { + +} + +export interface LogoutResponseData extends ResponseData { + +} + +export interface RegisterResponseData extends ResponseData { + +} + +export interface ForgetResponseData extends ResponseData { + +} + +export interface SendCodeEmailResponseData extends ResponseData { + +} + +export interface UserInfoResponseData extends ResponseData { + +} + diff --git a/src/assets/default_avatar.png b/src/assets/default_avatar.png new file mode 100644 index 0000000..de2cd76 Binary files /dev/null and b/src/assets/default_avatar.png differ diff --git a/src/components/Home/About.vue b/src/components/Home/About.vue index 7ccd7a3..12376f4 100644 --- a/src/components/Home/About.vue +++ b/src/components/Home/About.vue @@ -15,7 +15,7 @@

-

本项目是一个开源工具站

+

本项目是一个开源工具站, 求星星


本项目开源地址：https://github.com/taoran1401/tools-web


diff --git a/src/components/Home/Home.vue b/src/components/Home/Home.vue index 8d0d322..b02507b 100644 --- a/src/components/Home/Home.vue +++ b/src/components/Home/Home.vue @@ -1,22 +1,45 @@ diff --git a/src/components/Layout/Login/Login.vue b/src/components/Layout/Login/Login.vue new file mode 100644 index 0000000..061bf63 --- /dev/null +++ b/src/components/Layout/Login/Login.vue @@ -0,0 +1,406 @@ + + + + + \ No newline at end of file diff --git a/src/store/modules/tools.ts b/src/store/modules/tools.ts index f28c2f3..b0b9144 100644 --- a/src/store/modules/tools.ts +++ b/src/store/modules/tools.ts @@ -1,18 +1,21 @@ //创建tools相关的小工具 import { defineStore } from 'pinia' -import { getTools, getToolCate, getToolRecommend} from '@/api/tools' +import { getTools, getToolCate, getToolRecommend, toolCollect, getToolCollect } from '@/api/tools' import { getIp } from '@/api/ip' -import type { ToolsReqData, ToolsInfo, ToolCate } from '@/api/tools/type' +import type { ToolsReqData, ToolsInfo, ToolCate, CollectReqData } from '@/api/tools/type' import type { IpReqData, IpInfo } from '@/api/ip/type' +import { useUserStore } from '@/store/modules/user' export const useToolsStore = defineStore('tools', { //用来存放变量 state: () => ({ list: [] as ToolsInfo[], + toolInfo: {} as ToolsInfo, cates: [] as ToolCate[], recommends: [] as ToolsInfo[], ipData: {} as IpInfo, - collect: [], + collect: [] as ToolsInfo[], + collectIds: [] as number[], }), //方法 actions: { @@ -27,6 +30,17 @@ export const useToolsStore = defineStore('tools', { return Promise.reject(new Error(result.message)) } }, + //获取tool info + async getToolInfo(data: ToolsReqData) { + //发送请求 + const result: any = await getTools(data) + if (result.code == 200) { + this.toolInfo = result.data[0] + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, //获取tools cate async getToolCate() { //发送请求 @@ -57,6 +71,37 @@ export const useToolsStore = defineStore('tools', { } else { return Promise.reject(new Error(result.message)) } + }, + //收藏工具 + async toolCollect(data: CollectReqData) { + if (!useUserStore().isLogin()) { + //未登录 + return + } + const result: any = await toolCollect(data) + if (result.code == 200) { + //收藏成功 + this.getCollect(); + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, + //我的收藏 + async getCollect() { + if (!useUserStore().isLogin()) { + //未登录 + return + } + const result: any = await getToolCollect() + if (result.code == 200) { + this.collect = result.data + this.collectIds = this.collect.map(item => item.id) + console.log(this.collectIds) + return result.message + } else { + return Promise.reject(new Error(result.message)) + } } } }) \ No newline at end of file diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts new file mode 100644 index 0000000..f259d52 --- /dev/null +++ b/src/store/modules/user.ts @@ -0,0 +1,105 @@ +import { defineStore } from 'pinia' +import { login, register, sendCodeEmail, userInfo, logout, sendForgetCodeEmail, forget} from '@/api/user' +import type { LoginReqData, LoginResponseData, RegisterReqData, RegisterResponseData, SendCodeEmailResponseData, sendCodeEmailReq, ForgetReqData } from '@/api/user/type' +export const useUserStore = defineStore('user', { + //用来存放变量 + state: () => ({ + token: localStorage.getItem('TOKEN'),//token + username: '', + avatar: '', + email: '', + }), + //方法 + actions: { + //获取登录状态 + isLogin() { + let flag = false; + if (this.token != null && this.token != undefined && this.token != '') { + flag = true; + } + return flag; + }, + //login + async login(data: LoginReqData) { + //发送请求 + const result: any = await login(data) + if (result.code == 200) { + //仓库存储token + this.token = result.data.token + //本地存储token + localStorage.setItem('TOKEN', result.data.token) + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, + //logout + async logout() { + //发送请求 + const result: any = await logout() + if (result.code == 200) { + //本地存储token + localStorage.setItem('TOKEN', '') + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, + //register + async register(data: RegisterReqData) { + //发送请求 + const result: any = await register(data) + if (result.code == 200) { + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, + //forget + async forget(data: ForgetReqData) { + //发送请求 + const result: any = await forget(data) + if (result.code == 200) { + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, + //register - send code email + async sendCodeEmail(data: sendCodeEmailReq) { + //发送请求 + const result: any = await sendCodeEmail(data) + if (result.code == 200) { + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, + //forget - send code email + async sendForgetCodeEmail(data: sendCodeEmailReq) { + //发送请求 + const result: any = await sendForgetCodeEmail(data) + if (result.code == 200) { + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + }, + //获取用户信息 + async userInfo() { + if (this.token?.length == 0) { + return + } + //发送请求 + const result: any = await userInfo() + if (result.code == 200) { + this.username = result.data.nick_name + this.avatar = result.data.avatar + this.email = result.data.email + return result.message + } else { + return Promise.reject(new Error(result.message)) + } + } + } +}) \ No newline at end of file diff --git a/src/utils/request.ts b/src/utils/request.ts index 4cc367f..ce67a4c 100644 --- a/src/utils/request.ts +++ b/src/utils/request.ts @@ -1,5 +1,9 @@ import axios from "axios"; import { ElMessage } from "element-plus"; +import { useUserStore } from '@/store/modules/user' +//store +import pinia from '../store' //这里需要引入pinia +const userStore = useUserStore(pinia) //创建axios实例 let request = axios.create({ baseURL: import.meta.env.VITE_IS_MOCK == 'true' ? import.meta.env.VITE_APP_BASE_API : import.meta.env.VITE_SERVE + import.meta.env.VITE_APP_BASE_API, @@ -7,10 +11,20 @@ let request = axios.create({ }) //请求拦截器 request.interceptors.request.use(config => { + //获取token + if (userStore.token) { + // config.headers.token = userStore.token + config.headers.Authorization = 'Bearer ' + userStore.token + } return config; }); //响应拦截器 request.interceptors.response.use((response) => { + if (response.data.code == 401) { + //登录过期 + localStorage.setItem('TOKEN', '') + location.reload() + } return response.data; }, (error) => { //处理网络错误 @@ -18,7 +32,8 @@ request.interceptors.response.use((response) => { let status = error.response.status; switch (status) { case 401: - msg = "token过期"; + //msg = "token过期"; + msg = "登录过期"; break; case 403: msg = '无权访问';