前端VUE2

最新推荐文章于 2025-04-11 19:52:21 发布

〃しáι卜jＩ理智ぐ220

最新推荐文章于 2025-04-11 19:52:21 发布

阅读量935

点赞数 21

文章标签：前端

本文链接：https://blog.youkuaiyun.com/weixin_62944431/article/details/144790982

版权

12.vue路由配置

前端路由：说白了就是通过不同的url，来访问不同的页面这就是前端路由的概念。

Src下创建pages/home.vue 和 pages/news.vue

1.介绍路由

2.安装vue router@3.5.2

【安装指定版本路由】cnpm install --save vue-router@3

2版本的vue项目，安装3版本的路由！

3.配置路由进行地址栏访问页面

【注意：main.js 内容不同是因为vue项目版本不同】

4.配置多个路由：

5.配置路由进行导航栏访问页面

6.演示生命周期7，8阶段 9分钟

home.vue组件里：

7.二级路由

例子：点击news组件里的二级路由，访问科技新闻和体育新闻

8.优化路由操作：

创建文件router/index.js 然后将main.js中所有关于路由的操作都剪切下来放到index.js 里。

13.vue网络请求

使用vuejs前端项目，访问后端服务使用axios库，Axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中。

1.前期准备 X不用

2.安装Axios

使用命令：npm install axios --save

然后启动运行项目：npm run serve

3.使用

【get请求方式，不友好，有乱码】

【post请求方式，防止乱码】

【简化axios的引用】（暂略）

1.不再各自组件里引入axios，而是在main.js文件里整体引入axios

2.分别在各自组件里使用属性$axios:

14.vue跨域处理

后端项目是tomcat服务器,端口是8080,

前端基于的是node服务器，端口是默认不占用情况下是8080 .

怎么样跨端口,跨服务器去访问数据? 需要使用跨域

1.访问百度音乐例子

2.运行结果：跨域错误

3.解决问题

在项目的跟目录下，创建一个环境配置文件 vue.config.js，

如果有此文件，修改里面的内容如下：

4.修改功能，跳转页面同时带值

15.vue访问SpringBoot项目

例子：

【功能一】组件渲染结束阶段，发送get无参请求，访问后端获得部门表的全部数据。

【功能二】用户输入部门编号，点击查询按钮，触发点击事件，发送get带参请求。

【SpringBoot后端】

【controller里】

//查询全部数据，无参
@RequestMapping(value = "/getvueinfo", produces = "application/json;charset=utf-8")
@ResponseBody
public List<Dept>  getvueinfo(){
    List<Dept> list=deptService.findvueinfo();
    System.out.println("vue本次获得的数据"+list.size()+"条");
    return  list;
}

//根据部门编号查询部门信息
@RequestMapping(value = "/getvueinfo", produces = "application/json;charset=utf-8")
@ResponseBody
public List<Dept>  getvueinfo(Integer deptno){
    List<Dept> list=deptService.findvuebyid(deptno);
    System.out.println("vue本次获得的数据"+list.size()+"条");
    return  list;
}

【vue前端】

【用于数据展示，数据查询的组件bootvue.vue】

template>
    <div>
            <p>bootvuevue放松get请求获得后端SpringBoot项目数据</p>
            <input type="text" v-model="deptno"/>
            <button @click="getdepts">点击查询部门编号</button>
            <ul v-for="(element,index) in depts" :key="index">
                <li>{{ element.deptno }}</li>
                <li>{{ element.dname }}</li>
                <li>{{ element.loc }}</li>
            </ul>
    </div>
</template>
<script>
import axios from 'axios'
import qs from "qs"
export default {
    name:"bootvue",
    data(){
        return{
            depts:null,  //获得后端服务器返回的数据，默认值null
            deptno:''
        }
    },
    methods:{
        //创建方法，用于向后端发送请求
        getinfo:function(){
            var that=this;
            //axios.get("/api/getvueinfo")
           // axios.get("/api/getvueinfo?deptno=10")
           /* axios.get("/api/getvueinfo",{
                params:{
                    deptno:10
                }
            })*/
            axios.post("/api/getvueinfo",qs.stringify({
                deptno:10
            }))
            .then(function(res){
               that.depts=res.data; //将后端数据 赋值给前端变量depts
            })
            .catch(function(error){
                console.log(error);
            })
        },
        getdepts(){
            var val=this.deptno;
            var ovj=this;
            alert(val);
            axios.post("/api/getvueinfo",qs.stringify({
                deptno:val
            }))
            .then(function(res){
                ovj.depts=res.data; //将后端数据 赋值给前端变量depts
            })
            .catch(function(error){
                console.log(error);
            })
        }
    },
    mounted(){
        //组件数据渲染后，调用getinfo
        this.getinfo();
    }
}
</script>

【项目跟目录下，创建vue.config.js配置文件】

module.exports = { 
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        ws: true,
        pathRewrite: {
          '^/api': '/'
        },
        changeOrigin: true
      }
    }
  }
}

【router/index.js】

mport Vue from 'vue'

//3. 引入映射路由的组件
import show from '../pages/show.vue'
import info from '../pages/info.vue'
import life from '../components/life.vue'
import keji from '../pages/vues/keji.vue'
import caijing from '../pages/vues/caijing.vue'
import myaxios from '../components/myaxios.vue'
import boot from "../components/boot.vue"
import bootvue from "../components/bootvue.vue"

//1.引入vue-router管理器对象
import VueRouter from 'vue-router'
//2.配置路由映射
const router=new VueRouter({
  mode:"history",
  routes:[
    {
      path:"/",
      component:myaxios,
      children:[
          {
              path:"keji",
              component:keji
          },
          {
              path:"caijing",
              component:caijing
          }
      ]
    },
    {
      path:"/info",
      component:life
    },
    {
      path:"/boot",
      component:boot
    },
    {
      path:"/bootvue",
      component:bootvue
    }
  ]
})
//5.设置Vue对象使用VueRouter
Vue.use(VueRouter)
export default router

【APP.vue】

<template>
<div>
<router-view></router-view>
  </div>
</template>

16.使用饿了么UI组件：

介绍饿了么的ui组件库。

3.0官网https://element-plus.gitee.io/zh-CN/

2.0官网Element

https://element.eleme.cn/

目前我们用的 vue-cli 3.X版本；vue 2.X版本。

1.创建一个项目

创建一个新的vue项目或者用原有的项目也可以

2.安装组件库

使用命令：npm i element-ui -S

3.启动项目

使用命令：npm run serve

4.编写main.js文件：

5.编写代码：

【首页shouye.vue 路由：/】

<template>
    <div class="mainContainer">
            <div class="logindiv">
                <h1>欢迎登录</h1>
                <div>
                    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                        <el-form-item label="用户名 iwen@qq.com" prop="uname">
                            <el-input v-model="ruleForm.uname"></el-input>
                        </el-form-item>
                        <el-form-item label="密码  iwen123" prop="upwd">
                            <el-input v-model="ruleForm.upwd"></el-input>
                        </el-form-item>
                        <el-form-item label="验证码 crfvw" prop="yzpwd">
                            <el-input v-model="ruleForm.yzpwd"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="submitForm('ruleForm')">立即登录</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
    </div>
</template>

<script>
export default {
    name:"shouye",
    data() {
      return {
        ruleForm: {
          uname: '',
          upwd: '',
          yzpwd: ''
        },
        rules: {
          uname: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          upwd: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          yzpwd: [
            { required: true, message: '请输入验证码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]
        }
      };
    },
    methods: {
      submitForm(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            //alert(this.ruleForm.uname+";"+this.ruleForm.upwd+";"+this.ruleForm.yzpwd);
            this.$router.push({path:"/showdate"});
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    }
}
</script>
<style>
.mainContainer{
    height: 700px;
    width: 1400px;
    background: url("../assets/bgimg.jpg")  repeat-x ;
}
.logindiv{
    height: 400px;
    width: 400px;
    box-shadow: 0 2px 4px red, 0 0 6px rgba(0, 0, 0, .04);
    background-color: aliceblue;
    position: absolute;
    top:100px ;
    left: 500px;
    padding: 50px;
}
</style>

【数据展示组件 showdate.vue 路由：/showdate】

<template>
    <div>
        <!-- 页面布局开始-->
        <el-container>
            <!-- 页面左侧-->
            <el-aside width="200px">
                <!-- 导航栏 侧栏-->
                <el-row class="tac">
                    <el-col :span="12">
                  
                    <el-menu
                    default-active="2"
                    class="el-menu-vertical-demo"
                    @open="handleOpen"
                    @close="handleClose">
                    <el-submenu index="1">
                        <template slot="title">
                        <i class="el-icon-location"></i>
                        <span>学生管理</span>
                        </template>          
                            <el-submenu index="1-1">
                                <template slot="title"><router-link to="/showdate/login">学生档案管理</router-link></template>
                        </el-submenu>
                    </el-submenu>
                    <el-menu-item index="2">
                        <i class="el-icon-menu"></i>
                        <span slot="title"><router-link to="/showdate/a">班级管理</router-link></span>
                    </el-menu-item>
               
                    <el-menu-item index="3">
                        <i class="el-icon-setting"></i>
                        <span slot="title"><router-link to="/showdate/showinfo">项目管理</router-link></span>
                    </el-menu-item>
                    </el-menu>
                    </el-col>
                </el-row>     
            </el-aside>
            <el-container>
                 <!-- 页面顶部-->
                <el-header>
                    <div>
                        <i class="el-icon-refresh-right"></i>
                        <el-dropdown>
                            <span class="el-dropdown-link">
                                下拉菜单<i class="el-icon-arrow-down el-icon--right"></i>
                            </span>
                            <el-dropdown-menu slot="dropdown">
                                <el-dropdown-item>个人中心</el-dropdown-item>
                                <el-dropdown-item>修改密码</el-dropdown-item>
                                <el-popconfirm
                                   title="这是一段内容确定删除吗？">
                                     <el-button slot="reference">退出登录</el-button> 
                                    <el-dropdown-item divided>退出登录</el-dropdown-item>
                                </el-popconfirm>   

                            <!--    <el-dropdown-item divided>退出登录</el-dropdown-item>-->
                            </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-header>
                <!-- 页面主要部分-->
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>  
         <!-- 页面布局开始-->
    </div>
</template>
<script>
export default {
    
}
</script>
<style>
  .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    text-align: center;
    line-height: 60px;
  }
  .el-aside {
    background-color: #D3DCE6;
    color: #333;
    text-align: center;
    line-height: 230px;
  }
  .el-main {
    background-color: #E9EEF3;
    color: #333;
    text-align: center;
    line-height: 160px;
  }
</style>

【数据分页展示组件 showinfo.vue 路由：”/showdate/showinfo”】

17时间修改功能，时间类型转换：

<template>
    <div class="block">
      <span class="demonstration">默认</span>
      <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期">
      </el-date-picker><br/>
      {{ str2 }}<br/>
      {{ str3 }}
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        value1: '2023-10-11',
        str2:new Date(),
        str3:new Date().toLocaleDateString(),
      };
    }
  };
</script>