视频电商网站 - 使用localStorage存储用户信息（一）

最新推荐文章于 2023-09-06 16:08:35 发布

学习笔记666

最新推荐文章于 2023-09-06 16:08:35 发布

阅读量3.5k

点赞数

分类专栏： VUEJS+PHP+NODEJS实战

本文链接：https://blog.csdn.net/github_26672553/article/details/69942630

版权

VUEJS+PHP+NODEJS实战专栏收录该内容

36 篇文章 1 订阅

订阅专栏

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把用户名保存起来。

学习笔记666

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
视频电商网站 - 使用localStorage存储用户信息（一）

localStorage基本要点1、一般支持5M左右的大小(各个浏览器还是有差别) 2、不建议存储太多内容(目前都是字符串存储和读取) 3、关键信息请加密(一般是后台加密，前台可以做保存)浏览器支持度看这里： http://caniuse.com/#search=localStrorage 语法文档看这里： https://developer.mozilla.org/zh-CN/docs/
复制链接

扫一扫