Vue前端项目开发页面（二）

前端界面开发

开发工具版本

• @vue/cli 4.5.13

新建Login.vue登陆页

1、在 vue-exemples 项目，选中components目录右键 —》New —》Vue Component，名称为 Login 。

Login.vue 文件代码如下：

<template>
    <div>
        <div style="color:red">{{ ress }}</div>
        用户名:<input type="text" v-model="userForm.username" placeholder="请输入用户名"/>
        <br><br>
        密码： <input type="password" v-model="userForm.password" placeholder="请输入密码"/>
        <br><br>
        <button v-on:click="login">登录</button>
    </div>
</template>

<script>

    export default {
        name: 'Login',
        data () {
            return {
                userForm: {
                    username: '',
                    password: ''
                },
                ress:'',
                responseResult: []
            }
        },
        methods: {
            login () {
                this.$axios
                    .post('/login', {
                        username: this.userForm.username,
                        password: this.userForm.password
                    })
                    .then(successResponse => {
                        if (successResponse.data.code === 200) {
                            this.$router.replace({path: '/index'})
                        }else{
                            this.ress="登录名或登录密码不正确"
                        }

                    })
                    /*.catch(failResponse => {
                    })*/
            }
        }
    }
</script>

新建 AppIndex.vue 首页

components目录下 ，新建一个home 目录，home 目录下新建 AppIndex.vue 组件。

<template>
    <div>
        Hello World!
    </div>
</template>
<script>
    export default {
        name: "AppIndex"
    }
</script>
<style scoped>
</style>

前端相关配置

设置反向代理

修改 src\main.js 代码如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'

// 设置反向代理，前端请求默认发送到 http://localhost:8082/api
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8082/api'
// 全局注册，之后可在其他组件中通过 this.$axios 发送数据
Vue.prototype.$axios = axios
Vue.config.productionTip = false

new Vue({
	// 挂载里路由到根实例
  router,
  render: h => h(App),
}).$mount('#app')

使用了新的模块 axios，需要执行 npm install --save axios，以安装这个模块。

配置页面路由

安装 vue-router 模块，执行如下：

# IDEA CDM
$ npm install --save vue-router

添加 src\router\index.js 文件，代码如下：

import Vue from 'vue'
import Router from 'vue-router'
// 导入的组件
import AppIndex from '@/components/home/AppIndex'
import Login from '@/components/Login'

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: '/login',
            name: 'Login',
            component: Login
        },
        {
            path: '/index',
            name: 'AppIndex',
            component: AppIndex
        }
    ]
})

App.vue 添加 <router-view></router-view> ，代码如下：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <!-- 路由匹配到的组件将显示在这里 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {
  }
}
</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>

测试项目

浏览器访问：localhost:8080/#/login