[
{
"path": ".gitignore",
"content": "# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-debug.log*\nlerna-debug.log*\n\nnode_modules\ndist\ndist-ssr\n*.local\n\n# Editor directories and files\n.vscode/*\n!.vscode/extensions.json\n.idea\n.DS_Store\n*.suo\n*.ntvs*\n*.njsproj\n*.sln\n*.sw?\nu.sh"
},
{
"path": "LICENSE",
"content": "MIT License\n\nCopyright (c) 2022 是大赵同学鸭\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\nof this software and associated documentation files (the \"Software\"), to deal\nin the Software without restriction, including without limitation the rights\nto use, copy, modify, merge, publish, distribute, sublicense, and/or sell\ncopies of the Software, and to permit persons to whom the Software is\nfurnished to do so, subject to the following conditions:\n\nThe above copyright notice and this permission notice shall be included in all\ncopies or substantial portions of the Software.\n\nTHE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR\nIMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,\nFITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE\nAUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER\nLIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,\nOUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE\nSOFTWARE.\n"
},
{
"path": "README.md",
"content": "
\n\n\n\n### 项目简介：\n\n`Vue3` + `ElementPlus` + `Vite`实战开发商城后台管理系统。\n\n### 功能简介：\n\n用户多权限管理、商品多规格实现、订单发货、导出订单、图库模块、分销模块、分享海报等。\n\n### 采用技术\n\n- `Vue3.2 + Vue-router4 + Vuex4 + Vite2 + Vueuse`\n- `ElementPlus`\n- `Naive-ui`\n- `Windicss`\n\n### 使用简介\n\n#### 安装依赖\n\n```bash\nyarn or yarn install \n```\n\n#### 项目运行\n\n```bash\nyarn dev\n```\n\n#### 项目打包\n\n```bash\nyarn build\n```\n\n### 项目效果\n\n\n\n\n\n\n\n### \n\n\n\n### 其他\n\n感谢楚绵 （靓仔）的精品课程，受益匪浅。\n\n如果项目大家觉得比较好，请留一个🌟。\n"
},
{
"path": "index.html",
"content": "\n\n \n Vue3 编程商城后台 \n \n \n
\n \n \n\n"
},
{
"path": "package.json",
"content": "{\n \"name\": \"shop-admin\",\n \"private\": true,\n \"version\": \"0.0.0\",\n \"scripts\": {\n \"dev\": \"vite\",\n \"build\": \"vite build\",\n \"preview\": \"vite preview\"\n },\n \"dependencies\": {\n \"@element-plus/icons-vue\": \"^1.1.4\",\n \"@vueuse/core\": \"^9.3.0\",\n \"@vueuse/integrations\": \"^8.4.1\",\n \"axios\": \"^0.27.2\",\n \"element-plus\": \"^2.1.11\",\n \"jquery\": \"2.2.0\",\n \"nprogress\": \"^0.2.0\",\n \"universal-cookie\": \"^4.0.4\",\n \"vue\": \"^3.2.25\",\n \"vue-router\": \"^4.0.15\",\n \"vuex\": \"^4.0.2\"\n },\n \"devDependencies\": {\n \"@vitejs/plugin-vue\": \"^2.3.1\",\n \"naive-ui\": \"^2.33.3\",\n \"vite\": \"^2.9.7\",\n \"vite-plugin-windicss\": \"^1.8.4\",\n \"windicss\": \"^3.5.1\"\n }\n}\n"
},
{
"path": "src/App.vue",
"content": "\n\n\n \n\n\n"
},
{
"path": "src/api/manager.js",
"content": "import axios from '~/axios'\n\nexport function login(username,password){\n return axios.post(\"/admin/login\",{\n username,\n password\n })\n}\n\nexport function getinfo(){\n return axios.post(\"/admin/getinfo\")\n}\n\nexport function logout(){\n return axios.post(\"/admin/logout\")\n}\n\nexport function updatepassword(data){\n return axios.post(\"/admin/updatepassword\",data)\n}"
},
{
"path": "src/axios.js",
"content": "import axios from \"axios\"\nimport { toast } from '~/composables/util'\nimport { getToken } from '~/composables/auth'\nimport store from \"./store\"\n\nconst service = axios.create({\n baseURL:\"/api\"\n})\n\n// 添加请求拦截器\nservice.interceptors.request.use(function (config) {\n\n // 往header头自动添加token\n const token = getToken()\n if(token){\n config.headers[\"token\"] = token\n }\n\n return config;\n }, function (error) {\n // 对请求错误做些什么\n return Promise.reject(error);\n });\n\n// 添加响应拦截器\nservice.interceptors.response.use(function (response) {\n // 对响应数据做点什么\n return response.data.data;\n }, function (error) {\n const msg = error.response.data.msg || \"请求失败\"\n \n if(msg == \"非法token，请先登录！\"){\n store.dispatch(\"logout\").finally(()=>location.reload())\n }\n\n toast(msg,\"error\")\n\n return Promise.reject(error);\n })\n\nexport default service"
},
{
"path": "src/components/FormDrawer.vue",
"content": "\n \n \n \n \n\n"
},
{
"path": "src/components/HelloWorld.vue",
"content": "\n\n\n {{ msg }} \n\n \n Recommended IDE setup:\n VS Code \n +\n Volar \n
\n\n \n \n Vite Documentation\n \n |\n Vue 3 Documentation \n
\n\n count is: {{ count }} \n \n Edit\n components/HelloWorld.vue to test hot module replacement.\n
\n \n\n\n"
},
{
"path": "src/composables/auth.js",
"content": "import { useCookies } from '@vueuse/integrations/useCookies'\nconst TokenKey = \"admin-token\"\nconst cookie = useCookies()\n\n// 获取token\nexport function getToken(){\n return cookie.get(TokenKey)\n}\n\n// 设置token\nexport function setToken(token){\n return cookie.set(TokenKey,token)\n}\n\n// 清除token\nexport function removeToken(){\n return cookie.remove(TokenKey)\n}"
},
{
"path": "src/composables/useManager.js",
"content": "import { ref, reactive } from 'vue'\nimport { logout, updatepassword } from \"~/api/manager\"\nimport { showModal, toast } from \"~/composables/util\"\nimport { useRouter } from \"vue-router\"\nimport { useStore } from \"vuex\"\n\nexport function useRepassword() {\n const router = useRouter()\n const store = useStore()\n // 修改密码\n const formDrawerRef = ref(null)\n const form = reactive({\n oldpassword: \"\",\n password: \"\",\n repassword: \"\"\n })\n\n const rules = {\n oldpassword: [\n {\n required: true,\n message: '旧密码不能为空',\n trigger: 'blur'\n },\n ],\n password: [\n {\n required: true,\n message: '新密码不能为空',\n trigger: 'blur'\n },\n ],\n repassword: [\n {\n required: true,\n message: '确认密码不能为空',\n trigger: 'blur'\n },\n ]\n }\n\n const formRef = ref(null)\n const onSubmit = () => {\n formRef.value.validate((valid) => {\n if (!valid) {\n return false\n }\n formDrawerRef.value.showLoading()\n updatepassword(form)\n .then(res => {\n toast(\"修改密码成功，请重新登录\")\n store.dispatch(\"logout\")\n // 跳转回登录页\n router.push(\"/login\")\n })\n .finally(() => {\n formDrawerRef.value.hideLoading()\n })\n\n })\n }\n\n const openRePasswordForm = () => formDrawerRef.value.open()\n\n return {\n formDrawerRef,\n form,\n rules,\n formRef,\n onSubmit,\n openRePasswordForm\n }\n}\n\nexport function useLogout() {\n const router = useRouter()\n const store = useStore()\n function handleLogout() {\n showModal(\"是否要退出登录？\").then(res => {\n logout().finally(() => {\n store.dispatch(\"logout\")\n // 跳转回登录页\n router.push(\"/login\")\n // 提示退出登录成功\n toast(\"退出登录成功\")\n })\n })\n }\n\n return {\n handleLogout\n }\n}"
},
{
"path": "src/composables/useTabList.js",
"content": "import { ref } from \"vue\";\nimport { useRoute, onBeforeRouteUpdate } from \"vue-router\";\nimport { useCookies } from \"@vueuse/integrations/useCookies\";\nimport { router } from \"~/router\";\n\nexport function useTabList() {\n const route = useRoute();\n const cookie = useCookies();\n\n const activeTab = ref(route.path);\n const tabList = ref([\n {\n title: \"后台首页\",\n path: \"/\",\n },\n ]);\n\n // 添加标签导航\n function addTab(tab) {\n let noTab = tabList.value.findIndex((t) => t.path == tab.path) == -1;\n if (noTab) {\n tabList.value.push(tab);\n }\n\n cookie.set(\"tabList\", tabList.value);\n }\n\n // 初始化标签导航列表\n function initTabList() {\n let tbs = cookie.get(\"tabList\");\n if (tbs) {\n tabList.value = tbs;\n }\n }\n\n initTabList();\n\n onBeforeRouteUpdate((to, from) => {\n activeTab.value = to.path;\n addTab({\n title: to.meta.title,\n path: to.path,\n });\n });\n\n const changeTab = (t) => {\n activeTab.value = t;\n router.push(t);\n };\n\n const removeTab = (t) => {\n let tabs = tabList.value;\n let a = activeTab.value;\n if (a == t) {\n tabs.forEach((tab, index) => {\n if (tab.path == t) {\n const nextTab = tabs[index + 1] || tabs[index - 1];\n if (nextTab) {\n a = nextTab.path;\n }\n }\n });\n }\n\n activeTab.value = a;\n tabList.value = tabList.value.filter((tab) => tab.path != t);\n\n cookie.set(\"tabList\", tabList.value);\n };\n\n //定时清除cookie\n const time = 2 * 60 * 60 * 1000;\n setInterval(() => {\n const key = cookie.get(\"tabList\");\n if (key) {\n cookie.remove(key);\n }\n }, time);\n\n const handleClose = (c) => {\n console.log(c);\n if (c == \"clearAll\") {\n activeTab.value = \"/\";\n tabList.value = [\n {\n title: \"后台首页\",\n path: \"/\",\n },\n ];\n } else if (c == \"clearOther\") {\n tabList.value = tabList.value.filter(\n (tab) => tab.path == \"/\" || tab.path == activeTab.value\n );\n }\n cookie.set(\"tabList\", tabList.value);\n };\n\n return {\n activeTab,\n tabList,\n changeTab,\n removeTab,\n handleClose,\n };\n}\n"
},
{
"path": "src/composables/util.js",
"content": "import { ElNotification,ElMessageBox } from 'element-plus'\nimport nprogress from 'nprogress'\n// 消息提示\nexport function toast(message,type = \"success\",dangerouslyUseHTMLString = false){\n ElNotification({\n message,\n type,\n dangerouslyUseHTMLString,\n duration:3000\n })\n}\n\n// 显示全屏loading\nexport function showFullLoading(){\n nprogress.start()\n}\n\n// 隐藏全屏loading\nexport function hideFullLoading(){\n nprogress.done()\n}\n\nexport function showModal(content = \"提示内容\",type = \"warning\",title = \"\"){\n return ElMessageBox.confirm(\n content,\n title,\n {\n confirmButtonText: '确认',\n cancelButtonText: '取消',\n type,\n }\n )\n}\n"
},
{
"path": "src/layouts/admin.vue",
"content": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n"
},
{
"path": "src/layouts/components/FHeader.vue",
"content": "\n \n\n \n \n \n \n \n \n \n \n \n \n\n \n\n"
},
{
"path": "src/layouts/components/FMenu.vue",
"content": "\n \n \n\n"
},
{
"path": "src/layouts/components/FTagList.vue",
"content": "\n \n\n
\n \n\n
\n \n \n \n \n \n \n \n 关闭其他 \n 全部关闭 \n \n \n \n \n
\n \n\n"
},
{
"path": "src/main.js",
"content": "import { createApp } from \"vue\";\nimport ElementPlus from \"element-plus\";\nimport \"element-plus/dist/index.css\";\nimport App from \"./App.vue\";\nimport { router } from \"./router\";\nimport store from \"./store\";\nimport * as ElementPlusIconsVue from \"@element-plus/icons-vue\";\nconst app = createApp(App);\napp.use(store);\napp.use(router);\n\napp.use(ElementPlus);\n\nfor (const [key, component] of Object.entries(ElementPlusIconsVue)) {\n app.component(key, component);\n}\nimport \"virtual:windi.css\";\n\nimport \"./permission\";\n\nimport \"nprogress/nprogress.css\";\n\napp.mount(\"#app\");\n"
},
{
"path": "src/pages/404.vue",
"content": "\n \n \n"
},
{
"path": "src/pages/category/list.vue",
"content": "\n \n 分类列表\n
\n \n\n\n"
},
{
"path": "src/pages/goods/list.vue",
"content": "\n \n 商品管理\n
\n "
},
{
"path": "src/pages/index.vue",
"content": "\n \n 后台首页 \n \n {{ $store.state.user.username }}\n
\n \n"
},
{
"path": "src/pages/login.vue",
"content": "\n \n \n \n
欢迎光临 🎓
\n
此站点是《vue3 + vite实战商城后台开发》的演示地址
\n
\n \n 欢迎回来 \n \n 账号密码登录 \n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n 登 录 \n \n \n \n \n \n\n\n\n"
},
{
"path": "src/permission.js",
"content": "import { router, addRoutes } from \"~/router\";\nimport { getToken } from \"~/composables/auth\";\nimport { toast, showFullLoading, hideFullLoading } from \"~/composables/util\";\nimport store from \"./store\";\n\n// 全局前置守卫\nlet hasGetInfo = false;\nrouter.beforeEach(async (to, from, next) => {\n // 显示loading\n showFullLoading();\n\n const token = getToken();\n\n // 没有登录，强制跳转回登录页\n if (!token && to.path != \"/login\") {\n toast(\"请先登录\", \"error\");\n return next({ path: \"/login\" });\n }\n\n // 防止重复登录\n if (token && to.path == \"/login\") {\n toast(\"请勿重复登录\", \"error\");\n return next({ path: from.path ? from.path : \"/\" });\n }\n\n // 如果用户登录了，自动获取用户信息，并存储在vuex当中\n let hasNewRoutes = false;\n if (token && !hasGetInfo) {\n let { menus } = await store.dispatch(\"getinfo\");\n hasGetInfo = true;\n //动态添加路由\n hasNewRoutes = addRoutes(menus);\n }\n\n // 设置页面标题\n let title = (to.meta.title ? to.meta.title : \"Vue3\") + \"-追梦编程商城后台\";\n document.title = title;\n\n hasNewRoutes ? next(to.fullPath) : next();\n});\n\n// 全局后置守卫\nrouter.afterEach((to, from) => hideFullLoading());\n"
},
{
"path": "src/router/index.js",
"content": "import { createRouter, createWebHashHistory } from \"vue-router\";\n\nimport Admin from \"~/layouts/admin.vue\";\nimport Index from \"~/pages/index.vue\";\nimport Login from \"~/pages/login.vue\";\nimport NotFound from \"~/pages/404.vue\";\nimport GoodList from \"~/pages/goods/list.vue\";\nimport CategoryList from \"~/pages/category/list.vue\";\n\n/* const routes = [\n {\n path:\"/\",\n component:Admin,\n // 子路由\n children:[]\n },\n{\n path:\"/login\",\n component:Login,\n meta:{\n title:\"登录页\"\n }\n},{\n path: '/:pathMatch(.*)*',\n name: 'NotFound',\n component: NotFound\n}] */\n\n//默认路由,所有用户共享\nconst routes = [\n {\n path: \"/\",\n name: \"admin\",\n component: Admin,\n },\n {\n path: \"/login\",\n component: Login,\n meta: {\n title: \"登录页\",\n },\n },\n {\n path: \"/:pathMatch(.*)*\",\n name: \"NotFound\",\n component: NotFound,\n },\n];\n\n//动态匹配添加路由\nconst asyncRoutes = [\n {\n path: \"/\",\n name: \"/\",\n component: Index,\n meta: {\n title: \"后台首页\",\n },\n },\n {\n path: \"/goods/list\",\n name: \"/goods/list\",\n component: GoodList,\n meta: {\n title: \"商品管理\",\n },\n },\n {\n path: \"/category/list\",\n name: \"/category/list\",\n component: CategoryList,\n meta: {\n title: \"分类列表\",\n },\n },\n];\n\nexport const router = createRouter({\n history: createWebHashHistory(),\n routes,\n});\n\n//动态添加路由方法\nexport function addRoutes(menus) {\n //是否有新的路由\n let hasNewRoutes = false;\n const findAndAddRoutesByMenus = (arr) => {\n arr.forEach((e) => {\n let item = asyncRoutes.find((o) => o.path == e.frontpath);\n if (item && !router.hasRoute(item.path)) {\n router.addRoute(\"admin\", item);\n hasNewRoutes = true;\n }\n //子路由\n if (e.child && e.child.length > 0) {\n findAndAddRoutesByMenus(e.child);\n }\n });\n };\n findAndAddRoutesByMenus(menus)\n\n // console.log(\"获取路由\",router.getRoutes());\n return hasNewRoutes;\n}\n"
},
{
"path": "src/store/index.js",
"content": "import { createStore } from \"vuex\";\nimport { login, getinfo } from \"~/api/manager\";\nimport { setToken, removeToken } from \"~/composables/auth\";\nconst store = createStore({\n state() {\n return {\n // 用户信息\n user: {},\n\n // 侧边宽度\n asideWidth: \"250px\",\n menus: [],\n ruleNames: [],\n };\n },\n mutations: {\n // 记录用户信息\n SET_USERINFO(state, user) {\n state.user = user;\n },\n // 展开/缩起侧边\n handleAsideWidth(state) {\n state.asideWidth = state.asideWidth == \"250px\" ? \"64px\" : \"250px\";\n },\n SET_MENUS(state, menu) {\n state.menus = menu;\n },\n SET_RULENAMES(state, ruleNames) {\n state.ruleNames = ruleNames;\n },\n },\n actions: {\n // 登录\n login({ commit }, { username, password }) {\n return new Promise((resolve, reject) => {\n login(username, password)\n .then((res) => {\n setToken(res.token);\n\n resolve(res);\n })\n .catch((err) => reject(err));\n });\n },\n // 获取当前登录用户信息\n getinfo({ commit }) {\n return new Promise((resolve, reject) => {\n getinfo()\n .then((res) => {\n console.log(res);\n commit(\"SET_USERINFO\", res);\n commit(\"SET_MENUS\", res.menus);\n commit(\"SET_RULENAMES\", res.ruleNames);\n resolve(res);\n })\n .catch((err) => reject(err));\n });\n },\n // 退出登录\n logout({ commit }) {\n // 移除cookie里的token\n removeToken();\n // 清除当前用户状态 vuex\n commit(\"SET_USERINFO\", {});\n },\n },\n});\n\nexport default store;\n"
},
{
"path": "vite.config.js",
"content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport WindiCSS from 'vite-plugin-windicss'\n\nimport path from \"path\"\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n resolve:{\n // src目录别名\n alias:{\n \"~\":path.resolve(__dirname,\"src\"),\n }\n },\n\n server:{\n proxy:{\n '/api': {\n target: 'http://ceshi13.dishait.cn',\n changeOrigin: true,\n rewrite: (path) => path.replace(/^\\/api/, '')\n },\n }\n },\n\n plugins: [vue(),WindiCSS()]\n})\n"
}
] ![\"Vue](\"./public/Vue.png\")