网站的初步搭建（二）2021-07-02

MadChiang

于 2021-07-04 10:46:57 发布

阅读量126

点赞数

CC 4.0 BY-SA版权

文章标签： javascript css vue.js

本文链接：https://blog.youkuaiyun.com/MadChiang/article/details/118459441

本文详细介绍了如何使用Vue3进行项目搭建，包括安装配置Vue全家桶，并重点讲解了注册登录功能的实现，以及前端拦截机制的设计。通过实例演示了登录拦截代码，确保用户必须先登录才能访问特定路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

工具的准备

Vue的安装和配置
略，附一篇相应的博客
vue3 安装和配置vue全家桶

网站搭建

本次实现的功能
1.注册功能
2.登录登出功能

##功能1
此功能的分享留待与后端服务器连接时书写
##功能2

此处登录页面做了简单的前端拦截，比如用户如果想跳过登录，通过地址栏输入 /index 进入主页会被拦截并重定向到登录页面，实现的JavaScript代码如下

      login () {
        var _this = this
        console.log(this.$store.state)
        this.$axios
          .post('/login', {
            userName: this.loginForm.userName,
            password: this.loginForm.password
          })
          .then(successResponse => {
            if (successResponse.data.code === 200) {
               var data = this.loginForm
              _this.$store.commit('login', data)
              var path = this.$route.query.redirect
              this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})
            }
          })
          .catch(failResponse => {
          })
      }