springboot3和vue2的学习3

vue2的学习

index.js内容

import Vue from 'vue'
import VueRouter from 'vue-router'
import HomeView from '../views/HomeView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView
  },
  {
    path: '/element',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')

  },
  {path: '/Login',name: 'Login',component: () => import(/* webpackChunkName: "about" */ '../views/Login.vue')},
  {path: '/Register',name: 'Register',component: () => import(/* webpackChunkName: "about" */ '../views/Register.vue')}
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

request.js

import axios from 'axios'
//创建一个新的axios对象
const request = axios.create({
    baseURL:'http://localhost:9090',
    timeout:30000//三十秒内返回
})
//request拦截器
//可以自请求发送前对请求做一些处理
//比如统一加token,对请求参数统一加密
request.interceptors.request.use(config =>{
    config.headers['Content-Type'] = 'application/json;charset=utf-8';
    //let user localstorage.getItem("user")?JSON.parse(localstorage.getItem("user"))
    // config.headers['token'] = 'token';//设置请求头

    return config
}, error => {
    console.error('request error:'+ error)
return Promise.reject(error)
});

//response拦截器
//可以在接口响应后统一处理结果
request.interceptors.response.use(
    response =>{
    let res = response.data;

    //兼容服务端返回的字符串数据
    if (typeof res ==='string'){
        res = res ? JSON.parse(res) : res
    }
    return res;
},
    error => {
        console.error('response error:' + error)
        return Promise.reject(error)
    }
)
export default request;

登录页面

<template>
  <div style="height:100vh;display:flex;align-items:center;justify-content:center;background-color: #ffffff">
    <div style ="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow:hidden">
      <div style="flex: 1">
        <img src="@/assets/img.png" alt="" style="width: 100%">
      </div>
      <div style = "flex:1; display: flex; align-items: center; justify-content: center;">
        <el-form :model="user" style= "width: 80%" :rules="rules" ref="loginRef">
          <div style="font-size: 20px;font-weight: bold; text-align:center">欢迎登录管理系统</div>
          <el-form-item prop="userName" >
            <el-input prefix-icon ="el-icon-user" size ="medium" placeholder="请输入账号:" v-model = user.userName></el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input prefix-icon ="el-icon-lock" size ="medium" show-password placeholder="请输入密码:" v-model = user.password></el-input>
          </el-form-item>
<!--          <el-form-item size ="medium" prop="validCode" >-->
<!--            <div style="display: flex">-->
<!--            <el-input style ="flex: 1"></el-input>-->
<!--            <div style ="flex: 1">-->
<!--              1232-->
<!--            </div>-->
<!--            </div>-->
<!--          </el-form-item>-->
          <el-form-item size ="medium" prop="code" >
            <el-button type = "primary" style="width: 100%" @click="Login">登 录</el-button>
          </el-form-item>
          <div style="display: flex; align-items: center; justify-content: center;">
            <div style="flex: 1">无账号？请<span style="color: #42b983; cursor: pointer" @click = "$router.push('/Register')">注册</span></div>
            <div style="flex: 1; text-align: right"><span style="color: #42b983; cursor: pointer">忘记密码</span></div>
          </div>
        </el-form>
    </div>
  </div>

  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "Login.vue",
  data() {
    return {
      code: '',
      user: {
        userName: "",
        password: ""
      },
      rules:{
        userName:[
          {required: true,message:"请输入账号",trigger:"blur"}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"}
        ]

      }
    }
  },
  created() {

  },
  methods: {
    getCode(code) {
      console.log(code);
      this.code = code;
    },

    Login() {
      this.$refs['loginRef'].validate(valid => {
        if (valid) {
          axios.post('http://localhost:9090/login', this.user, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            console.log(res.data);//后台返回的数据
            this.users = res.data.data;

            if(res.data.code === '200') {
              this.$router.push('/');
              this.$message.success('登录成功');
              localStorage.setItem('honey-user', JSON.stringify(res.data));//存储用户数据
            }else{
              this.$message.error(res.data.msg);
            }

          })
        }
      })
    }
  }
}
</script>



<style scoped>

</style>

注册界面展示

<template>
  <div style="height:100vh;display:flex;align-items:center;justify-content:center;background-color: #9ad4ef">
    <div style ="display: flex; background-color: white; width: 50%; border-radius: 5px; overflow:hidden">
      <div style="flex: 1">
        <img src="@/assets/register.png" alt="" style="width: 100%">
      </div>
      <div style = "flex:1; display: flex; align-items: center; justify-content: center;">
        <el-form :model="user" style= "width: 80%" :rules="rules" ref="registerRef">
          <div style="font-size: 20px;font-weight: bold; text-align:center">欢迎注册管理系统</div>
          <el-form-item prop="userName" >
            <el-input prefix-icon ="el-icon-user" size ="medium" placeholder="请输入账号:" v-model = user.userName></el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input prefix-icon ="el-icon-lock" size ="medium" show-password placeholder="请输入密码:" v-model = user.password></el-input>
          </el-form-item>
          <el-form-item prop="password" >
            <el-input prefix-icon ="el-icon-lock" size ="medium" show-password placeholder="请确认密码:" v-model = user.confirmPassword></el-input>
          </el-form-item>
<!--          <el-form-item size ="medium" prop="validCode" >-->
<!--            <div style="display: flex">-->
<!--            <el-input style ="flex: 1"></el-input>-->
<!--            <div style ="flex: 1">-->
<!--              1232-->
<!--            </div>-->
<!--            </div>-->
<!--          </el-form-item>-->
          <el-form-item size ="medium" prop="code" >
            <el-button type = "primary" style="width: 100%" @click="Register">注 册</el-button>
          </el-form-item>
          <div style="display: flex; align-items: center; justify-content: center;">
            <div style="flex: 1">有账号？请<span style="color: #9ad4ef; cursor: pointer" @click ="$router.push('/Login')">登录</span></div>
            <div style="flex: 1; text-align: right"><span style="color: #9ad4ef; cursor: pointer" >忘记密码</span></div>
          </div>
        </el-form>
    </div>
  </div>

  </div>
</template>
<script>
import axios from "axios";

export default {
  name: "Register.vue",
  data() {
    //验证码校验
    const validatePassword = (rule, confirmPassword, callback) => {
      if (confirmPassword === '') {
        callback(new Error('请输入确认密码'))
      } else if (confirmPassword !== this.user.password) {
        callback(new Error('两次输入密码不一致'))
      } else{
        callback()
      }
    }
    return {

      user: {
        userName: "",
        password: "",
        confirmPassword: ""
      },
      rules:{
        userName:[
          {required: true,message:"请输入账号",trigger:"blur"}
        ],
        password:[
          {required:true,message:"请输入密码",trigger:"blur"}
        ],
        confirmPassword:[
          {required:true,message:"请确认密码",trigger:"blur"}
        ]

      }
    }
  },
  created() {

  },
  methods: {


    Register() {
      this.$refs['registerRef'].validate(valid => {
        if (valid) {
          axios.post('http://localhost:9090/register', this.user, {
            headers: {
              'Content-Type': 'application/json'
            }
          }).then(res => {
            console.log(res.data);//后台返回的数据
            this.users = res.data.data;

            if(res.data.code === '200') {
              this.$router.push('/login');
              this.$message.success('注册成功');
            }else{
              this.$message.error(res.data.msg);
            }

          })
        }
      })
    }
  }
}
</script>



<style scoped>

</style>

登录进入的主页面展示

<template>
  <div>
    <el-container>
<!--侧边栏-->
    <el-aside style ="width:200px; min-height:100vh; background-color: #001529">
      <div style="height:60px;  color:white; display:flex; align-items:center; justify-content:center">
        logo
      </div>

      <el-menu router background-color ="#001529" text-color="rgba(255,255,255,0.65)" active-text-color = "#fff" style = "border: none" :default-active= $route.path>
<!--        $route.path是当前浏览器访问的路由-->
        <el-menu-item index="/">

          <template slot="title">
          <i class="el-icon-house"></i>
          <span>系统首页</span>
          </template>

        </el-menu-item>

        <el-menu-item index = "/element">用户信息</el-menu-item>
        <el-menu-item>用户信息</el-menu-item>
        <el-menu-item>用户信息</el-menu-item>

        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-menu"></i>
            <i class="ei-icon-menu"></i>/
            <span>信息管理</span>
          </template>

          <el-menu-item>用户信息</el-menu-item>
        </el-submenu>

      </el-menu>

    </el-aside>

      <el-container>

        <el-header style="display: flex; align-items: center; justify-content: space-between;">
          <i class="collapseIcon" style="font-size:26px" @click="handleCollapse"></i>
          <el-breadcrumb separator-class="el-icon-arrow-right" style="margin-left:20px">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
<!--            <el-breadcrumb-item :to="{ path: '/user' }">用户管理</el-breadcrumb-item>-->
          </el-breadcrumb>


          <div style="display: flex; align-items: center;">
            <el-dropdown>
              <img src="@/assets/logo.png" alt="" style="width:40px;height:40px; margin-right: 10px;">
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>修改密码</el-dropdown-item>
                <el-dropdown-item @click.native="$router.push('/login')">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </el-header>


        <el-main>

        <div style ="display:flex">
          <el-card style ="width:100%;">
            <div slot = "header" class="clearfix">
              <span>显示全部数据</span>
            </div>
            <div>
              <el-table :data="users">
                <el-table-column label="ID" prop="id"></el-table-column>
                <el-table-column label="用户名" prop="userName"></el-table-column>
                <el-table-column label="姓名" prop="name"></el-table-column>
                <el-table-column label="地址" prop="address"></el-table-column>
              </el-table>
            </div>
          </el-card>
        </div>
      </el-main>
    </el-container>
    </el-container>
  </div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
import axios from "axios";
import request from "@/utils/request";
//@表示src目录

export default {
  name: 'HomeView',
  data(){
    return {
      isCollapse: true,
      asideWidth: '200px',
      collapseIcon: 'el-icon-s-fold',
      users:[]
    }
  },
  methods: {
    handleCollapse(){
      this.isCollapse = !this.isCollapse;
      this.asideWidth = this.isCollapse ? '64px':'200px'
    }
  },
  mounted(){
    // axios.get('http://localhost:9090/user/selectAll').then(res=>{
    //   console.log(res.data)//后台返回的数据
    //   this.users = res.data.data;
    //   res.data = {
    //     code:'200',
    //     msg: '请求成功',
    //     data: {
    //
    //     }
    //   }
    // })
    request.get('/user/getAll').then(res=>{
      this.users = res.data;
    })
  },
  components: {
    HelloWorld
  }
}
</script>


以上是对vue2的学习，包括对Element组件的学习，能够实现更好的页面布局和展示。

posted @   haoyinuo  阅读(4)  评论(0)  编辑  收藏  举报
相关博文：
· springboot3和vue2的学习
· springboot3+vue3项目实例练习1
· springboot+vue/elementUi 项目，搭建，使用
· 2024/03/23（2024春季）
· Vue2电商实战项目(一)
阅读排行：
· 终于写完轮子一部分：tcp代理 了，记录一下
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
点击右上角即可分享
微信分享提示