Vue前端页面开发

weixia-blog 2021-08-15 原文

环境搭建

利用@vue/cli4创建工程,为兼容element-ui选用vue2.x版本
```
vue create vue-demo
```

添加element-ui框架

cd vue-demo
vue add element

上述命令会安装element-ui插件，不用在入口main.js文件配置如下内容：

import ElementUI from \'element-ui
import \'element-ui/lib/theme-chalk/index.css\'

Vue.use(ElementUI)

安装axios库

npm install axios -S

在入口main.js文件配置axios：

var axios = require(\'axios\')
// 设置请求的基本链接，如果需要跨域不能直接设置为服务器接口api
//axios.defaults.baseURL = \'/api\'
// 全局注册axios，之后在组件中通过this.$axios发送请求
Vue.prototype.$axios = axios

创建登录页面

修改App.vue根组件
```
<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>
```
同路由相匹配的子组件将在<router-view>标签渲染

创建Login.vue组件

<template>
    <body class = "login_bg">
        <div class = "login_container">
            <el-form ref="LoginForm" :model="LoginForm" label-width="80px">
                 <h2 class = "login_title">登录</h2>
                 <el-form-item label="用户名">
                    <el-input v-model="LoginForm.username"></el-input>
                 </el-form-item>
                 <el-form-item label="密码">
                    <el-input v-model="LoginForm.password"></el-input>
                 </el-form-item>
                 <el-form-item>
                    <el-button type="primary" @click = "login">登录</el-button>
                    <el-button @click = "goToRegist">注册</el-button>
                 </el-form-item>
            </el-form>
        </div>
    </body>    
</template>

<script>
    export default {
        name: \'Login\',
        data() { 
            return {
                LoginForm: {
                    username: \'\',
                    password: \'\'
                }
            }
        },
        methods: {
            // 登录
            login(){
                this.$axios.post(\'/api/login\', 
                `username=${this.LoginForm.username}&password=${this.LoginForm.password}`).then(successResponse => {
                    // 后端发送过来的是 Result 类型数据，判断 Result.code 即可
                    if(successResponse.data.code === 200){
                        // 触发 store 中的 login() 方法，将 LoginForm.username 字段传递给 store 中的 username
                        this.$store.commit(\'login\', this.LoginForm)
                        var path = this.$route.query.redirect
                        this.$router.replace({path: path === \'/\' || path === undefined ? \'/index\' : path})
                    } else {
                        this.$alert(successResponse.data.message, \'