From a9aa8da7279b6084f12421f64cca0d438bf5e8a9 Mon Sep 17 00:00:00 2001 From: userName Date: Fri, 23 Aug 2024 11:07:11 +0000 Subject: [PATCH] first commit --- .editorconfig | 5 + .gitignore | 23 + LICENSE | 127 + README.md | 24 + babel.config.js | 5 + doc/布局.html | 318 + doc/面试学习笔记1 | 239 + doc/面试学习笔记2 | 129 + package-lock.json | 12596 +++++++++++++++++++++++++++ package.json | 58 + public/favicon.ico | Bin 0 -> 4286 bytes public/index.html | 30 + server.js | 25 + src/App.vue | 7 + src/assets/logo.png | Bin 0 -> 6849 bytes src/components/HelloWorld.vue | 34 + src/components/Input.vue | 30 + src/components/Left.vue | 61 + src/components/List.vue | 32 + src/components/MyChildren.vue | 35 + src/components/MyGrandson.vue | 14 + src/event/eventBus.js | 6 + src/main.js | 20 + src/router/index.js | 88 + src/store/getters.js | 8 + src/store/index.js | 20 + src/store/modules/system.js | 53 + src/store/modules/user.js | 99 + src/utils/network.js | 107 + src/utils/websock.js | 1 + src/views/Login.vue | 76 + src/views/layout/Breadcrumb.vue | 20 + src/views/layout/Index.vue | 84 + src/views/layout/Nav.vue | 103 + src/views/layout/NavItem.vue | 45 + src/views/layout/home/Index.vue | 3 + src/views/layout/lession/Demo1.vue | 47 + src/views/layout/lession/Demo2.vue | 30 + src/views/layout/lession/Index.vue | 7 + src/views/layout/stats/Index.vue | 11 + src/views/layout/user/Index.vue | 5 + src/views/layout/user/Role.vue | 3 + src/views/layout/user/Stats.vue | 3 + src/views/layout/wms/Index.vue | 3 + src/views/layout/wms/List.vue | 3 + vue.config.js | 8 + 46 files changed, 14645 insertions(+) create mode 100644 .editorconfig create mode 100644 .gitignore create mode 100644 LICENSE create mode 100644 README.md create mode 100644 babel.config.js create mode 100644 doc/布局.html create mode 100644 doc/面试学习笔记1 create mode 100644 doc/面试学习笔记2 create mode 100644 package-lock.json create mode 100644 package.json create mode 100644 public/favicon.ico create mode 100644 public/index.html create mode 100644 server.js create mode 100644 src/App.vue create mode 100644 src/assets/logo.png create mode 100644 src/components/HelloWorld.vue create mode 100644 src/components/Input.vue create mode 100644 src/components/Left.vue create mode 100644 src/components/List.vue create mode 100644 src/components/MyChildren.vue create mode 100644 src/components/MyGrandson.vue create mode 100644 src/event/eventBus.js create mode 100644 src/main.js create mode 100644 src/router/index.js create mode 100644 src/store/getters.js create mode 100644 src/store/index.js create mode 100644 src/store/modules/system.js create mode 100644 src/store/modules/user.js create mode 100644 src/utils/network.js create mode 100644 src/utils/websock.js create mode 100644 src/views/Login.vue create mode 100644 src/views/layout/Breadcrumb.vue create mode 100644 src/views/layout/Index.vue create mode 100644 src/views/layout/Nav.vue create mode 100644 src/views/layout/NavItem.vue create mode 100644 src/views/layout/home/Index.vue create mode 100644 src/views/layout/lession/Demo1.vue create mode 100644 src/views/layout/lession/Demo2.vue create mode 100644 src/views/layout/lession/Index.vue create mode 100644 src/views/layout/stats/Index.vue create mode 100644 src/views/layout/user/Index.vue create mode 100644 src/views/layout/user/Role.vue create mode 100644 src/views/layout/user/Stats.vue create mode 100644 src/views/layout/wms/Index.vue create mode 100644 src/views/layout/wms/List.vue create mode 100644 vue.config.js diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..7053c49 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,5 @@ +[*.{js,jsx,ts,tsx,vue}] +indent_style = space +indent_size = 2 +trim_trailing_whitespace = true +insert_final_newline = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..403adbc --- /dev/null +++ b/.gitignore @@ -0,0 +1,23 @@ +.DS_Store +node_modules +/dist + + +# local env files +.env.local +.env.*.local + +# Log files +npm-debug.log* +yarn-debug.log* +yarn-error.log* +pnpm-debug.log* + +# Editor directories and files +.idea +.vscode +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000..9e32cde --- /dev/null +++ b/LICENSE @@ -0,0 +1,127 @@ + 木兰宽松许可证, 第2版 + + 木兰宽松许可证， 第2版 + 2020年1月 http://license.coscl.org.cn/MulanPSL2 + + + 您对“软件”的复制、使用、修改及分发受木兰宽松许可证，第2版（“本许可证”）的如下条款的约束： + + 0. 定义 + + “软件”是指由“贡献”构成的许可在“本许可证”下的程序和相关文档的集合。 + + “贡献”是指由任一“贡献者”许可在“本许可证”下的受版权法保护的作品。 + + “贡献者”是指将受版权法保护的作品许可在“本许可证”下的自然人或“法人实体”。 + + “法人实体”是指提交贡献的机构及其“关联实体”。 + + “关联实体”是指，对“本许可证”下的行为方而言，控制、受控制或与其共同受控制的机构，此处的控制是指有受控方或共同受控方至少50%直接或间接的投票权、资金或其他有价证券。 + + 1. 授予版权许可 + + 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的版权许可，您可以复制、使用、修改、分发其“贡献”，不论修改与否。 + + 2. 授予专利许可 + + 每个“贡献者”根据“本许可证”授予您永久性的、全球性的、免费的、非独占的、不可撤销的（根据本条规定撤销除外）专利许可，供您制造、委托制造、使用、许诺销售、销售、进口其“贡献”或以其他方式转移其“贡献”。前述专利许可仅限于“贡献者”现在或将来拥有或控制的其“贡献”本身或其“贡献”与许可“贡献”时的“软件”结合而将必然会侵犯的专利权利要求，不包括对“贡献”的修改或包含“贡献”的其他结合。如果您或您的“关联实体”直接或间接地，就“软件”或其中的“贡献”对任何人发起专利侵权诉讼（包括反诉或交叉诉讼）或其他专利维权行动，指控其侵犯专利权，则“本许可证”授予您对“软件”的专利许可自您提起诉讼或发起维权行动之日终止。 + + 3. 无商标许可 + + “本许可证”不提供对“贡献者”的商品名称、商标、服务标志或产品名称的商标许可，但您为满足第4条规定的声明义务而必须使用除外。 + + 4. 分发限制 + + 您可以在任何媒介中将“软件”以源程序形式或可执行形式重新分发，不论修改与否，但您必须向接收者提供“本许可证”的副本，并保留“软件”中的版权、商标、专利及免责声明。 + + 5. 免责声明与责任限制 + + “软件”及其中的“贡献”在提供时不带任何明示或默示的担保。在任何情况下，“贡献者”或版权所有者不对任何人因使用“软件”或其中的“贡献”而引发的任何直接或间接损失承担责任，不论因何种原因导致或者基于何种法律理论，即使其曾被建议有此种损失的可能性。 + + 6. 语言 + “本许可证”以中英文双语表述，中英文版本具有同等法律效力。如果中英文版本存在任何冲突不一致，以中文版为准。 + + 条款结束 + + 如何将木兰宽松许可证，第2版，应用到您的软件 + + 如果您希望将木兰宽松许可证，第2版，应用到您的新软件，为了方便接收者查阅，建议您完成如下三步： + + 1， 请您补充如下声明中的空白，包括软件名、软件的首次发表年份以及您作为版权人的名字； + + 2， 请您在软件包的一级目录下创建以“LICENSE”为名的文件，将整个许可证文本放入该文件中； + + 3， 请将如下声明文本放入每个源文件的头部注释中。 + + Copyright (c) [Year] [name of copyright holder] + [Software Name] is licensed under Mulan PSL v2. + You can use this software according to the terms and conditions of the Mulan PSL v2. + You may obtain a copy of Mulan PSL v2 at: + http://license.coscl.org.cn/MulanPSL2 + THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + See the Mulan PSL v2 for more details. + + + Mulan Permissive Software License，Version 2 + + Mulan Permissive Software License，Version 2 (Mulan PSL v2) + January 2020 http://license.coscl.org.cn/MulanPSL2 + + Your reproduction, use, modification and distribution of the Software shall be subject to Mulan PSL v2 (this License) with the following terms and conditions: + + 0. Definition + + Software means the program and related documents which are licensed under this License and comprise all Contribution(s). + + Contribution means the copyrightable work licensed by a particular Contributor under this License. + + Contributor means the Individual or Legal Entity who licenses its copyrightable work under this License. + + Legal Entity means the entity making a Contribution and all its Affiliates. + + Affiliates means entities that control, are controlled by, or are under common control with the acting entity under this License, ‘control’ means direct or indirect ownership of at least fifty percent (50%) of the voting power, capital or other securities of controlled or commonly controlled entity. + + 1. Grant of Copyright License + + Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable copyright license to reproduce, use, modify, or distribute its Contribution, with modification or not. + + 2. Grant of Patent License + + Subject to the terms and conditions of this License, each Contributor hereby grants to you a perpetual, worldwide, royalty-free, non-exclusive, irrevocable (except for revocation under this Section) patent license to make, have made, use, offer for sale, sell, import or otherwise transfer its Contribution, where such patent license is only limited to the patent claims owned or controlled by such Contributor now or in future which will be necessarily infringed by its Contribution alone, or by combination of the Contribution with the Software to which the Contribution was contributed. The patent license shall not apply to any modification of the Contribution, and any other combination which includes the Contribution. If you or your Affiliates directly or indirectly institute patent litigation (including a cross claim or counterclaim in a litigation) or other patent enforcement activities against any individual or entity by alleging that the Software or any Contribution in it infringes patents, then any patent license granted to you under this License for the Software shall terminate as of the date such litigation or activity is filed or taken. + + 3. No Trademark License + + No trademark license is granted to use the trade names, trademarks, service marks, or product names of Contributor, except as required to fulfill notice requirements in Section 4. + + 4. Distribution Restriction + + You may distribute the Software in any medium with or without modification, whether in source or executable forms, provided that you provide recipients with a copy of this License and retain copyright, patent, trademark and disclaimer statements in the Software. + + 5. Disclaimer of Warranty and Limitation of Liability + + THE SOFTWARE AND CONTRIBUTION IN IT ARE PROVIDED WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED. IN NO EVENT SHALL ANY CONTRIBUTOR OR COPYRIGHT HOLDER BE LIABLE TO YOU FOR ANY DAMAGES, INCLUDING, BUT NOT LIMITED TO ANY DIRECT, OR INDIRECT, SPECIAL OR CONSEQUENTIAL DAMAGES ARISING FROM YOUR USE OR INABILITY TO USE THE SOFTWARE OR THE CONTRIBUTION IN IT, NO MATTER HOW IT’S CAUSED OR BASED ON WHICH LEGAL THEORY, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGES. + + 6. Language + + THIS LICENSE IS WRITTEN IN BOTH CHINESE AND ENGLISH, AND THE CHINESE VERSION AND ENGLISH VERSION SHALL HAVE THE SAME LEGAL EFFECT. IN THE CASE OF DIVERGENCE BETWEEN THE CHINESE AND ENGLISH VERSIONS, THE CHINESE VERSION SHALL PREVAIL. + + END OF THE TERMS AND CONDITIONS + + How to Apply the Mulan Permissive Software License，Version 2 (Mulan PSL v2) to Your Software + + To apply the Mulan PSL v2 to your work, for easy identification by recipients, you are suggested to complete following three steps: + + i Fill in the blanks in following statement, including insert your software name, the year of the first publication of your software, and your name identified as the copyright owner; + + ii Create a file named “LICENSE” which contains the whole context of this License in the first directory of your software package; + + iii Attach the statement to the appropriate annotated syntax at the beginning of each source file. + + + Copyright (c) [Year] [name of copyright holder] + [Software Name] is licensed under Mulan PSL v2. + You can use this software according to the terms and conditions of the Mulan PSL v2. + You may obtain a copy of Mulan PSL v2 at: + http://license.coscl.org.cn/MulanPSL2 + THIS SOFTWARE IS PROVIDED ON AN "AS IS" BASIS, WITHOUT WARRANTIES OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO NON-INFRINGEMENT, MERCHANTABILITY OR FIT FOR A PARTICULAR PURPOSE. + See the Mulan PSL v2 for more details. diff --git a/README.md b/README.md new file mode 100644 index 0000000..9c5e5a9 --- /dev/null +++ b/README.md @@ -0,0 +1,24 @@ +# vue-erp-demo + +## Project setup +``` +npm install +``` + +### Compiles and hot-reloads for development +``` +npm run serve +``` + +### Compiles and minifies for production +``` +npm run build +``` + +### Lints and fixes files +``` +npm run lint +``` + +### Customize configuration +See [Configuration Reference](https://cli.vuejs.org/config/). diff --git a/babel.config.js b/babel.config.js new file mode 100644 index 0000000..e955840 --- /dev/null +++ b/babel.config.js @@ -0,0 +1,5 @@ +module.exports = { + presets: [ + '@vue/cli-plugin-babel/preset' + ] +} diff --git a/doc/布局.html b/doc/布局.html new file mode 100644 index 0000000..cd5d53e --- /dev/null +++ b/doc/布局.html @@ -0,0 +1,318 @@ + + + + + + + + 模拟后台布局+路由使用 + + + + + + +
+ + + +
+ +
+
+ + + + + + \ No newline at end of file diff --git a/doc/面试学习笔记1 b/doc/面试学习笔记1 new file mode 100644 index 0000000..322c272 --- /dev/null +++ b/doc/面试学习笔记1 @@ -0,0 +1,239 @@ +lession 1、插值表达式、指令、动态属性、v-html + +{{name}} + +

+ +
+

我是哈默

+
+ +v-html 会造成xss攻击 + +lession 2、计算属性 + +会做数据缓存 + +double2:{ + get(){ + return this.number*2 //原值改变，计算属性改变 + }, + set(value){ + this.number=value/2 //计算属性改变，原值还原 + } +} + +lession 3、watch监听器-用来监听数值的变化 + +data(){ + return{ + name:'哈默', + info:{ + hobby:'篮球' + } + } +} + +watch:{ + //字符串监听 + name(newVal,oldVal){ + console.log('name',newVal,oldVal); + }, + //对象数据的监听 + info:{ + handler:function(newVal,oldVal){ + console.log('info',newVal,oldVal) + }, + deep:true //深度监听开关 + } +} + + +lession 4、动态绑定 Class 和 Style + +对象方式动态绑定样式 +
  • 项目1
    • +数组方式绑定样式 +
  • 项目1
    • +行内样式动态绑定 +
  • 项目1
    • +data(){ + return { + isActive:true, + styleData:{ + background:'#efefef', + color:'#ffffff' + } + } +} + +lession 5、v-if 和v-show 的区别 + +

    a(v-if)

    +

    b(v-show)

    + +v-if 是直接决定页面元素是否存在 +v-show是在样式级别控制元素是显示还是因此 + +lession 6、v-for 列表循环 +数组遍历： +
  • +对象遍历： +
  • +object:{ + name:'桃谷六仙'， + hobby:'篮球' +} +v-if 和 v-for 联合使用 +v-for 优先级比较高，可以在v-for 的父元素写v-if判断 + +lession 7、事件 + +@click="logout(3,$event)" + +logout(id,e){ + alert(id) + console.log('e',e) +} + +lession 8、父子组件通信方法prop $emit + +通信方式总结: +父组件数据传递给子组件步骤： +1.父组件定义传递给儿子的数据 +2.子组件用prop定义传递过来的数据的类型和变量的名称 +3.父组件调用子组件，并进行属性值和变量名绑定 +4.子组件调用父组件传递过来的数据 +子组件给父组件传递数据的步骤： +1.子组件定义传递给父组件的数据对象和事件 +2.父组件调用子组件，并且在调用标签绑定子组件传递过来的事件名称 +3.在父组件的事件处理函数中接受子组件传递的数据对象 + +lession 9、兄弟组件通信方式 + +定义一个vue 实例 +然后在兄弟组件中组件挂载的时候使用 +eventBus.$on('addItem',this.handleAddTitle); +handleAddTitle(title){ + console.log('title',title) +} + +this.$emit('add',this.title) +eventBus.$emit('addItem',this.title) + +lession 10、父子组件传值的5种方式 +一、props+$emit() +二、回调函数方式(callback) +三、$parent+$children this.$children[0].data this.$parent.data +四、provide+inject 父组件 provide 子组件 inject +五、$attrs+$listeners 父、子、孙 三代组件 在子组件中用 v-bind="$attrs" 给孙组件 代传递父组件中的数据，在孙组件中之间用 {{$attrs.属性名}} 的方式使用 父组件中的数据 +六、使用 ref 属性的方式 父组件 ref="childComp" this.$refs.childComp.属性名 + +lession 11、父子组件生命周期执行顺序问题 + +new vue() 生命周期 + +beforeCreate() +created() +beforeMount() +mounted() +beforeUpdate() +updated() +beforeDestory() +destroyed() + +简化 + +created() +mounted() +updated() +destroyed() + +存在父子组件的生命周期 + +parent:App created +child:List created +child:List mounted +parent:App mounted + +结论：页面创建的时候 先父后子 挂载组件的顺序先子后父 +parent:App before update +child:List before update +child:List updated +parent:App updated + +结论：组件更新顺序 先父后子 更新完成的顺序 先子后父 + +lession 12、 + +1.nextTick 会在异步渲染完成后执行 +2.异步渲染是批量进行渲染的 +this.$nextTick(()=>{ + const ulElem=this.$refs.ulRef; + const length=ulElem.childNodes.length; + console.log('length',length) +}) + +lession 13、slot 插槽 + +lession 14、vue3 和 vue2 的区别 + +Diff算法是如何实现的 + +配置项api options api +配置项型代码风格 + +很分散，逻辑不内聚，解决了耦合，没有解决 +组合式api composition API +解决了高内聚问题 + +import {ref} from 'vue' + +const useCmpute=(count)=>{ + const plus=()=>{ + count++; + } + const minus=()=>{ + + count-- + } + return { + plus,minus + } +} + +setup(){ + const cout=ref(0); + {plus,minus}=useCompute(count); + return { + count,plus,minus + } +} + + +总结： +1. vue2和vue3双向数据绑定原理发生了改变 +vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的 +vue3 中使用了 es6 的 ProxyAPI 对数据代理。 + +相比于vue2.x，使用proxy的优势如下 + +defineProperty只能监听某个属性，不能对全对象监听 +可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可） +可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化 + +2. 默认进行懒观察（lazy observation）。 +在 2.x 版本里，不管数据多大，都会在一开始就为其创建观察者。当数据很大时，这可能会在页面载入时造成明显的性能压力。3.x 版本，只会对「被用于渲染初始可见部分的数据」创建观察者，而且 3.x 的观察者更高效。 + +3. 更精准的变更通知。 +比例来说：2.x 版本中，使用 Vue.set 来给对象新增一个属性时，这个对象的所有 watcher 都会重新运行；3.x 版本中，只有依赖那个属性的 watcher 才会重新运行。 + +4. 3.0 新加入了 TypeScript 以及 PWA 的支持 +5.vue2和vue3组件发送改变 + + +reactivity API + +Vue2使用选项类型API（Options API） + +Vue3合成型API（Composition API） \ No newline at end of file diff --git a/doc/面试学习笔记2 b/doc/面试学习笔记2 new file mode 100644 index 0000000..cd56e29 --- /dev/null +++ b/doc/面试学习笔记2 @@ -0,0 +1,129 @@ +工程化&前端安全 + +webpack + +基础配置 +打包输出 +插件使用 +全局变量 +源码分析 +懒加载 +模块热更新 +懒加载 +优化 +PWA配置 +打包优化 +打包多页 +noparse +happypack +抽离公共环境区分变量 +构建npm组件库 +自定义Loader(style-loader css-loader less-loader等) +自定义Plugin(html-webpack-plugin) + +回溯历史 +冲突解决 + +前端开发必会面试题和多种实战技巧 + + +【问】$route和$router的区别？ +可以理解为，一个是用来获取路由信息的，一个是用来操作路由的 +$route +route是路由信息对象，里面主要包含路由的一些基本信息，包括name、meta、path、hash、query、params、fullPath、matched、redirectedFrom +$router +router是VueRouter的实例，包含了一些路由的跳转方法，钩子函数等 + +【问】谈谈你对provide和inject的理解？ +通过provide/inject可以轻松实现跨级访问祖先组件的数据 + +在父组件中provide方法返回个对象，在孙组件中用inject:['对象']访问对象 + +【问】什么是事件代理/事件委托 +事件代理/事件委托是利用事件冒泡的特性，将本应该绑定在多个元素上的事件绑定在他们的祖先元素上，尤其在动态添加子元素的时候，可以非常方便的提高程序性能，减小内存空间 + +【问】call()和apply()的区别 +实际上，apply和call()的功能是一样的，只是传入的参数列表形式不同，apply传入的是数组 + +它们各自的定义： + +apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A, arguments);即A对象应用B对象的方法。 +call：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.call(A, args1,args2);即A对象调用B对象的方法。 +它们的共同之处： +都“可以用来代替另一个对象调用一个方法，将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。 + +它们的不同之处： +apply：最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数，则把参数都写进这个数组里面，当然，即使只有一个参数，也要写进数组里。如果argArray不是一个有效的数组或arguments对象，那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数，那么Global对象将被用作thisObj，并且无法被传递任何参数。 +call：它可以接受多个参数，第一个参数与apply一样，后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候，使当前this实例指针保持一致，或者在特殊情况下需要改变this指针。如果没有提供thisObj参数，那么 Global 对象被用作thisObj。 +实际上，apply和call的功能是一样的，只是传入的参数列表形式不同。 + +【问】什么是事件冒泡？什么是事件捕获 +冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document)的顺序触发 +捕获型事件：事件从最不精确的对象(document)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定) + +支持w3c标准的浏览器在添加事件时用addEventListener(event,fn,useCapture)方法，其中第三个参数useCapture是一个boolean值，用来设置事件是在事件捕获时执行，还是事件冒泡时执行，而不兼容W3C的浏览器(IE)用attachEvent()方法，次方法没有相关设置，不过IE的事件模型默认是在事件冒泡时执行的，也就是在useCapture等于false的时候执行，所以把在处理事件时把useCapture设置为false是比较安全，也是实现兼容浏览器的效果 + +【问】什么是"use strict";使用它的好处和坏处分别是什么？ + +【问】解释一下js的同源策略 +同源策略，即拥有相同的协议(protocal),端口(如果指定),主机(域名)的两个页面是属于同一个源，然而在IE中比较特殊，IE中没有将端口号加入同源的条件中，因此上图中端口不同那一项，在IE中是算同源的， + + + diff --git a/src/components/Input.vue b/src/components/Input.vue new file mode 100644 index 0000000..30603a4 --- /dev/null +++ b/src/components/Input.vue @@ -0,0 +1,30 @@ + + + \ No newline at end of file diff --git a/src/components/Left.vue b/src/components/Left.vue new file mode 100644 index 0000000..1d019b7 --- /dev/null +++ b/src/components/Left.vue @@ -0,0 +1,61 @@ + + + \ No newline at end of file diff --git a/src/components/List.vue b/src/components/List.vue new file mode 100644 index 0000000..5218964 --- /dev/null +++ b/src/components/List.vue @@ -0,0 +1,32 @@ + + + \ No newline at end of file diff --git a/src/components/MyChildren.vue b/src/components/MyChildren.vue new file mode 100644 index 0000000..38e58a5 --- /dev/null +++ b/src/components/MyChildren.vue @@ -0,0 +1,35 @@ + + + + + \ No newline at end of file diff --git a/src/components/MyGrandson.vue b/src/components/MyGrandson.vue new file mode 100644 index 0000000..dbb9d42 --- /dev/null +++ b/src/components/MyGrandson.vue @@ -0,0 +1,14 @@ + + + \ No newline at end of file diff --git a/src/event/eventBus.js b/src/event/eventBus.js new file mode 100644 index 0000000..8dc1fef --- /dev/null +++ b/src/event/eventBus.js @@ -0,0 +1,6 @@ +// 事件公交车用来解决兄弟组件之间的通信问题 +import Vue from 'vue'; + +const eventBus = new Vue() + +export default eventBus; \ No newline at end of file diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..22d732f --- /dev/null +++ b/src/main.js @@ -0,0 +1,20 @@ +import Vue from 'vue' +import App from './App.vue' +import router from './router' +import store from './store' +import ElementUI from 'element-ui' +import axios from 'axios' +import 'element-ui/lib/theme-chalk/index.css' + +Vue.use(ElementUI) +Vue.config.productionTip = false +Vue.prototype.$http = axios +axios.defaults.baseUrl = "http://127.0.0.1:8080" + + + +new Vue({ + router, + store, + render: h => h(App) +}).$mount('#app') \ No newline at end of file diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..6ff7ef9 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,88 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' + +Vue.use(VueRouter) + +const routes = [{ + path: '/', + redirect: '/layout', + }, + { + path: '/login', + name: 'login', + component: () => + import ('../views/Login.vue') + }, + { + path: '/layout', + name: 'layout', + component: () => + import ('../views/layout/Index.vue'), + + children: [{ + path: '/index', + name: 'index', + component: require('../views/layout/home/Index.vue').default, + }, { + path: '/stats', + name: 'stats', + component: require('../views/layout/stats/Index.vue').default, + }, { + path: '/wms', + name: 'stats', + component: require('../views/layout/wms/Index.vue').default, + children: [{ + path: '/wms/list', + name: 'lessionDemo1', + component: require('../views/layout/wms/List.vue').default, + }] + }, { + path: '/user', + name: 'user', + component: require('../views/layout/user/Index.vue').default, + children: [{ + path: '/user/stats', + name: 'userStats', + component: require('../views/layout/user/Stats.vue').default, + }, { + path: '/user/role', + name: 'userRole', + component: require('../views/layout/user/Role.vue').default, + }] + }, { + path: '/lession', + name: 'lession', + component: require('../views/layout/lession/Index.vue').default, + children: [{ + path: '/lession/demo1', + name: 'lessionDemo1', + component: require('../views/layout/lession/Demo1.vue').default, + }, { + path: '/lession/demo2', + name: 'lessionDemo2', + component: require('../views/layout/lession/Demo2.vue').default, + }] + }] + } +] + +const router = new VueRouter({ + routes +}) + +// router.beforeEach(function(to, from, next) { +// if (!sessionStorage.getItem('username')) { +// if (to.path !== '/login') { +// next('/login') +// } +// } +// next(); +// }) + + +// router.beforeResolve(function(to,from,next){ + +// }) + + +export default router \ No newline at end of file diff --git a/src/store/getters.js b/src/store/getters.js new file mode 100644 index 0000000..99e0781 --- /dev/null +++ b/src/store/getters.js @@ -0,0 +1,8 @@ +const getters = { + token: state => state.user.token, + refresh_token: state => state.user.refresh_token, + theme: state => state.user.theme, + userInfo: state => state.user.userInfo, + appToken: state => state.system.appToken, + userToken: state => state.system.userToken +} \ No newline at end of file diff --git a/src/store/index.js b/src/store/index.js new file mode 100644 index 0000000..c40a8f2 --- /dev/null +++ b/src/store/index.js @@ -0,0 +1,20 @@ +import Vue from 'vue' +import Vuex from 'vuex' +import getters from './getters' +import user from './modules/user' +import system from './modules/system' + +Vue.use(Vuex) + +const store = new Vuex.Store({ + state: {}, + mutations: {}, + actions: {}, + modules: { + user, + system + }, + getters +}) + +export default store \ No newline at end of file diff --git a/src/store/modules/system.js b/src/store/modules/system.js new file mode 100644 index 0000000..87f82fd --- /dev/null +++ b/src/store/modules/system.js @@ -0,0 +1,53 @@ +import Lockr from 'lockr/lockr.js' +const system = { + state: { + appToken: '', + userToken: '', + menu: {}, + }, + mutations: { + saveMenu(state, menu) { + state.menu = menu + Lockr.set('menu', state.menu) + }, + getMenu(state) { + state.menu = Lockr.get('menu') + }, + saveAppToken(state, appToken) { + state.appToken = appToken + Lockr.set('appToken', state.appToken) + }, + getAppToken(state) { + state.appToken = Lockr.get('appToken') + }, + saveUserToken(state, userToken) { + state.userToken = userToken + Lockr.set('userToken', state.userToken) + }, + getUserToken(state) { + state.userToken = Lockr.get('userToken') + }, + }, + actions: { + saveAppToken({ commit }, appToken) { + commit('saveAppToken', appToken) + }, + getAppToken({ commit }) { + commit('getAppToken') + }, + saveUserToken({ commit }, userToken) { + commit('saveUserToken', userToken) + }, + getUserToken({ commit }) { + commit('getUserToken') + }, + saveMenu({ commit }, menu) { + commit('saveMenu', menu) + }, + getMenu({ commit }) { + commit('getMenu') + } + } +} + +export default system \ No newline at end of file diff --git a/src/store/modules/user.js b/src/store/modules/user.js new file mode 100644 index 0000000..358ca7c --- /dev/null +++ b/src/store/modules/user.js @@ -0,0 +1,99 @@ +import Lockr from 'lockr/lockr.js' +const user = { + state: { + token: '', + refresh_token: '', + expires_in: '', + jti: '', + scope: '', + token_type: '', + userInfo: {}, + theme: '' + }, + mutations: { + saveTheme(state, theme) { + state.theme = theme + Lockr.set('theme', state.theme) + }, + getTheme(state) { + state.theme = Lockr.get('theme') + }, + SET_ACCESS_TOKEN(state, token) { + state.token = token + Lockr.set('token', state.token) + }, + GET_ACCESS_TOKEN(state) { + state.token = Lockr.get('token') + }, + SET_REFRESH_TOKEN(state, refresh_token) { + state.refresh_token = refresh_token + Lockr.set('refresh_token', state.refresh_token) + }, + GET_REFRESH_TOKEN(state) { + state.refresh_token = Lockr.get('refresh_token') + }, + SET_EXPIRES_IN(state, expires_in) { + state.expires_in = expires_in + Lockr.set('expires_in', state.expires_in) + }, + SET_JTI(state, jti) { + state.jti = jti + Lockr.set('jti', state.jti) + }, + SET_SCOPE(state, scope) { + state.scope = scope + Lockr.set('scope', state.scope) + }, + SET_TOKEN_TYPE(state, token_type) { + state.token_type = token_type + Lockr.set('token_type', state.token_type) + }, + saveUserInfo(state, userInfo) { + state.userInfo = userInfo + Lockr.set('userInfo', state.userInfo) + }, + getUserInfo(state) { + state.userInfo = Lockr.get('userInfo') + } + }, + actions: { + saveTheme({ commit }, theme) { + commit('saveTheme', theme) + }, + getTheme({ commit }) { + commit('getTheme') + }, + SET_ACCESS_TOKEN({ commit }, token) { + commit('SET_ACCESS_TOKEN', token) + }, + GET_ACCESS_TOKEN({ commit }) { + commit('GET_ACCESS_TOKEN') + }, + SET_REFRESH_TOKEN({ commit }, refresh_token) { + commit('SET_REFRESH_TOKEN', refresh_token) + }, + GET_REFRESH_TOKEN({ commit }) { + commit('GET_REFRESH_TOKEN') + }, + SET_EXPIRES_IN({ commit }, expires_in) { + commit('SET_EXPIRES_IN', expires_in) + }, + SET_JTI({ commit }, jti) { + commit('SET_JTI', jti) + }, + SET_SCOPE({ commit }, scope) { + commit('SET_SCOPE', scope) + }, + SET_TOKEN_TYPE({ commit }, token_type) { + commit('SET_TOKEN_TYPE', token_type) + }, + saveUserInfo({ commit }, userInfo) { //权限 + commit('saveUserInfo', userInfo) + }, + getUserInfo({ commit }) { + commit('getUserInfo') + } + } +} + +export default user \ No newline at end of file diff --git a/src/utils/network.js b/src/utils/network.js new file mode 100644 index 0000000..b3f7043 --- /dev/null +++ b/src/utils/network.js @@ -0,0 +1,107 @@ +// 封装 axios 请求响应拦截器封装 +import axios from "axios"; +import store from '@/store' +import { Message } from "_element-ui@2.15.2@element-ui"; + + +var instance = axios.create({ + baseURL: 'http://localhost:8080', + timeout: 300000, +}); + +instance.interceptors.request.use(config => { + store.dispatch('GET_ACCESS_TOKEN') + if (store.getters.token) { + config.headers['Authorization'] = 'bearer ' + store.getters.token + } + store.dispatch('getAppToken') + store.dispatch('getUserToken') + if (store.getters.appToken) { + config.headers['userToken'] = store.getters.userToken + config.headers['appToken'] = store.getters.appToken + } + if (config.method === 'post' || config.method.method === 'put') { + if (config.url == '/RAC/oauth/token') { + config.headers['Content-Type'] = 'application/x-www-form-urlencoded' + config.data = qs.stringify(config.data) + } + } else if (config.method === 'get' || config.method === 'delete') { + if (config.method === 'delete') { + if (config.url.indexOf('/tags') != -1) { + config.headers['Context-Type'] = 'application/json' + } else { + config.headers['Content-Type'] = 'application/x-www-form-urlencoded' + config.data = qs.stringify(config.data) + } + } else { + config.headers['Content-Type'] = 'application/x-www-form-urlencoded' + config.data = qs.stringify(config.data) + } + } + if (config.method === 'put') { + if (config.url.indexOf('/properties') != -1) { + config.headers['Content-Type'] = 'application/json' + } + } + if (config.method === "patch") { + if (config.url.indexOf('/tags') != -1) { + config.headers['Content-Type'] = 'application/json' + } + } + return config +}, error => { + return Promise.reject(error) +}) + + +instance.interceptors.response.use(function(response) { + if (response.status != 200) { + Message({ + message: response.data.msg, + type: 'warning' + }); + } + + return response; +}, async function(error) { + if (error.response) { + switch (error.response.status) { + case 401: + let fullurl = window.location.href + let index = fullurl.indexOf('/#') + let length = fullurl.substring(index).length + + if (length == 3) { + Message({ + showClose: true, + message: '用户名或密码错误,请刷新浏览器后重新填写正确的用户名和密码', + type: 'error' + }); + } + + let res = await doRequest(error) + if (res) { + return res; + } + break; + + case 400: + Message({ + showClose: true, + message: error.response.data.responseStatus.message, + type: 'warning' + }); + break; + case 500: + break; + default: + Message({ + showClose: true, + message: '连接服务器失败', + type: 'warning' + }) + } + } + + return Promise.reject(error) +}) \ No newline at end of file diff --git a/src/utils/websock.js b/src/utils/websock.js new file mode 100644 index 0000000..fefb4e1 --- /dev/null +++ b/src/utils/websock.js @@ -0,0 +1 @@ +// websock工具封装 \ No newline at end of file diff --git a/src/views/Login.vue b/src/views/Login.vue new file mode 100644 index 0000000..02115ea --- /dev/null +++ b/src/views/Login.vue @@ -0,0 +1,76 @@ + + + \ No newline at end of file diff --git a/src/views/layout/Breadcrumb.vue b/src/views/layout/Breadcrumb.vue new file mode 100644 index 0000000..0879b25 --- /dev/null +++ b/src/views/layout/Breadcrumb.vue @@ -0,0 +1,20 @@ + + + + diff --git a/src/views/layout/Index.vue b/src/views/layout/Index.vue new file mode 100644 index 0000000..c7098be --- /dev/null +++ b/src/views/layout/Index.vue @@ -0,0 +1,84 @@ + + + + diff --git a/src/views/layout/Nav.vue b/src/views/layout/Nav.vue new file mode 100644 index 0000000..a53c726 --- /dev/null +++ b/src/views/layout/Nav.vue @@ -0,0 +1,103 @@ + + + + \ No newline at end of file diff --git a/src/views/layout/NavItem.vue b/src/views/layout/NavItem.vue new file mode 100644 index 0000000..e3522da --- /dev/null +++ b/src/views/layout/NavItem.vue @@ -0,0 +1,45 @@ + + + + \ No newline at end of file diff --git a/src/views/layout/home/Index.vue b/src/views/layout/home/Index.vue new file mode 100644 index 0000000..7586bf1 --- /dev/null +++ b/src/views/layout/home/Index.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/layout/lession/Demo1.vue b/src/views/layout/lession/Demo1.vue new file mode 100644 index 0000000..540ac2c --- /dev/null +++ b/src/views/layout/lession/Demo1.vue @@ -0,0 +1,47 @@ + + + \ No newline at end of file diff --git a/src/views/layout/lession/Demo2.vue b/src/views/layout/lession/Demo2.vue new file mode 100644 index 0000000..fb91fa1 --- /dev/null +++ b/src/views/layout/lession/Demo2.vue @@ -0,0 +1,30 @@ + + + \ No newline at end of file diff --git a/src/views/layout/lession/Index.vue b/src/views/layout/lession/Index.vue new file mode 100644 index 0000000..1196e9b --- /dev/null +++ b/src/views/layout/lession/Index.vue @@ -0,0 +1,7 @@ + \ No newline at end of file diff --git a/src/views/layout/stats/Index.vue b/src/views/layout/stats/Index.vue new file mode 100644 index 0000000..c7d7536 --- /dev/null +++ b/src/views/layout/stats/Index.vue @@ -0,0 +1,11 @@ + + + \ No newline at end of file diff --git a/src/views/layout/user/Index.vue b/src/views/layout/user/Index.vue new file mode 100644 index 0000000..481df4f --- /dev/null +++ b/src/views/layout/user/Index.vue @@ -0,0 +1,5 @@ + \ No newline at end of file diff --git a/src/views/layout/user/Role.vue b/src/views/layout/user/Role.vue new file mode 100644 index 0000000..3955ebf --- /dev/null +++ b/src/views/layout/user/Role.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/layout/user/Stats.vue b/src/views/layout/user/Stats.vue new file mode 100644 index 0000000..9bfbdac --- /dev/null +++ b/src/views/layout/user/Stats.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/layout/wms/Index.vue b/src/views/layout/wms/Index.vue new file mode 100644 index 0000000..488d238 --- /dev/null +++ b/src/views/layout/wms/Index.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/src/views/layout/wms/List.vue b/src/views/layout/wms/List.vue new file mode 100644 index 0000000..488d238 --- /dev/null +++ b/src/views/layout/wms/List.vue @@ -0,0 +1,3 @@ + \ No newline at end of file diff --git a/vue.config.js b/vue.config.js new file mode 100644 index 0000000..01e270a --- /dev/null +++ b/vue.config.js @@ -0,0 +1,8 @@ +module.exports = { + devServer: { + port: 8080, + host: 'localhost', + open: true + }, + lintOnSave: false +} \ No newline at end of file