diff --git a/.inscode b/.inscode index ecc8bdde946f464a2c4d431d8f8196413737d922..bb3014b90a6aeb8e3d7cf782263efff3185e9140 100644 --- a/.inscode +++ b/.inscode @@ -1,6 +1,10 @@ -run = "npm i && npm run dev" +run = "bash init.sh" +language = "node" [env] PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}" XDG_CONFIG_HOME = "/root/.config" -npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global" \ No newline at end of file +npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global" + +[debugger] +program = "main.js" diff --git a/README.md b/README.md new file mode 100644 index 0000000000000000000000000000000000000000..e62e093e7092d1069ce0eb8f8497a66475e45d0b --- /dev/null +++ b/README.md @@ -0,0 +1,7 @@ +# Vue 3 + Vite + +This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 ` + + diff --git a/init.sh b/init.sh new file mode 100644 index 0000000000000000000000000000000000000000..3d72eda558b1a61048c81657c4a75a99d2cd51c4 --- /dev/null +++ b/init.sh @@ -0,0 +1,5 @@ +apt update && apt install openjdk-17-jdk -y +update-alternatives --set java /usr/lib/jvm/java-17-openjdk-amd64/bin/java +npm install +npm run dev & +java -jar server.jar \ No newline at end of file diff --git a/package.json b/package.json index 72caa1750a1c44c18460a496d258fbd3c51c673a..d1121a5627ebf3eb42059bccac19fd82b37fd3d9 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,27 @@ { - "name": "nodejs", - "version": "1.0.0", - "description": "", - "main": "index.js", - "scripts": { - "dev": "node index.js", - "test": "echo \"Error: no test specified\" && exit 1" - }, - "keywords": [], - "author": "", - "license": "ISC", - "dependencies": { - "@types/node": "^18.0.6", - "node-fetch": "^3.2.6" - } + "name": "my-vue3-vite-project", + "private": true, + "version": "0.0.0", + "type": "module", + "scripts": { + "dev": "vite", + "build": "vite build", + "preview": "vite preview" + }, + "dependencies": { + "axios": "^1.4.0", + "element-plus": "^2.2.5", + "less": "^4.1.3", + "less-loader": "^7.3.0", + "mitt": "^3.0.0", + "nprogress": "^0.2.0", + "pinia": "^2.0.14", + "vue": "^3.2.47", + "vue-router": "^4.1.6" + }, + "devDependencies": { + "@vitejs/plugin-vue": "^4.1.0", + "typescript": "^4.7.2", + "vite": "^4.3.2" } - \ No newline at end of file +} diff --git a/public/vite.svg b/public/vite.svg new file mode 100644 index 0000000000000000000000000000000000000000..e7b8dfb1b2a60bd50538bec9f876511b9cac21e3 --- /dev/null +++ b/public/vite.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/server.jar b/server.jar new file mode 100644 index 0000000000000000000000000000000000000000..c1e520f15b3b12e9b56b0a77f80016dbeb68faef Binary files /dev/null and b/server.jar differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000000000000000000000000000000000000..71f7bda4768c23546255422fbc35a5d9bc037a07 --- /dev/null +++ b/src/App.vue @@ -0,0 +1,29 @@ + + + + + + + \ No newline at end of file diff --git a/src/api/index.js b/src/api/index.js new file mode 100644 index 0000000000000000000000000000000000000000..684814a91c5d43f1814a9040389297d49c23ea97 --- /dev/null +++ b/src/api/index.js @@ -0,0 +1,89 @@ +import request from "../utils/request/" + +// portal/findAllTypes +//获取分类列表 +export const getfindAllTypes = () => { + return request.get("portal/findAllTypes"); +}; +// 分页带条件查询所有头条 +export const getfindNewsPageInfo = (info) => { + return request.post("portal/findNewsPage",info); +}; +// 查看头条详情 +export const getshowHeadlineDetail = (id) => { + return request({ + method: "post", + url: "portal/showHeadlineDetail", + headers: { + "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", + }, + data:`hid=${id}` + }); +}; + +//删除的回调 +// headline/removeByHid +export const removeByHid = (id) => { + return request({ + method: "post", + url: "headline/removeByHid", + headers: { + "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", + }, + data:`hid=${id}` + }) +}; + +//登录的接口 +export const getLogin = (info) => { + return request.post("user/login",info); +}; +//获取用户信息的接口 +export const getUserInfo = (info) => { + return request.get("user/getUserInfo"); +}; + +//注册校验的接口 user/checkUserName +export const registerValidateApi = (username) => { + return request({ + method: "post", + url: "user/checkUserName", + headers: { + "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", + }, + data:`username=${username}` + }) +}; + +// 注册的接口 +export const registerApi = (userInfo) => { + return request.post("user/regist",userInfo) +} +//判断用户登录过期的接口 +export const isUserOverdue = () => { + return request.get("user/checkLogin") +} + +// 修改头条回显的接口 +export const getFindHeadlineByHid = (id) => { + return request({ + method: "post", + url: "headline/findHeadlineByHid", + headers: { + "Content-Type": "application/x-www-form-urlencoded;charset=utf-8", + }, + data:`hid=${id}` + }); +}; + +//点击保存修改的回调 +// headline/update +export const saveOrAddNews = (news) => { + return request.post("headline/update",news) +} + +// headline/publish +export const issueNews = (news) => { + return request.post("headline/publish",news) +} + diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..f3d2503fc2a44b5053b0837ebea6e87a2d339a43 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/components/Header.vue b/src/components/Header.vue new file mode 100644 index 0000000000000000000000000000000000000000..df808051f1a9a6dfd72f4f78af7af321d65ecd47 --- /dev/null +++ b/src/components/Header.vue @@ -0,0 +1,244 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000000000000000000000000000000000000..ad1527a333c194b108abe6dcb028bbcefbcec1d1 --- /dev/null +++ b/src/main.js @@ -0,0 +1,21 @@ + +import { createApp } from 'vue' +import ElementPlus from 'element-plus' +import zhCn from 'element-plus/es/locale/lang/zh-cn' +import mitt from 'mitt' +import router from "./routers/index"; +import 'element-plus/dist/index.css' +import App from './App.vue' +import pinia from './stores'; +const app = createApp(App) +app.config.globalProperties.Bus = mitt() + + + +app.use(ElementPlus, { + locale: zhCn, +}) +app.use(pinia) +app.use(router) +app.mount('#app') + diff --git a/src/pages/Detail/index.vue b/src/pages/Detail/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..d6c926bf3446fce540469f78d3ba99b59274cf3e --- /dev/null +++ b/src/pages/Detail/index.vue @@ -0,0 +1,65 @@ + + + + + + diff --git a/src/pages/HeadlineNews/index.vue b/src/pages/HeadlineNews/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..20f8a6dd5e7d5cfcac9d262ad3055f0dcb88d7fa --- /dev/null +++ b/src/pages/HeadlineNews/index.vue @@ -0,0 +1,160 @@ + + + + + + diff --git a/src/pages/Login/index.vue b/src/pages/Login/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..17c7f3fbfab9f2cca786df5360d6b0b08d548087 --- /dev/null +++ b/src/pages/Login/index.vue @@ -0,0 +1,116 @@ + + + + + + diff --git a/src/pages/Register/index.vue b/src/pages/Register/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..87b7d69b977af91e6732578fd6ddf8b747a158b5 --- /dev/null +++ b/src/pages/Register/index.vue @@ -0,0 +1,167 @@ + + + + + + diff --git a/src/pages/addOrModifyNews/index.vue b/src/pages/addOrModifyNews/index.vue new file mode 100644 index 0000000000000000000000000000000000000000..295060b7ffad221cba884c1f6f1134ba57f783d8 --- /dev/null +++ b/src/pages/addOrModifyNews/index.vue @@ -0,0 +1,156 @@ + + + + + + diff --git a/src/routers/index.js b/src/routers/index.js new file mode 100644 index 0000000000000000000000000000000000000000..e620579d028e9df79717cde503f1dffa031dd42a --- /dev/null +++ b/src/routers/index.js @@ -0,0 +1,47 @@ +import { createRouter, createWebHistory } from "vue-router"; +import { staticRoutes } from "./routes"; +import { useUserInfoStore } from '../stores/userInfo'; +import pinia from '../stores'; +import { getToken, removeToken } from '../utils/token-utils'; +import { ElMessage } from 'element-plus'; + + + +const router = createRouter({ + history: createWebHistory(), + routes: staticRoutes, +}); + +const userInfoStore = useUserInfoStore(pinia) + +//全局前置守卫 +router.beforeEach(async (to, from, next) => { + const token = getToken() + const userInfo = !!userInfoStore.nickName + if (token) { + if (to.path == "/login") { + next({ path: "/" }) + } else { + if (userInfo) { + next() + } else { + try { + await userInfoStore.getInfo() + next() + } catch (error) { + removeToken() + } + } + } + } else { + next() + } +}); + +// //使用全局后置钩子配置关闭进度条 +// router.afterEach(() => { +// NProgress.done(); +// }); + +// 导出路由 +export default router; diff --git a/src/routers/routes.js b/src/routers/routes.js new file mode 100644 index 0000000000000000000000000000000000000000..7545a04d38a40a09ba39864592a835b57c7bd5b0 --- /dev/null +++ b/src/routers/routes.js @@ -0,0 +1,37 @@ + +export const staticRoutes = [ + { + path: "/", + redirect: "/headlinenews", + }, + { + // 头条 + path: "/headlinenews", + component: () => import("../pages/HeadlineNews/index.vue"), + name: "HeadlineNews", + }, + { + //头条详情 + path: "/detail", + component: () => import("../pages/Detail/index.vue"), + name: "Detail", + }, + { + // 登录 + path: "/login", + component: () => import("../pages/Login/index.vue"), + name: "Login", + }, + { + //注册 + path: "/register", + component: () => import("../pages/Register/index.vue"), + name: "Register", + }, + { + //发布新闻的页面 + path: "/addormodifynews", + component: () => import("../pages/addOrModifyNews/index.vue"), + name: "addOrModifyNews", + }, +]; diff --git a/src/stores/index.js b/src/stores/index.js new file mode 100644 index 0000000000000000000000000000000000000000..8be11feff6364b6879bfed2ffa2df9c1ed09dd16 --- /dev/null +++ b/src/stores/index.js @@ -0,0 +1,5 @@ +import { createPinia } from 'pinia'; + +const pinia = createPinia(); + +export default pinia; \ No newline at end of file diff --git a/src/stores/userInfo.js b/src/stores/userInfo.js new file mode 100644 index 0000000000000000000000000000000000000000..fc50794a51412124d41b00eba78e096f9377dab1 --- /dev/null +++ b/src/stores/userInfo.js @@ -0,0 +1,46 @@ + +import { defineStore } from 'pinia'; +import { getToken, removeToken, setToken } from '../utils/token-utils'; +import { getLogin,getUserInfo } from '../api/index'; + + +/** + * 用户信息 + * @methods setUserInfos 设置用户信息 + */ +export const useUserInfoStore = defineStore('userInfo', { + + state: () => ({ + token: getToken(), + nickName: '', + uid: '', + }), + + actions: { + // 登陆的异步action + async login (loginForm) { + // 发送登陆的请求 + const result = await getLogin(loginForm) + // 请求成功后, 取出token保存 pinia和local中 + const token = result.token + + this.token = token + setToken(token) + }, + async getInfo () { + const result = await getUserInfo() + this.nickName = result.loginUser.nickName + this.uid = result.loginUser.uid + }, + initUserInfo(){ + removeToken() + this.nickName = "" + this.uid = "" + console.log('1111111111'); + + } + + }, + + +}); \ No newline at end of file diff --git a/src/utils/request.js b/src/utils/request.js new file mode 100644 index 0000000000000000000000000000000000000000..309e638b7dee0c9b17f9b4bf1389b28c019a0862 --- /dev/null +++ b/src/utils/request.js @@ -0,0 +1,47 @@ +import axios from "axios"; +import { ElMessage } from 'element-plus'; +import pinia from '../stores/index'; +import { useUserInfoStore } from '../stores/userInfo'; +import NProgress from "nprogress"; +import "nprogress/nprogress.css"; +// 配置新建一个 axios 实例 +const service = axios.create({ + baseURL: "/app-dev/", + timeout: 50000, +}); + +// 添加请求拦截器 +service.interceptors.request.use((config) => { + NProgress.start()//开启进度条 + // 如果有token, 通过请求头携带给后台 + const userInfoStore = useUserInfoStore(pinia) // 如果不是在组件中调用,必须传入pinia + const token = userInfoStore.token + if (token) { + // config.headers['token'] = token // 报错: headers对象并没有声明有token, 不能随便添加 + (config.headers)['token'] = token + } + return config; +}); + +// 添加响应拦截器 +service.interceptors.response.use( + (response) => { + NProgress.done()//关闭进度条 + + if(response.data.code !== 200){ + // 判断响应状态码 + if (response.data.code == 501) return Promise.reject(ElMessage.error("用户名有误")) + else if (response.data.code == 503) return Promise.reject(ElMessage.error("密码有误")) + else if (response.data.code == 504) return Promise.reject(ElMessage.error("登录已过期")) + else if (response.data.code == 505) return Promise.reject(ElMessage.error("用户名占用")) + } else { + return response.data.data; /* 返回成功响应数据中的data属性数据 */ + } + }, + (error) => { + NProgress.done()//关闭进度条 + return Promise.reject(error.message); + } +); + +export default service; diff --git a/src/utils/token-utils.ts b/src/utils/token-utils.ts new file mode 100644 index 0000000000000000000000000000000000000000..b0736d367160e0bf86b0eefbe1ed3bd9c187cdb2 --- /dev/null +++ b/src/utils/token-utils.ts @@ -0,0 +1,13 @@ +const TokenKey = 'vue_admin_template_token' + +export function getToken() { + return localStorage.getItem(TokenKey) +} + +export function setToken(token: string) { + localStorage.setItem(TokenKey, token) +} + +export function removeToken() { + localStorage.removeItem(TokenKey) +} diff --git a/vite.config.js b/vite.config.js new file mode 100644 index 0000000000000000000000000000000000000000..b93016e692ab534b37fbff542ffd0074e0b8bd85 --- /dev/null +++ b/vite.config.js @@ -0,0 +1,22 @@ +import { defineConfig } from 'vite' +import vue from '@vitejs/plugin-vue' + +// https://vitejs.dev/config/ +export default defineConfig( + () => { + return { + plugins: [vue()], + // 这个不用一点点写, 但每个配置都要理解 + server: { + port: 8000, + proxy: { + '/app-dev': { + target: 'http://localhost:8080/', + changeOrigin: true, + rewrite: (path) => path.replace(/^\/app-dev/, '') + } + } + } + } + } +)