# learn_vue-cms **Repository Path**: raulin/learn_vue-cms ## Basic Information - **Project Name**: learn_vue-cms - **Description**: No description available - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2018-11-29 - **Last Updated**: 2022-06-06 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # day7 ## 一、mint-ui的使用 ### 全部导入 ``` //main.js import mintUI from ‘mint-ui' Vue.use(mintUI) ``` ### 按需导入 ``` //.babelrc 配置 plugins:[ "components":[ { "libraryName":'mint-ui", "style":true } ] ] //main.js import {Toast} from 'mint-ui' Vue.component(Toast.name,Toast) ``` ## 二、MUI的使用导入对应样式组件，直接使用对应的代码片段即可，比较简单 ## 三、git的使用-项目托管到码云 ### 创建本地仓库 + 1. git init 初始化git + 2. git status 状态 + 3. git add . 将所有文件放置到暂存区 + 4. git commit -m "init my project" ### 码云远程仓库 + 1.注册账号 + 2.创建并添加公钥 ``` ssh-keygen -t rsa -C "xxxxx@xxxxx.com" cat ~/.ssh/id_rsa.pub 复制公钥放在码云公钥配置中 ``` ### 新建码云项目 + 1.新建项目，不要选择任何类似gitignore readme.md 等文件 + 2.git全局设置 ``` git config --global user.name "raulin" git config --global user.email "598985827@qq.com" ``` + 3.本地仓库的上传 ``` cd existing_git_repo git remote add origin https://gitee.com/raulin/learn_vue-cms.git git push -u origin master ``` + 4.vscode可视化提交代码 ## 四、vue项目实践 ### 整理出基本项目模板清空之前的所有测试页面，只留app.vue和干净的路由配置 ``` //APP.VUE ``` ### header区域和tabbar区域 header区域使用mint-ui中的 header 组件,按需导入后直接使用即可 tabbar使用MUI代码片段，注意购物车为扩展icon 需要引入对应的文件即可 ### tabbar路由对应图标中 a标签修改为 router-link to到指定的路由各个组件的构建路由配置文件中，导入指定的组件，并配置相应的路径 ### 首页轮播图样式使用mint-ui的 swipe的组件，放入后，调整对应样式即可 ### 首页轮播图数据放入 vue-router的使用 - 引入vue-router - 使用vue-router - this.$http.get(url),then(response=>{ console.log(response)}) 处理得到的数据，放置到data数据中 v-for循环放入 img的href中 ### 首页九宫格使用MUI的grid 代码片段，然后修改一些样式，搞定 ### 组件动画切换 App.vue ```

``` # day8 ## promise的使用 ## 项目改进 ### 新闻资讯列表的路由链接 ### 新闻列表跳转新闻详情 1.改造新闻列表中，加上router-link ，to 为 newsinfo/:id 2.增加newsinfo.vue组件 3.router.js中增加路由关联 4.newsinfo.vue通过 router.params.id来接收参数 5.发送$http.get请求，接收数据后发到页面渲染 ### 评论 1.增加子组件（公用） 2.路由链接 3.页面模板 4.数据请求与添加 # day9 ## 发表评论 + 1.textarea 数据双向绑定 + 2.绑定点击事件，postcomment + 3.postcomment中对数据内容进行检验，为空不让提交 + 4.通过vue-resourse进行提交 - 4.1提交成功后，如果再次请求，需要循环请求多遍（分页数）getcomments方法，对网络传输和用户体验都是一个不友好 - 4.2既然后台已经返回提交成功的信息，则在前端将此条数据插到comments数组首条即可(unshift) ## 图片分享功能 ### 路由及组件配置 + 1.首页图片分享按钮加上路由 router-link 及 to 对应路径 home/photolist + 2.创建PhotoList.vue 组件模板 + 3.router.js 配置路由链接 ### 图片列表布局 + 1.导航条-MUI - 1.1 [问题]放入代码及样式，但不可滑动 - 1.2 查MUI 得知需要配置scroll控件初始化 + 引入muijs + 初始化代码 ``` mui('.mui-scroll-wrapper').scroll({ deceleration: 0.0005 //flick 减速系数，系数越大，滚动速度越慢，滚动距离越小，默认值0.0006 }); ``` - 1.3 [报错]发生报错，严格模式不支持mui.js，需要关闭严格模式。 + 安装插件 cnpm i babel-plugin-transform-remove-strict-mode --save-dev + .babelrc 修改增加plugins项 transform-remove-strict-mode - 1.4 [问题]进入图片分享页，滑动效果不显示，需要再次刷新才生效解决方法：将scroll方法放到 mounted阶段执行 - 1.5 [问题]tabbar出现无法点击切换问题，且报错解决方法：老师给出建议，更改tabbar中的类名，并重写样式 - 1.6 [加载数据]加载列表数据 + resource发送数据请求 + 接收数据后，使用unshift方法添加一个对象全部 id为0 + v-for循环显示列表，调整样式 +[回顾知识点] vue中类的使用 ``` //我们可以传给 v-bind:class 一个对象，以动态地切换 class：

//绑定内联样式

//数组语法:可以加三元表达式 v-bind:style 的数组语法可以将多个样式对象应用到同一个元素上：

``` + 2.图片列表区域 - 2.1 获取数据 - 2.2 建立样式使用mint-ui的lazyload - 2.3 数据对应循环展示，修整样式细节 li中的img 会出现li下部有5px的空隙， vertical-align:middle 可以 + 3.图片详情 - 3.1 建立路由及组件 - 3.2 组件内样式布局 - 3.3 获取数据，并放置数据 - 3.4 评论子组件调用 - 3.5 内部缩略图 + 使用vue-preview + 发送请求并接收数据 + 数据修改后植入 ## 商品购买 ### 商品列表 #### 1.路由链接 ``` //home.vue 增加商品购买 router-link to='/home/goodslist' //router.js 引入vue，分配路由path //新建GoodsList.vue 路由组件 ``` #### 2.GoodsList.vue页面编写 ``` //没什么好说的，捋起袖子就是一顿干 ``` #### 3.请求数据后渲染 #### 4.同一wifi下手机调试 ### 商品详情 #### 1.商品列表制作路由链接知识点 ``` //声明式类似于a href router.push //编程式，类似于点击调用js函数 location.href ``` + 使用声明式编写测试 - 编写goodsinfo.vue组件 - 路由router.js加上路由映射 - goodslist.vue加上声明式代码 - 点击测试正常可用 + 使用编程式导航 - 知识点 - this.$route 是路由的参数对象，所有路由中的参数 query params 都在这里 - this.$router 是路由的导航对象，可以实现路由的前进后退，跳转新的url地址 #### 2.编写模板 + 使用mui卡片视图修改 #### 3.请求数据后渲染 + 发送数据接收数据 + 渲染 - ？如何公用组件，这边的轮播图直接使用公共的 - 1.将首页轮播图单独为一个组件 - 2.首页导入该组件、components注册 - 3.元素插入，数据传入 - 问题：轮播图宽度不一致 - 解决方法：在元素传入属性自定义宽度是否需要100% ### 图文介绍+商品评论 #### 1.链接路由 $router.push() 编程式导航跳转 #### 2.画页面 + 图文介绍页面 + 商品评论页面（应该复用评论子组件） #### 3.获取数据并渲染 + 坑！！，评论子组件应该传送一个type值，标明是新闻评论还是商品评论（这边商品和图文是一样的接口，不作标识） ### 加入购物车 #### 1.小球加入购物车动画 + 画球定位置 + vue动画到购物车 - 点击购物车切换显示红球 - 加上半程动画 - 落点在购物车徽标上面 + 锦上添花动画路径的更改 + 在任何分辨率下小球落点都在购物车的徽标上 - 需要获取小球的起始位置 ball=this.$refs.ball.getBoundingClientRect() - 需要获取小球的落点位置 badge=document.getElementById('badge').getBoundingClientRect() - 偏移量计算 left = badge.left - ball.left top = badge.top - ball.top #### 2.numbox数据返回给父组件 ``` //父组件 methods:{ fatherfun(argu){ this.date = argu } } //子组件 methods:{ updatedata(){ this.$emit("updatedata",this.data1) } } ``` #### 3.numbox通过父组件的商品量，设定上限值 + 美好的设想代码 ``` //父组件 //子组件 var vm = new Vue({ props:["max"] }) ``` + 出现了问题，max为undefined，原来在父组件向子组件传值的时候，值还没有成功获取到 - vue中的watch可以解决此问题，只要监视到max值改变就触发watch中的某个方法 ``` //子组件 var vm = new Vue({ props:["max"] watch:{ max:(newval,oldval){ this.max = newval } } }) ``` #### 3.点击购物车将商品和数量数据扔给购物车（这里需要新的知识 vuex） ## vuex相关知识 ### 1.什么叫vuex vuex就是vue配套的公共数据管理，可以解决多层嵌套组件之间以及无关系组件之间公用数据的问题 ### 2.使用方法 + ①安装 npm i vuex --save + ②导入 import Vuex from 'vuex' + ③vue中使用， Vue.use(Vuex) + ④注册store空间 ``` const store = Vuex.Store({ state:{ count:0 }, mutations:{ increment(state){ return count++ } } }) ``` + ⑤vue实例中使用store ``` var vm = new Vue({ store }) ``` ### 3.数据调用、修改、查询器 + 调用 ``` this.$store.state.***``` + 修改 ``` // store中mutation 新建方法 mutations:{ newfunction(state){ return 修改数据 } } //组件内调用方法 function(){ this.$store.commit("newfunction") } ``` + 查询器 ``` const store = Vuex.Store({ getters:{ doneTodos:state =>{ return "数量："+count } } }) ``` ## vuex加入进行购物车提交 ### 1. 配置vuex ### 2. 在提交触发时，使用mutations 传参 ## 徽标自动更新 + 计算vuex 中的car值，得到总count ## 购物车商品的本地存储 localstorage.setitem() ## 绘制购物车界面布局，然后根据数据显示没什么好说的，就是画完后，发送get请求获得数据，循环渲染好 ## 初始化购物车数量值：购物车的numbox要独立开 store中 getters 建立一个id：count 键值对根据购物车商品列表的id得到数量，传给numbox ## 购物车数量改变同步到store 不能直接用mutations 中的getcardata方法需要重建一个方法，根据找到的id 增加其中的count ## selected 开关激活获取selected情况，使用 id:selected 键值对得到修改selected，使用change事件 change后数据给mutation中的updatedata进行修改 ## 删除按钮激活思路：配置点击事件，传入id参数给mutation中的removedata，removedata根据id删除对应store中的数据，并更新localstorge 删除发出后，需要删除页面列表和store中的car中数据，用到数组方法splice（i,1) ## 结算区数据getters进行注意点：在加入购物车时，一定要将sell_prices 进行浮点型数值转换，否则后面计算麻烦 ## 实现返回按钮的功能返回按钮加上 flag标志 false是首页或者不需要返回的页，true需要显示返回，watch路由改变，一样的逻辑加上点击事件方法，$router.go(-1) 重新刷新后返回按钮显示不对，在created中读取$route.path 判断路径并改写flag值 ## webpack打包放到apache服务器上面 ### apache gzip压缩开启方法要让apache支持gzip功能，要用到deflate_Module和headers_Module。打开apache的配置文件httpd.conf，大约在105行左右，找到以下两行内容：（这两行不是连续在一起的） ``` #LoadModule deflate_module modules/mod_deflate.so #LoadModule headers_module modules/mod_headers.so ``` 然后将其前面的“#”注释删掉，表示开启gzip压缩功能。开启以后还需要进行相关配置。在httpd.conf文件的最后添加以下内容即可： ``` #必须的，就像一个开关一样，告诉apache对传输到浏览器的内容进行压缩 SetOutputFilter DEFLATE DeflateCompressionLevel 9 ``` 最少需要加上以上内容，才可以生gzip功能生效。由于没有做其它的额外配置，所以其它相关的配置均使用Apache的默认设置。这里说一下参数“DeflateCompressionLevel”，它表示压缩级别，值从1到9，值越大表示压缩的越厉害。