vue路由router动态创建项目

最新推荐文章于 2024-05-09 12:15:21 发布

前端进阶中

最新推荐文章于 2024-05-09 12:15:21 发布

阅读量417

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/shi15926lei/article/details/127253592

版权

1.第一步:拿到后端给的数据,先进行测试,看数据是否能拿到,是有开发需求文档,按文档进行操作即可;接口 http://119.23.246.178:80/stu/stu_list

2.第二步:数据测试没问题之后,开始创建项目,配置基础文件

前提是你的node.js以及vue脚手架都安装完成

cnpm/npm i @vue/cli@4.5.13 -g

3.第三步:vue create 项目名称(不要有中文)

4.初始化:里面所有文件全部删掉,根据自己的需求进行配置,不要的全部删掉

5.App.vue修改如下,主要是配置出口

<template>
  <div id="app">
    <!-- 一定要给一个出口 显示一级路由页面 -->
    <router-view></router-view>
  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="less" scoped>
#app{
  height: 100%;
}
</style>

6.导入自己需要的相关静态文件(css,images,fonts等) 在main.js中全局配置

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import "./assets/css/base.css";
// 导入css样式
import "./assets/css/bootstrap.css";
// 引入axios
import Axios from "axios";
// 第二步 配置根路径
Axios.defaults.baseURL = "http://127.0.0.1:3000";

Vue.config.productionTip = false;
// 挂载到vue中的原型对象中,我们使用 $axios我们自己起的名字
Vue.prototype.$axios = Axios
new Vue({
  router,
  render: (h) => h(App),
}).$mount("#app");

7.可以在App.vue中测试项目是否搭建完成

<button class="btn btn-danger">我是按钮</button>

8.此时需要根据需要配置views文件夹

9.router/index.js代码这个项目是二级路由配置二级路由

import Vue from "vue";
import VueRouter from "vue-router";
// 配置一个二级路由的页面 显示二级路由
import student from "../views/Student.vue";
import teacher from "../views/Teacher.vue";

Vue.use(VueRouter);

const routes = [
  // 重定向 页面一进来就加载
  { path: "/", redirect: "/student" },
  // 学生管理路由 一级路由必须加 /
  {
    path: "/student",
    name: "student",
    // 每一级路由都需要一个出口
    component: student,
    children: [
      //  二级路由前面不要添加 /
      // 二级路由也需要重定向
      { path: "/", redirect: "list" },
      // 学生列表
      { path: "list", component: () => import("../views/student/List.vue") },
      // 添加
      { path: "add", component: () => import("../views/student/Add.vue") },
      // 修改
      { path: "upd", component: () => import("../views/student/Upd.vue") },
      // 删除需不需要页面 一般不需要页面
      // { path: "del", component: () => import("../views/List.vue") },
    ],
  },
  {
    path: "/teacher",
    name: "teacher",
    component: teacher,
    children: [
      { path: "/", redirect: "list" },
      //  二级路由前面不要添加 /
      // 学生列表
      { path: "list", component: () => import("../views/teacher/List.vue") },
      // 添加
      { path: "add", component: () => import("../views/teacher/Add.vue") },
      // 修改
      { path: "upd", component: () => import("../views/teacher/Upd.vue") },
      // 删除需不需要页面 一般不需要页面
      // { path: "del", component: () => import("../views/List.vue") },
    ],
  },
];

const router = new VueRouter({
  routes,
  // 改路由被选中的class类名 这个是默认的,我们可以改,router-link-active
  linkActiveClass: "active",
});

export default router;

10.注意:路由被选中的时候会自动的加一个class

class = "router-link-active"

可以更改,改完之后就可以在样式下面写.active

const router = new VueRouter({
  // 改 路由被选中的class名称
  // 值为修改的名称
  linkActiveClass: "active",
  routes
})

11.所有样式写完之后,此时需要发异步请求,请求数据,渲染页面

vue中用的是axios

首先下载axios: npm i axios

// 第一步 引入axios
import Axios from "axios";
// 第二步 配置根路径
Axios.defaults.baseURL = "http://127.0.0.1:3000";
// 挂载到vue中的原型对象中,我们使用 $axios我们自己起的名字
Vue.prototype.$axios = Axios

12.发异步请求:

<script>
export default {
    data() {
        return {
            list: [],
        }
    },
    // 发异步请求
    created() {
        // 请求完调用这个
        this.getList()
    },
    methods: {
        // 定义一个方法
        async getList() {
            let res = await this.$axios({
                // 请求方式
                methods: "get",
                // 请求路径
                url: "/stu/stu_list"
            })
            this.list = res.data.data
        }
    },
}
</script>

13.请求数据和删除数据完整代码:

<template>
    <div>
        <div class="">
            <table class="table table-striped table-hover">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>姓名</th>
                        <th>性别</th>
                        <th>地址</th>
                        <th>年龄</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="item in list" :key="item.sid">
                        <td>{{item.sid}}</td>
                        <td>{{item.sname}}</td>
                        <td>{{item.sex}}</td>
                        <td>{{item.address}}</td>
                        <td>{{item.age}}</td>
                        <td>
                            <router-link to="/student/upd">修改</router-link>
                            &nbsp;
                            &nbsp;
                            &nbsp;&nbsp;
                            <a href="#" @click="del(item.sid)">删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>

    </div>
</template>

<script>

// 生命周期 页面加载就要现实数据
export default {
    data() {
        return {
            list: [],
        }
    },
    // 创建后发异步请求数据
    // axios 是基于promise开发的  async   await 语法糖
    created() {
        this.getList()
    },
    methods: {
        // 定义一个方法
        async getList() {
            let res = await this.$axios({
                methods: "get",
                url: "/stu/stu_list",
                //parmas get传参
                // data post传参
            });
            // 拿到list数据 把数据存到数组里面
            this.list = res.data.data
            // console.log(this.list);
        },
        // 删除数据
        async del(id) {
            let res = await this.$axios({
                methods: "get",
                url: `/stu/deltodb?sid=${id}`,
                //parmas get传参
                // data post传参
            });
            if (res.data.code == 200) {
                alert('删除成功')
                this.getList()
            } else {

                return alert('删除失败')
            }
        }
    },
}
</script>

<style lang="less" scoped>
.container {
    height: 500px;
    overflow: auto;
}
</style>

14.配置编程式路由

1).在列表页面配置数据前面是query传参

      // 配置编程式路由
        toUpd(sid) {
            this.$router.push({
                // 跳转到修改的页面
                path: "/student/upd",
                // 要把sid传过去
                query: { sid }
            })
        },

2).修改列表方法中配置获取数据后面也是query接收

// 发异步请求
    async created() {
        console.log(this.$router);
        let res = await this.$axios({
            method: "get",
            url: "/stu/findOneBySid",
            params: {
                sid: this.$route.query.sid,
            }

        })

修改页面完整代码

<template>
    <div>
        <div class="container">
            <h1>修改学生信息</h1>
            <hr>
            <form class="form-horizontal" role="form">
                <div class="form-group">
                    <label for="aa" class="col-sm-2 control-label">姓名</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id="aa" placeholder="请输入姓名" v-model="obj.sname" />
                    </div>
                </div>
                <div class="form-group">
                    <label for class="col-sm-2 control-label">性别</label>
                    <div class="col-sm-10">
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadios3" v-model="obj.sex"
                                value="m" /> 男
                        </label>
                        &nbsp;&nbsp;&nbsp;&nbsp;
                        <label class="radio-inline">
                            <input type="radio" name="optionsRadiosinline" id="optionsRadios4" v-model="obj.sex"
                                value="f" /> 女
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label for class="col-sm-2 control-label">年龄</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id placeholder="请输入年龄" v-model="obj.age" />
                    </div>
                </div>
                <div class="form-group">
                    <label for class="col-sm-2 control-label">地址</label>
                    <div class="col-sm-10">
                        <input type="text" class="form-control" id placeholder="请输入地址" v-model="obj.address" />
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-sm-offset-2 col-sm-12" style="text-align:right;">
                        <button type="button" class="btn btn-warning">取消</button>
                        &nbsp;&nbsp;
                        <!-- 因为submit 有一个默认的提交  -->
                        <button type="button" class="btn btn-primary" @click="toUpd">修改</button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
export default {
    filters: {
        chuliSex: function(str) {
            return str== "f" ? "女" : "男";
        }
    },
    data() {
        return {
            obj: {}
        }
    },
    // 发异步请求
    async created() {
        console.log(this.$router);
        let res = await this.$axios({
            method: "get",
            url: "/stu/findOneBySid",
            params: {
                sid: this.$route.query.sid,
            }

        })
        console.log(res.data.data);
        // 返回一个对象
        this.obj = res.data.data[0]
    },
    methods: {
        async toUpd() {
            const res = await this.$axios({
                method: "post",
                url: "/stu/updatetodb",
                data: this.obj
                
            })
            console.log(res);
            // 修改成功需要跳转到首页
            if (res.data.code == 200) {
                this.$router.push({
                    path:"/student/list"
                })
                alert("修改成功")
            } else {
                alert("修改失败")
            }
        }
    },
}
</script>

<style lang="less" scoped>

</style>

15.配置路由守卫

1).首先在登录成功时拿到token值

2).在index.js路由配置

// 导航守卫 next要调用一次 不然页面不能相互跳转
// 方法2 定一个数组
// const pathArr = ["/student/list", "/tea/list", "/student/upd"]
// if(pathArr.indexOf(to.path) !== -1 ){ }
router.beforeEach(function (to, from, next) {
  const token = localStorage.getItem("token");
  if (to.path == "/login") {
    if (token) {
      next("/student/list");
    } else {
      next();
    }
  } else {
    if (token) {
      next();
    } else {
      next("/login");
    }
  }
});

16.最后可以把2个学生加老师页面整合为一个Layout页面