vue2.0仿半糖

vue2.0仿半糖

Vue是构建用户界面的先进框架。它不像其余全能的框架，Vue是从头开始逐渐设计起来的。核心库只专一于视图层，它很是容易上手而且能够与其余库或现有的项目进行整合。在另外一方面，当与相关工具和支持库结合使用时，Vue也能完美的驱动复杂的单页面应用。小女子深知 “纸上得来终觉浅,绝知此事要躬行.”，且有着大多数女孩纸的优势爱购物逛各类购物平台(￣▽￣),因而开始了vue2.0仿半糖APP的故事，而半塘做为一个为大众推荐好物的平台，天然最重要的就是可以搜索好物和发现好物，因此针对这自认为最重要的两个功能开始了代码世界的遨游。

鉴于动态图加载过久影响心情，因此上一些大体图片让各位看官了解

登陆

搜索

发布文章

主要的页面效果:

• 触摸内容滑动
• 轮播图
• 滑动必定位置固定某元素的位置
• 遮罩层的效果
• 主要的各个页面效果实现

线上体验：

（￣︶￣）↗预览demo（用chrome浏览器切换手机模式预览更佳，发文章的功能点击底部菜单栏+哦，搜索请搜索口红化妆品等关键字，其余数据还没mock进去...）

（￣︶￣）↗源代码

技术栈:

• vue2.0
• vue-router spa开发
• vuex 专为Vue.js 应用程序开发的状态管理模式,集中式存储管理应用的全部组件的状态
• axios 一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端
• mint-ui 基于vue.js的移动端组件库 帮助快速搭建页面（项目中上传图片页面有使用到）
• easy-mock 先后端分离，提供数据接口（搜索时提供的假数据）
• html5 css3 （页面的基本实现）
  
  

主要的功能实现:

• 用户的登陆状态：由于涉及用户的我的信息修改等页面都要有登陆状态的判断，若未登陆则不显示其页面，因此咱们必须对用户的登陆状态(存入store里的boolean变量)进行改变，而且控制登陆先后的页面跳转。（这里多一句小嘴，就是router-link激活时其实本身自己有个默认类名router-link-active,若想对激活元素操做你能够选择这个类名，可是值得注意的是"是否激活" 默认类名的依据是 inclusive match即全包含匹配[关于router-link-active详细参照]（https://router.vuejs.org/zh-c...
  

主要代码实现:

login() {
      var myreg =/^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1}))+\d{8})$/;
     if(this.phonenumber.length == 0 ){
       alert('请输入手机号码！');
     }
     else if(!myreg.test(this.phonenumber)){
       alert('请输入有效的手机号！')
     }
     else{
       this.$store.commit('checking')
       this.$router.push({path:'/'})
     }
    }
    <router-link  :to="isLogin" tag="li">
                <span class="icon icon-info"></span>
                 <p class="home_text">消息</p>
          </router-link>
            <router-link  :to="isLoading" tag="li">
                <span class="icon icon-my"></span>
                 <p class="home_text">个人</p>
          </router-link>

• 商品的搜索功能：搜索，固然首先得有数据让你搜索，我选择了easy-mock来建立个人假数据关于easy-mock,而后对数据请求关于axios可参考，根据关键字进行匹配，搜索完毕后有个搜索历史，而后清空搜索历史。（这些比较基础请参考源代码）
  

主要的代码实现：

created () {
      this.inputText = this.$store.state.inputText
      this.axios.get('http://easy-mock.com/mock/5940ff968ac26d795f00bd9e/care/list/care/list')
        .then((res)=>{
           console.log(res.data)
           let message = res.data
           for(let i in message){
             let item = i;
             console.log(item);
             console.log(this.inputText);
             console.log(item.indexOf(this.inputText));
             if(item.indexOf(this.inputText)!== -1){
               this.contents = message[item]
               return
             }
           }
           if(this.contents.length){
             this.message = true
           }else{
             this.message = false
             this.$refs.tip.className='tipshow'
             console.log('没有找到哦');
           }
           })
       .catch((error) => {console.log(error)})
    }

• 写文章发布文章的功能：写文章和发布文章固然须要数据的存取，并且这是一个分享好物的功能必须得有图片才更有说服力，而由于用户发布完图片后不论是否刷新本身辛苦写的文章仍是要在的呀，要否则你们还写个啥呢，可是发布出去以后写文章和预览页面就不能还保存着发布出去的数据内容了，因此我就将写文章和预览文章的页面中的状态保存在store里面，当点击发布按钮的时候，将store里面的数据保存到localstorage当中，跳转到个人文章以及文章查看页面时则获取localstorage内的数据，如今只能获取最新的文章由于本仙女尚未将其存储为一个对象数组，之后定会慢慢折腾。
  

主要的代码实现：

页面实例建立完成以后：

this.headline=this.$store.state.headline;
        this.content=this.$store.state.content;
          for(let i=0;i<this.$store.state.picurl.length;i++){
              this.fileListurl.push(this.$store.state.picurl[i]);
        }
       }

图片的上传和删除（参考eliment-ui 的upload组件）

handleRemove(file, fileList) {
        this.fileListurl=fileList;
        console.log('删除');
         console.log(this.fileListurl);
     },
     upload (response,file,fileList) {
       let that = this;
       console.log('上传文件');
       console.log(file);
       console.log(typeof that.$store.state.picurl);
       that.$store.dispatch('upload',file.url);
       console.log(that.$store.state.picurl);
        console.log('store上传成功');
       console.log(this.$store.state.picurl);
       this.$refs.see.disabled=false
       this.$refs.see.className="pre_see_active"
       this.$refs.send.disabled=false
       this.$refs.send.className="send_active"
     }

预览

pre_see(){
        this.fileListurl=this.$store.state.picurl;
        this.$store.dispatch('writetitle',this.headline);
        this.$store.dispatch('writecontent',this.content);
        this.$router.push({path:'/pre_see'})
      }

发布成功(引用了Toast吐司提示)：值得注意的是不要忘记在引用的页面加上import { Toast } from 'mint-ui';

send_out(){
        this.$store.dispatch('writetitle',this.headline);
        this.$store.dispatch('writecontent',this.content);
        console.log(this.$store.state.content)
        var str = JSON.stringify(this.$store.state.picurl);
        localStorage.setItem("pics",str);
        localStorage.setItem('title',this.$store.state.headline);
        localStorage.setItem('content',this.$store.state.content);
        console.log(this.headline);
        console.log(this.content);
        let instance = Toast('发布成功');
        setTimeout(() => {
        instance.close();
        this.$router.push({path:'/asuccess'})
        }, 2000);
      }

总结

• 关于README.md的编写，值得注意的是必定要对齐对齐！！！
• 当时纠结写网页版仍是手机版因此直接用的px，后来作成移动端后悔不已，不像微信小程序一开始就采用了移动端的适配rpx,哇，可是页面太多，而后小仙女就这么一直错下去了（之后仍是要改回来的(╥╯^╰╥)），求求大家若是想好了作移动端请用rem自适应布局，别跟我同样犯蠢!!!
• 当碰到不会的问题，请多看看文档，是否本身有所遗漏。当初router-link-active这个知识点就没扫到结果本身写了一大堆不如一个默认类名来的痛快，因此当碰到繁杂的工做量时你就要怀疑一下自身是否本身错过了什么快捷的办法。
   * 关于dist文件夹，一开始你的index预览页面啥也没有，这正常，改变一下各个文件的路径就行了，图片显示不出来也是同样的道理；而用了easy-mock的数据请求时请写成https,否则数据没法得到。

 * 这个项目到目前的程度也作完挺久的了，一直没有写总结，这也是个毛病，由于不少东西当时以为须要注意，如今倒以为没什么，因此之后必定要边作边总结，让后来的人能更快的上手。还有购物和晒照功能以及数据的懒加载等在向我招手，我会尽快握住他们的。
 

给小星星的都是高富帅和白富美✺◟(∗❛ัᴗ❛ั∗)◞✺，请向我发射大家的小星星吧!

 

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For detailed explanation on how things work, checkout the guide and docs for vue-loader.
"# bantang"