FLASK+VUE–前后端分离(一)- Flask基础讲解之路由、视图函数及代码实现
FLASK+VUE–前后端分离(二)- VUE基础安装及项目的简易介绍
FLASK+VUE–前后端分离(三)- VUE+Element-UI搭建登陆页面且能够正常登陆
FLASK+VUE–前后端分离(四)- VUE+Element-UI简单搭建主页布局
FLASK+VUE–前后端分离(五)- VUE测试/线上/开发环境地址配置+拦截器+全局导航守卫+基础配置+获取设置cookie等系列

一、简单介绍所用到的基本库及安装配置

(一)、在VUE项目内引用Element-UI及配置

Element-UI简介:Element,一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的组件库,提供了配套设计资源,帮助你的网站快速成型。

Element-UI官网https://element.eleme.cn/#/zh-CN/component/installation

1、在Vscode安装Element-UI的依赖包

在Vscode内输入:npm i element-ui -S

2、根据官方文档提示:快速上手—>引入 Element

Element教程在这里插入图片描述
实际项目
(1)Vue.use(ElementUI)是什么意思,是将ElementUI注入到Vue根实例中。
(2)根据上面讲述,大家可能会问到什么是实例:在 面向对象程序设计中,“类”在实例化之后叫做一个“实例”。 “类”是静态的,不占进程内存,而“实例”拥有动态内存。在这里插入图片描述

(二)、在VUE项目内引用Vue-Router

Vue Router简介: Vue Router 是 Vue.js (opens new window)官方的路由管理器。它和 Vue.js 的核心深度集成,让构建单、多页面应用变得易如反掌。

Router官网https://router.vuejs.org/zh/installation.html
1、在Vscode安装Router的依赖包

在Vscode内输入:npm install vue-router

2、根据官方文档提示:引用vue-router

vue-router教程
在这里插入图片描述
实际项目
Vue.use(VueRouter)是将VueRouter注入到Vue根实例中。
在这里插入图片描述

(三)、在VUE项目内引用Axios、qa.js及配置

Axios简介: Axios是一个基于promise 的 HTTP 库,可以用在浏览器和 node.js中。

安装Axios

npm install vue-axios --save(如果空白的化用这个安装一遍:npm install --save axios)

安装qs.js:qs.js的作用是能把json格式的直接转成data所需的格式(先安装后面会用到)

npm install qs.js --save

配置:在main.js中添加

import axios from 'axios'

Vue.prototype.$axios = axios    //全局注册,使用方法为:this.$axios
Vue.prototype.qs = qs   //全局注册,使用方法为:this.qs

(1)Vue.prototype:个人理解类似于全局赋值,我们可能会在很多组件里用到数据/实用方法,但是不想污染全局的作用域,那么我们可能会与原方法进行区分,比如我们在原方法前面加上$符号。这样调用的时候就用this.$axios
(2)this. 是指向Vue的实例,如this.$axios(大白话:指向某个方法)
在这里插入图片描述

(四)、删除掉App.vue内多余的代码,方便后续编写

删除掉App.vue内多余的代码,可能有人要问,为什么删掉,因为其他代码对我们项目来说没用。

这里在div内添加一句<router-view></router-view>的tag标签,大家又要问为什么。
这里不是路由指向哈,而是 App.vue 中渲染了 router-view 配置的的组件。

详解:比如我们会在后面的router内写入login.vue的配置组件,在写入一个home.vue的配置组件,此时在App.vue内添加<router-view></router-view>是因为需要对路由内的组件进行渲染。比如目前调用了login组件,那么此时App.vue里面就会渲染login页面,如果此时进入了home组件那么就会渲染对应的home页面。

因为App.vue是我们的主组件,页面入口文件 ,所有页面都是在App.vue下进行切换的。
也是整个项目的关键,App.vue负责构建定义及页面组件归集。

如果上面说的还同不懂,那么大白话就是,不加</router-view>,显示不出来其他路径的页面。

App.vue文件

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

在这里插入图片描述

目前就引用这几个就够了。下面来在实际场景中运用一下。

二、.vue编写结构简易介绍

来简单搭建一下目录层级,方便后续扩展及编写

在src下面创建view文件,里面咱们就存放VUE的项目(大神随意创建)

view—>创建home文件—>创建Home.vue(我们在这里存放主页相关代码)(大神随意创建)

view—>创建login文件—>创建Login.vue(我们在这里存放登陆相关代码)(大神随意创建)
在这里插入图片描述
.vue文件内结构介绍:

<template>
  <!-- Vue 展示内容 -->
</template>

<script>
  // Vue 代码逻辑
export default {
  
}
</script>

<style>
  /* css 样式 */

</style>

在这里插入图片描述

三、实战单页面项目

(一)、路由配置
(1)这里我们先配置Login.vue的路由,这样可以让我们后面输入网址可以正常跳转到login页面。

1、在view文件内创建router文件,在该文件下面创建Router.js文件
2、编辑Router.js文件

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 关键字: let 和 const。
// let 声明的变量只在 let 命令所在的代码块内有效。
// const 声明一个只读的常量,一旦声明,常量的值就不能改变。
// new的作用是通过构造函数来创建一个实例对象。

// 创建router 对路由进行管理,它是由构造函数 new vueRouter() 创建,接受routes 参数
const router = new VueRouter({
  routes: [
    {
      path: '/login',  // 路径
      // component是指组件  import引用login.vue地址
      component: ()=>import('../web/login/Login.vue')
    },
  ]
})

// 导出router这个方法函数,便于其他模块引用
export default router

项目代码
在这里插入图片描述

(2)main.js文件配置router

1、引用Router.js声明为router
2、将router放在Vue组件容器,进行全局生效

项目代码
在这里插入图片描述
这个时候我们login的路由就配置好了。我们先看下能不能正常跳转哈。

在项目终端输入npm run serve 运行测试环境:

npm run serve

在浏览器输入网址 : http://localhost:8080/#/login ,就可以运行了

/#/是生成了路由的标志,后面跟地址 login

(二)、编写login.vue,进行页面简单布局
打开login.vue,打开Element-UI组件官网,接下来我们就开始操作了。

(1)找到Form表单–表单验证我们开始编写输入框。找到对应代码,进行复制粘贴。没错!这就是传说中的【Ctrl+C】与【Ctrl+V】在这里插入图片描述
怎么复制我就不说了,直接看下面代码。

<template>
  <div>
    <div>
      <el-form :model="loginRuleForm" :rules="loginRules" ref="loginRuleForm" label-width="100px" class="demo-ruleForm">
        
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginRuleForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="loginRuleForm.password"></el-input>
        </el-form-item>

      </el-form>
    </div>
  </div>
</template>

<script>
  // Vue 代码逻辑
  export default {
    data() {
      return {
        // 表单请求数据
        loginRuleForm: {
          username: '',
          password: '',
        },
        // 表单验证规则
        loginRules: {
          username: [
            {
              required: true, message: "请输入用户名", trigger: "blur"
            },
            {
              min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur",
            },
          ],
          password: [
            {
              required: true, message: "请输入密码", trigger: "blur"
            },
            {
              min: 3, max: 18, message: "长度在 3 到 18 个字符", trigger: "blur",
            }
          ]
        }
      };
    }
  }
</script>

实现的场景页面如下(刚开始学习不要在乎好不好看,你先实现功能在说
在这里插入图片描述

(2)输入框有了,现在编写提交按钮。
在Element-UI组件官网找到Button按钮
在这里插入图片描述
添加代码如下

<el-button type="primary" @click="login">登陆</el-button>
<el-button type="info" @click="register">注册</el-button>

项目代码

<template>
  <div>
    <div>
      <el-form :model="loginRuleForm" :rules="loginRules" ref="loginRules" label-width="100px" class="demo-ruleForm">

        <el-form-item label="账号" prop="username">
          <el-input v-model="loginRuleForm.username"></el-input>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="loginRuleForm.password"></el-input>
        </el-form-item>

        <el-button type="primary" @click="login">登陆</el-button>

      </el-form>
    </div>
  </div>
</template>

<script>
  // Vue 代码逻辑
  export default {
    data() {
    // 不使用return包裹的数据会在项目的全局可见,会造成变量污染,使用return包裹后数据中变量只在当前组件中生效,不会影响其他组件。
      return {
        // 表单请求数据
        loginRuleForm: {
          username: '',
          password: '',
        },
        // 表单验证规则
        loginRules: {
          username: [{
              required: true,
              message: "请输入用户名",
              trigger: "blur"
            },
            {
              min: 3,
              max: 18,
              message: "长度在 3 到 18 个字符",
              trigger: "blur",
            },
          ],
          password: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 3,
              max: 18,
              message: "长度在 3 到 18 个字符",
              trigger: "blur",
            }
          ]
        }
      };
    },
    // 使用 methods 属性给 Vue 定义方法
    methods: {
      login() {
        // 登陆进行规则的校验,只有校验成功才能登陆,vaild=>所有的规则校验都成立才会进入到这里
        this.$refs.loginRules.validate((vaild) => {
            if (!vaild) return;
            // 请求数据,格式是formdata,需要添加 this.qs.stringify()进行格式转换
            this.$axios.post("http://192.168.17.176:8089/login", this.qs.stringify(this.loginRuleForm)).then((res) => {
              console.log(res)
			  // &&逻辑与,都为True, ||逻辑或,其中一个为True, !逻辑非,反转一个表达式的“真相”。它使一个表达式从 true 变成了 false,或者从 false 变成了 true
              if (res.data.code != 0 && res.data.code != 401) {
                return this.$message.error(res.data.msg);
              }


              // 跳转到主页
              this.$router.push("/home");
              this.$message.success("HI! " + this.loginRuleForm.username + " 欢迎来到客诉查询平台!");    

            })
          })
        }
      }
  }
</script>

在这里插入图片描述

我们进行操作一下登陆功能。
在这里插入图片描述

我们到这里就实现了,简单的前后端分离的基础用法。

四、该篇博客内的重点语法分解

1、介绍一下传递参数的格式
(1)、payload格式
直接请求数据,格式是payload,如果服务端要求是payload格式那么这样请求

// this.$axios.post 是post请求
// http://192.168.17.176:8089/login 是服务端地址
// this.loginRuleForm 是传递的参数
// .then((res) => {  }) 返回结果是res
// console.log(res) 在网页上打印服务端返回的数据
this.$axios.post("http://192.168.17.176:8089/login",this.loginRuleForm).then((res) => {
     console.log(res)
})

(2)、formdata格式
请求数据,格式是formdata,需要添加 this.qs.stringify(参数传递)进行格式转换

this.$axios.post("http://192.168.17.176:8089/login",this.qs.stringify(this.loginRuleForm)).then((res) => {
    console.log(res)
})

2、跳转到对应页面(home主页)

this.$router.push("/home")

3、成功提示

this.$message.success("HI! " + this.loginRuleForm.username + " 欢迎来到我的页面!");

4、校验VUE表单规则后才进行下列操作


this.$refs.loginRules.validate((vaild) => {
	// 登陆进行规则的校验,只有校验成功才能登陆,vaild=>所有的规则校验都成立才会进入到这里
    if (!vaild) return;
    	console.log(res)
    }

在学习的过程中大多数都是自学搜索,学习很枯燥,但是坚持下来,你就会学到很多。后续的学习,可就需要大家自行扩展啦。

(1)css样式小技巧,先不管边边框框,先学习高度以及位置移动,牢记下方几点,分分钟钟把组件挪到自己想要的位置(css样式是灵活运用的,并不是一成不变的固定)如下:

VUE–简易的css样式合集:https://blog.csdn.net/zhouzongxin94/article/details/121776331

(2)额外代码小分享:
针对上方讲的登陆页面,进行渲染:
源码:

App.vue新增代码
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>

export default {
  name: 'App',
}
</script>

<style>
html, body, #app {
  height: 100%;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #000102;
}

</style>

在这里插入图片描述

Login.vue代码替换
<template>
  <div class="login">
    <div class="login_title">
      <h2>登陆页面</h2>
      <div class="login_context">

        <!-- 这里放图片logo -->
        <div class="login_logo">
          <img src="../../../assets/logo.png" alt="" />
          
        </div>

        <el-form :model="loginRuleForm" :rules="loginRules" ref="loginRules" class="login_box">

          <el-form-item label="账号" prop="username">
            <el-input v-model="loginRuleForm.username"></el-input>
          </el-form-item>

          <el-form-item label="密码" prop="password">
            <el-input v-model="loginRuleForm.password"></el-input>
          </el-form-item>

          <el-form-item class="btns">
            <el-button type="primary" @click="login">登陆</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
  // Vue 代码逻辑
  export default {
    data() {
      return {
        // 表单请求数据
        loginRuleForm: {
          username: '',
          password: '',
        },
        // 表单验证规则
        loginRules: {
          username: [{
              required: true,
              message: "请输入用户名",
              trigger: "blur"
            },
            {
              min: 3,
              max: 18,
              message: "长度在 3 到 18 个字符",
              trigger: "blur",
            },
          ],
          password: [{
              required: true,
              message: "请输入密码",
              trigger: "blur"
            },
            {
              min: 3,
              max: 18,
              message: "长度在 3 到 18 个字符",
              trigger: "blur",
            }
          ]
        }
      };
    },
    methods: {
      login() {
        // 登陆进行规则的校验,只有校验成功才能登陆
        // vaild=>所有的规则校验都成立才会进入到这里
        this.$refs.loginRules.validate((vaild) => {
          if (!vaild) return;
          // 直接请求数据,格式是payload,如果服务端要求是payload格式那么这样请求
          // this.$axios.post("http://192.168.17.176:8089/login", this.loginRuleForm).then((res) => {
          //   console.log(res)
          // })

          // 请求数据,格式是formdata,需要添加 this.qs.stringify()进行格式转换
          this.$axios.post("http://192.168.17.176:8089/login", this.qs.stringify(this.loginRuleForm)).then((
            res) => {
            console.log(res)

            if (res.data.code != 0 && res.data.code != 401) {
              return this.$message.error(res.data.msg);
            }


            // 跳转到主页
            this.$router.push("/home");
            this.$message.success("HI! " + this.loginRuleForm.username + " 欢迎来到客诉查询平台!");

          })
        })
      }
    }
  }
</script>

<style scoped>

  .login {
    /* 高度 */
    height: 100%;
    /* 背景色 */
    background: rgb(242, 244, 247);
    
  }

  .login_title {
    /* 字体水平左右居中 */
    text-align:center;
  }

  .login_context {
    /* 宽度 */
    width: 450px;
    /* 高度 */
    height: 300px;
    /* 背景色 */
    background: #fff;
    /* 属性定位 */
    position: absolute;
    /* 属性定位,顶部占比 */
    top: 50%;
    /* 属性定位,左侧占比 */
    left: 50%;
    /* 水平垂直居中 */
    transform: translate(-50%, -50%);
    /* 四个角的圆角角度 */
    border-radius: 20px;
    /* 阴影 */
    box-shadow: 0 0 5px 2px #ddd;
  }

  .login_logo {
    /* 宽度 */
    width: 150px;
    /* 高度 */
    height: 150px;
    /* 属性定位 */
    position: absolute;
    /* 属性定位,顶部占比 */
    top: -75px;
    /* 属性定位,左侧占比 */
    left: 49%;
    /* logo左侧边距 */
    margin-left: -75px;
    /* 带有边框属性 */
    border: 1px solid #eee;
    /* 四个角的圆角角度 */
    border-radius: 50%;
    /* 背景色 */
    background: #fff;
    /* 设置内边距属性 */
    padding: 10px;
    /* 阴影 */
    box-shadow: 0 0 2px 2px #ddd;
  }

  .login_logo img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgb(238, 238, 238);
  }

  .login_box {
    width: 100%;
    position: absolute;
    bottom: 0;
    padding: 0 50px;
    /* 边框边距 */
    box-sizing: border-box;
  }

  .btns {
    /* 将对象作为弹性伸缩盒显示 */
    display: flex;
    /* 横轴方向上的对齐方式 */
    justify-content: flex-end;
  }
</style>

这个时候登陆页面刷新后呈现出的结果
在这里插入图片描述

GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:3 个月前 )
c345bb45 7 个月前
a07f3a59 * Update transition.md * Update table.md * Update transition.md * Update table.md * Update transition.md * Update table.md * Update table.md * Update transition.md * Update popover.md 7 个月前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐