Vue2+Spirngboot前后端分离项目(二)

最新推荐文章于 2024-04-02 09:45:34 发布

Everonward、

最新推荐文章于 2024-04-02 09:45:34 发布

阅读量1.6k

点赞数

文章标签： spring java vue

本文链接：https://blog.csdn.net/iwanttostudyok/article/details/124405186

版权

接下来我们直接，通过一个登录login页面来了解Vue中得router和axios

因为我的登录样式中引入elment ui 所以我先来，讲讲Vue项目中如何使用Element UI

前端代码处:wj-vue gitee

一、安装并引入 Element
Element 的官方地址为 http://element-cn.eleme.io/#/zh-CN

这一部分的内容在官方文档上都有体现，我只是照搬下来。在以后我们会经常使用 Element 提供的组件，大家要自己尝试查阅文档，这个是中文的，还是很好理解的。

1.安装 Element
根据官方文档的描述，在项目文件夹下，执行 npm i element-ui -S 即可
2.引入 Element
引入分为完整引入和按需引入两种模式，按需引入可以缩小项目的体积(后面服务如果需要线上部署，就得使用这种方式)，这里我们选择完整引入。

根据文档，我们需要修改 main.js 为如下内容，axios 必须要引入: npm install axios

另外，这样使用axios向后端发送请求时,会自动变成 localhost:8995/api/**

proxy: {
      '/api': {
        target: 'http://localhost:8995', // 注意！此处为后端提供的真实接口
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          # 如果接口中是没有api的，那就直接置空，'^/api': ''，
           # 如果接口中有api，那就得写成{'^/api':'/api'}
          '^/api': ''
        }
      }

import Vue from 'vue'
import App from './App'
import router from './router'     #引入router路由插件
import ElementUI from 'element-ui'  #完整引入Element ui
import 'element-ui/lib/theme-chalk/index.css'
#开启全局使用axios，在后面得模块中，我们如果使用axios会默认转发到http://localhost:8995/api后端端口
var axios = require('axios')
axios.defaults.baseURL = 'http://localhost:8995/api'
Vue.prototype.$axios = axios
Vue.config.productionTip = false

Vue.use(ElementUI)

/* eslint-disable no-new */
new Vue({
  el: '#app',
  render: h => h(App),
  router,
  components: { App },
  template: '<App/>'
})

3、另外我简单教一下大家如何使用element UI 优化前端样式 ,Element 的官方地址为 Element UI 官方地址
例如下图，你感觉这个样式，非常好看适合你,直接点击显示代码，复制到你的项目中去就行
在这里插入图片描述

4、首先我们开发登录页面组件，右键 src\components 文件夹，New -> Vue Component，命名为 Login，如果没有 Vue Component 这个选项，可以选择新建一个 File，命名为 Login.vue 即可。代码如下：

<template>
  <body id="paper">
  <el-form :model="loginForm" :rules="rules" class="login-container" label-position="left"
           label-width="0px" v-loading="loading">
    <h3 class="login_title">系统登录</h3>
    <el-form-item prop="username">
      <el-input type="text" v-model="loginForm.username"
                auto-complete="off" placeholder="账号"></el-input>
    </el-form-item>
    <el-form-item prop="password">
      <el-input type="password" v-model="loginForm.password"
                auto-complete="off" placeholder="密码"></el-input>
    </el-form-item>
    <el-checkbox class="login_remember" v-model="checked"
                 label-position="left"><span style="color: #505458">记住密码</span></el-checkbox>
    <el-form-item style="width: 100%">
      <el-button type="primary" style="width: 40%;background: #505458;border: none" v-on:click="login">登录</el-button>
      <router-link to="register"><el-button type="primary" style="width: 40%;background: #505458;border: none">注册</el-button></router-link>
    </el-form-item>
  </el-form>
  </body>
</template>
<script>
  export default{
    data () {
      return {
        rules: {
          username: [{required: true, message: '用户名不能为空', trigger: 'blur'}],
          password: [{required: true, message: '密码不能为空', trigger: 'blur'}]
        },
        checked: true,
        loginForm: {
          username: '',
          password: ''
        },
        loading: false
      }
    },
    methods: {
      login () {
        var _this = this
        this.$axios
          .post('/login', {
            username: this.loginForm.username,
            password: this.loginForm.password
          })
          .then(resp => {
            if (resp.data.code === 200) {
              var data = resp.data.result
              var path = _this.$route.query.redirect
              _this.$router.replace({path: path === '/' || path === undefined ? '/index' : path})
            } else {
              this.$alert(resp.data.message, '提示', {
                confirmButtonText: '确定'
              })
            }
          })
          .catch(failResponse => {})
      }
    }
  }
</script>
<style>
  #paper {
    background:url("../assets/eva.jpg") no-repeat;
    background-position: center;
    height: 100%;
    width: 100%;
    background-size: cover;
    position: fixed;
  }
  body{
    margin: 0;
  }
  .login-container {
    border-radius: 15px;
    background-clip: padding-box;
    margin: 90px auto;
    width: 350px;
    padding: 35px 35px 15px 35px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;
  }
  .login_title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }
  .login_remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
</style>

其中大致讲一下，script中得methds 中的login方法
var _this = this 我的理解是提升作用域，_this只是一个变量名,this代表父函数,如果在子函数还用this,this的指向就变成子函数了,_this就是用来存储指向的,this.axios.post 向后端发送请求,由于前面我们配置了全局aixos默认URL，所以这里我们的完整请求路径为: localhost:8995/api/login

后端代码我先简单贴一点，到后面，讲后端在详解

@CrossOrigin
    @PostMapping(value = "/login")
    @ApiOperation("登录")
    public Result<User> login(@RequestBody User userDTO) throws Exception {
        return userService.login(userDTO);
    }

在router文件夹下，创建index.js 中代码如下：

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
export default new Router({
  mode: 'history',
  routes: [
	{
      path: '/login',
      name: 'Login',
      component: () => import('../components/Login')
    },
  ]
  })

接下来我启动后端端口8995，并启动，前端项目 npm run dev展示效果如下:
登录界面:
在这里插入图片描述
登录成功向后端发送的请求:

至此前端登录模块就完成了,简介的比较快，因为前面说过，这是针对有一定vue基础写的.

Everonward、

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue2+Spirngboot前后端分离项目(二)

接下来我们直接，通过一个登录login页面来了解Vue中得router和axios因为我的登录样式中引入elment ui 所以我先来，讲讲Vue项目中如何使用Element UI前端代码处:wj-vue gitee一、安装并引入 ElementElement 的官方地址为 http://element-cn.eleme.io/#/zh-CN这一部分的内容在官方文档上都有体现，我只是照搬下来。在以后我们会经常使用 Element 提供的组件，大家要自己尝试查阅文档，这个是中文的，还是很好理解的。
复制链接

扫一扫