标签:完成 密码 图片 keepalive directive 好的 mod 分页器 模块
根据项目
(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中引用
加载更多数据
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>
?
在设置路由前,首先要拆分好组件 视情况而定 组件创建完成后再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>
?
<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) } }
登录的界面只需要用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用法完全一致 只是存储时间不同
下载 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 },
标签:完成 密码 图片 keepalive directive 好的 mod 分页器 模块
原文地址:https://www.cnblogs.com/yg123-lb/p/11918257.html