vue3仿美团项目(7)-个人中心及登录注册

最新推荐文章于 2024-06-19 16:06:57 发布
最新推荐文章于 2024-06-19 16:06:57 发布
阅读量1.5k 收藏 11
点赞数 2
分类专栏： vue3-project 文章标签： html 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57469571/article/details/130881440
版权

一、主要实现的功能

1.点击我的，会出现对应的页面；点击订单、地址、账号都会跳转到对应的页面；

2.账号管理页面可以退出登录，会跳转到登录界面；

3.没有账号必须进行注册，才能进行登录；

 二、我的界面实现的步骤

1.搭建界面；

2.为三个导航条设置点击事件，使其跳转到对应的页面；

3.订单、地址直接跳转到对应的页面中，之前写过(vuex中统一管理);账号管理中保存功能是将数据保存在localStorage中，退出登录之后，判断是否登录的那个属性就会删除；

三、注册功能实现步骤

1.从vant中引入，搭建页面；

2.注册时判断一下用户名是否存在，若存在则进行登录，否则为注册；

3.注册后将信息存在localStorage中；

四、登录功能实现步骤

1.从vant中引入，搭建页面；

2.使用路由导航守卫，未登录时只有首页可以展现，若要访问其他页面，则自动跳转到登录页面；

3.登录时从localStorage中获取一下数据，判断用户是否注册过；

4.判断用户名和密码是否匹配，进行登录后，进入首页页面；

五、完整代码

1.login->Login.vue（登录）

<template>
  <div class="login">
    <Header title="登录" />
    <div class="img">丑团</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="#ffc400"
        >
          登录
        </van-button>
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="#ffc400"
          class="regist"
          @click="toRegist"
        >
          注册
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import Header from "../../components/Header.vue";
import { Toast } from "vant";
import { useRouter } from "vue-router";
export default defineComponent({
  name: "App",
  components: { Header },
  setup() {
    const router = useRouter();
    const data = reactive({
      usersname: "",
      password: "",
    });
    const onSubmit = (value) => {
      if (localStorage.userInfo) {
        let userInfo = JSON.parse(localStorage.userInfo);
        if (userInfo["用户名"] == value["用户名"]) {
          if (userInfo["密码"] == value["密码"]) {
            Toast("登录成功");
            localStorage.setItem("isLogin", "1");
            router.push("/home");
          } else {
            Toast("密码错误");
          }
        } else {
          Toast("账号不存在或密码错误");
        }
      } else {
        Toast("账号未注册");
        return;
      }
    };
    const toRegist = () => {
      router.push("regist");
    };
    return {
      ...toRefs(data),
      onSubmit,
      toRegist,
    };
  },
});
</script>
<style lang="less" scoped>
.login {
  .img {
    width: 300px;
    height: 200px;
    background-color: #ffc400;
    font-size: 80px;
    line-height: 200px;
    text-align: center;
    border-radius: 20px;
    margin: 20px auto;
  }
  .regist {
    margin-top: 20px;
  }
}
</style>

 2.regist->Regist.vue（注册）

<template>
  <div class="regist">
    <Header title="注册" />
    <div class="img">丑团</div>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="username"
          name="用户名"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="密码"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
      </van-cell-group>
      <div style="margin: 16px">
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="#ffc400"
        >
          注册
        </van-button>
        <van-button
          round
          block
          type="info"
          native-type="submit"
          color="#ffc400"
          class="login"
          @click="toLogin"
        >
          已有账号去登录
        </van-button>
      </div>
    </van-form>
  </div>
</template>
<script>
import { Toast } from "vant";
import { defineComponent, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";
import Header from "../../components/Header.vue";
export default defineComponent({
  name: "App",
  components: { Header },
  setup() {
    let router = useRouter();
    const data = reactive({
      usersname: "",
      password: "",
    });
    const regist = (value) => {
      Toast("注册成功,请登录");
      localStorage.setItem("userInfo", JSON.stringify(value));
      console.log("注册保存在localStorage中的", JSON.stringify(value));
      console.log("输入的信息", value);
      setTimeout(() => {
        router.push("/login");
      }, 1000);
    };
    const onSubmit = (value) => {
      if (localStorage.userInfo) {
        let userInfo = JSON.parse(localStorage.userInfo);
        console.log("uerInfo", userInfo);
        if (userInfo["用户名"] === value["用户名"]) {
          Toast("该用户已存在");
          return;
        } else {
          regist(value);
        }
      } else {
        regist(value);
      }
    };
    const toLogin = () => {
      router.push("/login");
    };
    return {
      ...toRefs(data),
      onSubmit,
      toLogin,
    };
  },
});
</script>
<style lang="less" scoped>
.regist {
  .img {
    width: 300px;
    height: 200px;
    background-color: #ffc400;
    font-size: 80px;
    line-height: 200px;
    text-align: center;
    border-radius: 20px;
    margin: 20px auto;
  }
  .login {
    margin-top: 20px;
  }
}
</style>

3.userInfoEdit->UserInfoEdit.vue(账号管理)

<template>
  <div class="userInfo">
    <Header title="账号管理" />
    <div class="input-item">
      <van-field v-model="nickname" label="昵称" placeholder="请输入昵称" />
      <van-field
        v-model="introduceSign"
        label="个性签名"
        placeholder="请输入个性签名"
      />
      <van-field v-model="password" label="密码" placeholder="请输入密码" />

      <div style="margin: 16px">
        <van-button round block type="primary" @click="save" color="#ffc400">
          保存
        </van-button>
        <van-button
          round
          block
          type="primary"
          @click="logout"
          color="#ffc400"
          class="goout"
        >
          退出登录
        </van-button>
      </div>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";
import Header from "../../components/Header.vue";
import { useRouter } from "vue-router";
import { Toast } from "vant";
export default defineComponent({
  name: "App",
  components: { Header },
  setup() {
    let router = useRouter();
    let data = reactive({
      nickname: JSON.parse(localStorage.userInfo)["用户名"],
      password: JSON.parse(localStorage.userInfo)["密码"],
      introduceSign: "",
    });
    const save = () => {
      if (data.nickname && data.password) {
        const userInfo = JSON.parse(localStorage.userInfo);
        const newUserInfo = {
          用户名: data.nickname || userInfo["用户名"],
          密码: data.password || userInfo["密码"],
          个性签名: data.introduceSign || "",
        };
        localStorage.setItem("userInfo", JSON.stringify(newUserInfo));
        Toast("修改成功");
        router.push("/mine");
      } else {
        Toast("请输入修改的内容");
      }
    };
    const logout = () => {
      localStorage.removeItem("isLogin");
      //   localStorage.removeItem("userInfo");
      Toast("退出登录");
      setTimeout(() => {
        router.push("/login");
      }, 1000);

      //   router.push("/login");
    };
    return {
      ...toRefs(data),
      save,
      logout,
    };
  },
});
</script>
<style lang="less" scoped>
.goout {
  margin-top: 20px;
}
</style>

 4.router->index.js(路由配置)

import { createRouter, createWebHashHistory } from "vue-router"
import { Toast } from "vant"

const router = createRouter({
    history: createWebHashHistory(),
    routes: [
        {
            path: "/",
            component: () => import("../pages/myHome/MyHome.vue")
        },
        {
            path: "/home",
            component: () => import("../pages/myHome/MyHome.vue")
        },
        {
            path: "/mine",
            component: () => import("../pages/mine/Mine.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/cart",
            component: () => import("../pages/myCart/MyCart.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/order",
            component: () => import("../pages/myOrder/MyOrder.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/store",
            component: () => import("../pages/store/MyStore.vue")
        },
        {
            path: "/createOrder",
            component: () => import("../pages/createOrder/CreateOrder.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/address",
            component: () => import("../pages/address/Address.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/addressEdit",
            component: () => import("../pages/addressEdit/AddressEdit.vue"),
            meta: {
                isAuth: true
            }
        },
        {
            path: "/login",
            component: () => import("../pages/login/Login.vue")
        },
        {
            path: "/regist",
            component: () => import("../pages/regist/Regist.vue")
        },
        {
            path: "/userInfoEdit",
            component: () => import("../pages/userInfoEdit/UserInfoEdit.vue")
        }


    ]
})

router.beforeEach((to, from, next) => {
    // 如果 isAuth为真，则证明是只有用户才能访问，需要进行权限校验，
    // 否则为公共组件，游客也可以访问
    if (to.meta.isAuth) {
        if (localStorage.isLogin == "1") {
            next()
        } else {
            Toast("请登录")
            router.push("/login")
        }
    } else {
        next()
    }
})

export default router

 5.main.js

import { createApp } from 'vue'
import App from './App.vue'
import 'amfe-flexible'
import { Button, Icon, Tab, Tabs, TreeSelect, Stepper, ActionBar, ActionBarIcon, ActionBarButton, Toast, Checkbox, CheckboxGroup, SubmitBar, ContactCard, Card, Dialog, AddressList, AddressEdit,Form, Field, CellGroup } from 'vant'
import router from './router'
import "./common/css/base.less"
import store from './store'
const app = createApp(App)
app.use(router)
app.use(Button).use(Icon).use(Tab).use(Tabs).use(TreeSelect).use(Stepper).use(ActionBar).use(ActionBarIcon).use(ActionBarButton).use(Toast).use(Checkbox).use(CheckboxGroup).use(SubmitBar).use(ContactCard).use(Card).use(Dialog).use(AddressList).use(AddressEdit).use(Form).use(Field).use(CellGroup)
app.use(store)
app.mount('#app')

 六、上传git

 

一起来学计算机
关注
  • 2
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue实战开发二（个人中心实现）
`or 1 or 不正经の泡泡
11-25 1万+
文章目录前言效果预览项目结构个人页面框架总结 前言 本来是想要说一下那个如何整合那个vue的Markdown编辑器的，但是由于这个后端没有搭建起来，所以图片上传做不了，所以先不介绍，后面在介绍怎么搞，值得一提的是在vue里面使用Markdown是真的简单，后面vue的Markdown组件可以直接把Markdown文档变成html文件，后面我存到服务器然后(存路径数据库）然后给前端直接渲染就好了。不像那个Django里面，用MVT模式开发的时候，还要自己整合 edit.md 而且网上的教程垃圾的一批还是我自己
[Vue3 博物馆管理系统] 使用Vue3、Element-plus tabs组件构建选项卡功能
Java 技术专栏，从入门到精通，熟悉企业级开发
09-05 2645
本文介绍了在Vue3里，如何使用Element-plus tabs组件构建选项卡功能，如何使用axios去加载Vue项目里的JSON格式文件数据填充到 tabs组件。
【Vue3】个人中心项目实战 - 基本资料
最新发布
qq_39921135的博客
06-19 219
因为在Vue3中已经不支持直接写template这样的写法了，如果要表示下面的内容是我们的默认插槽，必须在template上加上#default。注意复制过来的代码，不要加。
Vue3使用el-form实现登录、注册功能，且进行表单验证（Element Plus中的el-form）
weixin_65793170的博客
09-11 1万+
Element Plus 中的 el-form 是一个表单组件，用于快速构建表单并进行数据校验。它提供了丰富的表单元素和验证规则，使表单开发变得更加简单和高效。可以搭配el-dialog实现当前页面的登录、注册页 ，这两天在vue3中用到了表单登录，这里来记录一下。
用vue3写登录注册功能
weixin_45980586的博客
11-29 3455
而是会在后台进行。因此，为了确保程序能够继续执行其他任务，我们需要使用异步函数来处理这些操作。通过这种方式，我们可以确保在异步操作完成后再执行后续的代码，避免了阻塞主线程的问题。首先，我们需要创建一个Vue 3项目，并安装所需的依赖。函数被声明为异步（async）的原因是为了处理。接下来，我们将编写登录和注册功能。"登录失败，请检查用户名和密码。下面是一个示例代码，展示了如何将。"注册失败，请检查输入信息。在JavaScript中，在上面的示例中，我们使用了。在函数体内，我们可以使用。
vue3项目之登录注册业务实现
m0_63907100的博客
03-02 986
登录注册业务实现
vue3使用localStorage实现登录注册
qq_50951790的博客
01-14 4903
vue3使用将新用户信息存储到localStorage存储实现登录注册
uniapp框架-mpVue高仿美团小程序-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
uniapp框架-仿美团外卖小程序-uni-app项目源码-vue语法格式.zip
05-21
UniApp基于Vue.js，采用一次编写、多端运行的设计理念，极大降低了开发成本和时间。它提供了丰富的原生组件和API封装，保证了应用的原生性能体验，为用户带来流畅的操作感受。 此外，UniApp拥有庞大的社区支持和...
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
基于VUE3仿美团的h5项目源代码，含项目部署说明
08-16
基于VUE3仿美团的h5项目源代码，含项目部署说明 项目搭建初始化配置 rem 适配 安装 yarn add postcss-pxtorem@5.1.1 amfe-flexible -S amfe-flexible amfe-flexible是配置可伸缩布局方案，主要是将1rem设为viewWidth...
一个用vuejs20写的直播类应用web端个人中心
08-12
一个用vue.js(2.0)写的直播类应用web端个人中心
Vue全家桶基础+实战高仿美团外卖App
06-21
1、从基础知识到项目实战，内容涵盖Vue各个层面的知识和技巧2、学习曲线平缓，前端新人也可以看得懂3、贴近企业项目，按照企业级代码标准和工程开发的流程进行讲解4、让你能够独立开发高颜值的项目 5、项目涉及14大...
vue3路由守卫的应用（登录注册）
qq_50951790的博客
03-29 749
1.如果没有路由守卫，在进入页面的过程当中，我们可以直接通过浏览器中的导航栏直接进入，但是这并不是我们想要的，于是我们需要路由守卫来限制它通过浏览器搜索栏直接访问。
vue 3 项目实战二（实现登录、注册）
热门推荐
qq_41045128的博客
07-08 1万+
1、完成登录、注册的功能2、实现表单的验证 主要是实现过程及一些问题记录。1、安装 axios 用于向服务器发送接受请求。 npm i axios 2、启动api服务（没有，就用node简单搭一个）3、对接口进行测试，看是否可用，用postman或者浏览器插件都可以4、接口测试没问题后，进行sign_in组件 axios部分的编写和测试，先写死数据看能不能成功 对表单数据用 v-mode进行双向绑定。进行小改动就可以。 到这，简单的登录就差不多搞定了。现在一
【Vue3项目】登录注册--双Token机制
aDiaoYa_的博客
08-12 1964
最近同项目的伙伴告诉我们一个“新词汇”——双Token登录机制，emmmmm，确实没了解过，据说是在实现token长期有效的同时，防止token被第三方盗用，提高用户信息的安全性。于是，在了解了大概之后，我找了很多篇文章去学习双Token的实现过程，总结如下。一般我们实现用户登录是：用户登录向服务端发送账号密码信息，登录失败返回客户端重新填写并发送用户信息；登录成功服务端生成token并返回token给客户端，客户端将token存本地。那么问题来了，token的有效期应该是多久呢？
首页登录和注册
weixin_42127687的博客
05-13 2484
首页 前端显示首页 首页组件代码 Home.vue <template> <div id="home"> <Header/> <Banner/> <Footer/> </div> </template> ​ <script> import Header from...
我的头条（vue项目实战）--个人中心页
Zwq8023520的博客
08-27 4681
项目实战 vue axios 文件上传
vue3的登录注册页面
weixin_65201086的博客
05-28 2533
vue3登录注册页面
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值