（四）Vue项目——微商城：实现登录和注册

已于 2023-05-31 21:05:53 修改
阅读量1k 收藏 11
点赞数 1
分类专栏： vue.js 文章标签： java html vue.js 前端
于 2023-05-23 22:09:08 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_71824048/article/details/130834216
版权

目录

登录和注册

1.我的信息

2.登录页面

3.实现登录功能

4.登录接口和浏览器允许跨域

5.记住登录状态

6.用户菜单

7.退出登录

7.注册页面

8.注册接口

9.实现注册功能

登录和注册

1.我的信息

编写pages\User.vue文件

<template>

  <div class="member">

    <div class="header-con">

      <router-link :to="{ name: 'login' }" class="mui-navigate-right">

        <div class="user-info">

            <!-- 用户信息 -->

        </div>

      </router-link>

    </div>

  </div>

</template>

在“<!-- 用户信息 -->”后面编写如下代码，图片资源需要手动导入assets/images目录

<div class="avatar-con">

  <div class="avatar">

    <img src="../assets/images/avatar_default.png" class="image-info">

  </div>

</div>

<div class="person-con">

  <span>登录 / 注册</span>

</div>

样式：

<style lang="scss" scoped>

.member {

  margin-bottom: 15px;

  .header-con {

    padding: 10px;

    background-color: #fff;

    .user-info {

      position: relative;

      overflow: hidden;

      width: 100%;

      height: 120px;

      background: linear-gradient(90deg, #28a2ff, #ffd787);

      box-shadow: 0 0.1rem 0.25rem #f8e3c6;

      .avatar-con {

        position: absolute;

        left: 15px;

        top: 50%;

        transform: translateY(-50%);

        .avatar {

          width: 60px;

          height: 60px;

          overflow: hidden;

          box-shadow: 0 2px 10px rgba(0, 0, 0, 15);

          border: 1px solid hsla(0, 0%, 100%, 0.4);

          border-radius: 50% 50%;

          .image-info {

            width: 100%;

            height: 100%;

          }

        }

      }

      .person-con {

        position: absolute;

        left: 90px;

        top: 50%;

        transform: translateY(-50%);

        color: #fff;

      }

    }

  }

}

</style>

48eb794b1e6f442daff68540bf7d701d.png

2.登录页面

src\router.js

import Login from './pages/user/Login.vue'

routes数组中添加

{ path: '/user/login', component: Login, name: 'login', meta: { title: '登录' } },

创建src\pages\user\Login.vue

<template>

  <div class="login">

    <div class="mui-content">

      <form class="mui-input-group">

        <div class="mui-input-row">

          <label>账号</label>

          <input v-model="loginForm.username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号" />

        </div>

        <div class="mui-input-row">

          <label>密码</label>

          <input v-model="loginForm.password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码" />

        </div>

      </form>

      <div class="mui-content-padded">

        <button @click="login" type="button" class="mui-btn mui-btn-block mui-btn-primary">登录</button>

        <div class="link-area">

          <a @click="register">还没有账号？前往注册</a>

        </div>

      </div>

    </div>

  </div>

</template>

逻辑：

<script>

export default {

  data () {

    return {

      loginForm: {

        username: '',

        password: ''

      }

    }

  },

  methods: {

    login () {

     //登录

    },

    register () {

      this.$router.push({ name: 'register' })

    }

  }

}

</script>

样式：

<style lang="scss" scoped>

.mui-input-group {

  margin-top: 10px;

  background-color: transparent;

}

.mui-input-group label {

  width: 22%;

}

.mui-input-row:last-child {

  background: #fff;

}

.mui-input-row {

  margin-top: 20px;

  background: #fff;

}

.mui-input-row label ~ input,

.mui-input-row label ~ select,

.mui-input-row label ~ textarea {

  width: 78%;

}

.link-area {

  display: block;

  margin-top: 25px;

  text-align: center;

}

.mui-content-padded {

  margin-top: 30px;

}

</style>

896bd9b5dad6477eb832d08fc9cf6919.png

3.实现登录功能

src\pages\user\Login.vue

login () {

  if (this.loginForm.username === '' || this.loginForm.password === ''){

    this.$toast('账号或密码不能为空')

  } else {

    this.$http.post('login', this.loginForm).then(res => {

      if (res.data.code === 0) {

        this.$toast(res.data.msg)

      } else {

        // 登录成功

      }

    }).catch(() => {

      this.$toast('登录失败')

    })

  }

}

登录成功以后，将用户信息通过store保存。

src\store\modules\user.js

const state = {

  id: 0,

  username: ''

}

const getters = {}

const actions = {}

const mutations = {

  setUser (state, user) {

    state.id = user.id

    state.username = user.username

  }

}

export default {

  namespaced: true,

  state,

  getters,

  actions,

  mutations

}

src\store\index.js

import Vue from 'vue'

import Vuex from 'vuex'

import user from './modules/user'

Vue.use(Vuex)

export default new Vuex.Store({

  modules: {

    user

  }

})

src\pages\user\Login.vue

// 登录成功

this.$store.commit('user/setUser', res.data.data)

this.$toast(res.data.msg)

this.$router.replace({ name: 'user' })

判断是否已经登录

src\store\modules\user.js

const getters = {

  isLogin (state) {

    return state.id !== 0

  }

}

src\pages\User.vue

<script>

import { mapGetters, mapState } from 'vuex'

export default {

  computed: {

    ...mapState({

      username: state => state.user.username

    }),

    ...mapGetters('user', { isLogin: 'isLogin' })

  }

}

</script>

<template>

  <!-- 已登录 -->

  <div v-if="isLogin">

    <div class="member">

      <div class="header-con">

        <div class="user-info">

          <div class="avatar-con">

            <div class="avatar">

              <img src="../assets/images/avatar_default.png" class="image-info">

            </div>

          </div>

          <div class="person-con">

            <span>{{ username }}</span>

          </div>

        </div>

      </div>

    </div>

  </div>

  <!-- 未登录 -->

  <div v-else>

    <div class="member">

       ……（原有代码）

    </div>

  </div>

</template>

4.登录接口和浏览器允许跨域

1、确保后台tpadmin项目安装部署正常，API接口可用

2、设置chrome浏览器，允许跨域访问。新版chrome浏览器的跨域设置（版本号49起）：

在chrome浏览器属性页面中的“目标”输入框里加上：

--disable-web-security --user-data-dir=C:\MyChromeDevUserData

2ca59e3fa2594213b543cc24c7581ac2.png

  1. 点击应用和确定后关闭属性页面，并打开 chrome 浏览器。发现有“--disable-web-security”相关的提示，说明 chrome 已经可以正常跨域工作了。745132e64b914d7e8a4d9fcc26b2b901.png

  1. 测试登录效果

未登录效果：

94983c16c3794288bbd3756209cdfa37.png

已登录效果：（用户名test，密码123456）

d5b660bab28f4a7bb35f2ad26b83c60c.png

5.记住登录状态

登录成功以后，记住登录状态

src\auth.js

var auth = {

  getAuthorization () {

    return localStorage.getItem('Authorization');

  },

  setAuthorization (Authorization) {

    localStorage.setItem('Authorization', Authorization);

  }

}

export default {

  install: function (vue) {

    vue.prototype.$auth = auth

  }

}

添加到src\main.js

Vue.config.productionTip = false

import auth from './auth.js'

Vue.use(auth)

import axios from './axios.js'

Vue.use(axios)

注意一定要在axios前面引入auth。

src\pages\user\Login.vue

// 登录成功

this.$store.commit('user/setUser', res.data.data)

this.$auth.setAuthorization(res.data.data.session_id)

this.$toast(res.data.msg)

this.$router.replace({ name: 'user' })

src\axios.js

将保存的session_id放入到下次请求的header中。

export default {

  install: function (vue) {

    var auth = vue.prototype.$auth

    var obj = axios.create({

      baseURL: config.baseURL

    })

    obj.interceptors.request.use(function (conf) {

      conf.headers.Authorization = auth.getAuthorization()

      return conf

    })

    vue.prototype.$http = obj

  }

}

在下次刷新后，获取已登录的用户信息。

将代码写在src\App.vue中。

created () {

  this.showBack = this.$route.path !== '/home'

  this.checkLogin()

},

methods: {

  goBack() {

    this.$router.go(-1)

  },

  checkLogin() {

    this.$indicator.open({

      text: '加载中'

    })

    this.$http.get('user').then(res => {

      if (res.data.code === 1) {

        this.$store.commit('user/setUser', res.data.data)

      }

      this.$indicator.close()

    })

  }

},

访问测试。

重新登录用户，观察在页面刷新后，是否能够自动进行登录。

6.用户菜单

找到已登录的代码。

src\pages\User.vue

<!-- 已登录 -->

<div v-if="isLogin">

  <div class="member">

    ……（原有代码）

  </div>

   <ul class="mui-table-view mui-table-view-chevron">

              <li class="mui-table-view-cell mui-media">

                     <div class="mui-navigate-right">

                           <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png" />

                      <div class="mui-media-body">我的订单</div>

                         

                  </div>

                   </li>

              <li class="mui-table-view-cell mui-media">

                     <div class="mui-navigate-right">

                           <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png" />

                      <div class="mui-media-body">收货地址</div>

                         

                  </div>

                   </li>

              <li class="mui-table-view-cell mui-media">

                     <div class="mui-navigate-right">

                          <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png" />

                      <div class="mui-media-body">退出登录</div>

                  </div>

              </li>

         </ul>

</div>

样式：

<style lang="scss" scoped>

.mui-table-view .mui-media,

.mui-table-view .mui-media-body {

  line-height: 42px;

}

.mui-table-view-cell:after {

  left: 0px;

}

……（原有代码）

</style>

效果：

f3b49bc87afb4b5a93082d085a10d4f4.png

7.退出登录

src\pages\User.vue

<div @click="logout" class="mui-navigate-right">

  <img class="mui-media-object mui-pull-left" src="../assets/images/avatar_default.png">

  <div class="mui-media-body">退出登录</div>

</div>

export default {

     computed: {

         ...mapState({

              username: state => state.user.username

         }),

         ...mapGetters('user', {

              isLogin: 'isLogin'

         })

     },

     methods: {

       logout () {

         this.$http.get('logout')

         this.$store.commit('user/logout')

         this.$auth.setAuthorization('')

         this.$toast('退出成功')

       }

     }

}

src\store\modules\user.js

const mutations = {

 ……（原有代码）

  logout (state) {

    state.id = 0

    state.username = ''

  }

}

服务测试，当单击“退出登录”以后，页面会变成未登录的状态：

4fa5ae8d27964274ab43f1f45cbde198.png

7.注册页面

注册路由：

src\router.js

import Register from './pages/user/Register.vue'

routes: [

  ……（原有代码）

  { path: '/user/register', component: Register, name: 'register', meta: { title: '注册' } }

],

src\pages\user\Register.vue

<template>

  <div>

    <div class="mui-content">

      <form class="mui-input-group">

        <div class="mui-input-row">

          <label>账号</label>

          <input v-model="regForm.username" type="text" class="mui-input-clear mui-input" placeholder="请输入账号">

        </div>

        <div class="mui-input-row">

          <label>密码</label>

          <input v-model="regForm.password" type="password" class="mui-input-clear mui-input" placeholder="请输入密码">

        </div>

        <div class="mui-input-row">

          <label>确认</label>

          <input type="password" ref="pwdConfirm" class="mui-input-clear mui-input" placeholder="请确认密码">

        </div>

        <div class="mui-input-row">

          <label>邮箱</label>

          <input v-model="regForm.email" type="email" class="mui-input-clear mui-input" placeholder="请输入邮箱">

        </div>

      </form>

      <div class="mui-content-padded">

        <button @click="register" class="mui-btn mui-btn-block mui-btn-primary">注册</button>

      </div>

      <div class="mui-content-padded">

        <p>注册成功后的用户可用于登录</p>

      </div>

    </div>

  </div>

</template>

数据绑定：

<script>

export default {

  data () {

    return {

      regForm: {

        username: '',

        password: '',

        email: ''

      }

    }

  },

  methods: {

    register: function () {

    }

  }

}

</script>

样式：

<style lang="scss" scoped>

.mui-input-group {

  margin-top: 10px;

  background-color: transparent;

}

.mui-input-group label {

  width: 22%;

}

.mui-input-row:last-child {

  background: #fff;

}

.mui-input-row {

  margin-top: 20px;

  background: #fff;

}

.mui-input-row label ~ input,

.mui-input-row label ~ select,

.mui-input-row label ~ textarea {

  width: 78%;

}

.link-area {

  display: block;

  margin-top: 25px;

  text-align: center;

}

.mui-content-padded {

  margin-top: 30px;

}

</style>

访问测试：

6e904f5524e0446a84d29e4d255f76ca.png

提交表单

register: function () {

  var pwdConfirm = this.$refs.pwdConfirm.value

  if (this.regForm.username === '') {

    this.$toast('账号不能为空')

    return

  } else if (this.regForm.password === '') {

    this.$toast('密码不能为空')

     return

  } else if (this.regForm.password != pwdConfirm) {

    this.$toast('密码两次输入不一致')

    return

  } else if (this.regForm.email === '') {

    this.$toast('邮箱不能为空')

    return

  }

  console.log(this.regForm)

}

控制台输出结果：

a1f48b074a324ae0aefdace0b578d874.png

8.注册接口

确保后台tpadmin项目安装部署正常，API接口可用

9.实现注册功能

提交注册表单：

src\pages\user\Register.vue

console.log(this.regForm)

this.$indicator.open({

  text: '注册中'

})

this.$http.post('register', this.regForm).then(res => {

  this.$indicator.close()

  if (res.data.code === 0) {

    this.$toast(res.data.msg)

  } else {

    this.$store.commit('user/setUser', res.data.data)

    this.$auth.setAuthorization(res.data.data.session_id)

    this.$toast(res.data.msg)

    this.$router.replace({ name: 'user' })

  }

}).catch(() => {

  this.$toast('注册失败')

})

访问测试：

输入用户名和密码，点击注册。

注册完成后：

f39e1a4c69a14aa28295ede0d5396e7a.png

焦糖码奇朵、
关注
  • 1
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
基于Vue.js微商城项目
08-18
项目采用Vue框架搭建的微商城项目，实现了登录、商品列表的展现、商品详情、商品购买的功能。
【Vue.js】vue用户登录功能
weixin_43655896的博客
02-05 6762
vue实现用户登录功能
Vue+Flask电商后台管理系统
最新发布
m0_63533079的博客
02-28 1688
使用Vue.js前端框架和python后端框架Flask，打造一个功能强大、易于使用的电商后台管理系统Vue+Flask前后端分离项目
Vue实现登录功能全套详解（含封装axios）
陈新科的博客
08-24 2万+
1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路由页面5、每次调后端接口，都要在请求头中加token。
Vue项目二 登录注册功能的实现
qq_49375885的博客
06-15 1万+
Vue项目二注册登录功能的实现
用vue实现注册页面、登录页面、主页之间跳转并保持登录状态【完整代码】
m0_67265464的博客
03-10 1万+
文章目录 前言 一、页面的简单实现 1.登录页面 2.注册页面 3.主页（显示个人信息） 二、逻辑实现 1.localStorage的使用 2.功能实现 登录 注册 主页 路由配置文件 总结 前言 本文主要讲解用vue来实现三个页面之间的跳转以及登录状态的实现，css还在努力学习中，所以界面做的很丑lol 要求： 1.三个页面，登录页面Login，注册页面Register，主页Home 2.用route路由实现不同页面逻辑跳转 3.登录状态 打开网页时，不论输入的路
vue网站后台登录注册和忘记密码切换页
07-13
注：无后台 vue网站后台登录注册和忘记密码切换页
vue_project-wm:Vue的实践项目——仿饿了么外卖
05-30
仿饿了么的vue项目 项目启动： npm install 下载模块 npm start 启动项目 下载配合该项目的后台项目vm-server util的sms_util中加入自己使用的容联云id、令牌等信息，此处因个人信息并未上传 之后步骤同1、2，启动...
vue项目实现表单登录页保存账号和密码到cookie功能
10-18
主要介绍了vue项目实现表单登录页保存账号和密码到cookie功能,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下
自学vue的第一个项目——-vue商城
01-20
拷贝到App.vue二、在中间区域放置一个router-view来展示路由匹配的组件1、轮播图区域2、六宫格区域三、新闻资讯1、改造新闻资讯的路由链接2、新闻资讯列表页面3、点击新闻资讯列表跳转到新闻详情4、新闻详情页面5、...
Vue 微商城项目（一）
weixin_49014227的博客
07-05 6344
简介 这是一系列关于如何用Vue编写微商城的项目文档一，适合初学者与已学完Vue基础的读者。教程与vue3.x、vue-cli4，vant-ui等框架，简单易懂。 涉及知识点 vue项目创建 vue基础知识 组件封装，如导航栏、商品卡片等 vuex、axios、vue-router的基本使用 flex布局 第三方框架的使用 设置标题 设置页面头部标题，方便告诉用户当前显示的是哪一个页面。编辑src\router.js文件，示例代码如下。 routes: [ { path: '/...
Vue实现登录功能详解，前期配置（整合）（处理token，vuex配置，axios配置，router配置等）
m0_61663332的博客
01-13 5228
Vue实现登录功能详解，前期配置。后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token；前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败
Vue开发实例（20）之实现登录功能
热门推荐
编程界明世隐的博客
05-29 3万+
Vue开发实例（20）之实现 Vue是现在前端最流行的框架之一，作为前端开发人员应该要熟练的掌握它，如果你是打算学习Vue的开发流程，那么来吧，明哥带你快速上手、带你飞！ 即使你并非前端开发人员，对前端的开发流程进行一定的了解也是很有必要的，谁也不确定公司以后会不会让我做前端去，做些简单的实例既不需要花费很多时间，也可以提高自己的自信和成就感，所以跟着明哥走，没有错，来吧！ 导航 ✪  Vue开发实例目录总索引 ◄ 上一篇【19】用户列表分页的实现 ► 下一篇【21】待更新 实现最简单的登录功能
Vue登陆功能详情
m0_67391401的博客
03-16 815
1、先创建修饰好页面 Login.vue： <template> <div class="login_container"> <!-- 登陆框 --> <div class="login_box"> <!-- 登陆图标 --> <div class="avatar_box"> <img src="../assets/logo.png" alt="" />
Vue --- 登陆+注册
ty0714的博客
05-05 1万+
目录 1. vue怎么引入和配置使用element-ui框架 2. Vue+ElementUI设计登陆和注册页面 3. 后台交互(axios/qs/vue-axios) 附录一：ES6的语法箭头函数： 箭头函数： this 练习 目标：vue+elementUI完成注册及登陆 1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 vue init webpack 项目名(medpro) 1.2 npm安装...
vue3项目（七）----Login
m0_61368323的博客
05-13 6668
1.表单校验主要是使用ElementPlus组件来完成。其中：1）用户名和密码：只需要通过简单的配置（看文档的方式，复杂的功能通过多个不同的组件来拆解）2）同意协议：自定义规则，validator:(rule,value,callback)=>{}3）统一校验：通过调用form实例的方法 validate->true2.登录的业务流程。使用Elmessage来提示用户是否跳转成功。使用useRouter进行路由跳转。3.统一错误提示。使用响应式拦截器。
b站黑马Vue2后台管理项目笔记——（1）登录功能
weixin_72322475的博客
01-30 2915
总结b站黑马Vue2后台管理项目（1）登录功能笔记，相关技术点
Vue创建注册页面
qq_52335038的博客
10-02 1万+
一、需求： 开发注册页面，对输入账号和昵称进行判空处理，两次密码判断是否相同，注册成功后进入到首页 二、删除一些不需要的组件 1：删除scr/views/下的About.vue和Home.vue 2.把App.vue还原成下图： <template> <div id="app"> <router-view /> </div> </template> <style lang="less"> <
vue实现登录注册
weixin_64443786的博客
08-18 1688
vue
Vue.js实现微商城项目
05-30
Vue.js是一款流行的JavaScript框架，用于构建Web应用程序和移动应用程序。下面是一些实现微商城项目的步骤。 1. 创建Vue.js项目 首先，您需要创建一个Vue.js项目。您可以使用Vue CLI来创建项目，该工具提供了一个快速的脚手架来生成Vue.js项目的基础结构。 2. 设计和开发微商城的页面 在Vue.js中，您可以使用组件来构建页面。您可以使用Vue CLI中提供的Vue组件生成器来创建组件。您可以使用HTML、CSS和JavaScript来设计和开发您的微商城页面。 3. 连接后端API 在Vue.js中，您可以使用Axios库来连接后端API。Axios是一个流行的JavaScript库，用于向服务器发送HTTP请求。您可以使用Axios来获取后端数据并将其呈现在Vue.js应用程序中。 4. 实现购物车 购物车是微商城项目中的重要组成部分。您可以使用Vuex来实现购物车。Vuex是一个Vue.js的状态管理库，用于在应用程序中管理数据。 5. 实现支付 您可以使用第三方支付服务来实现微商城的支付功能。例如，您可以使用支付宝或微信支付。 6. 测试和部署 在您完成微商城项目后，您需要对其进行测试，并将其部署到Web服务器上。您可以使用Vue CLI提供的工具来构建和部署Vue.js应用程序。 这只是Vue.js实现微商城项目的一些基本步骤。具体实现还需要根据您的实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值