码迷,mamicode.com
首页 > 其他好文 > 详细

Vue--熊猫借阅项目流程

时间:2019-11-23 16:27:44      阅读:67      评论:0      收藏:0      [点我收藏+]

标签:完成   密码   图片   keepalive   directive   好的   mod   分页器   模块   

Vue

根据项目

1.初始化准备工作

(1)App.vue文件内除了router-view尽量不要有其他内容 style下初始化样式

(2).jsonplaceholder 模拟数据网站

(3)请求数据 下载axios 在main.js下 引入axios

 import axios from ‘axios‘
 Vue.prototype.$axios = axios //挂载

初步请求遍历数据

 <div v-for="item of list">
    {{item}}</div>
 ?
 ?
 ?
 created() {
     
     this.$axios.get("../../static/txt.json")
    .then(res => {
       // console.log(res.data);
       this.list = res.data.slice(0, 5);
       this.$store.commit(‘initStoreList‘,res.data)  //出发语句柄 把res.data传入store
    }).catch(()=>{
          this.$message({
             showClose: true,
             message: "数据丢失",
             type:‘error‘
    });
    })
 },

(4).ElementUI使用

下载模块 main.js引入

 import ElementUI from ‘element-ui‘;
 import ‘element-ui/lib/theme-chalk/index.css‘;
 ?
 Vue.use(ElementUI);
 ?

(5)本地bootstrap引用

bootstrap放入static文件夹下 index.html中引用

2.home组件

加载更多数据

   getmore() {
       if (this.num < 10) {
         this.$axios.get("../../static/txt.json").then(res => {
           // console.log(res.data);
           let data = res.data.slice(0 + this.num, 5 + this.num);
           this.list = this.list.concat(data); //concat() 方法用于连接两个或多个数组
        });
         this.num += 5;
      } else {
         this.$message({
           showClose: true,
           message: "没有更多数据了",
           
        });
      }
    }

home页面中的数据列表随机变换颜色 这里用到了自定义指令 后期优化时或者自定义指令较多可单独写入一个js文件在main.js中引入

 Vue.directive(‘changeColor‘,function(el,biinding){
  el.style.color=‘#‘+Math.random().toString(16).slice(2,8);
        el.style.fontSize=binding.value.font
     if(binding.arg ==‘ita‘){  //argz自定义指令钩子函数参数 使自定义指令可复用 详情见官网
       el.style.fontStyle=‘italic‘}
   else if(binding.arg == ‘bold‘){
        el.style.fontWeight=‘bold‘
      }
 })
 ?
 <h2 v-changeColor></h2>  

fitter的使用

 Vue.filter(‘cap‘,function(v){
   console.log(v);//拿到的是需要操作的字符串
   
   return v.toUpperCase()
 });
 ?
  <h4 v-changeColor:ita="{font:‘24px‘}">{{item.id}} {{item.title | cap}}</h4>
 ?

3.路由

在设置路由前,首先要拆分好组件 视情况而定 组件创建完成后再router下的index.js设置路由

下载vue-router 并引入

 import Router from ‘vue-router‘
 Vue.use(Router)
 ?
 // 这里引入组件使用路由懒加载 路由被访问的时候才加载组件
 const Home = ()=> import(‘@/components/Home‘);
 const List = ()=> import(‘@/components/List‘);
 const Shop = ()=> import(‘@/components/Shop‘);
 const Commond = ()=> import(‘@/components/Commond‘);
 ?
 export default new Router({
   mode: ‘history‘,  //去除#
   routes: [
      {
       path: ‘/‘,
       name: ‘Home‘,
       component: Home,
       meta:{
         keepAlive:true , //保持页面状态 ,简单说就是当前页面加载好的数据 跳转到其他页面后依然能保持加载后的状态
    },  
    },
    {
       path: ‘/commond‘,
       name: ‘Commond ‘,
       component: Commond ,
    },
  ],
 })

然后在实现点击跳转

      <router-link to="/">首页</router-link>
      <router-link to="/list">列表</router-link>
      <router-link to="/shop">购物</router-link>
       <router-link to="/commond">管理</router-link>
 ?

4.动态传参跳转到详情页

 <div class="newbox" v-for="item of list" :key="item.id">
     <router-link :to="‘/single/‘+item.id">  //跳转 将id传给single页面
         注意这里需要用v-bind进行绑定
        <h4 v-changeColor:ita="{font:‘24px‘}">{{item.id}} {{item.title | cap}}</h4>
     </router-link>
    </div>

 {
      path: ‘/single/:id‘,
      name: ‘Single‘,
      component: Single,
     
    },
        
      data() {
    return {
    message:{},
    id:this.$route.params.id,   接收
 
    }
  },
      
       created(){
this.$axios.get(‘http://jsonplaceholder.typicode.com/posts/‘+this.id)
.then((res)=>{
    console.log(res.data);
    this.message =res.data
}).catch(()=>{
     this.$message({
          showClose: true,
          message: "没有更多数据了",
          type:‘error‘
        });
})
  }

保持当前页面状态

App.js
<!-- 保持状态 需要保持状态就添加meta字段 -->
<keep-alive>
	  <router-view v-if="$route.meta.keepAlive"/>
</keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
  
      
      index.js
    {
      path: ‘/‘,
      name: ‘Home‘,
      component: Home,
      meta:{
        keepAlive:true , //保持页面状态 ,简单说就是当前页面加载好的数据 跳转到其他页面后依然能保持加载后的状态
    },       

注意 在使用v-bing动态绑定图片路径时,需要import引入图片路径

import osrc from ‘../assets/logo.png‘
data(){
    return{
        oimg:osrc
    }
}


 <swiper-slide>
          <img :src="oimg" >  渲染
        </swiper-slide>
列表页的分页器

分页器的组件可直接使用elementui

    <el-pagination 
      background
      layout="prev, pager, next"
      :total="total"
      :page-size="pageSize"
      @current-change="handleCurrentChange"
      >
</el-pagination>


 data() {
    return {
      message:[],
      total:0,  //数据总量
      pageSize:5,  //每页显示条目个数
      currentPage:1  //当前的页码数
    }
  },
  created(){
    console.log(this.$store.state.storeList);
    // console.log(localStorage.getItem(‘list‘));
    
    // this.message=this.$store.state.storeList;
    // this.total = this.$store.state.storeList.length
    this.message=JSON.parse( localStorage.getItem(‘list‘))
    this.total =JSON.parse( localStorage.getItem(‘list‘)).length
  },
 methods:{
      handleCurrentChange(val) {
        console.log(val);
        this.currentPage=val   //点击分页器拿到当前页码
      }
  },
  computed:{
    tableData(){
      //用前一页页码值*每页显示 的个数 , 后一页页码值*每页显示的个数
      return this.message.slice((this.currentPage-1) *
      this.pageSize,this.currentPage * this.pageSize) 
    }
  }

 

5.登录

登录的界面只需要用element搭建即可

 <form>
      <el-input placeholder="请输入内容" v-model="user" clearable></el-input>
      <el-input placeholder="请输入密码" v-model="pass" show-password ></el-input> <br>
      <el-button type="primary" @click="loginFn(user)">登录</el-button>
      <el-button type="warning" plain @click="resetFn">重置</el-button>
    </form>

 

登录post请求

  loginFn(user){
      this.$axios.post(‘/api‘,{
              user:this.user,
              pass:this.pass
            }).then((res)=>{
              if(res.data == 1){
            this.$store.commit(‘getUser‘,user)
              this.$router.replace(‘/‘)
                
        state.storeUser=JSON.parse( localStorage.getItem(‘user‘,data.user))
              }
              else{
            this.$message({
            showClose: true,
            message: "登录失败",
          
        });
              }
            })
             
           
    },

在发送请求之前 需要修改代理 实现跨域请求 在config文件夹下的index添加,注意修改过后 终端需要打断重启

  proxyTable: {
      ‘/api‘: {
        target: ‘http://localhost:3000‘, //目标接口域名
        changeOrigin: true, //是否跨域
        pathRewrite: {
        ‘^/api‘: ‘‘ //重写接口
        }
        }
    },

post.js

let http = require(‘http‘);
http.createServer(function (req,res) {
    res.writeHead(200,{‘content-type‘:‘text/html;charset=utf-8‘});
    let allData = ‘‘;
    req.on(‘data‘,function (chunk) {  //Buffer
        // console.log(chunk);
        allData += chunk;
    });
    req.on(‘end‘,function () {
        console.log(allData);

        let obj =JSON.parse(allData);

        if(obj.user === ‘user‘ && obj.pass === ‘123‘){
            res.end(‘1‘);
        }else{
            res.end(‘-1‘);
        }
    });
   
}).listen(3000,()=>{
    console.log(‘服务器已启动‘);
});

这里也涉及到了本地存储localstorage的使用

//   document.cookie=‘key=val‘
// localStorage.name =‘jack‘

// let box =document.getElementById(‘box‘)
// box.innerHTML =`名字是${localStorage.name}`

let key1=‘name1‘,val1=‘jack‘;
let key2=‘name2‘,val2=‘bill‘;
localStorage.setItem(key1,val1)  //setItem设置本地储存的值
console.log(localStorage.getItem(key1)); //getItem获取本地储存的值
// key(index)  获取本地存储对应下表的key值
console.log(localStorage.key(0))
// removeItem(key1) 删除本地储存的某一个值  clear() 清空
localStorage.removeItem(key1)

// sessionStorage  localStorage用法完全一致 只是存储时间不同 

 

6.请求数据优化 减少http请求

下载 vuex 新建一个store.js

// 各个页面请求数据相同时 把数据写入vuex中的store中 减少http请求
import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)
const store =new Vuex.Store({
   state:{
       storeList:[], //这里的数据在其他页面可以使用                  (this.$store.state.storeList)获取到   
       user:‘‘
   },
  
   mutations:{
    initStoreList(state,list){
        // state.storeList=list 此处可以在list页面检查有没有拿到数据
        //把数据存在本地
        localStorage.setItem(‘list‘,JSON.stringify(list))
        state.storeList=JSON.parse( localStorage.getItem(‘list‘))
  
    }  ,
    getUser : (state,user)=>{
        localStorage.setItem(‘user‘, JSON.stringify(user))
       state.storeUser=JSON.parse(localStorage.getItem(‘user‘))
        
       },
   }
})
export default store

然后在本项目中 在第一次请求数据时 把数据就存入store 或者 浏览器本地

接着再次请求数据时

 created(){
    console.log(this.$store.state.storeList);
    // console.log(localStorage.getItem(‘list‘));
    
    // this.message=this.$store.state.storeList;
    // this.total = this.$store.state.storeList.length
    this.message=JSON.parse( localStorage.getItem(‘list‘))
    this.total =JSON.parse( localStorage.getItem(‘list‘)).length
  },

 

Vue--熊猫借阅项目流程

标签:完成   密码   图片   keepalive   directive   好的   mod   分页器   模块   

原文地址:https://www.cnblogs.com/yg123-lb/p/11918257.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!