Vue--熊猫借阅项目流程
Posted yg123-lb
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue--熊猫借阅项目流程相关的知识，希望对你有一定的参考价值。
根据项目
(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--熊猫借阅项目流程的主要内容，如果未能解决你的问题，请参考以下文章