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" alt="">  渲染
        </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--熊猫借阅项目流程

Vue

1.初始化准备工作

2.home组件

3.路由

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

列表页的分页器

5.登录

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

猜你喜欢

Vue--熊猫借阅项目流程

Vue

1.初始化准备工作

2.home组件

3.路由

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

列表页的分页器

5.登录

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

猜你喜欢

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