From 5892b79b388b687d59a99e45b2202f59d2e07df4 Mon Sep 17 00:00:00 2001 From: Aicirou <2643053021@qq.com> Date: Sat, 2 May 2020 01:25:28 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E4=B8=BAvue-router=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- dependencies-cdn.js | 1 + package-lock.json | 5 + package.json | 1 + src/App.vue | 4 +- src/assets/style/theme/acrou/index.scss | 34 ++++- src/libs/util.import.development.js | 1 + src/libs/util.import.production.js | 1 + src/main.js | 5 + src/router/index.js | 44 ++++++ src/router/routes.js | 11 ++ src/view/Layout.vue | 101 -------------- src/view/common/Head.vue | 0 src/view/page/GoText.vue | 53 ------- src/views/Layout.vue | 47 +++++++ src/{view => views}/common/BreadCrumb.vue | 18 ++- src/{view => views}/common/Footer.vue | 22 ++- src/views/common/Head.vue | 19 +++ src/{view => views}/common/Markdown.vue | 36 +++-- src/{view => views}/common/Navbar.vue | 10 +- src/{view => views}/page/GoImg.vue | 14 +- src/{view => views}/page/GoList.vue | 160 ++++++++++++++-------- src/views/page/GoRouter.vue | 11 ++ src/views/page/GoText.vue | 72 ++++++++++ src/{view => views}/page/GoVideo.vue | 15 +- vue.config.js | 131 ------------------ 25 files changed, 429 insertions(+), 387 deletions(-) create mode 100755 src/libs/util.import.development.js create mode 100755 src/libs/util.import.production.js create mode 100755 src/router/index.js create mode 100644 src/router/routes.js delete mode 100644 src/view/Layout.vue delete mode 100644 src/view/common/Head.vue delete mode 100644 src/view/page/GoText.vue create mode 100644 src/views/Layout.vue rename src/{view => views}/common/BreadCrumb.vue (79%) rename src/{view => views}/common/Footer.vue (75%) create mode 100644 src/views/common/Head.vue rename src/{view => views}/common/Markdown.vue (54%) rename src/{view => views}/common/Navbar.vue (91%) rename src/{view => views}/page/GoImg.vue (65%) rename src/{view => views}/page/GoList.vue (57%) create mode 100644 src/views/page/GoRouter.vue create mode 100644 src/views/page/GoText.vue rename src/{view => views}/page/GoVideo.vue (84%) diff --git a/dependencies-cdn.js b/dependencies-cdn.js index e058e9e..ee26e3b 100644 --- a/dependencies-cdn.js +++ b/dependencies-cdn.js @@ -1,5 +1,6 @@ module.exports = [ { name: 'vue', library: 'Vue', js: 'https://cdn.jsdelivr.net/npm/vue@2.6.11/dist/vue.min.js', css: '' }, + { name: 'vue-router', library: 'VueRouter', js: 'https://cdn.jsdelivr.net/npm/vue-router@3.1.6/dist/vue-router.min.js', css: '' }, { name: 'axios', library: 'axios', js: 'https://cdn.jsdelivr.net/npm/axios@0.19.2/dist/axios.min.js', css: '' }, // { name: 'brace', library: 'ace', js: 'https://cdn.jsdelivr.net/npm/brace@0.11.1/index.min.js', css: '' }, // { name: 'brace/ext/language_tools', library: 'language_tools', js: ' https://cdn.jsdelivr.net/npm/brace@0.11.1/ext/language_tools.js', css: '' }, diff --git a/package-lock.json b/package-lock.json index cc60c5c..43938d5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11823,6 +11823,11 @@ } } }, + "vue-router": { + "version": "3.1.6", + "resolved": "https://registry.npm.taobao.org/vue-router/download/vue-router-3.1.6.tgz?cache=0&sync_timestamp=1588196200689&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.1.6.tgz", + "integrity": "sha1-RfWjo4Q+MXAsBh3YKTk1VOQyj4k=" + }, "vue-style-loader": { "version": "4.1.2", "resolved": "http://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.2.tgz", diff --git a/package.json b/package.json index b539714..5aec5d9 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "sass-loader": "^8.0.2", "vue": "^2.6.11", "vue-axios": "^2.1.5", + "vue-router": "^3.1.6", "vue2-ace-editor": "0.0.15" }, "devDependencies": { diff --git a/src/App.vue b/src/App.vue index f77f9c3..87e6960 100644 --- a/src/App.vue +++ b/src/App.vue @@ -5,7 +5,7 @@ \ No newline at end of file diff --git a/src/assets/style/theme/acrou/index.scss b/src/assets/style/theme/acrou/index.scss index c95a8c4..34a60ca 100644 --- a/src/assets/style/theme/acrou/index.scss +++ b/src/assets/style/theme/acrou/index.scss @@ -10,10 +10,10 @@ body { max-width: 980px; } -.icon { +.iconfont { width: 2em; height: 2em; - vertical-align: middle; + vertical-align: -0.5em; fill: currentColor; overflow: hidden; } @@ -45,13 +45,43 @@ body { text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; + &:hover,& .icon{ + cursor: pointer; + } } } +.footer { + background-color: transparent; +} + .no-content { background: url(https://s1.hdslb.com/bfs/static/jinkela/search/asserts/no-data.png) no-repeat 50% 50%; height: 240px; line-height: 240px; text-align: center; margin-top: 20px; +} + +.golist { + min-height: 240px; + position: relative; + + .pageloader:not(.is-bottom-to-top) { + -webkit-transform: initial; + transform: initial; + } + .pageloader{ + position: absolute; + padding-top: 0; + background: hsla(0,0%,100%,.6); + will-change: initial; + + .title { + color: hsl(0, 0%, 4%); + } + } + .pageloader::after { + border: 0 solid black; + } } \ No newline at end of file diff --git a/src/libs/util.import.development.js b/src/libs/util.import.development.js new file mode 100755 index 0000000..f97259b --- /dev/null +++ b/src/libs/util.import.development.js @@ -0,0 +1 @@ +module.exports = file => require('@/views/' + file).default diff --git a/src/libs/util.import.production.js b/src/libs/util.import.production.js new file mode 100755 index 0000000..87b91d6 --- /dev/null +++ b/src/libs/util.import.production.js @@ -0,0 +1 @@ +module.exports = file => () => import('@/views/' + file) diff --git a/src/main.js b/src/main.js index 210cce4..666ba5a 100644 --- a/src/main.js +++ b/src/main.js @@ -2,11 +2,15 @@ import Vue from 'vue' import App from './App.vue' import axios from '@utils/axios' import VueAxios from 'vue-axios' +import router from './router' var styles = [ // 'https://cdn.jsdelivr.net/npm/bulma@0.8.1/css/bulma.min.css', // 'https://cdn.jsdelivr.net/npm/bulma-tooltip@3.0.2/dist/css/bulma-tooltip.min.css', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css', + 'https://cdn.jsdelivr.net/npm/font-awesome@latest/css/font-awesome.min.css', + 'https://cdn.jsdelivr.net/npm/font-awesome-animation@0.2.1/dist/font-awesome-animation.min.css', + 'https://cdn.jsdelivr.net/npm/bulma-pageloader@0.3.0/dist/css/bulma-pageloader.min.css' ] styles.forEach(item=>{ document.write(``); @@ -18,5 +22,6 @@ Vue.config.productionTip = false Vue.use(VueAxios,axios) new Vue({ + router, render: h => h(App), }).$mount('#app') diff --git a/src/router/index.js b/src/router/index.js new file mode 100755 index 0000000..9f6e929 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,44 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +// 路由数据 +import routes from './routes' + +// fix vue-router NavigationDuplicated +const VueRouterPush = VueRouter.prototype.push +VueRouter.prototype.push = function push (location) { + return VueRouterPush.call(this, location).catch(err => err) +} +const VueRouterReplace = VueRouter.prototype.replace +VueRouter.prototype.replace = function replace (location) { + return VueRouterReplace.call(this, location).catch(err => err) +} + +Vue.use(VueRouter) + +// 导出路由 在 main.js 里使用 +const router = new VueRouter({ + mode: 'history', + /* scrollBehavior(to,from,savePosition){ + if(savePosition) { + return savePosition; + }else{ + return {x:0,y:0} + } + }, */ + routes +}) + +/** + * 路由拦截 + * 权限验证 + */ +router.beforeEach(async (to, from, next) => { + console.log(to) + next() +}) + +router.afterEach(to => { + console.log(to) +}) + +export default router diff --git a/src/router/routes.js b/src/router/routes.js new file mode 100644 index 0000000..d4b06fe --- /dev/null +++ b/src/router/routes.js @@ -0,0 +1,11 @@ +// 由于懒加载页面太多的话会造成webpack热更新太慢，所以开发环境不使用懒加载，只有生产环境使用懒加载 +const _import = require('@/libs/util.import.' + process.env.NODE_ENV) + +const frameIn = [ + { path: '/:id:/*.(html|php|css|go|java|py|js|json|txt|sh|md)', component: _import('page/GoText') }, + { path: '/:id:/*.(mp4|webm|mkv)\\?a=view', component: _import('page/GoVideo') }, + { path: '/:id:/*.(bmp|jpg|jpeg|png|gif)\\?a=view', component: _import('page/GoImg') }, + { path: '/:id::cmd?(/??.*)', component: _import('page/GoList') }, +] + +export default frameIn diff --git a/src/view/Layout.vue b/src/view/Layout.vue deleted file mode 100644 index 9b8c984..0000000 --- a/src/view/Layout.vue +++ /dev/null @@ -1,101 +0,0 @@ - - - - diff --git a/src/view/common/Head.vue b/src/view/common/Head.vue deleted file mode 100644 index e69de29..0000000 diff --git a/src/view/page/GoText.vue b/src/view/page/GoText.vue deleted file mode 100644 index c095b8c..0000000 --- a/src/view/page/GoText.vue +++ /dev/null @@ -1,53 +0,0 @@ - - - \ No newline at end of file diff --git a/src/views/Layout.vue b/src/views/Layout.vue new file mode 100644 index 0000000..bdadad4 --- /dev/null +++ b/src/views/Layout.vue @@ -0,0 +1,47 @@ + + + + diff --git a/src/view/common/BreadCrumb.vue b/src/views/common/BreadCrumb.vue similarity index 79% rename from src/view/common/BreadCrumb.vue rename to src/views/common/BreadCrumb.vue index 6fc3c25..0258631 100644 --- a/src/view/common/BreadCrumb.vue +++ b/src/views/common/BreadCrumb.vue @@ -7,7 +7,7 @@ v-bind:key="index" > {{item.title}} - {{item.title}} + {{item.title}} @@ -21,8 +21,22 @@ export default { index: "/" }; }, + mounted() { + this.render(); + }, + watch: { + $route(to, from) { + this.render(); + } + }, methods: { - render(path) { + go(path) { + this.$router.push({ + path: path + }); + }, + render() { + let path = window.location.pathname; // 如果是搜索不进行渲染 if (path.match("/[0-9]+:search")) { return; diff --git a/src/view/common/Footer.vue b/src/views/common/Footer.vue similarity index 75% rename from src/view/common/Footer.vue rename to src/views/common/Footer.vue index 88ff649..83268d0 100644 --- a/src/view/common/Footer.vue +++ b/src/views/common/Footer.vue @@ -1,5 +1,5 @@ \ No newline at end of file diff --git a/src/views/common/Head.vue b/src/views/common/Head.vue new file mode 100644 index 0000000..e6ec1de --- /dev/null +++ b/src/views/common/Head.vue @@ -0,0 +1,19 @@ + + + \ No newline at end of file diff --git a/src/view/common/Markdown.vue b/src/views/common/Markdown.vue similarity index 54% rename from src/view/common/Markdown.vue rename to src/views/common/Markdown.vue index e2954a8..93aa91b 100644 --- a/src/view/common/Markdown.vue +++ b/src/views/common/Markdown.vue @@ -3,38 +3,44 @@ \ No newline at end of file diff --git a/src/view/common/Navbar.vue b/src/views/common/Navbar.vue similarity index 91% rename from src/view/common/Navbar.vue rename to src/views/common/Navbar.vue index 4f77e43..1f93c1c 100644 --- a/src/view/common/Navbar.vue +++ b/src/views/common/Navbar.vue @@ -86,6 +86,9 @@ export default { this.param = window.MODEL.q ? window.MODEL.q : ""; } }, + mounted() { + this.siteName = document.getElementsByTagName("title")[0].innerText; + }, data: function() { return { siteName: "", @@ -103,8 +106,11 @@ export default { }, query() { if (this.param) { - location.href = - this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param; + this.$router.push({ + path: this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param + }); + // location.href = + // this.currgd.id.match("/[0-9]+:") + "search?q=" + this.param; } }, burgerClick() { diff --git a/src/view/page/GoImg.vue b/src/views/page/GoImg.vue similarity index 65% rename from src/view/page/GoImg.vue rename to src/views/page/GoImg.vue index 4efe3ce..e44dd15 100644 --- a/src/view/page/GoImg.vue +++ b/src/views/page/GoImg.vue @@ -18,13 +18,19 @@ export default { display: false }; }, + mounted() { + let path = window.location.pathname; + // 便于开发环境调试 + path = process.env.NODE_ENV === "development" ? "/api" + path : ""; + this.imgurl = path; + }, methods: { - render(path) { - this.imgurl = path; - }, + // render(path) { + // this.imgurl = path; + // }, loading(event) { if (event.target.complete == true) { - this.display = true + this.display = true; } } } diff --git a/src/view/page/GoList.vue b/src/views/page/GoList.vue similarity index 57% rename from src/view/page/GoList.vue rename to src/views/page/GoList.vue index d2d9411..48555c2 100644 --- a/src/view/page/GoList.vue +++ b/src/views/page/GoList.vue @@ -1,52 +1,62 @@ \ No newline at end of file + diff --git a/src/views/page/GoRouter.vue b/src/views/page/GoRouter.vue new file mode 100644 index 0000000..12b918f --- /dev/null +++ b/src/views/page/GoRouter.vue @@ -0,0 +1,11 @@ + + diff --git a/src/views/page/GoText.vue b/src/views/page/GoText.vue new file mode 100644 index 0000000..ef74e6a --- /dev/null +++ b/src/views/page/GoText.vue @@ -0,0 +1,72 @@ + + + \ No newline at end of file diff --git a/src/view/page/GoVideo.vue b/src/views/page/GoVideo.vue similarity index 84% rename from src/view/page/GoVideo.vue rename to src/views/page/GoVideo.vue index 1deefbc..baca32d 100644 --- a/src/view/page/GoVideo.vue +++ b/src/views/page/GoVideo.vue @@ -76,11 +76,16 @@ export default { }; }, methods: { - render (path) { - this.videourl = window.location.origin + path; - this.apiurl = - "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl; - }, + // render (path) { + // this.videourl = window.location.origin + path; + // this.apiurl = + // "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl; + // }, + }, + mounted() { + // 便于开发环境调试 + this.videourl = window.location.origin + window.location.pathname; + this.apiurl = "https://api.jsonpop.cn/demo/blplyaer/?url=" + this.videourl; }, computed: { getThunder () { diff --git a/vue.config.js b/vue.config.js index 835a053..11b902d 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,5 +1,4 @@ const path = require("path"); -const fs = require('fs') const cdnDependencies = require('./dependencies-cdn') function resolve(dir) { @@ -25,136 +24,6 @@ module.exports = { const configNew = {} if (process.env.NODE_ENV === 'production') { configNew.externals = externals - config.plugins.push({ - apply: (compiler) => { - compiler.hooks.done.tap('JSWebpackPluginHooks', compilation => { - // console.log(compilation.assetsInfo) - const chunkOnlyConfig = { - assets: false, - cached: false, - children: false, - chunks: true, - chunkModules: false, - chunkOrigins: false, - errorDetails: false, - hash: false, - modules: false, - reasons: false, - source: false, - timings: false, - version: false - }; - const allChunks = compilation.toJson(chunkOnlyConfig).chunks; - // console.log(JSON.stringify(allChunks)) - let chunks = filterChunks(allChunks, 'all', []); - const assets = htmlWebpackPluginAssets(compilation, chunks); - function filterChunks (chunks, includedChunks, excludedChunks) { - return chunks.filter(chunk => { - const chunkName = chunk.names[0]; - // This chunk doesn't have a name. This script can't handled it. - if (chunkName === undefined) { - return false; - } - // Skip if the chunk should be lazy loaded - if (typeof chunk.isInitial === 'function') { - if (!chunk.isInitial()) { - return false; - } - } else if (!chunk.initial) { - return false; - } - // Skip if the chunks should be filtered and the given chunk was not added explicity - if (Array.isArray(includedChunks) && includedChunks.indexOf(chunkName) === -1) { - return false; - } - // Skip if the chunks should be filtered and the given chunk was excluded explicity - if (Array.isArray(excludedChunks) && excludedChunks.indexOf(chunkName) !== -1) { - return false; - } - // Add otherwise - return true; - }); - } - function htmlWebpackPluginAssets (compilation, chunks) { - const self = this; - const compilationHash = compilation.hash; - - // Use the configured public path or build a relative path - let publicPath = typeof compilation.options.output.publicPath !== 'undefined' - // If a hard coded public path exists use it - ? compilation.mainTemplate.getPublicPath({hash: compilationHash}) - // If no public path was set get a relative url path - : path.relative(path.resolve(compilation.options.output.path, path.dirname(self.childCompilationOutputName)), compilation.options.output.path) - .split(path.sep).join('/'); - - if (publicPath.length && publicPath.substr(-1, 1) !== '/') { - publicPath += '/'; - } - - const assets = { - // The public path - publicPath: publicPath, - // Will contain all js & css files by chunk - chunks: {}, - // Will contain all js files - js: [], - // Will contain all css files - css: [], - // Will contain the html5 appcache manifest files if it exists - manifest: Object.keys(compilation.assets).filter(assetFile => path.extname(assetFile) === '.appcache')[0] - }; - - // Append a hash for cache busting - if (this.options.hash) { - assets.manifest = self.appendHash(assets.manifest, compilationHash); - assets.favicon = self.appendHash(assets.favicon, compilationHash); - } - - for (let i = 0; i < chunks.length; i++) { - const chunk = chunks[i]; - const chunkName = chunk.names[0]; - - assets.chunks[chunkName] = {}; - - // Prepend the public path to all chunk files - let chunkFiles = [].concat(chunk.files).map(chunkFile => publicPath + chunkFile); - - // Append a hash for cache busting - if (this.options.hash) { - chunkFiles = chunkFiles.map(chunkFile => self.appendHash(chunkFile, compilationHash)); - } - - // Webpack outputs an array for each chunk when using sourcemaps - // or when one chunk hosts js and css simultaneously - const js = chunkFiles.find(chunkFile => /.js($|\?)/.test(chunkFile)); - if (js) { - assets.chunks[chunkName].size = chunk.size; - assets.chunks[chunkName].entry = js; - assets.chunks[chunkName].hash = chunk.hash; - assets.js.push(js); - } - - // Gather all css files - const css = chunkFiles.filter(chunkFile => /.css($|\?)/.test(chunkFile)); - assets.chunks[chunkName].css = css; - assets.css = assets.css.concat(css); - } - - // Duplicate css assets can occur on occasion if more than one chunk - // requires the same css. - assets.css = _.uniq(assets.css); - - return assets; - } - fs.writeFile(path.resolve('dist/app.js'),JSON.stringify(assets),function(err){ - if(err){ - return console.log(err) - } - console.log("Success") - }) - }); - } - }) } return configNew },