localStorage基本要点
1、一般支持5M左右的大小(各个浏览器还是有差别)
2、不建议存储太多内容(目前都是字符串存储和读取)
3、关键信息请加密(一般是后台加密,前台可以做保存)
浏览器支持度看这里:
http://caniuse.com/#search=localStrorage
语法文档看这里:
https://developer.mozilla.org/zh-CN/docs/web/api/storage/localstorage
#代码很简单
localStorage.setItem("username","zhagnsan"); //设置key=>value
localStorage.getItem("username"); //获取key是username的值
localStorage.removeItem("username"); //删除key
回顾
前面我已经完成了用户后台的『视频发布』功能
可以查看这个目录复习『视频电商网站』:
http://blog.csdn.net/github_26672553/article/category/6421077
这里我们要来完成用户登录注册页面
1、导航栏上加入跳转去登录/注册的连接
来到navbar.vue组件
<template>
<div class="navbar">
<el-row>
<el-col :span="18">
<el-menu theme="light" default-active="/" class="el-menu-demo" mode="horizontal">
<el-menu-item :index="item.nav_url" v-for="item in this.$store.state.res.NavBar">{{item.nav_text}}</el-menu-item>
</el-menu>
</el-col>
<el-col :span="6">
<el-menu theme="light" default-active="/" class="el-menu-demo" mode="horizontal">
<el-menu-item index="3">
<v-link @click="userLoginAndReg">注册/登录</v-link>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
</div>
</template>
<style>
.navbar{
margin-bottom: 20px;
}
</style>
<script>
export default{
created(){
//alert(this.APIConfig.API_NavBar);
this.$store.dispatch('loadData',{url:this.APIConfig.API_NavBar,key:'NavBar'})
},
methods:{
userLoginAndReg(){
console.log("userLoginAndReg");
// 这里以后可以判断是否做登录
self.location = "/users/";
}
}
}
</script>
当点击”登录/注册”这个超链接,执行click事件userLoginAndReg()
。
2、从上面跳转到『登录/注册』的代码可以看出,我们又增加了一个入口users
。至此我们这个项目一共有3个入口了:网站前台web-index.js
,会员后台member-index.js
,所有用户users-index.js
。
所以,我们要先来完善这个users-index.js
文件:
import Vue from 'vue';
import Vuex from 'vuex';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-default/index.css';
import global from './global'; //我们自己写的全局插件
import VueResource from 'vue-resource';
Vue.use(Vuex);
Vue.use(ElementUI);
Vue.use(global);
Vue.use(VueResource);
import VueRouter from 'vue-router';
Vue.use(VueRouter);
//引入自己的路由配置
import {routerConfig_users} from './../config/RouterConfig';
//引入模块(Vuex中的概念)
import ResModule from './../Store/modules/ResModules';
const vuex_config = new Vuex.Store({
modules: {
res:ResModule,
}
});
//实例化Vue
new Vue({
el:'.container',
store:vuex_config,
router:routerConfig_users //配置路由
});
users-index.js
的代码和member-index.js
差不了多少,主要区别就是路由配置。
//引入自己的路由配置
import {routerConfig_users} from './../config/RouterConfig';
//实例化Vue
new Vue({
el:'.container',
store:vuex_config,
router:routerConfig_users //配置路由
});
3、所以我们下面要看看路由配置的代码
RouterConfig.js
里增加:
// 为用户登录注册写的 路由配置,外部引入是,请引入routerConfig_users
import useraction from "./../components/users/useraction.vue";
import userlogin from "./../components/users/userlogin.vue";
export const routerConfig_users = new VueRouter({
routes:[
{path:"/",component:useraction,name:"useraction",children:[
{path:"/",component:userlogin,name:"userlogin"}
]}
]
});
看懂了把,引入相关的组件,然后配置好路由。
2个组件的代码,我们稍后在看。先把我们的『用户登录注册』跑通。
4、既然我们users-index.js又是一个新的入口,那么肯定需要在相关的配置问里可以配置好。
主要是webpack.config.js
这个配置文件里,增加:
//入口文件配置
entry:{
//我们这里有2个入口文件
//一个是网站必须的入口文件,一个是会员中心的入口文件
'member-index':[__dirname+'/src/jtthink/member-index.js','webpack-dev-server/client?http://127.0.0.1:8080'],
'web-index':[__dirname+'/src/jtthink/web-index.js'],
'users-index':[__dirname+'/src/jtthink/users-index.js','webpack-dev-server/client?http://127.0.0.1:8080']
},
增加一个users-index
。
然后还需要
new HtmlWebpackPlugin({
filename:'/users/index.html', //用户登录注册
template:__dirname+'/src/pages/users/index.html', //模板文件
inject:'body',
hash:true,
chunks:['users-index']
}),
这些配置里相关的HTML模板我们也要创建好。
pages/users/index.html
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户注册登录</title>
</head>
<body>
<div class="container">
<router-view></router-view>
</div>
</body>
</html>
5、用户登录页的2个组件
components/users/useraction.vue
代码如下:
<template>
<div>
<el-row>
<el-col :span="24">
<el-menu mode="horizontal">
<el-menu-item index="3">
<v-link onclick="self.location='/member/'">回到用户后台</v-link>
</el-menu-item>
</el-menu>
</el-col>
</el-row>
<el-row>
<el-col :span="10">
<!-- 渲染子路由的模板-->
<router-view></router-view>
</el-col>
</el-row>
</div>
</template>
components/users/userlogin.vue
代码如下:
<template>
<div>
<el-form :mode="UserModel" :rules="rules" ref="users" label-width="100px">
<h3>用户登录</h3>
<el-form-item label="用户名" prop="user_name">
<el-input v-model="UserModel.user_name"></el-input>
</el-form-item>
<el-form-item label="密码" prop="user_pass">
<el-input v-model="UserModel.user_pass"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary">登录</el-button>
</el-form-item>
</el-form>
</div>
</template>
<script>
export default{
data(){
return{
UserModel:{user_name:"",user_pass:""},
rules:{ // 规则都是实例,请大家自行更改为正则判断
user_name:[
{required:true,message:'用户名必填',trigger:'blur'},
{min:1,max:10,message:'长度在1到10个字符',trigger:'blur'}
],
user_pass:[
{required:true,message:'密码必填',trigger:'blur'},
{min:1,max:10,message:'长度在1到10个字符',trigger:'blur'}
]
}
}
},
methods:{
}
}
</script>
可以看出userlogin.vue
是useraction.vue
的子组件。
至此,我们就完成了页面上的功能,和我们开头要说的localStorage
还没有半毛钱关系 ^_^
6、 完成用户登录
这里只是颜色点击『登录』按钮之后,要做的业务处理。
<el-button type="primary" @click="login">登录</el-button>
绑定一个方法
methods:{
login(){
// 这个验证是element-ui框架提供的方法
this.$refs["users"].validate(function (flag) {
if(flag){
localStorage.setItem("currentUser",this.UserModel.user_name);
alert("用户登录成功");
}else{
alert("用户名密码必填");
}
}.bind(this));
}
}
使用localStorage.setItem
把用户名保存起来。