新增页面

# 新建页面的操作思路

# 创建组件并配置路由

# 1、创建 `src/views/login/index.vue`

<template>
  <div class="login-container">登录页面</div>
</template>

<script>
  export default {
    name: 'LoginIndex',
    components: {},
    props: {},
    data() {
      return {}
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {}
  }
</script>

<style scoped lang="less"></style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

自定义代码段：百度一下。

Sublime: Sublime 自定义代码段

Visual Studio Code：Visual Studio Code 代码段

# 2、将登陆页面组件配置到路由中

import Vue from 'vue'
import VueRouter from 'vue-router'
+ import Login from '@/views/login'

Vue.use(VueRouter)

// 路由配置表
const routes = [
+  {
+    path: '/login',
+    name: 'login',
+    component: Login
+  }
]

const router = new VueRouter({
  routes
})

export default router

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 3、最后手动输入 `/login` 访问测试。

# 页面布局

略

# 封装请求模块

对于项目中的请求操作：

接口请求可能需要重用
实际工作中，接口非常容易变动，改起来麻烦

我们建议的做法是把所有的请求都封装成函数然后统一的组织到模块中进行管理，这样做的好处就是：管理维护更方便，也好重用。

下面是我们优化封装请求的具体操作。

找到数据接口
封装请求方法
在组件中初始调用获取数据
把数据绑定到模板中

# 1、创建 `src/api/user.js`，封装登录请求方法

/**
 * 用户相关请求模块
 */
import request from '@/utils/request'

// 用户登录
export const login = (data) => {
  return request({
    method: 'POST',
    url: '/mp/v1_0/authorizations',
    // data 用来设置 POST 请求体
    // Body 参数使用 data 设置
    // Query 参数使用 params 设置
    // Headers 参数使用 headers 设置
    data
  })
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

# 2、在登录组件中加载使用

import { login } from '@/api/user'

# 3、最后测试登录功能是否正常

#Vue

Last Updated: 2021/07/03, 20:49:24

← Router 组件→